@orangesk/orange-design-system 2.0.0-beta.8 → 2.0.0

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

@@ -1,12 +1,12 @@
 import {
-  CLASS_NAV_BUTTON,
-  CLASS_NAV_DROPDOWN,
+  CLASS_ACCORDION_BUTTON,
+  CLASS_ACCORDION_ICON,
+  CLASS_HIDE_LG_UP,
   CLASS_MOBILE,
   CLASS_MOBILE_OVERLAY,
-  CLASS_HIDE_LG_UP,
+  CLASS_NAV_BUTTON,
+  CLASS_NAV_DROPDOWN,
   CLASS_OVERLAY,
-  CLASS_ACCORDION_BUTTON,
-  CLASS_ACCORDION_ICON,
 } from "./constants";
 
 interface MegamenuConfig {
@@ -15,6 +15,10 @@ interface MegamenuConfig {
   removeOnDestroy?: boolean;
 }
 
+const MODAL_OPEN_CLASS = "has-modal";
+const LOCKED_SCROLL_TOP_ATTR = "data-lock-scrolltop";
+const BRAND_MARK_SELECTOR = "[data-megamenu-brand-mark]";
+
 const defaultConfig: Required<MegamenuConfig> = {
   dataToggle: "data-toggle",
   activeClass: "is-active",
@@ -26,18 +30,44 @@ 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;
+
+  private isModalOpen(): boolean {
+    return document.body.classList.contains(MODAL_OPEN_CLASS);
+  }
+
+  private getLockedScrollTop(): number | null {
+    const lockedScrollTopRaw = document.body.getAttribute(
+      LOCKED_SCROLL_TOP_ATTR,
+    );
+    const lockedScrollTop = Number.parseInt(lockedScrollTopRaw || "", 10);
+
+    return Number.isFinite(lockedScrollTop) ? lockedScrollTop : null;
+  }
+
+  private getEffectiveScrollY(): number {
+    if (!this.isModalOpen()) {
+      return window.scrollY;
+    }
+
+    return this.getLockedScrollTop() ?? window.scrollY;
+  }
 
   constructor(element: HTMLElement, config: MegamenuConfig = {}) {
     if ((element as any).ODS_Megamenu) {
@@ -53,6 +83,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 +107,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 +160,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,
       );
     }
 
@@ -153,6 +204,105 @@ export default class Megamenu {
 
     // Set initial tab indices for accessibility
     this.updateTabIndices();
+    this.handleScroll();
+  }
+
+  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);
+    });
+  }
+
+  isInMobilePanel(element: HTMLElement | null) {
+    return Boolean(
+      element && this.mobilePanels.some((panel) => panel.contains(element)),
+    );
+  }
+
+  getFocusRestoreTarget() {
+    const lastFocused = this.lastFocusedElement;
+    if (
+      lastFocused &&
+      lastFocused.isConnected &&
+      !this.isInMobilePanel(lastFocused)
+    ) {
+      return lastFocused;
+    }
+
+    const target = this.activeMobileTarget;
+    if (target) {
+      const matchingTrigger = this.mobileMenuButtons.find(
+        (button) =>
+          this.getTargetFromElement(button) === target &&
+          !this.isInMobilePanel(button),
+      );
+      if (matchingTrigger) {
+        return matchingTrigger;
+      }
+    }
+
+    return (
+      this.mobileMenuButtons.find((button) => !this.isInMobilePanel(button)) ||
+      null
+    );
+  }
+
+  setMobilePanelState(panel: HTMLElement, isOpen: boolean) {
+    panel.classList.toggle(this.config.activeClass, isOpen);
+    panel.setAttribute("aria-hidden", isOpen ? "false" : "true");
   }
 
   handleToggleClick(event: Event) {
@@ -283,15 +433,24 @@ export default class Megamenu {
     const topElement = this.element.querySelector(
       '[data-hide-when-sticky="true"]',
     ) as HTMLElement;
+    const hasBrandMark = Boolean(
+      this.element.querySelector(BRAND_MARK_SELECTOR),
+    );
+    const effectiveScrollY = this.getEffectiveScrollY();
+    const hideThreshold = topElement?.offsetHeight || 15;
+    const shouldHideTop = effectiveScrollY > hideThreshold;
+    const isTopHidden = this.element.classList.contains("top-hidden");
 
     if (topElement) {
-      if (window.scrollY > 15) {
+      if (shouldHideTop && !isTopHidden) {
         topElement.classList.add("is-hidden");
         this.element.classList.add("top-hidden");
-      } else {
+      } else if (!shouldHideTop && isTopHidden) {
         topElement.classList.remove("is-hidden");
         this.element.classList.remove("top-hidden");
       }
+    } else if (this.element.classList.contains("is-sticky") && hasBrandMark) {
+      this.element.classList.toggle("top-hidden", shouldHideTop);
     }
   }
 
@@ -333,53 +492,96 @@ 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);
+    // Store the element that opened the menu for focus restoration
+    // BEFORE changing panel states, so activeElement is captured correctly.
+    this.lastFocusedElement =
+      source || (document.activeElement as HTMLElement | null);
 
-      // 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);
-        }
+    // Move focus out of any panel about to be hidden to prevent
+    // the browser from blocking aria-hidden on a focused descendant.
+    const focused = document.activeElement as HTMLElement | null;
+    if (
+      focused &&
+      focused !== panel &&
+      this.mobilePanels.some((p) => p !== panel && p.contains(focused))
+    ) {
+      focused.blur();
+    }
+
+    // Keep one side panel active at a time.
+    this.mobilePanels.forEach((mobilePanel) => {
+      this.setMobilePanelState(mobilePanel, mobilePanel === panel);
+    });
+    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
-
-      // Remove focus trap (safe to call even if not active)
-      this.removeFocusTrap();
+    if (!this.activeMobilePanel) {
+      return;
+    }
 
-      // Return focus to element that opened the menu only for keyboard users
-      if (this.isKeyboardUser && this.lastFocusedElement) {
-        this.lastFocusedElement.focus();
-      }
-      this.lastFocusedElement = null;
+    // Move focus out of the panel BEFORE setting aria-hidden to prevent
+    // the browser from blocking aria-hidden on a focused descendant.
+    const restoreTarget = this.getFocusRestoreTarget();
+    if (restoreTarget) {
+      restoreTarget.focus();
+    } else {
+      (document.activeElement as HTMLElement | null)?.blur?.();
     }
+
+    this.mobilePanels.forEach((panel) => {
+      this.setMobilePanelState(panel, false);
+    });
+
+    document.body.style.overflow = "";
+    this.closeAllAccordions();
+    this.removeFocusTrap();
+
+    this.activeMobilePanel = null;
+    this.activeMobileTarget = null;
+    this.lastFocusedElement = null;
+    this.syncMobileButtonState();
+    this.updateTabIndices();
   }
 
   showDesktopOverlay() {
@@ -497,12 +699,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 +733,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 +754,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 +784,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;