@schukai/monster 4.43.14 → 4.43.16

package/source/components/navigation/site-navigation.mjs

@@ -111,7 +111,6 @@ class SiteNavigation extends CustomElement {
     requestAnimationFrame(() => {
       populateTabs.call(this);
     });
-
   }
 
   disconnectedCallback() {
@@ -304,7 +303,7 @@ function detachResizeObserver() {
 }
 
 /**
- * Sets up interaction logic (hover or click) for a submenu.
+ * Sets up interaction logic (hover, click, or touch) for a submenu.
  * This function is called recursively for nested submenus.
  * @private
  * @this {SiteNavigation}
@@ -323,111 +322,174 @@ function setupSubmenu(parentLi, context = "visible", level = 1) {
   }
 
   const interaction = this.getOption("interactionModel", "auto");
-  const useHover =
-    interaction === "hover" ||
-    (interaction === "auto" && context === "visible");
+  const isTouchDevice =
+    "ontouchstart" in window || navigator.maxTouchPoints > 0;
 
-  if (useHover) {
-    const component = this;
-    let cleanup;
-    let hideTimeout;
-    let isHovering = false;
+  const effectiveInteraction =
+    interaction === "auto"
+      ? context === "visible"
+        ? "hover"
+        : "click"
+      : interaction;
+
+  const component = this;
+  let cleanup;
 
-    const immediateHide = () => {
-      submenu.style.display = "none";
-      Object.assign(submenu.style, {
-        maxHeight: "",
-        overflowY: "",
+  const immediateHide = () => {
+    submenu.style.display = "none";
+    Object.assign(submenu.style, {
+      maxHeight: "",
+      overflowY: "",
+    });
+    submenu
+      .querySelectorAll(
+        "ul[style*='display: block'], div[part='mega-menu'][style*='display: block']",
+      )
+      .forEach((sub) => {
+        sub.style.display = "none";
       });
-      submenu
-        .querySelectorAll(
-          "ul[style*='display: block'], div[part='mega-menu'][style*='display: block']",
-        )
-        .forEach((sub) => {
-          sub.style.display = "none";
+    fireCustomEvent(this, "monster-submenu-hide", {
+      context,
+      trigger: parentLi,
+      submenu,
+      level,
+    });
+    if (cleanup) {
+      cleanup();
+      cleanup = null;
+    }
+    if (level === 1 && component[activeSubmenuHiderSymbol] === immediateHide) {
+      component[activeSubmenuHiderSymbol] = null;
+    }
+  };
+
+  const show = () => {
+    component[hideHamburgerMenuSymbol]?.();
+    if (level === 1) {
+      if (
+        component[activeSubmenuHiderSymbol] &&
+        component[activeSubmenuHiderSymbol] !== immediateHide
+      ) {
+        component[activeSubmenuHiderSymbol]();
+      }
+      component[activeSubmenuHiderSymbol] = immediateHide;
+    } else {
+      [...parentLi.parentElement.children]
+        .filter((li) => li !== parentLi)
+        .forEach((sibling) => {
+          const siblingSubmenu = sibling.querySelector(
+            ":scope > ul, :scope > div[part='mega-menu']",
+          );
+          if (siblingSubmenu) {
+            siblingSubmenu.style.display = "none";
+          }
+        });
+    }
+    submenu.style.display = "block";
+    fireCustomEvent(this, "monster-submenu-show", {
+      context,
+      trigger: parentLi,
+      submenu,
+      level,
+    });
+    if (!cleanup) {
+      cleanup = autoUpdate(parentLi, submenu, () => {
+        const middleware = [offset(8), flip(), shift({ padding: 8 })];
+        const containsSubmenus = submenu.querySelector(
+          "ul, div[part='mega-menu']",
+        );
+        if (!containsSubmenus) {
+          middleware.push(
+            size({
+              apply: ({ availableHeight, elements }) => {
+                Object.assign(elements.floating.style, {
+                  maxHeight: `${availableHeight}px`,
+                  overflowY: "auto",
+                });
+              },
+              padding: 8,
+            }),
+          );
+        }
+        computePosition(parentLi, submenu, {
+          placement: level === 1 ? "bottom-start" : "right-start",
+          middleware: middleware,
+        }).then(({ x, y, strategy }) => {
+          Object.assign(submenu.style, {
+            position: strategy,
+            left: `${x}px`,
+            top: `${y}px`,
+          });
         });
-      fireCustomEvent(this, "monster-submenu-hide", {
-        context,
-        trigger: parentLi,
-        submenu,
-        level,
       });
-      if (cleanup) {
-        cleanup();
-        cleanup = null;
-      }
+    }
+  };
+
+  if (effectiveInteraction === "hover" && isTouchDevice) {
+    let lastTap = 0;
+    const DOUBLE_TAP_DELAY = 300;
+    const anchor = parentLi.querySelector(":scope > a");
+
+    if (!anchor) return;
+
+    const handleOutsideClickForSubmenu = (event) => {
       if (
-        level === 1 &&
-        component[activeSubmenuHiderSymbol] === immediateHide
+        submenu.style.display === "block" &&
+        !parentLi.contains(event.target)
       ) {
-        component[activeSubmenuHiderSymbol] = null;
+        immediateHide();
+        document.removeEventListener(
+          "click",
+          handleOutsideClickForSubmenu,
+          true,
+        );
       }
     };
 
-    const show = () => {
-      component[hideHamburgerMenuSymbol]?.();
-      if (level === 1) {
-        if (
-          component[activeSubmenuHiderSymbol] &&
-          component[activeSubmenuHiderSymbol] !== immediateHide
-        ) {
-          component[activeSubmenuHiderSymbol]();
-        }
-        component[activeSubmenuHiderSymbol] = immediateHide;
+    anchor.addEventListener("click", (event) => {
+      const now = Date.now();
+      const timeSinceLastTap = now - lastTap;
+      lastTap = now;
+
+      if (timeSinceLastTap < DOUBLE_TAP_DELAY && timeSinceLastTap > 0) {
+        lastTap = 0;
+        document.removeEventListener(
+          "click",
+          handleOutsideClickForSubmenu,
+          true,
+        );
+        immediateHide();
       } else {
-        [...parentLi.parentElement.children]
-          .filter((li) => li !== parentLi)
-          .forEach((sibling) => {
-            const siblingSubmenu = sibling.querySelector(
-              ":scope > ul, :scope > div[part='mega-menu']",
-            );
-            if (siblingSubmenu) {
-              siblingSubmenu.style.display = "none";
-            }
-          });
-      }
-      submenu.style.display = "block";
-      fireCustomEvent(this, "monster-submenu-show", {
-        context,
-        trigger: parentLi,
-        submenu,
-        level,
-      });
-      if (!cleanup) {
-        cleanup = autoUpdate(parentLi, submenu, () => {
-          const middleware = [offset(8), flip(), shift({ padding: 8 })];
-          const containsSubmenus = submenu.querySelector(
-            "ul, div[part='mega-menu']",
+        event.preventDefault();
+        event.stopPropagation();
+
+        const isMenuOpen = submenu.style.display === "block";
+
+        if (isMenuOpen) {
+          document.removeEventListener(
+            "click",
+            handleOutsideClickForSubmenu,
+            true,
           );
-          if (!containsSubmenus) {
-            middleware.push(
-              size({
-                apply: ({ availableHeight, elements }) => {
-                  Object.assign(elements.floating.style, {
-                    maxHeight: `${availableHeight}px`,
-                    overflowY: "auto",
-                  });
-                },
-                padding: 8,
-              }),
+          immediateHide();
+        } else {
+          show();
+          setTimeout(() => {
+            document.addEventListener(
+              "click",
+              handleOutsideClickForSubmenu,
+              true,
             );
-          }
-          computePosition(parentLi, submenu, {
-            placement: level === 1 ? "bottom-start" : "right-start",
-            middleware: middleware,
-          }).then(({ x, y, strategy }) => {
-            Object.assign(submenu.style, {
-              position: strategy,
-              left: `${x}px`,
-              top: `${y}px`,
-            });
-          });
-        });
+          }, 0);
+        }
       }
-    };
+    });
+  } else if (effectiveInteraction === "hover" && !isTouchDevice) {
+    let hideTimeout;
+    let isHovering = false;
 
     const handleMouseEnter = () => {
-      isHovering = true; // Status auf "aktiv" setzen
+      isHovering = true;
       clearTimeout(hideTimeout);
       if (submenu.style.display !== "block") {
         show();
@@ -435,7 +497,7 @@ function setupSubmenu(parentLi, context = "visible", level = 1) {
     };
 
     const handleMouseLeave = () => {
-      isHovering = false; // Status auf "inaktiv" setzen
+      isHovering = false;
       hideTimeout = setTimeout(() => {
         if (!isHovering) {
           immediateHide();
@@ -524,7 +586,6 @@ function cloneNavItem(item) {
  * @this {SiteNavigation}
  */
 function populateTabs() {
-
   const visibleList = this[visibleElementsSymbol];
   const hiddenList = this[hiddenElementsSymbol];
   const hamburgerButton = this[hamburgerButtonSymbol];
@@ -551,7 +612,6 @@ function populateTabs() {
     return;
   }
 
-
   const navWidth = navEl.clientWidth;
 
   const originalDisplay = hamburgerButton.style.display;
@@ -607,7 +667,7 @@ function populateTabs() {
     visibleList.appendChild(firstHiddenItemClone);
     const firstHiddenItemWidth =
       firstHiddenItemClone.getBoundingClientRect().width;
-    visibleList.removeChild(firstHiddenItemClone); 
+    visibleList.removeChild(firstHiddenItemClone);
 
     const gap = parseFloat(getComputedStyle(visibleList).gap || "0") || 0;
     if (visibleItemsWidth + gap + firstHiddenItemWidth <= navWidth) {