@sumaq/site-kit 0.2.0

package/src/scripts/enhancements.js

@@ -0,0 +1,459 @@
+const initEnhancements = () => {
+  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  // 1. Sticky Header scroll behavior
+  const header = document.querySelector(".sq-header");
+  if (header) {
+    const handleScroll = () => {
+      header.classList.toggle("is-scrolled", window.scrollY > 15);
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+  }
+
+  // 2. Mobile Menu — open/close, focus return, Esc, link close
+  const navToggle = document.querySelector(".sq-nav__toggle");
+  const siteNav = document.getElementById("site-nav");
+
+  const setMenuOpen = (isOpen) => {
+    if (!navToggle || !siteNav) return;
+    siteNav.classList.toggle("is-open", isOpen);
+    navToggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
+    navToggle.setAttribute("aria-label", isOpen ? "Menü schließen" : "Menü öffnen");
+    document.body.classList.toggle("nav-open", isOpen);
+
+    if (isOpen) {
+      const firstLink = siteNav.querySelector("a, button");
+      if (firstLink) firstLink.focus();
+    } else {
+      navToggle.focus();
+    }
+  };
+
+  if (navToggle && siteNav && header) {
+    navToggle.addEventListener("click", (e) => {
+      e.stopPropagation();
+      setMenuOpen(!siteNav.classList.contains("is-open"));
+    });
+
+    document.addEventListener("click", (e) => {
+      if (!siteNav.classList.contains("is-open")) return;
+      if (!header.contains(e.target)) setMenuOpen(false);
+    });
+
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && siteNav.classList.contains("is-open")) {
+        e.preventDefault();
+        setMenuOpen(false);
+      }
+
+      // Keep Tab cycling within header+nav while menu is open on small screens
+      if (e.key !== "Tab" || !siteNav.classList.contains("is-open")) return;
+      if (window.matchMedia("(min-width: 769px)").matches) return;
+
+      const focusables = [navToggle, ...siteNav.querySelectorAll("a[href], button:not([disabled])")].filter(
+        (el) => el && !el.hasAttribute("disabled") && el.offsetParent !== null
+      );
+      if (!focusables.length) return;
+
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const active = document.activeElement;
+
+      if (e.shiftKey && active === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    });
+
+    siteNav.querySelectorAll("a").forEach((link) => {
+      link.addEventListener("click", () => {
+        if (siteNav.classList.contains("is-open")) setMenuOpen(false);
+      });
+    });
+  }
+
+  // 3. Image Gallery Swapping (Standorte page – location thumbs)
+  const thumbs = document.querySelectorAll(".sq-location__thumb");
+  thumbs.forEach((thumb) => {
+    thumb.addEventListener("click", function () {
+      const targetId = this.getAttribute("data-target");
+      const mainImg = document.getElementById(targetId);
+      const newSrc = this.getAttribute("data-src");
+      const newAlt = this.getAttribute("data-alt") || "";
+
+      if (mainImg && newSrc) {
+        const swap = () => {
+          mainImg.setAttribute("src", newSrc);
+          mainImg.setAttribute("alt", newAlt);
+          mainImg.style.opacity = 1;
+        };
+
+        if (reduceMotion) {
+          swap();
+        } else {
+          mainImg.style.opacity = 0;
+          setTimeout(swap, 150);
+        }
+
+        const gallery = this.closest(".sq-location__gallery");
+        if (gallery) {
+          gallery.querySelectorAll(".sq-location__thumb").forEach((t) => t.classList.remove("is-active"));
+        }
+        this.classList.add("is-active");
+      }
+    });
+  });
+
+  // 3b. Room gallery dots (standorte detail)
+  document.querySelectorAll("[data-room-gallery]").forEach((gallery) => {
+    const slides = gallery.querySelectorAll(".sq-room__slides img");
+    const dots = gallery.querySelectorAll(".sq-room__dot");
+    if (!slides.length || !dots.length) return;
+
+    const showSlide = (index) => {
+      slides.forEach((slide, i) => {
+        slide.classList.toggle("is-active", i === index);
+      });
+      dots.forEach((dot, i) => {
+        const isActive = i === index;
+        dot.classList.toggle("is-active", isActive);
+        dot.setAttribute("aria-selected", isActive ? "true" : "false");
+      });
+    };
+
+    dots.forEach((dot) => {
+      dot.addEventListener("click", () => {
+        const index = Number(dot.getAttribute("data-index"));
+        if (!Number.isNaN(index)) showSlide(index);
+      });
+    });
+  });
+
+  // 3c. Location -> room page transition (only when "Räume ansehen" is clicked;
+  // every other way of reaching /standorte/[slug] keeps the default transition)
+  document.querySelectorAll("[data-rooms-cta]").forEach((cta) => {
+    cta.addEventListener("click", () => {
+      const id = cta.getAttribute("data-rooms-cta");
+      const name = document.querySelector(`[data-location-name="${id}"]`);
+      if (name) name.style.viewTransitionName = `location-name-${id}`;
+    });
+  });
+
+  // 4. Team Search + Category Filter
+  const searchInput = document.getElementById("team-search");
+  const teamGrid = document.getElementById("team-grid");
+  if (searchInput && teamGrid) {
+    const cards = Array.from(teamGrid.querySelectorAll(".sq-team__card"));
+    const counter = document.getElementById("search-counter");
+    const noResults = document.getElementById("no-results");
+    const filterButtons = Array.from(document.querySelectorAll(".sq-team__filter"));
+    const transitionMs = reduceMotion ? 0 : 320;
+    let activeFilter = "alle";
+    const hideTimers = new WeakMap();
+    let debounceTimer = null;
+
+    if (counter) {
+      counter.setAttribute("aria-live", "polite");
+      counter.setAttribute("role", "status");
+    }
+    if (noResults) {
+      noResults.setAttribute("role", "status");
+      noResults.setAttribute("aria-live", "polite");
+      noResults.hidden = true;
+      noResults.style.display = "";
+    }
+
+    // Copy lives in the markup (data-counter-*), not here: the kit ships no
+    // language. `{count}` is the only placeholder.
+    const counterTemplates = {
+      all: counter?.getAttribute("data-counter-all") || "{count}",
+      results: counter?.getAttribute("data-counter-results") || "{count}",
+    };
+
+    const updateCounter = (visibleCount, query) => {
+      if (!counter) return;
+      const template =
+        query === "" && activeFilter === "alle" ? counterTemplates.all : counterTemplates.results;
+      counter.innerHTML = template.replace(
+        "{count}",
+        `<span id="member-count">${visibleCount}</span>`
+      );
+    };
+
+    const matchesCard = (card, query) => {
+      const searchTerms = (card.getAttribute("data-search") || "").toLowerCase();
+      const categories = (card.getAttribute("data-categories") || "").toLowerCase();
+      const queryOk = !query || searchTerms.includes(query);
+      const filterOk = activeFilter === "alle" || categories.split(/\s+/).includes(activeFilter);
+      return queryOk && filterOk;
+    };
+
+    const showCard = (card) => {
+      const pending = hideTimers.get(card);
+      if (pending) {
+        clearTimeout(pending);
+        hideTimers.delete(card);
+      }
+      if (!card.classList.contains("is-hidden") && !card.classList.contains("is-hiding")) {
+        return;
+      }
+      card.classList.remove("is-hidden", "is-hiding");
+      card.removeAttribute("aria-hidden");
+      if (transitionMs === 0) return;
+      card.classList.add("is-showing");
+      void card.offsetWidth;
+      requestAnimationFrame(() => {
+        card.classList.remove("is-showing");
+      });
+    };
+
+    const hideCard = (card) => {
+      if (card.classList.contains("is-hidden") || card.classList.contains("is-hiding")) {
+        return;
+      }
+      if (transitionMs === 0) {
+        card.classList.add("is-hidden");
+        card.setAttribute("aria-hidden", "true");
+        return;
+      }
+      card.classList.add("is-hiding");
+      const timer = setTimeout(() => {
+        card.classList.add("is-hidden");
+        card.classList.remove("is-hiding");
+        card.setAttribute("aria-hidden", "true");
+        hideTimers.delete(card);
+      }, transitionMs);
+      hideTimers.set(card, timer);
+    };
+
+    const applyFilters = () => {
+      const query = searchInput.value.toLowerCase().trim();
+      let visibleCount = 0;
+
+      cards.forEach((card) => {
+        if (matchesCard(card, query)) {
+          showCard(card);
+          visibleCount++;
+        } else {
+          hideCard(card);
+        }
+      });
+
+      updateCounter(visibleCount, query);
+
+      if (noResults) {
+        const empty = visibleCount === 0;
+        noResults.hidden = !empty;
+      }
+    };
+
+    searchInput.addEventListener("input", () => {
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(applyFilters, 150);
+    });
+
+    filterButtons.forEach((btn) => {
+      btn.addEventListener("click", () => {
+        activeFilter = btn.getAttribute("data-filter") || "alle";
+        filterButtons.forEach((b) => {
+          const isActive = b === btn;
+          b.classList.toggle("is-active", isActive);
+          b.setAttribute("aria-pressed", isActive ? "true" : "false");
+        });
+        applyFilters();
+      });
+    });
+  }
+
+  // 4b. Broken image fallback (team / profile)
+  document.querySelectorAll("img[src^='media/team/']").forEach((img) => {
+    img.addEventListener("error", () => {
+      if (img.dataset.fallbackApplied) return;
+      img.dataset.fallbackApplied = "1";
+      img.src = "media/team/profile_placeholder.CZDfc6EN_1FnOqJ.webp";
+    });
+  });
+
+  // 4c. Gallery lightbox (<Gallery lightbox />) — one viewer per gallery,
+  // keyboard-navigable, restores focus to the trigger on close.
+  document.querySelectorAll("[data-lightbox]").forEach((viewer) => {
+    const image = viewer.querySelector("[data-lightbox-image]");
+    const gallery = document.querySelector("[data-gallery]");
+    const triggers = gallery ? Array.from(gallery.querySelectorAll("[data-gallery-index]")) : [];
+    if (!image || !triggers.length) return;
+
+    let current = 0;
+    let opener = null;
+
+    const show = (index) => {
+      current = (index + triggers.length) % triggers.length;
+      const trigger = triggers[current];
+      image.setAttribute("src", trigger.getAttribute("data-src"));
+      image.setAttribute("alt", trigger.getAttribute("data-alt") || "");
+    };
+
+    const open = (index, trigger) => {
+      opener = trigger;
+      show(index);
+      viewer.hidden = false;
+      viewer.classList.add("is-open");
+      const close = viewer.querySelector("[data-lightbox-close]");
+      if (close) close.focus();
+    };
+
+    const close = () => {
+      viewer.hidden = true;
+      viewer.classList.remove("is-open");
+      if (opener) opener.focus();
+    };
+
+    triggers.forEach((trigger, index) => {
+      trigger.addEventListener("click", () => open(index, trigger));
+    });
+
+    viewer.querySelector("[data-lightbox-close]")?.addEventListener("click", close);
+    viewer.querySelector("[data-lightbox-prev]")?.addEventListener("click", () => show(current - 1));
+    viewer.querySelector("[data-lightbox-next]")?.addEventListener("click", () => show(current + 1));
+    viewer.addEventListener("click", (e) => {
+      if (e.target === viewer) close();
+    });
+
+    document.addEventListener("keydown", (e) => {
+      if (viewer.hidden) return;
+      if (e.key === "Escape") close();
+      else if (e.key === "ArrowLeft") show(current - 1);
+      else if (e.key === "ArrowRight") show(current + 1);
+    });
+  });
+
+  // 5. Scroll Reveal Effect using IntersectionObserver
+  const revealElements = document.querySelectorAll(
+    [
+      ".reveal",
+      ".sq-location__card",
+      ".sq-services__card",
+      ".sq-audience__card",
+      ".sq-pricing__card",
+      ".sq-contact__card",
+      ".sq-card",
+      ".sq-steps__item",
+      ".sq-timeline__item",
+      ".sq-projects__item",
+      ".sq-skills__group",
+      ".sq-testimonials__card",
+      ".sq-gallery__item",
+    ].join(", ")
+  );
+  if (reduceMotion) {
+    revealElements.forEach((el) => el.classList.add("is-visible"));
+  } else if ("IntersectionObserver" in window) {
+    const revealObserver = new IntersectionObserver(
+      (entries, observer) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add("is-visible");
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      {
+        threshold: 0.05,
+        rootMargin: "0px 0px -40px 0px",
+      }
+    );
+
+    revealElements.forEach((el) => {
+      el.classList.add("reveal");
+      revealObserver.observe(el);
+    });
+  } else {
+    revealElements.forEach((el) => {
+      el.classList.add("is-visible");
+    });
+  }
+
+  // 6. Nav scroll-spy — highlight in-page anchor links (services/pricing/contact) as their section scrolls into view
+  const navHashLinks = Array.from(document.querySelectorAll(".sq-nav__list a[href*='#']"));
+  const sectionLinkMap = navHashLinks
+    .map((link) => {
+      const id = link.getAttribute("href").split("#")[1];
+      const section = id ? document.getElementById(id) : null;
+      return section ? { link, section } : null;
+    })
+    .filter(Boolean);
+
+  if (sectionLinkMap.length && "IntersectionObserver" in window) {
+    const homeLink = document.querySelector(".sq-nav__list a[href='/']");
+    const intersecting = new Set();
+
+    const updateActiveLink = () => {
+      navHashLinks.forEach((link) => link.removeAttribute("aria-current"));
+      if (homeLink) homeLink.removeAttribute("aria-current");
+      const active = sectionLinkMap.find(({ section }) => intersecting.has(section));
+      if (active) {
+        active.link.setAttribute("aria-current", "page");
+      } else if (homeLink) {
+        homeLink.setAttribute("aria-current", "page");
+      }
+    };
+
+    const spyObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) intersecting.add(entry.target);
+          else intersecting.delete(entry.target);
+        });
+        updateActiveLink();
+      },
+      { rootMargin: "-45% 0px -50% 0px", threshold: 0 }
+    );
+
+    sectionLinkMap.forEach(({ section }) => spyObserver.observe(section));
+  }
+
+  // 7. Back to top — restore focus to skip target
+  const scrollToTop = (targetId) => {
+    const top = document.getElementById(targetId) || document.body;
+    window.scrollTo({ top: 0, behavior: reduceMotion ? "auto" : "smooth" });
+    if (history.replaceState) {
+      history.replaceState(null, "", `#${targetId}`);
+    }
+    if (typeof top.focus === "function") {
+      if (!top.hasAttribute("tabindex")) top.setAttribute("tabindex", "-1");
+      top.focus({ preventScroll: true });
+    }
+  };
+
+  document.querySelectorAll("a.sq-to-top").forEach((link) => {
+    link.addEventListener("click", (e) => {
+      e.preventDefault();
+      scrollToTop("top");
+    });
+  });
+
+  // 7b. Floating back-to-top control (<ScrollToTop />) — appears past its
+  // own threshold, so a short page never shows it.
+  document.querySelectorAll("[data-scroll-top]").forEach((button) => {
+    const targetId = button.getAttribute("data-scroll-target") || "top";
+    const threshold = Number(button.getAttribute("data-scroll-threshold")) || 300;
+
+    const sync = () => {
+      const visible = window.scrollY > threshold;
+      button.hidden = !visible;
+      button.classList.toggle("is-visible", visible);
+    };
+
+    button.addEventListener("click", () => scrollToTop(targetId));
+    window.addEventListener("scroll", sync, { passive: true });
+    sync();
+  });
+};
+
+// astro:page-load fires after the initial page load and after every
+// client-side navigation done by <ClientRouter />, so re-run setup each time
+// instead of relying on DOMContentLoaded (which only fires once).
+document.addEventListener("astro:page-load", initEnhancements);