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 toggleTab(data, tab) {
  if (data.activeTab === tab) {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
    setTimeout(() => {
      data.isOpen = false;
      data.activeTab = "";
    }, 500);
  } else {
    data.activeTab = tab;
    data.isOpen = true;
    scrollToElem(".active-tab");
  }
}

function scrollToElem(selector) {
  document.querySelector(".active-tab").scrollTop = 0;
  setTimeout(() => {
    const yOffset = -7 * verticalUnit;
    const elem = document.querySelector(selector);
    const top = elem.getBoundingClientRect().top;
    window.scrollTo({
      top: top + window.scrollY + yOffset,
      behavior: "smooth",
    });
  }, 100);
}

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);
}

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) {
  document.querySelector(`.panel--${side}`).classList.toggle("open");
  const isOpen = document
    .querySelector(`.panel--${side}`)
    .classList.contains("open");

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

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

document.addEventListener("DOMContentLoaded", () => {
  window.window.scrollTo({
    top: 0,
  });

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

  setWindowHeightFactor();

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