@kywi-software/js 0.6.7 → 0.7.1

package/dist/kywi.js

@@ -22,8 +22,11 @@ var Kywi = (() => {
   var src_exports = {};
   __export(src_exports, {
     Kywi: () => Kywi,
+    NAV_BREAKPOINT: () => NAV_BREAKPOINT,
     bootAudienceEngine: () => bootAudienceEngine,
     bootExperiments: () => bootExperiments,
+    enhanceNav: () => enhanceNav,
+    initNavMenus: () => initNavMenus,
     openTransparencyPanel: () => openTransparencyPanel,
     renderTransparencyPanel: () => renderTransparencyPanel
   });
@@ -319,6 +322,188 @@ var Kywi = (() => {
     }
   }
 
+  // src/nav/menu.ts
+  var NAV_BREAKPOINT = 860;
+  var CLOSE_DELAY_MS = 120;
+  var ITEM_CLASS = "kywi-nav-item--has-children";
+  var OPEN_CLASS = "kywi-nav-item--open";
+  var TOGGLE_CLASS = "kywi-nav-toggle";
+  var PANEL_CLASS = "kywi-nav-panel";
+  var FLIP_CLASS = "kywi-nav-panel--flip";
+  var READY_ATTRIBUTE = "data-kywi-nav-ready";
+  function directChild(parent, className) {
+    for (const child of Array.from(parent.children)) {
+      if (child instanceof HTMLElement && child.classList.contains(className)) return child;
+    }
+    return null;
+  }
+  function isDesktop() {
+    if (typeof window === "undefined") return false;
+    if (typeof window.matchMedia !== "function") return true;
+    return window.matchMedia(`(min-width: ${NAV_BREAKPOINT}px)`).matches;
+  }
+  function panelLinks(panel) {
+    return Array.from(panel.querySelectorAll("a[href], button:not([disabled])"));
+  }
+  function enhanceNav(nav) {
+    const cleanups = [];
+    const entries = [];
+    for (const item of Array.from(nav.querySelectorAll(`.${ITEM_CLASS}`))) {
+      const toggle = directChild(item, TOGGLE_CLASS);
+      const panel = directChild(item, PANEL_CLASS);
+      if (toggle && panel) entries.push({ item, toggle, panel });
+    }
+    if (entries.length === 0) return () => {
+    };
+    let closeTimer;
+    const cancelClose = () => {
+      if (closeTimer !== void 0) {
+        clearTimeout(closeTimer);
+        closeTimer = void 0;
+      }
+    };
+    function isOpen(entry) {
+      return entry.item.classList.contains(OPEN_CLASS);
+    }
+    function close(entry) {
+      entry.item.classList.remove(OPEN_CLASS);
+      entry.toggle.setAttribute("aria-expanded", "false");
+      entry.panel.classList.remove(FLIP_CLASS);
+    }
+    function closeAll(except) {
+      for (const entry of entries) {
+        if (except && (entry === except || entry.item.contains(except.item))) continue;
+        close(entry);
+      }
+    }
+    function applyEdgeFlip(entry) {
+      if (typeof entry.panel.getBoundingClientRect !== "function") return;
+      entry.panel.classList.remove(FLIP_CLASS);
+      const rect = entry.panel.getBoundingClientRect();
+      const viewport = window.innerWidth || document.documentElement.clientWidth || 0;
+      if (viewport > 0 && rect.width > 0 && rect.right > viewport - 4) {
+        entry.panel.classList.add(FLIP_CLASS);
+      }
+    }
+    function open(entry) {
+      cancelClose();
+      closeAll(entry);
+      entry.item.classList.add(OPEN_CLASS);
+      entry.toggle.setAttribute("aria-expanded", "true");
+      applyEdgeFlip(entry);
+    }
+    function on(target, type, handler, options) {
+      target.addEventListener(type, handler, options);
+      cleanups.push(() => target.removeEventListener(type, handler, options));
+    }
+    for (const entry of entries) {
+      on(entry.toggle, "click", (event) => {
+        event.preventDefault();
+        if (isOpen(entry)) {
+          close(entry);
+        } else {
+          open(entry);
+        }
+      });
+      on(entry.item, "mouseenter", () => {
+        if (!isDesktop()) return;
+        open(entry);
+      });
+      on(entry.item, "mouseleave", () => {
+        if (!isDesktop()) return;
+        cancelClose();
+        closeTimer = setTimeout(() => {
+          close(entry);
+          closeTimer = void 0;
+        }, CLOSE_DELAY_MS);
+      });
+    }
+    on(nav, "focusin", (event) => {
+      const target = event.target;
+      if (!target) return;
+      for (const entry of entries) {
+        if (entry.panel.contains(target)) {
+          open(entry);
+          return;
+        }
+      }
+      for (const entry of entries) {
+        if (!entry.item.contains(target)) close(entry);
+      }
+    });
+    on(nav, "keydown", (event) => {
+      const target = event.target;
+      if (!target) return;
+      const entry = entries.find((e) => e.item.contains(target));
+      if (!entry) return;
+      if (event.key === "Escape") {
+        const openEntry = entries.filter((e) => e.item.contains(target) && isOpen(e)).pop();
+        if (!openEntry) return;
+        event.preventDefault();
+        close(openEntry);
+        openEntry.toggle.focus();
+        return;
+      }
+      if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+      if (target === entry.toggle) {
+        if (event.key === "ArrowDown") {
+          event.preventDefault();
+          if (!isOpen(entry)) open(entry);
+          panelLinks(entry.panel)[0]?.focus();
+        } else if (isOpen(entry)) {
+          event.preventDefault();
+          close(entry);
+        }
+        return;
+      }
+      const owner = entries.find((e) => e.panel.contains(target));
+      if (!owner) return;
+      const links = panelLinks(owner.panel);
+      const index = links.indexOf(target);
+      if (index === -1) return;
+      event.preventDefault();
+      const next = event.key === "ArrowDown" ? links[(index + 1) % links.length] : links[(index - 1 + links.length) % links.length];
+      next?.focus();
+    });
+    on(document, "click", (event) => {
+      const target = event.target;
+      if (target && nav.contains(target)) return;
+      cancelClose();
+      closeAll();
+    });
+    if (typeof window.matchMedia === "function") {
+      const query = window.matchMedia(`(min-width: ${NAV_BREAKPOINT}px)`);
+      const onChange = () => {
+        cancelClose();
+        closeAll();
+      };
+      if (typeof query.addEventListener === "function") {
+        query.addEventListener("change", onChange);
+        cleanups.push(() => query.removeEventListener("change", onChange));
+      }
+    }
+    nav.setAttribute(READY_ATTRIBUTE, "");
+    return () => {
+      cancelClose();
+      for (const undo of cleanups) undo();
+      cleanups.length = 0;
+      closeAll();
+      nav.removeAttribute(READY_ATTRIBUTE);
+    };
+  }
+  function initNavMenus(root = document) {
+    if (typeof document === "undefined") return () => {
+    };
+    const teardowns = [];
+    for (const nav of Array.from(root.querySelectorAll("[data-kywi-nav]"))) {
+      if (nav.hasAttribute(READY_ATTRIBUTE)) continue;
+      teardowns.push(enhanceNav(nav));
+    }
+    return () => {
+      for (const undo of teardowns) undo();
+    };
+  }
+
   // src/experiments/index.ts
   function apiBaseFrom(ctx) {
     return ctx.basePath && ctx.basePath !== "/" ? `${ctx.basePath}/api/v1` : "/api/v1";
@@ -1526,6 +1711,7 @@ var Kywi = (() => {
       Kywi.renderFeed = renderFeed;
       initModules();
       initFormHooks();
+      initNavMenus();
       bootExperiments({ context: Kywi.context });
       booted = true;
     }