actuel-inactuel/assets/js/script.js

const verticalUnit = getUnit("--unit--vertical");

function getUnit(id) {
  const remFactor = 16;
  const rawUnit =
    getComputedStyle(document.documentElement).getPropertyValue(id) || "1.7rem";
  const remUnit = parseFloat(rawUnit);
  const pxUnit = remUnit * remFactor;
  return pxUnit;
}

function throttle(callback, limit) {
  let waiting = false;
  return function () {
    if (!waiting) {
      callback.apply(this, arguments);
      waiting = true;
      setTimeout(function () {
        waiting = false;
      }, limit);
    }
  };
}

function setWindowHeightFactor() {
  const windowHeight = window.innerHeight;
  const min = 650;
  const delta = windowHeight - min;
  const factor = roundToNearestHalf(delta / 300) + 1;

  document
    .querySelector(":root")
    .style.setProperty("--window-height-factor", factor);
}

function roundToNearestHalf(num) {
  const round = Math.round(num * 2) / 2;
  return Math.max(round, 0);
}

function enableToggleEntriesVisibility() {
  const entries = document.querySelector("#entry-btns");

  const leftBtn = entries.querySelector(".entry-btn--left");
  const rightBtn = entries.querySelector(".entry-btn--right");
  const leftBtnWidth = leftBtn.offsetWidth;
  const rightBtnWidth = rightBtn.offsetWidth;

  leftBtn.style = `--width: ${leftBtnWidth}px`;
  rightBtn.style = `--width: ${rightBtnWidth}px`;

  const toggleVisibility = (items) => {
    items.forEach((item) => {
      const isIntersecting = item.isIntersecting;
      if (isIntersecting) {
        entries.classList.remove("minimized");
      } else {
        entries.classList.add("minimized");
      }
    });
  };

  const top = verticalUnit * 8;

  const observer = new IntersectionObserver(toggleVisibility, {
    root: null,
    rootMargin: `-${top}px 0px 0px 0px`,
    threshold: 0,
  });

  observer.observe(entries);
  leftBtn.classList.add("transition");
  rightBtn.classList.add("transition");
}

function toggleLogoState() {
  const scrollY = window.scrollY || window.pageYOffset;

  if (scrollY > 10) {
    document.querySelector("#main-header").classList.add("minimized");
  } else {
    document.querySelector("#main-header").classList.remove("minimized");
  }
}

function togglePanel(side, event) {
  document.querySelector(`.panel--${side}`).classList.toggle("open");
  const isOpen = document
    .querySelector(`.panel--${side}`)
    .classList.contains("open");

  const scrollY = window.scrollY || window.pageYOffset;

  if (isOpen) {
    if (window.innerWidth < 640) {
      document.querySelector("html").style.overflowY = "hidden";
      document.querySelector("#main-header").classList.remove("minimized");
    }
  } else {
    if (window.innerWidth < 640) {
      document.querySelector("html").style.overflowY = "";
      if (scrollY > 10) {
        document.querySelector("#main-header").classList.add("minimized");
      }
    }
  }
  event.stopPropagation();
}

function closePanels() {
  document.querySelectorAll(".panel").forEach((panel) => {
    panel.classList.remove("open");
  });
}

function fixFootNotes() {
  const footnotes = document.querySelectorAll('a[href^="#sdfootnote"]');

  footnotes.forEach((footnote) => {
    const href = footnote.href;
    footnote.classList.add("footnote");
    if (href.includes("sym")) {
      footnote.id = footnote.hash.replace("sym", "anc").replace("#", "");
    }
    if (href.includes("anc")) {
      footnote.id = footnote.hash.replace("anc", "sym").replace("#", "");
    }
  });
}

function removeAccents(str) {
  const from = "áäâàãåčçćďéěëèêẽĕȇíìîïňñóöòôõøðřŕšťúůüùûýÿžþÞĐđßÆa·/_,:;";
  const to = "aaaaaacccdeeeeeeeeiiiinnooooooorrstuuuuuyyzbBDdBAa------";
  for (let i = 0, l = from.length; i < l; i++) {
    str = str.replace(new RegExp(from.charAt(i), "g"), to.charAt(i));
  }
  return str;
}

function slugify(str) {
  return removeAccents(str.toLowerCase());
}

function showSubscribeField(event) {
  event.preventDefault();
  const button = event.target;
  const li = button.parentNode;
  const form = li.querySelector("#subscribe-form");
  const input = form.querySelector("input");

  form.classList.remove("hidden");
  button.classList.add("hidden");
  input.focus();
}

function subscribe(event) {
  event.preventDefault();
  const email = document.querySelector("#subscribe-form input");

  if (email.value.toLowerCase().match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
    const header = {
      method: "POST",
      body: email.value,
    };

    fetch("/subscribe.json");
  } else {
    email.value = "E-mail invalide. Recommencez.";
  }
}

document.addEventListener("DOMContentLoaded", () => {
  ragadjust("h1, h2, h3, h4, h5", ["all"]);
  window.window.scrollTo({
    top: 0,
  });

  window.addEventListener("scroll", () => {
    toggleLogoState();
  });

  setWindowHeightFactor();
  window.addEventListener("resize", () => {
    setWindowHeightFactor();
  });

  fixFootNotes();

  // Wait for fonts applied
  setTimeout(() => {
    enableToggleEntriesVisibility();
  }, 100);

  window.addEventListener("click", () => {
    closePanels();
  });
  window.addEventListener("keyup", (event) => {
    if (event.key === "Escape") {
      closePanels();
    }
  });
  document.querySelectorAll(".panel").forEach((panel) => {
    panel.addEventListener("click", (event) => {
      event.stopPropagation();
    });
  });

  const navSortBtns = document.querySelectorAll("nav .sort-btn");
  const navSections = document.querySelectorAll(
    ".panel__all-texts, .panel__collection"
  );

  navSortBtns.forEach((sortBtn) => {
    sortBtn.addEventListener("click", () => {
      navSortBtns.forEach((btn) => btn.classList.remove("active"));
      sortBtn.classList.add("active");

      const sections = {
        "sort-btn--all": ".panel__all-texts",
        "sort-btn--years": ".panel__collection--years",
        "sort-btn--categories": ".panel__collection--categories",
      };

      navSections.forEach((navSection) => navSection.classList.add("hidden"));

      Object.keys(sections).forEach((key) => {
        if (sortBtn.classList.contains(key)) {
          document.querySelector(sections[key]).classList.remove("hidden");
        }
      });
    });
  });

  const panelNav = document.querySelector(".panel");

  const openNavBtn = document.querySelector("button.open-nav");
  openNavBtn.addEventListener("click", () => {
    panelNav.classList.add("panel--visible");
  });

  const closeNavBtn = document.querySelector(".panel-close");
  closeNavBtn.addEventListener("click", () => {
    panelNav.classList.remove("panel--visible");
  });
});