yuri-bbl.js

"use strict";

document.addEventListener("DOMContentLoaded", function () {
  var mainEl = document.getElementById("main");

  //add page unique class to #main
  mainEl.classList.add("page-" + location.href.split(/\/|\#|\?\&/)[3].replace("-copy", ""));

  if (mainEl.classList.contains("page-architecture")) setTimeout(tagcloud, 100);

  triggerResize();
});

function tagcloud() {
  var mainEl = document.getElementById("main");
  var cloud = document.createElement("div");
  cloud.classList.add("tagcloud");
  mainEl.querySelector("h1").closest("div").appendChild(cloud);

  var cards = Array.from(document.querySelectorAll(".image-card"), function (el) {
    var ps = el.querySelectorAll(".image-subtitle p");
    if (ps[1]) {
      ps[1].style.fontSize = "0.4em";
      ps[1].style.color = "rgba(255,255,255,0.4)";
    }
    return {
      el: el.closest(".sqs-block-image"),
      tags: (el.querySelector(".image-subtitle").innerText.match(/\#[a-z]+/g) || []).map(function (x) {
        return x.replace("#", "");
      })
    };
  });
  var tags = cards.reduce(function (acc, card) {
    card.tags.forEach(function (tg) {
      var i = acc.map(function (x) {
        return 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.forEach(function (tg) {
    var tagEl = document.createElement("div");
    tagEl.classList.add("tagcloud-tag");
    tagEl.innerText = tg.tag;
    cloud.appendChild(tagEl);
    tagEl.addEventListener("click", function (e) {
      cards.forEach(function (c) {
        return c.el.style.display = "none";
      });
      tg.cards.forEach(function (el) {
        return el.style.display = "block";
      });
      triggerResize();
    });
  });
}

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