@orangesk/orange-design-system 2.0.0-beta.30 → 2.0.0-beta.32

package/src/components/Megamenu/Megamenu.static.ts

@@ -26,18 +26,23 @@ export default class Megamenu {
   config!: Required<MegamenuConfig>;
   toggleButtons!: NodeListOf<HTMLButtonElement>;
   dropdowns!: NodeListOf<HTMLElement>;
-  mobileMenuButton!: HTMLButtonElement | null;
-  mobileMenu!: HTMLElement | null;
-  mobileOverlay!: HTMLElement | null;
-  mobileCloseButton!: HTMLButtonElement | null;
+  mobileMenuButtons!: HTMLButtonElement[];
+  mobilePanels!: HTMLElement[];
+  mobileCloseButtons!: HTMLButtonElement[];
+  activeMobilePanel!: HTMLElement | null;
+  activeMobileTarget!: string | null;
   desktopOverlay!: HTMLButtonElement | null;
   accordionButtons!: NodeListOf<HTMLButtonElement>;
+  desktopOverlayClickHandler!: (event: Event) => void;
+  mobileCloseHandler!: (event: Event) => void;
   focusTrapHandler!: (event: KeyboardEvent) => void;
+  focusTrapElement!: HTMLElement | null;
   lastFocusedElement!: HTMLElement | null;
   isKeyboardUser!: boolean;
   keydownHandler!: (e: KeyboardEvent) => void;
   mousedownHandler!: () => void;
   touchstartHandler!: () => void;
+  instanceName!: string;
 
   constructor(element: HTMLElement, config: MegamenuConfig = {}) {
     if ((element as any).ODS_Megamenu) {
@@ -53,6 +58,12 @@ export default class Megamenu {
     this.handleAccordionClick = this.handleAccordionClick.bind(this);
     this.handleArrowNavigation = this.handleArrowNavigation.bind(this);
     this.trapFocus = this.trapFocus.bind(this);
+    this.handleMobileMenuToggle = this.handleMobileMenuToggle.bind(this);
+    this.desktopOverlayClickHandler = () => this.closeAllDropdowns();
+    this.mobileCloseHandler = (event: Event) => {
+      event.preventDefault();
+      this.closeMobileMenu();
+    };
 
     (this.element as any).ODS_Megamenu = this;
 
@@ -71,15 +82,42 @@ export default class Megamenu {
     );
     this.dropdowns = this.element.querySelectorAll(`.${CLASS_NAV_DROPDOWN}`);
 
-    // Find mobile menu elements
-    this.mobileMenuButton = this.element.querySelector(
-      `.${CLASS_HIDE_LG_UP} button`,
-    ) as HTMLButtonElement;
-    this.mobileMenu = this.element.querySelector(`.${CLASS_MOBILE}`);
-    this.mobileOverlay = this.element.querySelector(`.${CLASS_MOBILE_OVERLAY}`);
-    this.mobileCloseButton = this.element.querySelector(
-      "[data-megamenu-close-button]",
-    ) as HTMLButtonElement;
+    // Resolve an optional instance name so external triggers can target this menu.
+    this.instanceName =
+      this.element.getAttribute("data-megamenu-name") || this.element.id || "";
+
+    // Find mobile panel elements.
+    this.mobilePanels = Array.from(
+      this.element.querySelectorAll(`.${CLASS_MOBILE}`),
+    );
+    this.activeMobilePanel = null;
+    this.activeMobileTarget = null;
+    this.focusTrapElement = null;
+
+    // Find all mobile toggles both in menu and in document scope.
+    const localToggleButtons = Array.from(
+      this.element.querySelectorAll(
+        `[data-megamenu-mobile-toggle], .${CLASS_HIDE_LG_UP} button`,
+      ),
+    ) as HTMLButtonElement[];
+    const globalToggleButtons = Array.from(
+      document.querySelectorAll(`[data-megamenu-mobile-toggle]`),
+    ) as HTMLButtonElement[];
+
+    this.mobileMenuButtons = Array.from(
+      new Set([...localToggleButtons, ...globalToggleButtons]),
+    ).filter((button) => this.shouldUseMobileTrigger(button));
+
+    this.mobileCloseButtons = Array.from(
+      this.element.querySelectorAll(
+        `.${CLASS_MOBILE_OVERLAY}, [data-megamenu-close-button]`,
+      ),
+    ) as HTMLButtonElement[];
+
+    this.mobilePanels.forEach((panel) => {
+      panel.setAttribute("aria-hidden", "true");
+    });
+    this.syncMobileButtonState();
 
     // Find desktop overlay element
     this.desktopOverlay = this.element.querySelector(
@@ -97,30 +135,18 @@ export default class Megamenu {
     });
 
     // Add mobile menu event listeners
-    if (this.mobileMenuButton) {
-      this.mobileMenuButton.addEventListener(
-        "click",
-        this.handleMobileMenuToggle.bind(this),
-      );
-    }
-    if (this.mobileOverlay) {
-      this.mobileOverlay.addEventListener(
-        "click",
-        this.closeMobileMenu.bind(this),
-      );
-    }
-    if (this.mobileCloseButton) {
-      this.mobileCloseButton.addEventListener(
-        "click",
-        this.closeMobileMenu.bind(this),
-      );
-    }
+    this.mobileMenuButtons.forEach((button) => {
+      button.addEventListener("click", this.handleMobileMenuToggle);
+    });
+    this.mobileCloseButtons.forEach((button) => {
+      button.addEventListener("click", this.mobileCloseHandler);
+    });
 
     // Add desktop overlay event listener
     if (this.desktopOverlay) {
       this.desktopOverlay.addEventListener(
         "click",
-        this.closeAllDropdowns.bind(this),
+        this.desktopOverlayClickHandler,
       );
     }
 
@@ -155,6 +181,70 @@ export default class Megamenu {
     this.updateTabIndices();
   }
 
+  shouldUseMobileTrigger(button: HTMLButtonElement) {
+    if (this.element.contains(button)) {
+      return true;
+    }
+
+    const targetName = button.getAttribute("data-megamenu-mobile-for");
+    if (!targetName) {
+      const allMegamenus = document.querySelectorAll("[data-megamenu]");
+      return allMegamenus.length === 1 && allMegamenus[0] === this.element;
+    }
+
+    if (!this.instanceName) {
+      return false;
+    }
+
+    return targetName === this.instanceName;
+  }
+
+  getDefaultMobileTarget() {
+    const firstPanel = this.mobilePanels[0];
+    return firstPanel?.getAttribute("data-megamenu-mobile-panel") || "main";
+  }
+
+  getTargetFromElement(control: HTMLElement | null) {
+    return (
+      control?.getAttribute("data-megamenu-mobile-target") ||
+      this.getDefaultMobileTarget()
+    );
+  }
+
+  getPanelByTarget(target: string) {
+    const matchingPanel = this.mobilePanels.find(
+      (panel) => panel.getAttribute("data-megamenu-mobile-panel") === target,
+    );
+
+    if (matchingPanel) {
+      return matchingPanel;
+    }
+
+    // Backward compatibility for existing markup with a single mobile panel.
+    if (
+      target === this.getDefaultMobileTarget() &&
+      this.mobilePanels.length === 1
+    ) {
+      return this.mobilePanels[0];
+    }
+
+    return null;
+  }
+
+  syncMobileButtonState() {
+    this.mobileMenuButtons.forEach((button) => {
+      const target = this.getTargetFromElement(button);
+      const isActive = this.activeMobileTarget === target;
+      button.setAttribute("aria-expanded", isActive ? "true" : "false");
+      button.classList.toggle(this.config.activeClass, isActive);
+    });
+  }
+
+  setMobilePanelState(panel: HTMLElement, isOpen: boolean) {
+    panel.classList.toggle(this.config.activeClass, isOpen);
+    panel.setAttribute("aria-hidden", isOpen ? "false" : "true");
+  }
+
   handleToggleClick(event: Event) {
     const button = event.currentTarget as HTMLButtonElement;
     const isActive = button.classList.contains(this.config.activeClass);
@@ -333,53 +423,79 @@ export default class Megamenu {
 
   handleMobileMenuToggle(event: Event) {
     event.preventDefault();
-    if (this.mobileMenu?.classList.contains(this.config.activeClass)) {
+    const trigger = event.currentTarget as HTMLButtonElement;
+    const target = this.getTargetFromElement(trigger);
+    const panel = this.getPanelByTarget(target);
+
+    if (!panel) {
+      return;
+    }
+
+    if (
+      this.activeMobileTarget === target &&
+      panel.classList.contains(this.config.activeClass)
+    ) {
       this.closeMobileMenu();
     } else {
-      this.openMobileMenu();
+      this.openMobileMenu(target, trigger);
     }
   }
 
-  openMobileMenu() {
-    if (this.mobileMenu) {
-      // Store the element that opened the menu for focus restoration
-      this.lastFocusedElement = document.activeElement as HTMLElement;
+  openMobileMenu(target = this.getDefaultMobileTarget(), source?: HTMLElement) {
+    const panel = this.getPanelByTarget(target);
 
-      this.mobileMenu.classList.add(this.config.activeClass);
-      document.body.style.overflow = "hidden"; // Prevent background scrolling
+    if (!panel) {
+      return;
+    }
 
-      // Set up focus trap immediately to prevent focus escape
-      this.trapFocus(this.mobileMenu);
+    // Keep one side panel active at a time.
+    this.mobilePanels.forEach((mobilePanel) => {
+      this.setMobilePanelState(mobilePanel, mobilePanel === panel);
+    });
 
-      // Only manage focus if user is using keyboard navigation (not touch)
-      if (this.isKeyboardUser) {
-        // Focus first focusable element in mobile menu for keyboard users
-        const firstFocusable = this.mobileMenu.querySelector(
-          "button, a",
-        ) as HTMLElement;
-        if (firstFocusable) {
-          // Reduced delay for better responsiveness
-          setTimeout(() => firstFocusable.focus(), 50);
-        }
+    // Store the element that opened the menu for focus restoration.
+    this.lastFocusedElement =
+      source || (document.activeElement as HTMLElement | null);
+    this.activeMobilePanel = panel;
+    this.activeMobileTarget = target;
+    this.syncMobileButtonState();
+
+    document.body.style.overflow = "hidden";
+    this.removeFocusTrap();
+    this.trapFocus(panel);
+
+    if (this.isKeyboardUser) {
+      const firstFocusable = panel.querySelector("button, a") as HTMLElement;
+      if (firstFocusable) {
+        setTimeout(() => firstFocusable.focus(), 50);
       }
     }
+
+    this.updateTabIndices();
   }
 
   closeMobileMenu() {
-    if (this.mobileMenu) {
-      this.mobileMenu.classList.remove(this.config.activeClass);
-      document.body.style.overflow = ""; // Restore scrolling
-      this.closeAllAccordions(); // Close any open accordions
+    if (!this.activeMobilePanel) {
+      return;
+    }
 
-      // Remove focus trap (safe to call even if not active)
-      this.removeFocusTrap();
+    this.mobilePanels.forEach((panel) => {
+      this.setMobilePanelState(panel, false);
+    });
 
-      // Return focus to element that opened the menu only for keyboard users
-      if (this.isKeyboardUser && this.lastFocusedElement) {
-        this.lastFocusedElement.focus();
-      }
-      this.lastFocusedElement = null;
+    document.body.style.overflow = "";
+    this.closeAllAccordions();
+    this.removeFocusTrap();
+
+    if (this.isKeyboardUser && this.lastFocusedElement) {
+      this.lastFocusedElement.focus();
     }
+
+    this.activeMobilePanel = null;
+    this.activeMobileTarget = null;
+    this.lastFocusedElement = null;
+    this.syncMobileButtonState();
+    this.updateTabIndices();
   }
 
   showDesktopOverlay() {
@@ -497,12 +613,17 @@ export default class Megamenu {
       }
     };
 
+    this.focusTrapElement = element;
     element.addEventListener("keydown", this.focusTrapHandler);
   }
 
   removeFocusTrap() {
-    if (this.mobileMenu && this.focusTrapHandler) {
-      this.mobileMenu.removeEventListener("keydown", this.focusTrapHandler);
+    if (this.focusTrapElement && this.focusTrapHandler) {
+      this.focusTrapElement.removeEventListener(
+        "keydown",
+        this.focusTrapHandler,
+      );
+      this.focusTrapElement = null;
     }
   }
 
@@ -526,18 +647,18 @@ export default class Megamenu {
     });
 
     // Also update mobile menu elements when mobile menu is active
-    if (this.mobileMenu) {
-      const isMobileMenuActive = this.mobileMenu.classList.contains(
+    this.mobilePanels.forEach((panel) => {
+      const isMobilePanelActive = panel.classList.contains(
         this.config.activeClass,
       );
-      const mobileMenuFocusableElements = this.mobileMenu.querySelectorAll(
+      const mobilePanelFocusableElements = panel.querySelectorAll(
         "a, button, [tabindex]:not([tabindex='-1'])",
       ) as NodeListOf<HTMLElement>;
 
-      mobileMenuFocusableElements.forEach((element) => {
-        element.tabIndex = isMobileMenuActive ? 0 : -1;
+      mobilePanelFocusableElements.forEach((element) => {
+        element.tabIndex = isMobilePanelActive ? 0 : -1;
       });
-    }
+    });
   }
 
   destroy() {
@@ -547,30 +668,18 @@ export default class Megamenu {
     });
 
     // Remove mobile menu event listeners
-    if (this.mobileMenuButton) {
-      this.mobileMenuButton.removeEventListener(
-        "click",
-        this.handleMobileMenuToggle.bind(this),
-      );
-    }
-    if (this.mobileOverlay) {
-      this.mobileOverlay.removeEventListener(
-        "click",
-        this.closeMobileMenu.bind(this),
-      );
-    }
-    if (this.mobileCloseButton) {
-      this.mobileCloseButton.removeEventListener(
-        "click",
-        this.closeMobileMenu.bind(this),
-      );
-    }
+    this.mobileMenuButtons.forEach((button) => {
+      button.removeEventListener("click", this.handleMobileMenuToggle);
+    });
+    this.mobileCloseButtons.forEach((button) => {
+      button.removeEventListener("click", this.mobileCloseHandler);
+    });
 
     // Remove desktop overlay event listener
     if (this.desktopOverlay) {
       this.desktopOverlay.removeEventListener(
         "click",
-        this.closeAllDropdowns.bind(this),
+        this.desktopOverlayClickHandler,
       );
     }
 
@@ -589,6 +698,7 @@ export default class Megamenu {
 
     // Restore body overflow if menu was open
     document.body.style.overflow = "";
+    this.removeFocusTrap();
 
     // Clean up instance reference
     (this.element as any).ODS_Megamenu = null;