sabisan/web/static/app.js

(function () {
  const updateHeader = () => {
    const header = document.querySelector("[data-site-header]");
    if (!header) return;
    const compact = window.scrollY > 24;
    header.classList.toggle("is-compact", compact);
  };
  updateHeader();
  window.addEventListener("scroll", updateHeader, { passive: true });

  function currentTheme() {
    try {
      const saved = localStorage.getItem("archi-theme");
      if (saved === "dark" || saved === "light") return saved;
    } catch (_) {}
    return document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
  }

  function setTheme(theme) {
    const normalized = theme === "dark" ? "dark" : "light";
    document.documentElement.setAttribute("data-theme", normalized);
    document.querySelectorAll("[data-theme-toggle]").forEach(function (input) {
      input.checked = normalized === "dark";
    });
    try {
      localStorage.setItem("archi-theme", normalized);
    } catch (_) {}
  }

  function syncThemeControls() {
    setTheme(currentTheme());
  }

  syncThemeControls();

  function closeOverlay() {
    const root = document.getElementById("overlay-root");
    if (root) root.innerHTML = "";
    document.documentElement.classList.remove("overflow-hidden");
  }

  document.addEventListener("htmx:afterSwap", function (event) {
    if (event.detail.target && event.detail.target.id === "overlay-root") {
      const overlay = event.detail.target.querySelector("[data-overlay]");
      if (!overlay) return;
      document.documentElement.classList.add("overflow-hidden");
      const close = overlay.querySelector("[data-overlay-close]");
      if (close) close.focus();
    }
  });

  document.addEventListener("htmx:afterSettle", updateHeader);
  document.addEventListener("htmx:afterSettle", syncThemeControls);

  document.addEventListener("click", function (event) {
    if (event.target.closest("[data-drawer-link]")) {
      const drawer = document.getElementById("site-drawer");
      if (drawer) drawer.checked = false;
    }
    if (event.target.matches("[data-overlay], [data-overlay-close]")) {
      closeOverlay();
    }
  });

  document.addEventListener("change", function (event) {
    const toggle = event.target.closest("[data-theme-toggle]");
    if (toggle) {
      setTheme(toggle.checked ? "dark" : "light");
    }
  });

  document.addEventListener("keydown", function (event) {
    if (event.key === "Escape") {
      const drawer = document.getElementById("site-drawer");
      if (drawer) drawer.checked = false;
      closeOverlay();
    }
  });
})();