yuri-ambientdesign.js

function qs (x) { return document.querySelector(x); }

document.addEventListener("DOMContentLoaded", ()=>{
  var mainEl = document.getElementById("main");
  
  //add page unique class to #main
  var slug = location.href.split(/\/|\#|\?\&/)[3];
  mainEl.classList.add("page-" + (slug || "ambientdesigns").replace("-copy", ""));
  
  if (mainEl.classList.contains("page-architecture"))
    setTimeout(()=> tagcloud(collect_cards_gallery()), 100);
  if (mainEl.classList.contains("page-yrworkscp"))
    setTimeout(()=> tagcloud(collect_cards_summary()), 100);
    
  triggerResize();
});

window.addEventListener("orientationchange", triggerResize);

window.addEventListener("resize", e=> {
  if (qs("#main").classList.contains("page-top"))
    setTimeout(topPage, 200);
});

function collect_cards_gallery () {
  return Array.from(document.querySelectorAll(".image-card"), el=>{
    var ps = el.querySelectorAll(".image-subtitle p");
    if (ps[1]) ps[1].classList.add("tagcloud-hashtag");
    return {
      el: el.closest(".sqs-block-image"),
      tags: (el.querySelector(".image-subtitle").innerText.match(/\#[a-z]+/g) || []).map(x=>x.replace("#",""))
    }});
}

function collect_cards_summary () {
  return Array.from(document.querySelectorAll(".summary-metadata-item--tags"), el=>{
    return {
      el: el.closest(".summary-item"),
      tags: Array.from(el.querySelectorAll("a"), x=>x.innerText)
    };
  });
}

function tagcloud (cards) {
  var mainEl = document.getElementById("main");
  var cloud = document.createElement("div");
  cloud.classList.add("tagcloud");
  mainEl.querySelector("h1").closest("div").appendChild(cloud);
  
  var tags = cards.reduce((acc, card)=> {
    card.tags.forEach(tg=>{
      var i = acc.map(x=>x.tag).indexOf(tg)
      if (i < 0) {
        acc.push({tag: tg, cards: []});
        i = acc.length - 1;
      }
      acc[i].cards.push(card.el);
    });
    return acc;
  }, []);
  tags.push({tag: "×", cards: cards.map(c=>c.el)});
  tags.forEach(tg => {
    var tagEl = document.createElement("div");
    tagEl.classList.add("tagcloud-tag");
    tagEl.innerText = tg.tag;
    cloud.appendChild(tagEl);
    tagEl.addEventListener("click", e => {
      cards.forEach(c=>c.el.style.display="none");
      tg.cards.forEach(el=>el.style.display="block");
      Array.from(cloud.querySelectorAll(".tagcloud-tag"), el => el.classList.remove("active"));
      tagEl.classList.add("active");
      setTimeout(triggerResize,100);
    });
  });
}

function triggerResize() {
  var evt = document.createEvent("HTMLEvents"); 
  evt.initEvent("resize", true, true); 
  window.dispatchEvent(evt);
}


function topPage () {
  var bodyR = document.body.getBoundingClientRect();
  Array.from(document.querySelectorAll(".sqs-block-gallery img.thumb-image"), el=>{
    el.style.width = "auto";
    el.style.minWidth = "100%";
    el.style.minHeight = bodyR.height + "px";
    el.style.top = "0";
  });
  qs(".sqs-gallery-design-stacked").style.height = bodyR.height + "px";
}