@orangesk/orange-design-system 2.0.0-beta.0 → 2.0.0-beta.10

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

@@ -0,0 +1,600 @@
+import {
+  CLASS_NAV_BUTTON,
+  CLASS_NAV_DROPDOWN,
+  CLASS_MOBILE,
+  CLASS_MOBILE_OVERLAY,
+  CLASS_HIDE_LG_UP,
+  CLASS_OVERLAY,
+  CLASS_ACCORDION_BUTTON,
+  CLASS_ACCORDION_ICON,
+} from "./constants";
+
+interface MegamenuConfig {
+  dataToggle?: string;
+  activeClass?: string;
+  removeOnDestroy?: boolean;
+}
+
+const defaultConfig: Required<MegamenuConfig> = {
+  dataToggle: "data-toggle",
+  activeClass: "is-active",
+  removeOnDestroy: false,
+};
+
+export default class Megamenu {
+  element!: HTMLElement;
+  config!: Required<MegamenuConfig>;
+  toggleButtons!: NodeListOf<HTMLButtonElement>;
+  dropdowns!: NodeListOf<HTMLElement>;
+  mobileMenuButton!: HTMLButtonElement | null;
+  mobileMenu!: HTMLElement | null;
+  mobileOverlay!: HTMLElement | null;
+  mobileCloseButton!: HTMLButtonElement | null;
+  desktopOverlay!: HTMLButtonElement | null;
+  accordionButtons!: NodeListOf<HTMLButtonElement>;
+  focusTrapHandler!: (event: KeyboardEvent) => void;
+  lastFocusedElement!: HTMLElement | null;
+  isKeyboardUser!: boolean;
+  keydownHandler!: (e: KeyboardEvent) => void;
+  mousedownHandler!: () => void;
+  touchstartHandler!: () => void;
+
+  constructor(element: HTMLElement, config: MegamenuConfig = {}) {
+    if ((element as any).ODS_Megamenu) {
+      return (element as any).ODS_Megamenu;
+    }
+
+    this.element = element;
+    this.config = { ...defaultConfig, ...config };
+
+    this.handleToggleClick = this.handleToggleClick.bind(this);
+    this.handleKeyPress = this.handleKeyPress.bind(this);
+    this.handleScroll = this.handleScroll.bind(this);
+    this.handleAccordionClick = this.handleAccordionClick.bind(this);
+    this.handleArrowNavigation = this.handleArrowNavigation.bind(this);
+    this.trapFocus = this.trapFocus.bind(this);
+
+    (this.element as any).ODS_Megamenu = this;
+
+    this.init();
+    return this;
+  }
+
+  static getInstance(el: HTMLElement): Megamenu | null {
+    return el && (el as any).ODS_Megamenu ? (el as any).ODS_Megamenu : null;
+  }
+
+  init() {
+    // Find all nav buttons with aria-controls attribute (dropdown buttons)
+    this.toggleButtons = this.element.querySelectorAll(
+      `.${CLASS_NAV_BUTTON}[aria-controls]`,
+    );
+    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;
+
+    // Find desktop overlay element
+    this.desktopOverlay = this.element.querySelector(
+      `.${CLASS_OVERLAY}`,
+    ) as HTMLButtonElement;
+
+    // Find accordion buttons
+    this.accordionButtons = this.element.querySelectorAll(
+      `.${CLASS_ACCORDION_BUTTON}`,
+    );
+
+    // Add click event listeners to toggle buttons
+    this.toggleButtons.forEach((button) => {
+      button.addEventListener("click", this.handleToggleClick);
+    });
+
+    // 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),
+      );
+    }
+
+    // Add desktop overlay event listener
+    if (this.desktopOverlay) {
+      this.desktopOverlay.addEventListener(
+        "click",
+        this.closeAllDropdowns.bind(this),
+      );
+    }
+
+    // Add accordion event listeners
+    this.accordionButtons.forEach((button) => {
+      button.addEventListener("click", this.handleAccordionClick);
+    });
+
+    // Add scoped event listeners to this element
+    this.element.addEventListener("keydown", this.handleKeyPress);
+    window.addEventListener("scroll", this.handleScroll);
+
+    // Track keyboard usage for proper focus management
+    this.isKeyboardUser = false;
+    this.keydownHandler = (e) => {
+      if (e.key === "Tab" || e.key === " " || e.key === "Enter") {
+        this.isKeyboardUser = true;
+      }
+    };
+    this.mousedownHandler = () => {
+      this.isKeyboardUser = false;
+    };
+    this.touchstartHandler = () => {
+      this.isKeyboardUser = false;
+    };
+
+    this.element.addEventListener("keydown", this.keydownHandler);
+    this.element.addEventListener("mousedown", this.mousedownHandler);
+    this.element.addEventListener("touchstart", this.touchstartHandler);
+
+    // Set initial tab indices for accessibility
+    this.updateTabIndices();
+  }
+
+  handleToggleClick(event: Event) {
+    const button = event.currentTarget as HTMLButtonElement;
+    const isActive = button.classList.contains(this.config.activeClass);
+
+    // Close all other dropdowns
+    this.closeAllDropdowns();
+
+    // Toggle current dropdown
+    if (!isActive) {
+      this.openDropdown(button);
+      // Keep focus on the button that opened the dropdown
+      // Users can navigate into the dropdown using arrow keys
+    } else {
+      // If closing, ensure focus remains on the button
+      button.focus();
+    }
+  }
+
+  handleKeyPress(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+      // Find the active dropdown button (the one with aria-expanded="true")
+      const activeButton = Array.from(this.toggleButtons).find(
+        (button) => button.getAttribute("aria-expanded") === "true",
+      );
+
+      this.closeAllDropdowns();
+      this.closeMobileMenu();
+      this.closeAllAccordions();
+
+      // Return focus to button that opened the menu
+      if (activeButton) {
+        activeButton.focus();
+      }
+    }
+
+    // Handle Enter and Space keys for dropdown buttons and accordion buttons
+    if (event.key === "Enter" || event.key === " ") {
+      const target = event.target as HTMLElement;
+      if (
+        (target.tagName === "BUTTON" && target.hasAttribute("aria-controls")) ||
+        target.classList.contains(CLASS_ACCORDION_BUTTON)
+      ) {
+        event.preventDefault();
+        target.click();
+      }
+    }
+
+    // Handle Home and End keys for navigation within dropdowns
+    if (event.key === "Home" || event.key === "End") {
+      const dropdown = (event.target as HTMLElement)?.closest(
+        `.${CLASS_NAV_DROPDOWN}`,
+      ) as HTMLElement;
+      if (dropdown) {
+        event.preventDefault();
+        const focusableElements = Array.from(
+          dropdown.querySelectorAll(
+            'a, button, [tabindex]:not([tabindex="-1"])',
+          ),
+        ) as HTMLElement[];
+
+        if (event.key === "Home" && focusableElements.length > 0) {
+          focusableElements[0].focus();
+        } else if (event.key === "End" && focusableElements.length > 0) {
+          focusableElements[focusableElements.length - 1].focus();
+        }
+      }
+    }
+
+    // Arrow key navigation for dropdowns and from buttons to dropdowns
+    if (event.key === "ArrowDown") {
+      const target = event.target as HTMLElement;
+
+      // If focus is on a dropdown button, move to first item in dropdown
+      if (target.tagName === "BUTTON" && target.hasAttribute("aria-controls")) {
+        const isExpanded = target.getAttribute("aria-expanded") === "true";
+        if (isExpanded) {
+          event.preventDefault();
+          const dropdown = target.parentElement?.querySelector(
+            `.${CLASS_NAV_DROPDOWN}`,
+          ) as HTMLElement;
+          const firstFocusable = dropdown?.querySelector(
+            "a, button",
+          ) as HTMLElement;
+          if (firstFocusable) {
+            firstFocusable.focus();
+          }
+        }
+      }
+      // If focus is within a dropdown, navigate within it
+      else {
+        const dropdown = target.closest(
+          `.${CLASS_NAV_DROPDOWN}`,
+        ) as HTMLElement;
+        if (dropdown) {
+          event.preventDefault();
+          this.handleArrowNavigation(event, dropdown);
+        }
+      }
+    }
+
+    if (event.key === "ArrowUp") {
+      const dropdown = (event.target as HTMLElement)?.closest(
+        `.${CLASS_NAV_DROPDOWN}`,
+      ) as HTMLElement;
+      if (dropdown) {
+        event.preventDefault();
+        this.handleArrowNavigation(event, dropdown);
+      }
+    }
+  }
+
+  handleAccordionClick(event: Event) {
+    const button = event.currentTarget as HTMLButtonElement;
+    const isExpanded = button.getAttribute("aria-expanded") === "true";
+
+    // Close all other accordions first
+    this.closeAllAccordions();
+
+    // Toggle current accordion
+    if (!isExpanded) {
+      this.openAccordion(button);
+    }
+  }
+
+  handleScroll() {
+    const topElement = this.element.querySelector(
+      '[data-hide-when-sticky="true"]',
+    ) as HTMLElement;
+
+    if (topElement) {
+      if (window.scrollY > 15) {
+        topElement.classList.add("is-hidden");
+        this.element.classList.add("top-hidden");
+      } else {
+        topElement.classList.remove("is-hidden");
+        this.element.classList.remove("top-hidden");
+      }
+    }
+  }
+
+  openDropdown(button: HTMLButtonElement) {
+    const dropdown = button.parentElement?.querySelector(
+      `.${CLASS_NAV_DROPDOWN}`,
+    ) as HTMLElement;
+
+    if (dropdown) {
+      button.classList.add(this.config.activeClass);
+      button.setAttribute("aria-expanded", "true");
+      dropdown.style.display = "block";
+      dropdown.classList.add("is-visible");
+      this.showDesktopOverlay();
+      this.updateTabIndices();
+    }
+  }
+
+  closeDropdown(button: HTMLButtonElement) {
+    const dropdown = button.parentElement?.querySelector(
+      `.${CLASS_NAV_DROPDOWN}`,
+    ) as HTMLElement;
+
+    if (dropdown) {
+      button.classList.remove(this.config.activeClass);
+      button.setAttribute("aria-expanded", "false");
+      dropdown.classList.remove("is-visible");
+      dropdown.style.display = "none";
+      this.updateTabIndices();
+    }
+  }
+
+  closeAllDropdowns() {
+    this.toggleButtons.forEach((button) => {
+      this.closeDropdown(button);
+    });
+    this.hideDesktopOverlay();
+  }
+
+  handleMobileMenuToggle(event: Event) {
+    event.preventDefault();
+    if (this.mobileMenu?.classList.contains(this.config.activeClass)) {
+      this.closeMobileMenu();
+    } else {
+      this.openMobileMenu();
+    }
+  }
+
+  openMobileMenu() {
+    if (this.mobileMenu) {
+      // Store the element that opened the menu for focus restoration
+      this.lastFocusedElement = document.activeElement as HTMLElement;
+
+      this.mobileMenu.classList.add(this.config.activeClass);
+      document.body.style.overflow = "hidden"; // Prevent background scrolling
+
+      // Set up focus trap immediately to prevent focus escape
+      this.trapFocus(this.mobileMenu);
+
+      // 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);
+        }
+      }
+    }
+  }
+
+  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();
+
+      // Return focus to element that opened the menu only for keyboard users
+      if (this.isKeyboardUser && this.lastFocusedElement) {
+        this.lastFocusedElement.focus();
+      }
+      this.lastFocusedElement = null;
+    }
+  }
+
+  showDesktopOverlay() {
+    if (this.desktopOverlay) {
+      this.desktopOverlay.classList.add(this.config.activeClass);
+    }
+  }
+
+  hideDesktopOverlay() {
+    if (this.desktopOverlay) {
+      this.desktopOverlay.classList.remove(this.config.activeClass);
+    }
+  }
+
+  openAccordion(button: HTMLButtonElement) {
+    const accordionId = button.getAttribute("aria-controls");
+    const accordionBody = accordionId
+      ? (this.element.querySelector(`#${accordionId}`) as HTMLElement)
+      : null;
+    const icon = button.querySelector(
+      `.${CLASS_ACCORDION_ICON}`,
+    ) as HTMLElement;
+
+    if (accordionBody) {
+      button.setAttribute("aria-expanded", "true");
+      button.classList.add(this.config.activeClass);
+      accordionBody.classList.add("is-visible");
+      accordionBody.style.display = "block";
+
+      if (icon) {
+        icon.classList.add(this.config.activeClass);
+      }
+    }
+  }
+
+  closeAccordion(button: HTMLButtonElement) {
+    const accordionId = button.getAttribute("aria-controls");
+    const accordionBody = accordionId
+      ? (this.element.querySelector(`#${accordionId}`) as HTMLElement)
+      : null;
+    const icon = button.querySelector(
+      `.${CLASS_ACCORDION_ICON}`,
+    ) as HTMLElement;
+
+    if (accordionBody) {
+      button.setAttribute("aria-expanded", "false");
+      button.classList.remove(this.config.activeClass);
+      accordionBody.classList.remove("is-visible");
+      accordionBody.style.display = "none";
+
+      if (icon) {
+        icon.classList.remove(this.config.activeClass);
+      }
+    }
+  }
+
+  closeAllAccordions() {
+    this.accordionButtons.forEach((button) => {
+      this.closeAccordion(button);
+    });
+  }
+
+  handleArrowNavigation(event: KeyboardEvent, dropdown: HTMLElement) {
+    const focusableElements = Array.from(
+      dropdown.querySelectorAll('a, button, [tabindex]:not([tabindex="-1"])'),
+    ) as HTMLElement[];
+
+    if (focusableElements.length === 0) return;
+
+    const currentIndex = focusableElements.findIndex(
+      (item) => item === event.target,
+    );
+
+    let nextIndex;
+    if (event.key === "ArrowDown") {
+      nextIndex =
+        currentIndex < focusableElements.length - 1 ? currentIndex + 1 : 0;
+    } else if (event.key === "ArrowUp") {
+      nextIndex =
+        currentIndex > 0 ? currentIndex - 1 : focusableElements.length - 1;
+    } else {
+      return; // Don't handle other keys
+    }
+
+    // Ensure nextIndex is valid
+    if (
+      nextIndex >= 0 &&
+      nextIndex < focusableElements.length &&
+      focusableElements[nextIndex]
+    ) {
+      focusableElements[nextIndex].focus();
+    }
+  }
+
+  trapFocus(element: HTMLElement) {
+    const focusableElements = element.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+    ) as NodeListOf<HTMLElement>;
+    const firstFocusable = focusableElements[0];
+    const lastFocusable = focusableElements[focusableElements.length - 1];
+
+    this.focusTrapHandler = (e: KeyboardEvent) => {
+      if (e.key === "Tab") {
+        if (e.shiftKey) {
+          if (document.activeElement === firstFocusable) {
+            e.preventDefault();
+            lastFocusable.focus();
+          }
+        } else {
+          if (document.activeElement === lastFocusable) {
+            e.preventDefault();
+            firstFocusable.focus();
+          }
+        }
+      }
+    };
+
+    element.addEventListener("keydown", this.focusTrapHandler);
+  }
+
+  removeFocusTrap() {
+    if (this.mobileMenu && this.focusTrapHandler) {
+      this.mobileMenu.removeEventListener("keydown", this.focusTrapHandler);
+    }
+  }
+
+  updateTabIndices() {
+    // Set tabindex=-1 for inactive dropdown items
+    this.dropdowns.forEach((dropdown) => {
+      const isVisible = dropdown.classList.contains("is-visible");
+      const focusableElements = dropdown.querySelectorAll(
+        "a, button, [tabindex]:not([tabindex='-1'])",
+      ) as NodeListOf<HTMLElement>;
+
+      focusableElements.forEach((element) => {
+        // Only update tabIndex if element is not already properly set
+        const shouldBeFocusable = isVisible;
+        if (shouldBeFocusable && element.tabIndex === -1) {
+          element.tabIndex = 0;
+        } else if (!shouldBeFocusable && element.tabIndex !== -1) {
+          element.tabIndex = -1;
+        }
+      });
+    });
+
+    // Also update mobile menu elements when mobile menu is active
+    if (this.mobileMenu) {
+      const isMobileMenuActive = this.mobileMenu.classList.contains(
+        this.config.activeClass,
+      );
+      const mobileMenuFocusableElements = this.mobileMenu.querySelectorAll(
+        "a, button, [tabindex]:not([tabindex='-1'])",
+      ) as NodeListOf<HTMLElement>;
+
+      mobileMenuFocusableElements.forEach((element) => {
+        element.tabIndex = isMobileMenuActive ? 0 : -1;
+      });
+    }
+  }
+
+  destroy() {
+    // Remove event listeners
+    this.toggleButtons.forEach((button) => {
+      button.removeEventListener("click", this.handleToggleClick);
+    });
+
+    // 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),
+      );
+    }
+
+    // Remove desktop overlay event listener
+    if (this.desktopOverlay) {
+      this.desktopOverlay.removeEventListener(
+        "click",
+        this.closeAllDropdowns.bind(this),
+      );
+    }
+
+    // Remove accordion event listeners
+    this.accordionButtons.forEach((button) => {
+      button.removeEventListener("click", this.handleAccordionClick);
+    });
+
+    this.element.removeEventListener("keydown", this.handleKeyPress);
+    window.removeEventListener("scroll", this.handleScroll);
+
+    // Remove keyboard tracking event listeners
+    this.element.removeEventListener("keydown", this.keydownHandler);
+    this.element.removeEventListener("mousedown", this.mousedownHandler);
+    this.element.removeEventListener("touchstart", this.touchstartHandler);
+
+    // Restore body overflow if menu was open
+    document.body.style.overflow = "";
+
+    // Clean up instance reference
+    (this.element as any).ODS_Megamenu = null;
+
+    if (this.config.removeOnDestroy) {
+      this.element.remove();
+    }
+  }
+}