mega-menu.js

  1. /* eslint-disable  class-methods-use-this */
  3. import { queryOne, queryAll } from '@ecl/dom-utils';
  4. import EventManager from '@ecl/event-manager';
  5. import isMobile from 'mobile-device-detect';
  6. import { createFocusTrap } from 'focus-trap';
  8. /**
  9.  * @param {HTMLElement} element DOM element for component instantiation and scope
  10.  * @param {Object} options
  11.  * @param {String} options.openSelector Selector for the hamburger button
  12.  * @param {String} options.backSelector Selector for the back button
  13.  * @param {String} options.innerSelector Selector for the menu inner
  14.  * @param {String} options.listSelector Selector for the menu items list
  15.  * @param {String} options.itemSelector Selector for the menu item
  16.  * @param {String} options.linkSelector Selector for the menu link
  17.  * @param {String} options.megaSelector Selector for the mega menu
  18.  * @param {String} options.subItemSelector Selector for the menu sub items
  19.  * @param {String} options.labelOpenAttribute The data attribute for open label
  20.  * @param {String} options.labelCloseAttribute The data attribute for close label
  21.  * @param {Boolean} options.attachClickListener Whether or not to bind click events
  22.  * @param {Boolean} options.attachHoverListener Whether or not to bind hover events
  23.  * @param {Boolean} options.attachFocusListener Whether or not to bind focus events
  24.  * @param {Boolean} options.attachKeyListener Whether or not to bind keyboard events
  25.  * @param {Boolean} options.attachResizeListener Whether or not to bind resize events
  26.  */
  27. export class MegaMenu {
  28.   /**
  29.    * @static
  30.    * Shorthand for instance creation and initialisation.
  31.    *
  32.    * @param {HTMLElement} root DOM element for component instantiation and scope
  33.    *
  34.    * @return {Menu} An instance of Menu.
  35.    */
  36.   static autoInit(root, { MEGA_MENU: defaultOptions = {} } = {}) {
  37.     const megaMenu = new MegaMenu(root, defaultOptions);
  38.     megaMenu.init();
  39.     root.ECLMegaMenu = megaMenu;
  40.     return megaMenu;
  41.   }
  43.   /**
  44.    *   @event MegaMenu#onOpen
  45.    */
  46.   /**
  47.    *   @event MegaMenu#onClose
  48.    */
  49.   /**
  50.    *   @event MegaMenu#onOpenPanel
  51.    */
  52.   /**
  53.    *   @event MegaMenu#onBack
  54.    */
  55.   /**
  56.    *   @event MegaMenu#onItemClick
  57.    */
  58.   /**
  59.    *   @event MegaMenu#onFocusTrapToggle
  60.    */
  62.   /**
  63.    * An array of supported events for this component.
  64.    *
  65.    * @type {Array<string>}
  66.    * @memberof MegaMenu
  67.    */
  68.   supportedEvents = ['onOpen', 'onClose'];
  70.   constructor(
  71.     element,
  72.     {
  73.       openSelector = '[data-ecl-mega-menu-open]',
  74.       backSelector = '[data-ecl-mega-menu-back]',
  75.       innerSelector = '[data-ecl-mega-menu-inner]',
  76.       listSelector = '[data-ecl-mega-menu-list]',
  77.       itemSelector = '[data-ecl-mega-menu-item]',
  78.       linkSelector = '[data-ecl-mega-menu-link]',
  79.       megaSelector = '[data-ecl-mega-menu-mega]',
  80.       containerSelector = 'data-ecl-has-container',
  81.       subItemSelector = '[data-ecl-mega-menu-subitem]',
  82.       featuredAttribute = '[data-ecl-mega-menu-featured]',
  83.       labelOpenAttribute = 'data-ecl-mega-menu-label-open',
  84.       labelCloseAttribute = 'data-ecl-mega-menu-label-close',
  85.       attachClickListener = true,
  86.       attachFocusListener = true,
  87.       attachKeyListener = true,
  88.       attachResizeListener = true,
  89.     } = {},
  90.   ) {
  91.     // Check element
  92.     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
  93.       throw new TypeError(
  94.         'DOM element should be given to initialize this widget.',
  95.       );
  96.     }
  98.     this.element = element;
  99.     this.eventManager = new EventManager();
  101.     // Options
  102.     this.openSelector = openSelector;
  103.     this.backSelector = backSelector;
  104.     this.innerSelector = innerSelector;
  105.     this.listSelector = listSelector;
  106.     this.itemSelector = itemSelector;
  107.     this.linkSelector = linkSelector;
  108.     this.megaSelector = megaSelector;
  109.     this.subItemSelector = subItemSelector;
  110.     this.containerSelector = containerSelector;
  111.     this.labelOpenAttribute = labelOpenAttribute;
  112.     this.labelCloseAttribute = labelCloseAttribute;
  113.     this.attachClickListener = attachClickListener;
  114.     this.attachFocusListener = attachFocusListener;
  115.     this.attachKeyListener = attachKeyListener;
  116.     this.attachResizeListener = attachResizeListener;
  117.     this.featuredAttribute = featuredAttribute;
  119.     // Private variables
  120.     this.direction = 'ltr';
  121.     this.open = null;
  122.     this.toggleLabel = null;
  123.     this.back = null;
  124.     this.inner = null;
  125.     this.itemsList = null;
  126.     this.items = null;
  127.     this.links = null;
  128.     this.isOpen = false;
  129.     this.resizeTimer = null;
  130.     this.isKeyEvent = false;
  131.     this.isDesktop = false;
  132.     this.isLarge = false;
  133.     this.lastVisibleItem = null;
  134.     this.currentItem = null;
  135.     this.totalItemsWidth = 0;
  136.     this.breakpointL = 996;
  137.     this.openPanel = { num: 0, item: {} };
  139.     // Bind `this` for use in callbacks
  140.     this.handleClickOnOpen = this.handleClickOnOpen.bind(this);
  141.     this.handleClickOnClose = this.handleClickOnClose.bind(this);
  142.     this.handleClickOnToggle = this.handleClickOnToggle.bind(this);
  143.     this.handleClickOnBack = this.handleClickOnBack.bind(this);
  144.     this.handleClickGlobal = this.handleClickGlobal.bind(this);
  145.     this.handleClickOnItem = this.handleClickOnItem.bind(this);
  146.     this.handleClickOnSubitem = this.handleClickOnSubitem.bind(this);
  147.     this.handleFocusOut = this.handleFocusOut.bind(this);
  148.     this.handleKeyboard = this.handleKeyboard.bind(this);
  149.     this.handleKeyboardGlobal = this.handleKeyboardGlobal.bind(this);
  150.     this.handleResize = this.handleResize.bind(this);
  151.     this.useDesktopDisplay = this.useDesktopDisplay.bind(this);
  152.     this.checkMegaMenu = this.checkMegaMenu.bind(this);
  153.     this.closeOpenDropdown = this.closeOpenDropdown.bind(this);
  154.     this.checkDropdownHeight = this.checkDropdownHeight.bind(this);
  155.     this.positionMenuOverlay = this.positionMenuOverlay.bind(this);
  156.     this.resetStyles = this.resetStyles.bind(this);
  157.     this.handleFirstPanel = this.handleFirstPanel.bind(this);
  158.     this.handleSecondPanel = this.handleSecondPanel.bind(this);
  159.     this.disableScroll = this.disableScroll.bind(this);
  160.     this.enableScroll = this.enableScroll.bind(this);
  161.   }
  163.   /**
  164.    * Initialise component.
  165.    */
  166.   init() {
  167.     if (!ECL) {
  168.       throw new TypeError('Called init but ECL is not present');
  169.     }
  170.     ECL.components = ECL.components || new Map();
  172.     // Query elements
  173.     this.open = queryOne(this.openSelector, this.element);
  174.     this.toggleLabel = queryOne('.ecl-link__label', this.open);
  175.     this.back = queryOne(this.backSelector, this.element);
  176.     this.inner = queryOne(this.innerSelector, this.element);
  177.     this.itemsList = queryOne(this.listSelector, this.element);
  178.     this.btnPrevious = queryOne(this.buttonPreviousSelector, this.element);
  179.     this.btnNext = queryOne(this.buttonNextSelector, this.element);
  180.     this.items = queryAll(this.itemSelector, this.element);
  181.     this.subItems = queryAll(this.subItemSelector, this.element);
  182.     this.links = queryAll(this.linkSelector, this.element);
  184.     // Check if we should use desktop display (it does not rely only on breakpoints)
  185.     this.isDesktop = this.useDesktopDisplay();
  187.     // Bind click events on buttons
  188.     if (this.attachClickListener) {
  189.       // Open
  190.       if (this.open) {
  191.         this.open.addEventListener('click', this.handleClickOnToggle);
  192.       }
  194.       // Back
  195.       if (this.back) {
  196.         this.back.addEventListener('click', this.handleClickOnBack);
  197.         this.back.addEventListener('keyup', this.handleKeyboard);
  198.       }
  200.       // Global click
  201.       if (this.attachClickListener) {
  202.         document.addEventListener('click', this.handleClickGlobal);
  203.       }
  204.     }
  206.     // Bind event on menu links
  207.     if (this.links) {
  208.       this.links.forEach((link) => {
  209.         if (this.attachFocusListener) {
  210.           link.addEventListener('focusout', this.handleFocusOut);
  211.         }
  212.         if (this.attachKeyListener) {
  213.           link.addEventListener('keyup', this.handleKeyboard);
  214.         }
  215.       });
  216.     }
  218.     // Bind event on sub menu links
  219.     if (this.subItems) {
  220.       this.subItems.forEach((subItem) => {
  221.         const subLink = queryOne('.ecl-mega-menu__sublink', subItem);
  223.         if (this.attachKeyListener && subLink) {
  224.           subLink.addEventListener('click', this.handleClickOnSubitem);
  225.           subLink.addEventListener('keyup', this.handleKeyboard);
  226.         }
  227.         if (this.attachFocusListener && subLink) {
  228.           subLink.addEventListener('focusout', this.handleFocusOut);
  229.         }
  230.       });
  231.     }
  233.     const seeAllLinks = queryAll('.ecl-mega-menu__see-all a', this.element);
  234.     if (seeAllLinks.length > 0) {
  235.       seeAllLinks.forEach((seeAll) => {
  236.         seeAll.addEventListener('keyup', this.handleKeyboard);
  237.         seeAll.addEventListener('blur', this.handleFocusOut);
  238.       });
  239.     }
  241.     // Bind global keyboard events
  242.     if (this.attachKeyListener) {
  243.       document.addEventListener('keyup', this.handleKeyboardGlobal);
  244.     }
  246.     // Bind resize events
  247.     if (this.attachResizeListener) {
  248.       window.addEventListener('resize', this.handleResize);
  249.     }
  251.     // Browse first level items
  252.     if (this.items) {
  253.       this.items.forEach((item) => {
  254.         // Check menu item display (right to left, full width, ...)
  255.         this.totalItemsWidth += item.offsetWidth;
  257.         if (
  258.           item.hasAttribute('data-ecl-has-children') ||
  259.           item.hasAttribute('data-ecl-has-container')
  260.         ) {
  261.           // Bind click event on menu items
  262.           if (this.attachClickListener) {
  263.             item.addEventListener('click', this.handleClickOnItem);
  264.           }
  265.         }
  266.       });
  267.     }
  269.     // Create a focus trap around the menu
  270.     this.focusTrap = createFocusTrap(this.element, {
  271.       onActivate: () =>
  272.         this.element.classList.add('ecl-mega-menu-trap-is-active'),
  273.       onDeactivate: () =>
  274.         this.element.classList.remove('ecl-mega-menu-trap-is-active'),
  275.     });
  277.     this.handleResize();
  278.     // Set ecl initialized attribute
  279.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  280.     ECL.components.set(this.element, this);
  281.   }
  283.   /**
  284.    * Register a callback function for a specific event.
  285.    *
  286.    * @param {string} eventName - The name of the event to listen for.
  287.    * @param {Function} callback - The callback function to be invoked when the event occurs.
  288.    * @returns {void}
  289.    * @memberof MegaMenu
  290.    * @instance
  291.    *
  292.    * @example
  293.    * // Registering a callback for the 'onOpen' event
  294.    * megaMenu.on('onOpen', (event) => {
  295.    *   console.log('Open event occurred!', event);
  296.    * });
  297.    */
  298.   on(eventName, callback) {
  299.     this.eventManager.on(eventName, callback);
  300.   }
  302.   /**
  303.    * Trigger a component event.
  304.    *
  305.    * @param {string} eventName - The name of the event to trigger.
  306.    * @param {any} eventData - Data associated with the event.
  307.    * @memberof MegaMenu
  308.    */
  309.   trigger(eventName, eventData) {
  310.     this.eventManager.trigger(eventName, eventData);
  311.   }
  313.   /**
  314.    * Destroy component.
  315.    */
  316.   destroy() {
  317.     if (this.attachClickListener) {
  318.       if (this.open) {
  319.         this.open.removeEventListener('click', this.handleClickOnToggle);
  320.       }
  322.       if (this.back) {
  323.         this.back.removeEventListener('click', this.handleClickOnBack);
  324.       }
  326.       if (this.attachClickListener) {
  327.         document.removeEventListener('click', this.handleClickGlobal);
  328.       }
  329.     }
  331.     if (this.items && this.isDesktop) {
  332.       this.items.forEach((item) => {
  333.         if (
  334.           item.hasAttribute('data-ecl-has-children') ||
  335.           item.hasAttribute('data-ecl-has-container')
  336.         ) {
  337.           if (this.attachClickListener) {
  338.             item.removeEventListener('click', this.handleClickOnItem);
  339.           }
  340.         }
  341.       });
  342.     }
  344.     if (this.links) {
  345.       this.links.forEach((link) => {
  346.         if (this.attachFocusListener) {
  347.           link.removeEventListener('focusout', this.handleFocusOut);
  348.         }
  349.         if (this.attachKeyListener) {
  350.           link.removeEventListener('keyup', this.handleKeyboard);
  351.         }
  352.       });
  353.     }
  355.     if (this.subItems) {
  356.       this.subItems.forEach((subItem) => {
  357.         const subLink = queryOne('.ecl-mega-menu__sublink', subItem);
  358.         if (this.attachKeyListener && subLink) {
  359.           subLink.removeEventListener('keyup', this.handleKeyboard);
  360.         }
  361.         if (this.attachClickListener && subLink) {
  362.           subLink.removeEventListener('click', this.handleClickOnSubitem);
  363.         }
  364.         if (this.attachFocusListener && subLink) {
  365.           subLink.removeEventListener('focusout', this.handleFocusOut);
  366.         }
  367.       });
  368.     }
  370.     if (this.attachKeyListener) {
  371.       document.removeEventListener('keyup', this.handleKeyboardGlobal);
  372.     }
  374.     if (this.attachResizeListener) {
  375.       window.removeEventListener('resize', this.handleResize);
  376.     }
  378.     this.closeOpenDropdown();
  379.     this.enableScroll();
  381.     if (this.element) {
  382.       this.element.removeAttribute('data-ecl-auto-initialized');
  383.       ECL.components.delete(this.element);
  384.     }
  385.   }
  387.   /**
  388.    * Disable page scrolling
  389.    */
  390.   disableScroll() {
  391.     document.body.classList.add('ecl-mega-menu-prevent-scroll');
  392.   }
  394.   /**
  395.    * Enable page scrolling
  396.    */
  397.   enableScroll() {
  398.     document.body.classList.remove('ecl-mega-menu-prevent-scroll');
  399.   }
  401.   /**
  402.    * Check if desktop display has to be used
  403.    * - not using a phone or tablet (whatever the screen size is)
  404.    * - not having hamburger menu on screen
  405.    */
  406.   useDesktopDisplay() {
  407.     // Detect mobile devices
  408.     if (isMobile.isMobileOnly) {
  409.       return false;
  410.     }
  412.     // Force mobile display on tablet
  413.     if (isMobile.isTablet) {
  414.       this.element.classList.add('ecl-mega-menu--forced-mobile');
  415.       return false;
  416.     }
  418.     // After all that, check if the hamburger button is displayed
  419.     if (window.innerWidth < this.breakpointL) {
  420.       return false;
  421.     }
  423.     // Everything is fine to use desktop display
  424.     this.element.classList.remove('ecl-mega-menu--forced-mobile');
  425.     return true;
  426.   }
  428.   /**
  429.    * Reset the styles set by the script
  430.    *
  431.    * @param {string} desktop or mobile
  432.    */
  433.   resetStyles(viewport) {
  434.     const subLists = queryAll('.ecl-mega-menu__sublist', this.element);
  435.     // Remove display:none from the sublists
  436.     if (subLists && viewport === 'mobile') {
  437.       subLists.forEach((list) => {
  438.         list.style.height = '';
  439.       });
  440.       // Two panels are opened
  441.       if (this.openPanel.num === 2) {
  442.         const menuItem = this.openPanel.item;
  443.         // Hide parent link in the first panel
  444.         menuItem.parentNode.parentNode.firstElementChild.style.display = 'none';
  445.         // Remove duplicated border
  446.         menuItem.parentNode.classList.add('ecl-mega-menu__sublist--no-border');
  447.         // Hide siblings
  448.         const siblings = menuItem.parentNode.childNodes;
  449.         siblings.forEach((sibling) => {
  450.           if (sibling !== menuItem) {
  451.             sibling.style.display = 'none';
  452.           }
  453.         });
  454.       }
  455.     } else if (subLists && viewport === 'desktop') {
  456.       const parentLinks = queryAll('.ecl-mega-menu__parent-link');
  457.       if (parentLinks) {
  458.         // Reset the display for the parent links, they could be hidden
  459.         parentLinks.forEach((parent) => {
  460.           parent.style.display = '';
  461.         });
  462.       }
  463.       // Reset styles for the sublist and subitems
  464.       subLists.forEach((list) => {
  465.         if (!this.isLarge) {
  466.           list.parentNode.classList.remove('ecl-mega-menu__item--col2');
  467.         }
  468.         list.classList.remove('ecl-mega-menu__sublist--no-border');
  469.         list.childNodes.forEach((item) => {
  470.           item.style.display = '';
  471.         });
  472.       });
  473.       // Check if we have an open item, if we don't hide the overlay and enable scroll
  474.       const currentItems = [];
  475.       const currentItem = queryOne(
  476.         '.ecl-mega-menu__subitem--expanded',
  477.         this.element,
  478.       );
  479.       if (currentItem) {
  480.         currentItems.push(currentItem);
  481.       }
  483.       const currentSubItem = queryOne(
  484.         '.ecl-mega-menu__item--expanded',
  485.         this.element,
  486.       );
  487.       if (currentSubItem) {
  488.         currentItems.push(currentSubItem);
  489.       }
  490.       if (currentItems.length > 0) {
  491.         currentItems.forEach((current) => {
  492.           this.checkDropdownHeight(current);
  493.         });
  494.       } else {
  495.         this.element.setAttribute('aria-expanded', 'false');
  496.         this.element.removeAttribute('data-expanded');
  497.         this.enableScroll();
  498.       }
  499.     }
  500.   }
  502.   /**
  503.    * Trigger events on resize
  504.    * Uses a debounce, for performance
  505.    */
  506.   handleResize() {
  507.     clearTimeout(this.resizeTimer);
  508.     this.resizeTimer = setTimeout(() => {
  509.       const screenWidth = window.innerWidth;
  511.       if (this.prevScreenWidth !== undefined) {
  512.         // Check if the transition involves crossing the L breakpoint
  513.         const isTransition =
  514.           (this.prevScreenWidth <= this.breakpointL &&
  515.             screenWidth > this.breakpointL) ||
  516.           (this.prevScreenWidth > this.breakpointL &&
  517.             screenWidth <= this.breakpointL);
  518.         // If we are moving in or out the L breakpoint, reset the styles
  519.         if (isTransition) {
  520.           this.resetStyles(
  521.             screenWidth > this.breakpointL ? 'desktop' : 'mobile',
  522.           );
  523.         }
  524.       }
  525.       this.isDesktop = this.useDesktopDisplay();
  526.       this.isLarge = window.innerWidth > 1140;
  527.       // Update previous screen width
  528.       this.prevScreenWidth = screenWidth;
  529.       this.element.classList.remove('ecl-mega-menu--forced-mobile');
  530.       // RTL
  531.       this.direction = getComputedStyle(this.element).direction;
  532.       if (this.direction === 'rtl') {
  533.         this.element.classList.add('ecl-mega-menu--rtl');
  534.       } else {
  535.         this.element.classList.remove('ecl-mega-menu--rtl');
  536.       }
  537.       // Check droopdown height if needed
  538.       const expanded = queryOne('.ecl-mega-menu__item--expanded', this.element);
  539.       if (expanded && this.isDesktop) {
  540.         this.checkDropdownHeight(expanded);
  541.       }
  542.       if (this.openPanel.num === 2 && this.openPanel.item) {
  543.         this.checkMegaMenu(this.openPanel.item);
  544.       }
  545.       // Check the menu position
  546.       this.positionMenuOverlay();
  547.     }, 200);
  548.   }
  550.   /**
  551.    * Calculate dropdown height dynamically
  552.    *
  553.    * @param {Node} menuItem
  554.    */
  555.   checkDropdownHeight(menuItem) {
  556.     setTimeout(() => {
  557.       const viewportHeight = window.innerHeight;
  558.       let dropdown = queryOne('.ecl-mega-menu__sublist', menuItem);
  560.       if (!dropdown) {
  561.         dropdown = queryOne('.ecl-mega-menu__mega-container', menuItem);
  562.       }
  564.       if (dropdown) {
  565.         const dropdownTop = dropdown.getBoundingClientRect().top;
  566.         let dropdownHeight = viewportHeight - dropdownTop;
  567.         const lastItem = queryOne('.ecl-mega-menu__see-all', dropdown);
  568.         // Arbitrary, but doing this prevents a misalignment between the two panels
  569.         if (lastItem) {
  570.           dropdownHeight -= 20;
  571.         }
  572.         dropdown.style.height = `${dropdownHeight}px`;
  573.       }
  574.     }, 100);
  575.   }
  577.   /**
  578.    * Dinamically set the position of the menu overlay
  579.    */
  580.   positionMenuOverlay() {
  581.     const menuOverlay = queryOne('.ecl-mega-menu__overlay', this.element);
  582.     const megaMenus = queryAll(
  583.       '.ecl-mega-menu__item > .ecl-mega-menu__mega',
  584.       this.element,
  585.     );
  586.     if (!this.isDesktop) {
  587.       // In mobile, we get the bottom position of the site header header
  588.       setTimeout(() => {
  589.         const header = queryOne('.ecl-site-header__header', document);
  590.         if (header) {
  591.           const position = header.getBoundingClientRect();
  592.           const bottomPosition = Math.round(position.bottom);
  593.           if (menuOverlay) {
  594.             menuOverlay.style.top = `${bottomPosition}px`;
  595.           }
  596.           if (this.inner) {
  597.             this.inner.style.top = `${bottomPosition}px`;
  598.           }
  599.           if (megaMenus) {
  600.             megaMenus.forEach((mega) => {
  601.               mega.style.top = '';
  602.             });
  603.           }
  604.         }
  605.       }, 0);
  606.     } else {
  607.       setTimeout(() => {
  608.         // In desktop we get the bottom position of the whole site header
  609.         const siteHeader = queryOne('.ecl-site-header', document);
  610.         if (siteHeader) {
  611.           const headerRect = siteHeader.getBoundingClientRect();
  612.           const headerBottom = headerRect.bottom;
  613.           const item = queryOne(this.itemSelector, this.element);
  614.           const rect = item.getBoundingClientRect();
  615.           const rectHeight = rect.height + 4; // 4 pixels border
  617.           if (megaMenus) {
  618.             megaMenus.forEach((mega) => {
  619.               mega.style.top = `${rectHeight}px`;
  620.             });
  621.           }
  622.           if (menuOverlay) {
  623.             menuOverlay.style.top = `${headerBottom}px`;
  624.           }
  625.         } else {
  626.           const bottomPosition = this.element.getBoundingClientRect().bottom;
  627.           if (menuOverlay) {
  628.             menuOverlay.style.top = `${bottomPosition}px`;
  629.           }
  630.           if (megaMenus) {
  631.             megaMenus.forEach((mega) => {
  632.               mega.style.top = `${bottomPosition}px`;
  633.             });
  634.           }
  635.         }
  636.       }, 0);
  637.     }
  638.   }
  640.   /**
  641.    * Clone the selected item to show it on top of the panel.
  642.    *
  643.    * @param {Node} menuItem
  644.    */
  645.   cloneItemInTheDrowdown(menuItem) {
  646.     const firstItemLink = queryOne('.ecl-link', menuItem).cloneNode(true);
  647.     const svg = queryOne('.ecl-icon use', firstItemLink);
  648.     if (svg) {
  649.       const hrefValue = svg.getAttribute('xlink:href');
  650.       if (hrefValue) {
  651.         const newHrefValue = hrefValue.replace('corner-arrow', 'arrow-left');
  652.         svg.parentElement.classList.add(
  653.           'ecl-icon--flip-horizontal',
  654.           'ecl-icon--xs',
  655.         );
  656.         svg.parentElement.classList.remove(
  657.           'ecl-icon--2xs',
  658.           'ecl-icon--rotate-180',
  659.         );
  660.         svg.setAttributeNS(
  661.           'http://www.w3.org/1999/xlink',
  662.           'xlink:href',
  663.           newHrefValue,
  664.         );
  665.       }
  666.       if (firstItemLink.id) {
  667.         firstItemLink.id = `${firstItemLink.id}-parent`;
  668.       }
  669.       const ariaLabel = menuItem.getAttribute('data-ecl-parent-aria-label');
  670.       if (ariaLabel) {
  671.         firstItemLink.setAttribute('aria-label', ariaLabel);
  672.       }
  673.       firstItemLink.classList.add('ecl-mega-menu__parent-link');
  674.       firstItemLink.addEventListener('keyup', this.handleKeyboard);
  675.       let innerList = queryOne('.ecl-mega-menu__mega', menuItem);
  676.       if (!innerList) {
  677.         innerList = queryOne('.ecl-mega-menu__mega-container', menuItem);
  678.       }
  679.       if (innerList && !queryOne('.ecl-mega-menu__parent-link', menuItem)) {
  680.         innerList.prepend(firstItemLink);
  681.       }
  682.     }
  683.   }
  685.   /**
  686.    * Handle second panel columns
  687.    *
  688.    * @param {Node} menuItem
  689.    */
  690.   checkMegaMenu(menuItem) {
  691.     const menuMega = queryOne(this.megaSelector, menuItem);
  692.     if (menuMega && this.inner && this.isLarge) {
  693.       const subItems = queryAll(`${this.subItemSelector} a`, menuMega);
  694.       let itemsHeight = 0;
  695.       subItems.forEach((item) => {
  696.         itemsHeight += item.getBoundingClientRect().height;
  697.       });
  698.       const lastItem = queryOne('.ecl-mega-menu__see-all', menuMega);
  699.       if (lastItem) {
  700.         // Arbitrary, but does the job.
  701.         itemsHeight += 150;
  702.       }
  703.       const containerBounding = this.inner.getBoundingClientRect();
  704.       const containerBottom = containerBounding.bottom;
  705.       const availableHeight = window.innerHeight - containerBottom;
  707.       if (itemsHeight > availableHeight) {
  708.         menuMega.classList.add('ecl-mega-menu__item--col2');
  709.       }
  710.     } else if (menuMega) {
  711.       menuMega.classList.remove('ecl-mega-menu__item--col2');
  712.     }
  713.   }
  715.   /**
  716.    * Handles keyboard events specific to the menu.
  717.    *
  718.    * @param {Event} e
  719.    */
  720.   handleKeyboard(e) {
  721.     const element = e.target;
  722.     const cList = element.classList;
  723.     const menuExpanded = this.element.getAttribute('aria-expanded');
  725.     // Detect press on Escape
  726.     if (e.key === 'Escape' || e.key === 'Esc') {
  727.       if (document.activeElement === element) {
  728.         element.blur();
  729.       }
  731.       if (menuExpanded === 'false') {
  732.         this.closeOpenDropdown();
  733.       }
  734.       return;
  735.     }
  736.     // Handle keyboard on parent links
  737.     if (cList.contains('ecl-mega-menu__parent-link')) {
  738.       if (e.key === 'ArrowUp') {
  739.         if (this.isDesktop) {
  740.           // Focus the first level menu item
  741.           element
  742.             .closest('.ecl-mega-menu__item--expanded')
  743.             .firstElementChild.focus();
  744.         } else {
  745.           // In mobile focus on the back button
  746.           this.back.focus();
  747.         }
  748.       }
  749.       if (e.key === 'ArrowDown') {
  750.         // Focus on the first sub-link
  751.         element.nextSibling.firstElementChild.firstElementChild.focus();
  752.       }
  753.     }
  754.     // Handle keyboard on the see all links
  755.     if (element.parentElement.classList.contains('ecl-mega-menu__see-all')) {
  756.       if (e.key === 'ArrowUp') {
  757.         // Focus on the last element of the sub-list
  758.         element.parentElement.previousSibling.firstChild.focus();
  759.       }
  760.     }
  761.     // Handle keyboard on the back button
  762.     if (cList.contains('ecl-mega-menu__back')) {
  763.       if (e.key === 'ArrowDown') {
  764.         e.preventDefault();
  765.         const expanded = queryOne(
  766.           '[aria-expanded="true"]',
  767.           element.parentElement.nextSibling,
  768.         );
  769.         // We have an opened list
  770.         if (expanded) {
  771.           const innerExpanded = queryOne('[aria-expanded="true"]', expanded);
  772.           // We have an opened sub-list
  773.           if (innerExpanded) {
  774.             queryOne('.ecl-mega-menu__parent-link', innerExpanded).focus();
  775.           } else {
  776.             queryOne('.ecl-mega-menu__parent-link', expanded).focus();
  777.           }
  778.         }
  779.       }
  780.       if (e.key === 'ArrowUp') {
  781.         // Focus on the open button
  782.         this.open.focus();
  783.       }
  784.     }
  785.     // Key actions to navigate between first level menu items
  786.     if (cList.contains('ecl-mega-menu__link')) {
  787.       if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
  788.         e.preventDefault();
  789.         let prevItem = element.previousSibling;
  791.         if (prevItem && prevItem.classList.contains('ecl-mega-menu__link')) {
  792.           prevItem.focus();
  793.           return;
  794.         }
  796.         prevItem = element.parentElement.previousSibling;
  797.         if (prevItem) {
  798.           const prevLink = queryOne('.ecl-mega-menu__link', prevItem);
  800.           if (prevLink) {
  801.             prevLink.focus();
  802.             return;
  803.           }
  804.         }
  805.       }
  806.       if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
  807.         e.preventDefault();
  808.         if (
  809.           element.parentElement.getAttribute('aria-expanded') === 'true' &&
  810.           e.key === 'ArrowDown'
  811.         ) {
  812.           const parentLink = queryOne(
  813.             '.ecl-mega-menu__parent-link',
  814.             element.parentElement,
  815.           );
  816.           if (parentLink) {
  817.             parentLink.focus();
  818.             return;
  819.           }
  820.         }
  821.         const nextItem = element.parentElement.nextSibling;
  822.         if (nextItem) {
  823.           const nextLink = queryOne('.ecl-mega-menu__link', nextItem);
  825.           if (nextLink) {
  826.             nextLink.focus();
  827.             return;
  828.           }
  829.         }
  830.       }
  831.     }
  832.     // Key actions to navigate between the sub-links
  833.     if (cList.contains('ecl-mega-menu__sublink')) {
  834.       if (e.key === 'ArrowDown') {
  835.         e.preventDefault();
  836.         const nextItem = element.parentElement.nextSibling;
  837.         let nextLink = '';
  838.         if (nextItem) {
  839.           nextLink = queryOne('.ecl-mega-menu__sublink', nextItem);
  840.           if (
  841.             !nextLink &&
  842.             nextItem.classList.contains('ecl-mega-menu__see-all')
  843.           ) {
  844.             nextLink = nextItem.firstElementChild;
  845.           }
  846.           if (nextLink) {
  847.             nextLink.focus();
  848.             return;
  849.           }
  850.         }
  851.       }
  852.       if (e.key === 'ArrowUp') {
  853.         e.preventDefault();
  854.         const prevItem = element.parentElement.previousSibling;
  855.         if (prevItem) {
  856.           const prevLink = queryOne('.ecl-mega-menu__sublink', prevItem);
  858.           if (prevLink) {
  859.             prevLink.focus();
  860.           }
  861.         } else {
  862.           element.parentElement.parentElement.previousSibling.focus();
  863.         }
  864.       }
  865.     }
  866.     if (e.key === 'ArrowRight') {
  867.       const expanded =
  868.         element.parentElement.getAttribute('aria-expanded') === 'true';
  869.       if (expanded) {
  870.         e.preventDefault();
  871.         // Focus on the first element in the second panel
  872.         element.nextSibling.firstElementChild.focus();
  873.       }
  874.     }
  875.   }
  877.   /**
  878.    * Handles global keyboard events, triggered outside of the menu.
  879.    *
  880.    * @param {Event} e
  881.    */
  882.   handleKeyboardGlobal(e) {
  883.     const menuExpanded = this.element.getAttribute('aria-expanded');
  885.     // Detect press on Escape
  886.     if (e.key === 'Escape' || e.key === 'Esc') {
  887.       if (menuExpanded === 'true') {
  888.         this.closeOpenDropdown();
  889.       }
  890.     }
  891.   }
  893.   /**
  894.    * Open menu list.
  895.    *
  896.    * @param {Event} e
  897.    *
  898.    * @fires MegaMenu#onOpen
  899.    */
  900.   handleClickOnOpen(e) {
  901.     if (this.element.getAttribute('aria-expanded') === 'true') {
  902.       this.handleClickOnClose(e);
  903.     } else {
  904.       e.preventDefault();
  905.       this.disableScroll();
  906.       this.element.setAttribute('aria-expanded', 'true');
  907.       this.inner.setAttribute('aria-hidden', 'false');
  908.       this.isOpen = true;
  909.       this.openPanel.num = 1;
  911.       // Update label
  912.       const closeLabel = this.element.getAttribute(this.labelCloseAttribute);
  913.       if (this.toggleLabel && closeLabel) {
  914.         this.toggleLabel.innerHTML = closeLabel;
  915.       }
  917.       this.trigger('onOpen', e);
  918.     }
  919.   }
  921.   /**
  922.    * Close menu list.
  923.    *
  924.    * @param {Event} e
  925.    *
  926.    * @fires Menu#onClose
  927.    */
  928.   handleClickOnClose(e) {
  929.     if (this.element.getAttribute('aria-expanded') === 'true') {
  930.       this.focusTrap.deactivate();
  931.       this.closeOpenDropdown();
  932.       this.trigger('onClose', e);
  933.     } else {
  934.       this.handleClickOnOpen(e);
  935.     }
  936.   }
  938.   /**
  939.    * Toggle menu list.
  940.    *
  941.    * @param {Event} e
  942.    */
  943.   handleClickOnToggle(e) {
  944.     e.preventDefault();
  946.     if (this.isOpen) {
  947.       this.handleClickOnClose(e);
  948.     } else {
  949.       this.handleClickOnOpen(e);
  950.     }
  951.   }
  953.   /**
  954.    * Get back to previous list (on mobile)
  955.    *
  956.    * @fires MegaMenu#onBack
  957.    */
  958.   handleClickOnBack() {
  959.     const level2 = queryOne('.ecl-mega-menu__subitem--expanded', this.element);
  960.     if (level2) {
  961.       const parentLinks = queryAll('.ecl-mega-menu__parent-link', this.element);
  962.       if (parentLinks) {
  963.         parentLinks.forEach((parent) => {
  964.           parent.style.display = '';
  965.         });
  966.       }
  967.       const sublists = queryAll('.ecl-mega-menu__sublist');
  968.       if (sublists) {
  969.         sublists.forEach((sublist) => {
  970.           sublist.classList.remove('ecl-mega-menu__sublist--no-border');
  971.         });
  972.       }
  973.       level2.setAttribute('aria-expanded', 'false');
  974.       level2.classList.remove(
  975.         'ecl-mega-menu__subitem--expanded',
  976.         'ecl-mega-menu__subitem--current',
  977.       );
  978.       const siblings = level2.parentElement.childNodes;
  979.       if (siblings) {
  980.         siblings.forEach((sibling) => {
  981.           sibling.style.display = '';
  982.         });
  983.       }
  984.       // Move focus on the parent link of the opened list
  985.       const expanded = queryOne('.ecl-mega-menu__item--expanded', this.element);
  986.       queryOne('.ecl-mega-menu__parent-link', expanded).focus();
  987.       this.openPanel.num = 1;
  988.     } else {
  989.       // Remove expanded class from inner menu
  990.       this.inner.classList.remove('ecl-mega-menu__inner--expanded');
  991.       // Remove css class and attribute from menu items
  992.       this.items.forEach((item) => {
  993.         item.classList.remove(
  994.           'ecl-mega-menu__item--expanded',
  995.           'ecl-mega-menu__item--current',
  996.         );
  997.         item.setAttribute('aria-expanded', 'false');
  998.       });
  999.       // Move the focus to the first item in the menu
  1000.       this.items[0].firstElementChild.focus();
  1001.       this.openPanel.num = 0;
  1002.     }
  1004.     this.trigger('onBack', { level: level2 ? 2 : 1 });
  1005.   }
  1007.   /**
  1008.    * Show/hide the first panel
  1009.    *
  1010.    * @param {Node} menuItem
  1011.    * @param {string} op (expand or collapse)
  1012.    *
  1013.    * @fires MegaMenu#onOpenPanel
  1014.    */
  1015.   handleFirstPanel(menuItem, op) {
  1016.     switch (op) {
  1017.       case 'expand': {
  1018.         this.inner.classList.add('ecl-mega-menu__inner--expanded');
  1019.         this.positionMenuOverlay();
  1020.         this.cloneItemInTheDrowdown(menuItem);
  1021.         this.checkDropdownHeight(menuItem);
  1022.         this.element.setAttribute('data-expanded', true);
  1023.         this.element.setAttribute('aria-expanded', 'true');
  1024.         this.disableScroll();
  1025.         this.items.forEach((item) => {
  1026.           if (item.hasAttribute('aria-expanded')) {
  1027.             if (item === menuItem) {
  1028.               item.classList.add(
  1029.                 'ecl-mega-menu__item--expanded',
  1030.                 'ecl-mega-menu__item--current',
  1031.               );
  1032.               item.setAttribute('aria-expanded', 'true');
  1033.             } else {
  1034.               item.setAttribute('aria-expanded', 'false');
  1035.               item.classList.remove(
  1036.                 'ecl-mega-menu__item--current',
  1037.                 'ecl-mega-menu__item--expanded',
  1038.               );
  1039.             }
  1040.           }
  1041.         });
  1043.         queryOne('.ecl-mega-menu__parent-link', menuItem).focus();
  1044.         const details = { panel: 1, item: menuItem };
  1045.         this.trigger('OnOpenPanel', details);
  1046.         break;
  1047.       }
  1049.       case 'collapse':
  1050.         this.closeOpenDropdown();
  1051.         break;
  1053.       default:
  1054.     }
  1055.   }
  1057.   /**
  1058.    * Show/hide the second panel
  1059.    *
  1060.    * @param {Node} menuItem
  1061.    * @param {string} op (expand or collapse)
  1062.    *
  1063.    * @fires MegaMenu#onOpenPanel
  1064.    */
  1065.   handleSecondPanel(menuItem, op) {
  1066.     let siblings;
  1067.     switch (op) {
  1068.       case 'expand': {
  1069.         this.subItems.forEach((item) => {
  1070.           if (item === menuItem) {
  1071.             if (item.hasAttribute('aria-expanded')) {
  1072.               item.setAttribute('aria-expanded', 'true');
  1073.               item.classList.add('ecl-mega-menu__subitem--expanded');
  1074.             }
  1075.             item.classList.add('ecl-mega-menu__subitem--current');
  1076.           } else {
  1077.             if (item.hasAttribute('aria-expanded')) {
  1078.               item.setAttribute('aria-expanded', 'false');
  1079.               item.classList.remove('ecl-mega-menu__subitem--expanded');
  1080.             }
  1081.             item.classList.remove('ecl-mega-menu__subitem--current');
  1082.           }
  1083.         });
  1084.         this.openPanel = { num: 2, item: menuItem };
  1085.         siblings = menuItem.parentNode.childNodes;
  1086.         if (this.isDesktop) {
  1087.           this.checkDropdownHeight(menuItem);
  1088.           // Reset style for the siblings, in case they were hidden
  1089.           siblings.forEach((sibling) => {
  1090.             if (sibling !== menuItem) {
  1091.               sibling.style.display = '';
  1092.             }
  1093.           });
  1094.         } else {
  1095.           // Hide parent link of the first panel
  1096.           menuItem.parentNode.parentNode.firstElementChild.style.display =
  1097.             'none';
  1098.           // Remove double border, we have two sublists opened
  1099.           menuItem.parentNode.classList.add(
  1100.             'ecl-mega-menu__sublist--no-border',
  1101.           );
  1102.           // Hide other items in the sublist
  1103.           siblings.forEach((sibling) => {
  1104.             if (sibling !== menuItem) {
  1105.               sibling.style.display = 'none';
  1106.             }
  1107.           });
  1108.         }
  1109.         queryOne('.ecl-mega-menu__parent-link', menuItem).focus();
  1110.         this.checkMegaMenu(menuItem);
  1111.         const details = { panel: 2, item: menuItem };
  1112.         this.trigger('OnOpenPanel', details);
  1113.         break;
  1114.       }
  1116.       case 'collapse':
  1117.         this.openPanel = { num: 1 };
  1118.         menuItem.setAttribute('aria-expanded', 'false');
  1119.         menuItem.classList.remove(
  1120.           'ecl-mega-menu__subitem--expanded',
  1121.           'ecl-mega-menu__subitem--current',
  1122.         );
  1123.         break;
  1125.       default:
  1126.     }
  1127.   }
  1129.   /**
  1130.    * Click on a menu item
  1131.    *
  1132.    * @param {Event} e
  1133.    *
  1134.    * @fires MegaMenu#onItemClick
  1135.    */
  1136.   handleClickOnItem(e) {
  1137.     let isInTheContainer = false;
  1138.     const menuItem = e.target.closest('li');
  1139.     const container = queryOne(
  1140.       '.ecl-mega-menu__mega-container-scrollable',
  1141.       menuItem,
  1142.     );
  1143.     if (container) {
  1144.       isInTheContainer = container.contains(e.target);
  1145.     }
  1146.     // We need to ensure that the click doesn't come from a parent link
  1147.     // or from an open container, in that case we do not act.
  1148.     if (
  1149.       !e.target.parentNode.classList.contains('ecl-mega-menu__parent-link') &&
  1150.       !e.target.classList.contains(
  1151.         'ecl-mega-menu__mega-container-scrollable',
  1152.       ) &&
  1153.       !isInTheContainer
  1154.     ) {
  1155.       this.trigger('onItemClick', { item: menuItem, event: e });
  1156.       const hasChildren = menuItem.getAttribute('aria-expanded');
  1157.       if (hasChildren && menuItem.classList.contains('ecl-mega-menu__item')) {
  1158.         e.preventDefault();
  1159.         if (!this.isDesktop) {
  1160.           this.handleFirstPanel(menuItem, 'expand');
  1161.         } else {
  1162.           const isExpandable = hasChildren === 'true';
  1163.           if (isExpandable) {
  1164.             this.handleFirstPanel(menuItem, 'collapse');
  1165.           } else {
  1166.             this.closeOpenDropdown();
  1167.             this.handleFirstPanel(menuItem, 'expand');
  1168.           }
  1169.         }
  1170.       }
  1171.     }
  1172.   }
  1174.   /**
  1175.    * Click on a subitem
  1176.    *
  1177.    * @param {Event} e
  1178.    */
  1179.   handleClickOnSubitem(e) {
  1180.     const menuItem = e.target.closest(this.subItemSelector);
  1181.     if (menuItem && menuItem.hasAttribute('aria-expanded')) {
  1182.       e.preventDefault();
  1183.       const isExpanded = menuItem.getAttribute('aria-expanded') === 'true';
  1185.       this.cloneItemInTheDrowdown(menuItem);
  1186.       if (isExpanded) {
  1187.         this.handleSecondPanel(menuItem, 'collapse');
  1188.       } else {
  1189.         this.handleSecondPanel(menuItem, 'expand');
  1190.       }
  1191.     }
  1192.   }
  1194.   /**
  1195.    * Deselect any opened menu item
  1196.    *
  1197.    * @fires MegaMenu#onFocusTrapToggle
  1198.    */
  1199.   closeOpenDropdown() {
  1200.     this.enableScroll();
  1201.     this.element.setAttribute('aria-expanded', 'false');
  1202.     this.element.removeAttribute('data-expanded');
  1203.     // Remove css class and attribute from inner menu
  1204.     this.inner.classList.remove('ecl-mega-menu__inner--expanded');
  1205.     this.inner.setAttribute('aria-hidden', 'true');
  1207.     // Remove css class and attribute from menu items
  1208.     this.items.forEach((item) => {
  1209.       item.classList.remove('ecl-mega-menu__item--current');
  1210.       if (item.hasAttribute('aria-expanded')) {
  1211.         item.setAttribute('aria-expanded', 'false');
  1212.         item.classList.remove('ecl-mega-menu__item--expanded');
  1213.       }
  1214.     });
  1215.     // Remove css class and attribute from menu subitems
  1216.     this.subItems.forEach((item) => {
  1217.       item.classList.remove('ecl-mega-menu__subitem--current');
  1218.       if (item.hasAttribute('aria-expanded')) {
  1219.         item.classList.remove('ecl-mega-menu__subitem--expanded');
  1220.         item.setAttribute('aria-expanded', 'false');
  1221.         item.style.display = '';
  1222.       }
  1223.     });
  1224.     // Remove styles set for the sublists
  1225.     const sublists = queryAll('.ecl-mega-menu__sublist');
  1226.     if (sublists) {
  1227.       sublists.forEach((sublist) => {
  1228.         sublist.classList.remove('ecl-mega-menu__sublist--no-border');
  1229.       });
  1230.     }
  1231.     // Remove styles set for the parent links
  1232.     const parentLinks = queryAll('.ecl-mega-menu__parent-link', this.element);
  1233.     if (parentLinks) {
  1234.       parentLinks.forEach((parent) => {
  1235.         parent.style.display = '';
  1236.       });
  1237.     }
  1238.     // Update label
  1239.     const openLabel = this.element.getAttribute(this.labelOpenAttribute);
  1240.     if (this.toggleLabel && openLabel) {
  1241.       this.toggleLabel.innerHTML = openLabel;
  1242.     }
  1243.     this.openPanel.num = 0;
  1244.     // If the focus trap is active, deactivate it
  1245.     this.focusTrap.deactivate();
  1246.     this.trigger('onFocusTrapToggle', { active: false });
  1247.     this.isOpen = false;
  1248.   }
  1250.   /**
  1251.    * Focus out of a menu link
  1252.    *
  1253.    * @param {Event} e
  1254.    *
  1255.    * @fires MegaMenu#onFocusTrapToggle
  1256.    */
  1257.   handleFocusOut(e) {
  1258.     const element = e.target;
  1259.     const menuExpanded = this.element.getAttribute('aria-expanded');
  1261.     // Specific focus action for mobile menu
  1262.     // Loop through the items and go back to close button
  1263.     if (menuExpanded === 'true') {
  1264.       const nextItem = element.parentElement.nextSibling;
  1266.       if (!nextItem) {
  1267.         const nextFocusTarget = e.relatedTarget;
  1268.         if (!this.element.contains(nextFocusTarget)) {
  1269.           // This is the last item, go back to close button
  1270.           this.focusTrap.activate();
  1271.           this.trigger('onFocusTrapToggle', {
  1272.             active: true,
  1273.             lastFocusedEl: element.parentElement,
  1274.           });
  1275.         }
  1276.       }
  1277.     }
  1278.   }
  1280.   /**
  1281.    * Handles global click events, triggered outside of the menu.
  1282.    *
  1283.    * @param {Event} e
  1284.    */
  1285.   handleClickGlobal(e) {
  1286.     if (
  1287.       !e.target.classList.contains(
  1288.         'ecl-mega-menu__mega-container-scrollable',
  1289.       ) &&
  1290.       (e.target.classList.contains('ecl-mega-menu__overlay') ||
  1291.         !this.element.contains(e.target))
  1292.     ) {
  1293.       this.closeOpenDropdown();
  1294.     }
  1295.   }
  1296. }
  1298. export default MegaMenu;