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.itemSelector Selector for the menu item
  15.  * @param {String} options.linkSelector Selector for the menu link
  16.  * @param {String} options.subLinkSelector Selector for the menu sub 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.       itemSelector = '[data-ecl-mega-menu-item]',
  77.       linkSelector = '[data-ecl-mega-menu-link]',
  78.       subLinkSelector = '[data-ecl-mega-menu-sublink]',
  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.itemSelector = itemSelector;
  106.     this.linkSelector = linkSelector;
  107.     this.subLinkSelector = subLinkSelector;
  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.backItemLevel1 = null;
  125.     this.backItemLevel2 = null;
  126.     this.inner = null;
  127.     this.items = null;
  128.     this.links = null;
  129.     this.isOpen = false;
  130.     this.resizeTimer = null;
  131.     this.isKeyEvent = false;
  132.     this.isDesktop = false;
  133.     this.isLarge = false;
  134.     this.lastVisibleItem = null;
  135.     this.currentItem = null;
  136.     this.totalItemsWidth = 0;
  137.     this.breakpointL = 996;
  138.     this.openPanel = { num: 0, item: {} };
  140.     // Bind `this` for use in callbacks
  141.     this.handleClickOnOpen = this.handleClickOnOpen.bind(this);
  142.     this.handleClickOnClose = this.handleClickOnClose.bind(this);
  143.     this.handleClickOnToggle = this.handleClickOnToggle.bind(this);
  144.     this.handleClickOnBack = this.handleClickOnBack.bind(this);
  145.     this.handleClickGlobal = this.handleClickGlobal.bind(this);
  146.     this.handleClickOnItem = this.handleClickOnItem.bind(this);
  147.     this.handleClickOnSubitem = this.handleClickOnSubitem.bind(this);
  148.     this.handleFocusOut = this.handleFocusOut.bind(this);
  149.     this.handleKeyboard = this.handleKeyboard.bind(this);
  150.     this.handleKeyboardGlobal = this.handleKeyboardGlobal.bind(this);
  151.     this.handleResize = this.handleResize.bind(this);
  152.     this.useDesktopDisplay = this.useDesktopDisplay.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.back = queryOne(this.backSelector, this.element);
  175.     this.inner = queryOne(this.innerSelector, this.element);
  176.     this.btnPrevious = queryOne(this.buttonPreviousSelector, this.element);
  177.     this.btnNext = queryOne(this.buttonNextSelector, this.element);
  178.     this.items = queryAll(this.itemSelector, this.element);
  179.     this.subItems = queryAll(this.subItemSelector, this.element);
  180.     this.links = queryAll(this.linkSelector, this.element);
  181.     this.headerBanner = queryOne('.ecl-site-header__banner', document);
  183.     // Check if we should use desktop display (it does not rely only on breakpoints)
  184.     this.isDesktop = this.useDesktopDisplay();
  186.     // Replace the open/close link with a button
  187.     if (this.open) {
  188.       const buttonElement = document.createElement('button');
  189.       buttonElement.classList =
  190.         'ecl-button ecl-button--tertiary ecl-button--icon-only ecl-mega-menu__open';
  191.       buttonElement.type = 'button';
  192.       const label = queryOne('span', this.open);
  193.       label.classList.add('ecl-button__label');
  194.       buttonElement.innerHTML = this.open.innerHTML;
  195.       this.open.parentNode.replaceChild(buttonElement, this.open);
  196.       this.open = buttonElement;
  197.     }
  198.     this.toggleLabel = queryOne('.ecl-link__label', this.open);
  199.     // Bind click events on buttons
  200.     if (this.attachClickListener) {
  201.       // Open
  202.       if (this.open) {
  203.         this.open.addEventListener('click', this.handleClickOnToggle);
  204.       }
  206.       // Back
  207.       if (this.back) {
  208.         this.back.addEventListener('click', this.handleClickOnBack);
  209.         this.back.addEventListener('keyup', this.handleKeyboard);
  210.       }
  212.       // Global click
  213.       if (this.attachClickListener) {
  214.         document.addEventListener('click', this.handleClickGlobal);
  215.       }
  216.     }
  218.     // Bind event on menu links
  219.     if (this.links) {
  220.       this.links.forEach((link) => {
  221.         if (this.attachFocusListener) {
  222.           link.addEventListener('focusout', this.handleFocusOut);
  223.         }
  224.         if (this.attachKeyListener) {
  225.           link.addEventListener('keyup', this.handleKeyboard);
  226.         }
  227.       });
  228.     }
  230.     // Bind event on sub menu links
  231.     if (this.subItems) {
  232.       this.subItems.forEach((subItem) => {
  233.         const subLink = queryOne('.ecl-mega-menu__sublink', subItem);
  235.         if (this.attachKeyListener && subLink) {
  236.           subLink.addEventListener('click', this.handleClickOnSubitem);
  237.           subLink.addEventListener('keyup', this.handleKeyboard);
  238.         }
  239.         if (this.attachFocusListener && subLink) {
  240.           subLink.addEventListener('focusout', this.handleFocusOut);
  241.         }
  242.       });
  243.     }
  245.     const infoLinks = queryAll('.ecl-mega-menu__info-link   ', this.element);
  246.     if (infoLinks.length > 0) {
  247.       infoLinks.forEach((infoLink) => {
  248.         infoLink.addEventListener('keyup', this.handleKeyboard);
  249.         infoLink.addEventListener('blur', this.handleFocusOut);
  250.       });
  251.     }
  253.     const seeAllLinks = queryAll('.ecl-mega-menu__see-all a', this.element);
  254.     if (seeAllLinks.length > 0) {
  255.       seeAllLinks.forEach((seeAll) => {
  256.         seeAll.addEventListener('keyup', this.handleKeyboard);
  257.         seeAll.addEventListener('blur', this.handleFocusOut);
  258.       });
  259.     }
  261.     // Bind global keyboard events
  262.     if (this.attachKeyListener) {
  263.       document.addEventListener('keyup', this.handleKeyboardGlobal);
  264.     }
  266.     // Bind resize events
  267.     if (this.attachResizeListener) {
  268.       window.addEventListener('resize', this.handleResize);
  269.     }
  271.     // Browse first level items
  272.     if (this.items) {
  273.       this.items.forEach((item) => {
  274.         // Check menu item display (right to left, full width, ...)
  275.         this.totalItemsWidth += item.offsetWidth;
  277.         if (
  278.           item.hasAttribute('data-ecl-has-children') ||
  279.           item.hasAttribute('data-ecl-has-container')
  280.         ) {
  281.           // Bind click event on menu links
  282.           const link = queryOne(this.linkSelector, item);
  283.           if (this.attachClickListener && link) {
  284.             link.addEventListener('click', this.handleClickOnItem);
  285.           }
  286.         }
  287.       });
  288.     }
  290.     // Create a focus trap around the menu
  291.     this.focusTrap = createFocusTrap(this.element, {
  292.       onActivate: () =>
  293.         this.element.classList.add('ecl-mega-menu-trap-is-active'),
  294.       onDeactivate: () =>
  295.         this.element.classList.remove('ecl-mega-menu-trap-is-active'),
  296.     });
  298.     this.handleResize();
  299.     // Set ecl initialized attribute
  300.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  301.     ECL.components.set(this.element, this);
  302.   }
  304.   /**
  305.    * Register a callback function for a specific event.
  306.    *
  307.    * @param {string} eventName - The name of the event to listen for.
  308.    * @param {Function} callback - The callback function to be invoked when the event occurs.
  309.    * @returns {void}
  310.    * @memberof MegaMenu
  311.    * @instance
  312.    *
  313.    * @example
  314.    * // Registering a callback for the 'onOpen' event
  315.    * megaMenu.on('onOpen', (event) => {
  316.    *   console.log('Open event occurred!', event);
  317.    * });
  318.    */
  319.   on(eventName, callback) {
  320.     this.eventManager.on(eventName, callback);
  321.   }
  323.   /**
  324.    * Trigger a component event.
  325.    *
  326.    * @param {string} eventName - The name of the event to trigger.
  327.    * @param {any} eventData - Data associated with the event.
  328.    * @memberof MegaMenu
  329.    */
  330.   trigger(eventName, eventData) {
  331.     this.eventManager.trigger(eventName, eventData);
  332.   }
  334.   /**
  335.    * Destroy component.
  336.    */
  337.   destroy() {
  338.     if (this.attachClickListener) {
  339.       if (this.open) {
  340.         this.open.removeEventListener('click', this.handleClickOnToggle);
  341.       }
  343.       if (this.back) {
  344.         this.back.removeEventListener('click', this.handleClickOnBack);
  345.       }
  347.       if (this.attachClickListener) {
  348.         document.removeEventListener('click', this.handleClickGlobal);
  349.       }
  350.     }
  352.     if (this.links) {
  353.       this.links.forEach((link) => {
  354.         if (this.attachClickListener) {
  355.           link.removeEventListener('click', this.handleClickOnItem);
  356.         }
  357.         if (this.attachFocusListener) {
  358.           link.removeEventListener('focusout', this.handleFocusOut);
  359.         }
  360.         if (this.attachKeyListener) {
  361.           link.removeEventListener('keyup', this.handleKeyboard);
  362.         }
  363.       });
  364.     }
  366.     if (this.subItems) {
  367.       this.subItems.forEach((subItem) => {
  368.         const subLink = queryOne('.ecl-mega-menu__sublink', subItem);
  369.         if (this.attachKeyListener && subLink) {
  370.           subLink.removeEventListener('keyup', this.handleKeyboard);
  371.         }
  372.         if (this.attachClickListener && subLink) {
  373.           subLink.removeEventListener('click', this.handleClickOnSubitem);
  374.         }
  375.         if (this.attachFocusListener && subLink) {
  376.           subLink.removeEventListener('focusout', this.handleFocusOut);
  377.         }
  378.       });
  379.     }
  381.     if (this.attachKeyListener) {
  382.       document.removeEventListener('keyup', this.handleKeyboardGlobal);
  383.     }
  385.     if (this.attachResizeListener) {
  386.       window.removeEventListener('resize', this.handleResize);
  387.     }
  389.     this.closeOpenDropdown();
  390.     this.enableScroll();
  392.     if (this.element) {
  393.       this.element.removeAttribute('data-ecl-auto-initialized');
  394.       ECL.components.delete(this.element);
  395.     }
  396.   }
  398.   /**
  399.    * Disable page scrolling
  400.    */
  401.   disableScroll() {
  402.     document.body.classList.add('ecl-mega-menu-prevent-scroll');
  403.   }
  405.   /**
  406.    * Enable page scrolling
  407.    */
  408.   enableScroll() {
  409.     document.body.classList.remove('ecl-mega-menu-prevent-scroll');
  410.   }
  412.   /**
  413.    * Check if desktop display has to be used
  414.    * - not using a phone or tablet (whatever the screen size is)
  415.    * - not having hamburger menu on screen
  416.    */
  417.   useDesktopDisplay() {
  418.     // Detect mobile devices
  419.     if (isMobile.isMobileOnly) {
  420.       return false;
  421.     }
  423.     // Force mobile display on tablet
  424.     if (isMobile.isTablet) {
  425.       this.element.classList.add('ecl-mega-menu--forced-mobile');
  426.       return false;
  427.     }
  429.     // After all that, check if the hamburger button is displayed
  430.     if (window.innerWidth < this.breakpointL) {
  431.       return false;
  432.     }
  434.     // Everything is fine to use desktop display
  435.     this.element.classList.remove('ecl-mega-menu--forced-mobile');
  436.     return true;
  437.   }
  439.   /**
  440.    * Reset the styles set by the script
  441.    *
  442.    * @param {string} desktop or mobile
  443.    */
  444.   resetStyles(viewport, compact) {
  445.     const infoPanels = queryAll('.ecl-mega-menu__info', this.element);
  446.     const subLists = queryAll('.ecl-mega-menu__sublist', this.element);
  448.     // Remove display:none from the sublists
  449.     if (subLists && viewport === 'mobile') {
  450.       const megaMenus = queryAll(
  451.         '.ecl-mega-menu__item > .ecl-mega-menu__wrapper > .ecl-container > [data-ecl-mega-menu-mega]',
  452.         this.element,
  453.       );
  454.       megaMenus.forEach((menu) => {
  455.         menu.style.height = '';
  456.       });
  458.       // Reset top position and height of the wrappers
  459.       const wrappers = queryAll('.ecl-mega-menu__wrapper', this.element);
  460.       if (wrappers) {
  461.         wrappers.forEach((wrapper) => {
  462.           wrapper.style.top = '';
  463.           wrapper.style.height = '';
  464.         });
  465.       }
  467.       // Two panels are opened
  468.       if (this.openPanel.num === 2) {
  469.         const subItemExpanded = queryOne(
  470.           '.ecl-mega-menu__subitem--expanded',
  471.           this.element,
  472.         );
  473.         if (subItemExpanded) {
  474.           subItemExpanded.firstChild.classList.add(
  475.             'ecl-mega-menu__parent-link',
  476.           );
  477.         }
  478.         const menuItem = this.openPanel.item;
  479.         // Hide siblings
  480.         const siblings = menuItem.parentNode.childNodes;
  481.         siblings.forEach((sibling) => {
  482.           if (sibling !== menuItem) {
  483.             sibling.style.display = 'none';
  484.           }
  485.         });
  486.       }
  487.     } else if (subLists && viewport === 'desktop' && !compact) {
  488.       // Reset styles for the sublist and subitems
  489.       subLists.forEach((list) => {
  490.         list.classList.remove('ecl-mega-menu__sublist--scrollable');
  491.         list.childNodes.forEach((item) => {
  492.           item.style.display = '';
  493.         });
  494.       });
  496.       infoPanels.forEach((info) => {
  497.         info.style.top = '';
  498.       });
  500.       // Check if we have an open item, if we don't hide the overlay and enable scroll
  501.       const currentItems = [];
  502.       const currentItem = queryOne(
  503.         '.ecl-mega-menu__subitem--expanded',
  504.         this.element,
  505.       );
  506.       if (currentItem) {
  507.         currentItem.firstElementChild.classList.remove(
  508.           'ecl-mega-menu__parent-link',
  509.         );
  510.         currentItems.push(currentItem);
  511.       }
  513.       const currentSubItem = queryOne(
  514.         '.ecl-mega-menu__item--expanded',
  515.         this.element,
  516.       );
  517.       if (currentSubItem) {
  518.         currentItems.push(currentSubItem);
  519.       }
  521.       if (currentItems.length > 0) {
  522.         currentItems.forEach((current) => {
  523.           this.checkDropdownHeight(current);
  524.         });
  525.       } else {
  526.         this.element.setAttribute('aria-expanded', 'false');
  527.         this.element.removeAttribute('data-expanded');
  528.         this.open.setAttribute('aria-expanded', 'false');
  529.         this.enableScroll();
  530.       }
  531.     } else if (viewport === 'desktop' && compact) {
  532.       const currentSubItem = queryOne(
  533.         '.ecl-mega-menu__subitem--expanded',
  534.         this.element,
  535.       );
  536.       if (currentSubItem) {
  537.         currentSubItem.firstElementChild.classList.remove(
  538.           'ecl-mega-menu__parent-link',
  539.         );
  540.       }
  541.       infoPanels.forEach((info) => {
  542.         info.style.height = '';
  543.       });
  544.     }
  545.   }
  547.   /**
  548.    * Trigger events on resize
  549.    * Uses a debounce, for performance
  550.    */
  551.   handleResize() {
  552.     clearTimeout(this.resizeTimer);
  553.     this.resizeTimer = setTimeout(() => {
  554.       const screenWidth = window.innerWidth;
  555.       if (this.prevScreenWidth !== undefined) {
  556.         // Check if the transition involves crossing the L breakpoint
  557.         const isTransition =
  558.           (this.prevScreenWidth <= this.breakpointL &&
  559.             screenWidth > this.breakpointL) ||
  560.           (this.prevScreenWidth > this.breakpointL &&
  561.             screenWidth <= this.breakpointL);
  562.         // If we are moving in or out the L breakpoint, reset the styles
  563.         if (isTransition) {
  564.           this.resetStyles(
  565.             screenWidth > this.breakpointL ? 'desktop' : 'mobile',
  566.           );
  567.         }
  568.         if (this.prevScreenWidth > 1140 && screenWidth > 996) {
  569.           this.resetStyles('desktop', true);
  570.         }
  571.       }
  572.       this.isDesktop = this.useDesktopDisplay();
  573.       this.isLarge = window.innerWidth > 1140;
  574.       // Update previous screen width
  575.       this.prevScreenWidth = screenWidth;
  576.       this.element.classList.remove('ecl-mega-menu--forced-mobile');
  577.       // RTL
  578.       this.direction = getComputedStyle(this.element).direction;
  579.       if (this.direction === 'rtl') {
  580.         this.element.classList.add('ecl-mega-menu--rtl');
  581.       } else {
  582.         this.element.classList.remove('ecl-mega-menu--rtl');
  583.       }
  584.       // Check droopdown height if needed
  585.       const expanded = queryOne('.ecl-mega-menu__item--expanded', this.element);
  586.       if (expanded && this.isDesktop) {
  587.         this.checkDropdownHeight(expanded);
  588.       }
  589.       // Check the menu position
  590.       this.positionMenuOverlay();
  591.     }, 200);
  592.   }
  594.   /**
  595.    * Calculate dropdown height dynamically
  596.    *
  597.    * @param {Node} menuItem
  598.    */
  599.   checkDropdownHeight(menuItem) {
  600.     setTimeout(() => {
  601.       const viewportHeight = window.innerHeight;
  602.       const infoPanel = queryOne('.ecl-mega-menu__info', menuItem);
  603.       const mainPanel = queryOne('.ecl-mega-menu__mega', menuItem);
  604.       let infoPanelHeight = 0;
  606.       if (this.isDesktop) {
  607.         const heights = [];
  608.         let height = 0;
  609.         let secondPanel = null;
  610.         let featuredPanel = null;
  611.         let itemsHeight = 0;
  612.         let subItemsHeight = 0;
  614.         if (infoPanel) {
  615.           infoPanelHeight = infoPanel.scrollHeight + 16;
  616.         }
  617.         if (infoPanel && this.isLarge) {
  618.           heights.push(infoPanelHeight);
  619.         } else if (infoPanel && this.isDesktop) {
  620.           itemsHeight = infoPanelHeight;
  621.           subItemsHeight = infoPanelHeight;
  622.         }
  624.         if (mainPanel) {
  625.           const mainTop = mainPanel.getBoundingClientRect().top;
  626.           const list = queryOne('.ecl-mega-menu__sublist', mainPanel);
  627.           if (!list) {
  628.             const isContainer = menuItem.classList.contains(
  629.               'ecl-mega-menu__item--has-container',
  630.             );
  631.             if (isContainer) {
  632.               const container = queryOne(
  633.                 '.ecl-mega-menu__mega-container',
  634.                 menuItem,
  635.               );
  636.               if (container) {
  637.                 container.firstElementChild.style.height = `${viewportHeight - mainTop}px`;
  638.                 return;
  639.               }
  640.             }
  641.           } else {
  642.             const items = list.children;
  643.             if (items.length > 0) {
  644.               Array.from(items).forEach((item) => {
  645.                 itemsHeight += item.getBoundingClientRect().height;
  646.               });
  647.               heights.push(itemsHeight);
  648.             }
  649.           }
  650.         }
  651.         const expanded = queryOne(
  652.           '.ecl-mega-menu__subitem--expanded',
  653.           menuItem,
  654.         );
  655.         if (expanded) {
  656.           secondPanel = queryOne('.ecl-mega-menu__mega--level-2', expanded);
  657.           if (secondPanel) {
  658.             const subItems = queryAll(`${this.subItemSelector} a`, secondPanel);
  659.             if (subItems.length > 0) {
  660.               subItems.forEach((item) => {
  661.                 subItemsHeight += item.getBoundingClientRect().height;
  662.               });
  663.             }
  665.             heights.push(subItemsHeight);
  666.             featuredPanel = queryOne('.ecl-mega-menu__featured', expanded);
  667.             if (featuredPanel) {
  668.               heights.push(featuredPanel.scrollHeight);
  669.             }
  670.           }
  671.         }
  673.         const maxHeight = Math.max(...heights);
  674.         const containerBounding = this.inner.getBoundingClientRect();
  675.         const containerBottom = containerBounding.bottom;
  676.         // By requirements, limit the height to the 70% of the available space.
  677.         const availableHeight = (window.innerHeight - containerBottom) * 0.7;
  679.         if (maxHeight > availableHeight) {
  680.           height = availableHeight;
  681.         } else {
  682.           height = maxHeight;
  683.         }
  685.         const wrapper = queryOne('.ecl-mega-menu__wrapper', menuItem);
  686.         if (wrapper) {
  687.           wrapper.style.height = `${height}px`;
  688.         }
  689.         if (mainPanel && this.isLarge) {
  690.           mainPanel.style.height = `${height}px`;
  691.         } else if (mainPanel && infoPanel && this.isDesktop) {
  692.           mainPanel.style.height = `${height - infoPanelHeight}px`;
  693.         }
  694.         if (infoPanel && this.isLarge) {
  695.           infoPanel.style.height = `${height}px`;
  696.         }
  697.         if (secondPanel && this.isLarge) {
  698.           secondPanel.style.height = `${height}px`;
  699.         } else if (secondPanel && this.isDesktop) {
  700.           secondPanel.style.height = `${height - infoPanelHeight}px`;
  701.         }
  702.         if (featuredPanel && this.isLarge) {
  703.           featuredPanel.style.height = `${height}px`;
  704.         } else if (featuredPanel && this.isDesktop) {
  705.           featuredPanel.style.height = `${height - infoPanelHeight}px`;
  706.         }
  707.       }
  708.     }, 100);
  709.   }
  711.   /**
  712.    * Dinamically set the position of the menu overlay
  713.    */
  714.   positionMenuOverlay() {
  715.     const menuOverlay = queryOne('.ecl-mega-menu__overlay', this.element);
  716.     let availableHeight = 0;
  717.     if (!this.isDesktop) {
  718.       // In mobile, we get the bottom position of the site header header
  719.       setTimeout(() => {
  720.         let header = '';
  721.         if (this.openPanel.num === 0) {
  722.           header = queryOne('.ecl-site-header__banner', document);
  723.         } else {
  724.           header = queryOne('.ecl-site-header__header', document);
  725.         }
  726.         if (header) {
  727.           const position = header.getBoundingClientRect();
  728.           const bottomPosition = Math.round(position.bottom);
  730.           if (menuOverlay) {
  731.             menuOverlay.style.top = `${bottomPosition}px`;
  732.           }
  733.           if (this.inner) {
  734.             this.inner.style.top = `${bottomPosition}px`;
  735.           }
  736.           const item = queryOne('.ecl-mega-menu__item--expanded', this.element);
  738.           if (item) {
  739.             const subList = queryOne('.ecl-mega-menu__sublist', item);
  740.             if (subList && this.openPanel.num === 1) {
  741.               const info = queryOne('.ecl-mega-menu__info', item);
  742.               if (info) {
  743.                 const bottomRect = info.getBoundingClientRect();
  744.                 const bottomInfo = bottomRect.bottom;
  745.                 availableHeight = window.innerHeight - bottomInfo - 16;
  746.                 subList.classList.add('ecl-mega-menu__sublist--scrollable');
  747.                 subList.style.height = `${availableHeight}px`;
  748.               }
  749.             } else if (subList) {
  750.               subList.classList.remove('ecl-mega-menu__sublist--scrollable');
  751.               subList.style.height = '';
  752.             }
  753.           }
  755.           if (this.openPanel.num === 2) {
  756.             const subItem = queryOne(
  757.               '.ecl-mega-menu__subitem--expanded',
  758.               this.element,
  759.             );
  760.             if (subItem) {
  761.               const subMega = queryOne(
  762.                 '.ecl-mega-menu__mega--level-2',
  763.                 subItem,
  764.               );
  765.               if (subMega) {
  766.                 const subMegaRect = subMega.getBoundingClientRect();
  767.                 const subMegaTop = subMegaRect.top;
  768.                 availableHeight = window.innerHeight - subMegaTop;
  769.                 subMega.style.height = `${availableHeight}px`;
  770.               }
  771.             }
  772.           }
  773.           const wrappers = queryAll('.ecl-mega-menu__wrapper', this.element);
  774.           if (wrappers) {
  775.             wrappers.forEach((wrapper) => {
  776.               wrapper.style.top = '';
  777.               wrapper.style.height = '';
  778.             });
  779.           }
  780.         }
  781.       }, 0);
  782.     } else {
  783.       setTimeout(() => {
  784.         // In desktop we get the bottom position of the whole site header
  785.         const siteHeader = queryOne('.ecl-site-header', document);
  786.         if (siteHeader) {
  787.           const headerRect = siteHeader.getBoundingClientRect();
  788.           const headerBottom = headerRect.bottom;
  789.           const item = queryOne(this.itemSelector, this.element);
  790.           const rect = item.getBoundingClientRect();
  791.           const rectHeight = rect.height;
  792.           const wrappers = queryAll('.ecl-mega-menu__wrapper', this.element);
  794.           if (wrappers) {
  795.             wrappers.forEach((wrapper) => {
  796.               wrapper.style.top = `${rectHeight}px`;
  797.             });
  798.           }
  799.           if (menuOverlay) {
  800.             menuOverlay.style.top = `${headerBottom}px`;
  801.           }
  802.         } else {
  803.           const bottomPosition = this.element.getBoundingClientRect().bottom;
  804.           if (menuOverlay) {
  805.             menuOverlay.style.top = `${bottomPosition}px`;
  806.           }
  807.         }
  808.       }, 0);
  809.     }
  810.   }
  812.   /**
  813.    * Handles keyboard events specific to the menu.
  814.    *
  815.    * @param {Event} e
  816.    */
  817.   handleKeyboard(e) {
  818.     const element = e.target;
  819.     const cList = element.classList;
  820.     const menuExpanded = this.element.getAttribute('aria-expanded');
  822.     // Detect press on Escape
  823.     if (e.key === 'Escape' || e.key === 'Esc') {
  824.       if (document.activeElement === element) {
  825.         element.blur();
  826.       }
  828.       if (menuExpanded === 'false') {
  829.         this.closeOpenDropdown();
  830.       }
  831.       return;
  832.     }
  833.     // Handle Keyboard on the first panel
  834.     if (cList.contains('ecl-mega-menu__info-link')) {
  835.       if (e.key === 'ArrowUp') {
  836.         if (this.isDesktop) {
  837.           // Focus on the expanded nav item
  838.           queryOne('.ecl-mega-menu__item--expanded a', this.element).focus();
  839.         } else if (this.back && !this.isDesktop) {
  840.           // focus on the back button
  841.           this.back.focus();
  842.         }
  843.       }
  844.       if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
  845.         // First item in the open dropdown.
  846.         element.parentElement.parentElement.nextSibling.firstChild.firstChild.firstChild.focus();
  847.       }
  848.     }
  850.     if (cList.contains('ecl-mega-menu__parent-link')) {
  851.       if (e.key === 'ArrowUp') {
  852.         const back = queryOne('.ecl-mega-menu__back', this.element);
  853.         back.focus();
  854.         return;
  855.       }
  856.       if (e.key === 'ArrowDown') {
  857.         const mega = e.target.nextSibling;
  858.         mega.firstElementChild.firstElementChild.firstChild.focus();
  859.         return;
  860.       }
  861.     }
  863.     // Handle keyboard on the see all links
  864.     if (element.parentElement.classList.contains('ecl-mega-menu__see-all')) {
  865.       if (e.key === 'ArrowUp') {
  866.         // Focus on the last element of the sub-list
  867.         element.parentElement.previousSibling.firstChild.focus();
  868.       }
  869.       if (e.key === 'ArrowDown') {
  870.         // Focus on the fi
  871.         const featured = element.parentElement.parentElement.nextSibling;
  872.         if (featured) {
  873.           const focusableSelectors = [
  874.             'a[href]',
  875.             'button:not([disabled])',
  876.             'input:not([disabled])',
  877.             'select:not([disabled])',
  878.             'textarea:not([disabled])',
  879.             '[tabindex]:not([tabindex="-1"])',
  880.           ];
  881.           const focusableElements = queryAll(
  882.             focusableSelectors.join(', '),
  883.             featured,
  884.           );
  885.           if (focusableElements.length > 0) {
  886.             focusableElements[0].focus();
  887.           }
  888.         }
  889.       }
  890.     }
  891.     // Handle keyboard on the back button
  892.     if (cList.contains('ecl-mega-menu__back')) {
  893.       if (e.key === 'ArrowDown') {
  894.         e.preventDefault();
  895.         const expanded = queryOne(
  896.           '[aria-expanded="true"]',
  897.           element.parentElement.nextSibling,
  898.         );
  899.         // We have an opened list
  900.         if (expanded) {
  901.           const innerExpanded = queryOne(
  902.             '.ecl-mega-menu__subitem--expanded',
  903.             expanded,
  904.           );
  905.           // We have an opened sub-list
  906.           if (innerExpanded) {
  907.             queryOne('.ecl-mega-menu__parent-link', innerExpanded).focus();
  908.           } else {
  909.             const infoLink = queryOne('.ecl-mega-menu__info-link', expanded);
  910.             if (infoLink) {
  911.               infoLink.focus();
  912.             } else {
  913.               queryOne(
  914.                 '.ecl-mega-menu__subitem:first-child .ecl-mega-menu__sublink',
  915.                 expanded,
  916.               ).focus();
  917.             }
  918.           }
  919.         }
  920.       }
  921.       if (e.key === 'ArrowUp') {
  922.         // Focus on the open button
  923.         this.open.focus();
  924.       }
  925.     }
  926.     // Key actions to navigate between first level menu items
  927.     if (cList.contains('ecl-mega-menu__link')) {
  928.       if (
  929.         (e.key === 'Space' || e.key === ' ') &&
  930.         element.parentElement.hasAttribute('aria-expanded')
  931.       ) {
  932.         element.click();
  934.         return;
  935.       }
  937.       if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
  938.         e.preventDefault();
  939.         let prevItem = element.previousSibling;
  941.         if (prevItem && prevItem.classList.contains('ecl-mega-menu__link')) {
  942.           prevItem.focus();
  943.           return;
  944.         }
  946.         prevItem = element.parentElement.previousSibling;
  947.         if (prevItem) {
  948.           const prevLink = queryOne('.ecl-mega-menu__link', prevItem);
  950.           if (prevLink) {
  951.             prevLink.focus();
  952.             return;
  953.           }
  954.         }
  955.       }
  956.       if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
  957.         e.preventDefault();
  958.         if (
  959.           element.parentElement.getAttribute('aria-expanded') === 'true' &&
  960.           e.key === 'ArrowDown'
  961.         ) {
  962.           const infoLink = queryOne(
  963.             '.ecl-mega-menu__info-link',
  964.             element.parentElement,
  965.           );
  966.           if (infoLink) {
  967.             infoLink.focus();
  968.             return;
  969.           }
  970.         }
  971.         const nextItem = element.parentElement.nextSibling;
  972.         if (nextItem) {
  973.           const nextLink = queryOne('.ecl-mega-menu__link', nextItem);
  975.           if (nextLink) {
  976.             nextLink.focus();
  977.             return;
  978.           }
  979.         }
  980.       }
  981.     }
  982.     // Key actions to navigate between the sub-links
  983.     if (cList.contains('ecl-mega-menu__sublink')) {
  984.       if (
  985.         (e.key === 'Space' || e.key === ' ') &&
  986.         element.parentElement.hasAttribute('aria-expanded')
  987.       ) {
  988.         element.click();
  990.         return;
  991.       }
  993.       if (e.key === 'ArrowDown') {
  994.         e.preventDefault();
  995.         const nextItem = element.parentElement.nextSibling;
  996.         let nextLink = '';
  997.         if (nextItem) {
  998.           nextLink = queryOne('.ecl-mega-menu__sublink', nextItem);
  999.           if (
  1000.             !nextLink &&
  1001.             nextItem.classList.contains('ecl-mega-menu__see-all')
  1002.           ) {
  1003.             nextLink = nextItem.firstElementChild;
  1004.           }
  1005.           if (nextLink) {
  1006.             nextLink.focus();
  1007.             return;
  1008.           }
  1009.         }
  1010.       }
  1011.       if (e.key === 'ArrowUp') {
  1012.         e.preventDefault();
  1013.         const prevItem = element.parentElement.previousSibling;
  1014.         if (prevItem) {
  1015.           const prevLink = queryOne('.ecl-mega-menu__sublink', prevItem);
  1017.           if (prevLink) {
  1018.             prevLink.focus();
  1019.           }
  1020.         } else {
  1021.           const moreLink = queryOne(
  1022.             '.ecl-mega-menu__info-link',
  1023.             element.parentElement.parentElement.parentElement.previousSibling,
  1024.           );
  1025.           if (moreLink) {
  1026.             moreLink.focus();
  1027.           } else if (this.openPanel.num === 2) {
  1028.             const parent = e.target.closest(
  1029.               '.ecl-mega-menu__mega',
  1030.             ).previousSibling;
  1031.             if (parent) {
  1032.               parent.focus();
  1033.             }
  1034.           } else if (this.back) {
  1035.             this.back.focus();
  1036.           }
  1037.         }
  1038.       }
  1039.     }
  1040.     if (e.key === 'ArrowRight') {
  1041.       const expanded =
  1042.         element.parentElement.getAttribute('aria-expanded') === 'true';
  1043.       if (expanded) {
  1044.         e.preventDefault();
  1045.         // Focus on the first element in the second panel
  1046.         element.nextSibling.firstElementChild.firstChild.firstChild.focus();
  1047.       }
  1048.     }
  1049.   }
  1051.   /**
  1052.    * Handles global keyboard events, triggered outside of the menu.
  1053.    *
  1054.    * @param {Event} e
  1055.    */
  1056.   handleKeyboardGlobal(e) {
  1057.     // Detect press on Escape
  1058.     if (e.key === 'Escape' || e.key === 'Esc') {
  1059.       if (this.isOpen) {
  1060.         this.closeOpenDropdown(true);
  1061.       }
  1062.     }
  1063.   }
  1065.   /**
  1066.    * Open menu list.
  1067.    *
  1068.    * @param {Event} e
  1069.    *
  1070.    * @fires MegaMenu#onOpen
  1071.    */
  1072.   handleClickOnOpen(e) {
  1073.     if (this.isOpen) {
  1074.       this.handleClickOnClose(e);
  1075.     } else {
  1076.       e.preventDefault();
  1077.       this.disableScroll();
  1078.       this.element.setAttribute('aria-expanded', 'true');
  1079.       this.element.classList.add('ecl-mega-menu--start-panel');
  1080.       this.element.classList.remove(
  1081.         'ecl-mega-menu--one-panel',
  1082.         'ecl-mega-menu--two-panels',
  1083.       );
  1084.       this.open.setAttribute('aria-expanded', 'true');
  1085.       this.inner.setAttribute('aria-hidden', 'false');
  1086.       this.isOpen = true;
  1088.       // Update label
  1089.       const closeLabel = this.element.getAttribute(this.labelCloseAttribute);
  1090.       if (this.toggleLabel && closeLabel) {
  1091.         this.toggleLabel.innerHTML = closeLabel;
  1092.       }
  1094.       this.positionMenuOverlay();
  1096.       // Focus first element
  1097.       if (this.links.length > 0) {
  1098.         this.links[0].focus();
  1099.       }
  1101.       this.trigger('onOpen', e);
  1102.     }
  1103.   }
  1105.   /**
  1106.    * Close menu list.
  1107.    *
  1108.    * @param {Event} e
  1109.    *
  1110.    * @fires Menu#onClose
  1111.    */
  1112.   handleClickOnClose(e) {
  1113.     if (this.element.getAttribute('aria-expanded') === 'true') {
  1114.       this.focusTrap.deactivate();
  1115.       this.closeOpenDropdown();
  1116.       this.trigger('onClose', e);
  1117.     } else {
  1118.       this.handleClickOnOpen(e);
  1119.     }
  1120.   }
  1122.   /**
  1123.    * Toggle menu list.
  1124.    *
  1125.    * @param {Event} e
  1126.    */
  1127.   handleClickOnToggle(e) {
  1128.     e.preventDefault();
  1130.     if (this.isOpen) {
  1131.       this.handleClickOnClose(e);
  1132.     } else {
  1133.       this.handleClickOnOpen(e);
  1134.     }
  1135.   }
  1137.   /**
  1138.    * Get back to previous list (on mobile)
  1139.    *
  1140.    * @fires MegaMenu#onBack
  1141.    */
  1142.   handleClickOnBack() {
  1143.     const infoPanels = queryAll('.ecl-mega-menu__info', this.element);
  1144.     infoPanels.forEach((info) => {
  1145.       info.style.top = '';
  1146.     });
  1147.     const level2 = queryOne('.ecl-mega-menu__subitem--expanded', this.element);
  1148.     if (level2) {
  1149.       this.element.classList.remove(
  1150.         'ecl-mega-menu--two-panels',
  1151.         'ecl-mega-menu--start-panel',
  1152.       );
  1153.       this.element.classList.add('ecl-mega-menu--one-panel');
  1154.       level2.setAttribute('aria-expanded', 'false');
  1155.       level2.classList.remove(
  1156.         'ecl-mega-menu__subitem--expanded',
  1157.         'ecl-mega-menu__subitem--current',
  1158.       );
  1159.       const itemLink = queryOne(this.subLinkSelector, level2);
  1160.       itemLink.setAttribute('aria-expanded', 'false');
  1161.       itemLink.classList.remove('ecl-mega-menu__parent-link');
  1162.       const siblings = level2.parentElement.childNodes;
  1163.       if (siblings) {
  1164.         siblings.forEach((sibling) => {
  1165.           sibling.style.display = '';
  1166.         });
  1167.       }
  1168.       // Move the focus to the previously selected item
  1169.       if (this.backItemLevel2) {
  1170.         this.backItemLevel2.firstElementChild.focus();
  1171.       }
  1172.       this.openPanel.num = 1;
  1173.     } else {
  1174.       // Remove expanded class from inner menu
  1175.       this.inner.classList.remove('ecl-mega-menu__inner--expanded');
  1176.       this.element.classList.remove('ecl-mega-menu--one-panel');
  1177.       // Remove css class and attribute from menu items
  1178.       this.items.forEach((item) => {
  1179.         item.classList.remove(
  1180.           'ecl-mega-menu__item--expanded',
  1181.           'ecl-mega-menu__item--current',
  1182.         );
  1183.         item.setAttribute('aria-expanded', 'false');
  1184.         const itemLink = queryOne(this.linkSelector, item);
  1185.         itemLink.setAttribute('aria-expanded', 'false');
  1186.       });
  1187.       // Move the focus to the previously selected item
  1188.       if (this.backItemLevel1) {
  1189.         this.backItemLevel1.firstElementChild.focus();
  1190.       } else {
  1191.         this.items[0].firstElementChild.focus();
  1192.       }
  1193.       this.openPanel.num = 0;
  1194.       this.positionMenuOverlay();
  1195.     }
  1197.     this.trigger('onBack', { level: level2 ? 2 : 1 });
  1198.   }
  1200.   /**
  1201.    * Show/hide the first panel
  1202.    *
  1203.    * @param {Node} menuItem
  1204.    * @param {string} op (expand or collapse)
  1205.    *
  1206.    * @fires MegaMenu#onOpenPanel
  1207.    */
  1208.   handleFirstPanel(menuItem, op) {
  1209.     switch (op) {
  1210.       case 'expand': {
  1211.         this.inner.classList.add('ecl-mega-menu__inner--expanded');
  1212.         this.positionMenuOverlay();
  1213.         this.checkDropdownHeight(menuItem);
  1214.         this.element.setAttribute('data-expanded', true);
  1215.         this.element.setAttribute('aria-expanded', 'true');
  1216.         this.element.classList.add('ecl-mega-menu--one-panel');
  1217.         this.element.classList.remove('ecl-mega-menu--start-panel');
  1218.         this.open.setAttribute('aria-expanded', 'true');
  1219.         this.disableScroll();
  1220.         this.isOpen = true;
  1221.         this.items.forEach((item) => {
  1222.           if (item.hasAttribute('aria-expanded')) {
  1223.             const itemLink = queryOne(this.linkSelector, item);
  1224.             if (item === menuItem) {
  1225.               item.classList.add(
  1226.                 'ecl-mega-menu__item--expanded',
  1227.                 'ecl-mega-menu__item--current',
  1228.               );
  1229.               item.setAttribute('aria-expanded', 'true');
  1230.               itemLink.setAttribute('aria-expanded', 'true');
  1231.               itemLink.setAttribute('aria-current', 'true');
  1232.               this.backItemLevel1 = item;
  1233.             } else {
  1234.               item.setAttribute('aria-expanded', 'false');
  1235.               itemLink.setAttribute('aria-expanded', 'false');
  1236.               item.classList.remove(
  1237.                 'ecl-mega-menu__item--current',
  1238.                 'ecl-mega-menu__item--expanded',
  1239.               );
  1240.               itemLink.removeAttribute('aria-current');
  1241.             }
  1242.           }
  1243.         });
  1245.         if (!this.isDesktop && this.back) {
  1246.           this.back.focus();
  1247.         }
  1249.         this.openPanel = {
  1250.           num: 1,
  1251.           item: menuItem,
  1252.         };
  1253.         const details = { panel: 1, item: menuItem };
  1254.         this.trigger('OnOpenPanel', details);
  1255.         if (this.isDesktop) {
  1256.           const list = queryOne('.ecl-mega-menu__sublist', menuItem);
  1257.           if (list) {
  1258.             // Expand the first item in the sublist if it contains children.
  1259.             const expandedChild = Array.from(list.children)[0].hasAttribute(
  1260.               'aria-expanded',
  1261.             )
  1262.               ? Array.from(list.children)[0]
  1263.               : false;
  1264.             if (expandedChild) {
  1265.               this.handleSecondPanel(expandedChild, 'expand');
  1266.             }
  1267.           }
  1268.         }
  1269.         break;
  1270.       }
  1272.       case 'collapse':
  1273.         this.closeOpenDropdown();
  1274.         break;
  1276.       default:
  1277.     }
  1278.   }
  1280.   /**
  1281.    * Show/hide the second panel
  1282.    *
  1283.    * @param {Node} menuItem
  1284.    * @param {string} op (expand or collapse)
  1285.    *
  1286.    * @fires MegaMenu#onOpenPanel
  1287.    */
  1288.   handleSecondPanel(menuItem, op) {
  1289.     const infoPanel = queryOne(
  1290.       '.ecl-mega-menu__info',
  1291.       menuItem.closest('.ecl-container'),
  1292.     );
  1293.     let siblings;
  1294.     switch (op) {
  1295.       case 'expand': {
  1296.         this.element.classList.remove(
  1297.           'ecl-mega-menu--one-panel',
  1298.           'ecl-mega-menu--start-panel',
  1299.         );
  1300.         this.element.classList.add('ecl-mega-menu--two-panels');
  1301.         this.subItems.forEach((item) => {
  1302.           const itemLink = queryOne(this.subLinkSelector, item);
  1303.           if (item === menuItem) {
  1304.             if (item.hasAttribute('aria-expanded')) {
  1305.               item.setAttribute('aria-expanded', 'true');
  1306.               itemLink.setAttribute('aria-expanded', 'true');
  1307.               this.items.forEach((mainItem) => {
  1308.                 const link = queryOne('a', mainItem);
  1309.                 if (link) {
  1310.                   link.removeAttribute('aria-current');
  1311.                 }
  1312.               });
  1313.               itemLink.setAttribute('aria-current', 'true');
  1315.               if (!this.isDesktop) {
  1316.                 // We use this class mainly to recover the default behavior of the link.
  1317.                 itemLink.classList.add('ecl-mega-menu__parent-link');
  1318.               }
  1319.               item.classList.add('ecl-mega-menu__subitem--expanded');
  1320.             }
  1321.             item.classList.add('ecl-mega-menu__subitem--current');
  1322.             this.backItemLevel2 = item;
  1323.           } else {
  1324.             if (item.hasAttribute('aria-expanded')) {
  1325.               item.setAttribute('aria-expanded', 'false');
  1326.               itemLink.setAttribute('aria-expanded', 'false');
  1327.               itemLink.removeAttribute('aria-current');
  1328.               itemLink.classList.remove('ecl-mega-menu__parent-link');
  1329.               item.classList.remove('ecl-mega-menu__subitem--expanded');
  1330.             }
  1331.             item.classList.remove('ecl-mega-menu__subitem--current');
  1332.           }
  1333.         });
  1335.         this.openPanel = { num: 2, item: menuItem };
  1336.         siblings = menuItem.parentNode.childNodes;
  1337.         if (this.isDesktop) {
  1338.           // Reset style for the siblings, in case they were hidden
  1339.           siblings.forEach((sibling) => {
  1340.             if (sibling !== menuItem) {
  1341.               sibling.style.display = '';
  1342.             }
  1343.           });
  1344.         } else {
  1345.           // Hide other items in the sublist
  1346.           siblings.forEach((sibling) => {
  1347.             if (sibling !== menuItem) {
  1348.               sibling.style.display = 'none';
  1349.             }
  1350.           });
  1351.         }
  1352.         this.positionMenuOverlay();
  1353.         const details = { panel: 2, item: menuItem };
  1354.         this.trigger('OnOpenPanel', details);
  1355.         break;
  1356.       }
  1358.       case 'collapse':
  1359.         this.element.classList.remove('ecl-mega-menu--two-panels');
  1360.         this.openPanel = { num: 1 };
  1361.         menuItem.setAttribute('aria-expanded', 'false');
  1362.         // eslint-disable-next-line no-case-declarations
  1363.         const itemLink = queryOne(this.subLinkSelector, menuItem);
  1364.         itemLink.setAttribute('aria-expanded', 'false');
  1365.         menuItem.classList.remove(
  1366.           'ecl-mega-menu__subitem--expanded',
  1367.           'ecl-mega-menu__subitem--current',
  1368.         );
  1369.         if (infoPanel) {
  1370.           infoPanel.style.top = '';
  1371.         }
  1372.         break;
  1374.       default:
  1375.     }
  1376.   }
  1378.   /**
  1379.    * Click on a menu item
  1380.    *
  1381.    * @param {Event} e
  1382.    *
  1383.    * @fires MegaMenu#onItemClick
  1384.    */
  1385.   handleClickOnItem(e) {
  1386.     let isInTheContainer = false;
  1387.     const menuItem = e.target.closest('li');
  1389.     const container = queryOne(
  1390.       '.ecl-mega-menu__mega-container-scrollable',
  1391.       menuItem,
  1392.     );
  1393.     if (container) {
  1394.       isInTheContainer = container.contains(e.target);
  1395.     }
  1396.     // We need to ensure that the click doesn't come from a parent link
  1397.     // or from an open container, in that case we do not act.
  1398.     if (
  1399.       !e.target.classList.contains(
  1400.         'ecl-mega-menu__mega-container-scrollable',
  1401.       ) &&
  1402.       !isInTheContainer
  1403.     ) {
  1404.       this.trigger('onItemClick', { item: menuItem, event: e });
  1405.       const hasChildren = menuItem.getAttribute('aria-expanded');
  1406.       if (hasChildren && menuItem.classList.contains('ecl-mega-menu__item')) {
  1407.         e.preventDefault();
  1408.         e.stopPropagation();
  1409.         if (!this.isDesktop) {
  1410.           this.handleFirstPanel(menuItem, 'expand');
  1411.         } else {
  1412.           const isOpen = hasChildren === 'true';
  1413.           if (isOpen) {
  1414.             this.handleFirstPanel(menuItem, 'collapse');
  1415.           } else {
  1416.             this.closeOpenDropdown();
  1417.             this.handleFirstPanel(menuItem, 'expand');
  1418.           }
  1419.         }
  1420.       }
  1421.     }
  1422.   }
  1424.   /**
  1425.    * Click on a subitem
  1426.    *
  1427.    * @param {Event} e
  1428.    */
  1429.   handleClickOnSubitem(e) {
  1430.     const menuItem = e.target.closest(this.subItemSelector);
  1431.     if (menuItem && menuItem.hasAttribute('aria-expanded')) {
  1432.       const parentLink = queryOne('.ecl-mega-menu__parent-link', menuItem);
  1433.       if (parentLink) {
  1434.         return;
  1435.       }
  1436.       e.preventDefault();
  1437.       e.stopPropagation();
  1438.       const isExpanded = menuItem.getAttribute('aria-expanded') === 'true';
  1440.       if (isExpanded) {
  1441.         this.handleSecondPanel(menuItem, 'collapse');
  1442.       } else {
  1443.         this.handleSecondPanel(menuItem, 'expand');
  1444.       }
  1445.     }
  1446.   }
  1448.   /**
  1449.    * Deselect any opened menu item
  1450.    *
  1451.    * @param {boolean} esc, whether the call was originated by a press on Esc
  1452.    *
  1453.    * @fires MegaMenu#onFocusTrapToggle
  1454.    */
  1455.   closeOpenDropdown(esc = false) {
  1456.     this.enableScroll();
  1457.     this.element.setAttribute('aria-expanded', 'false');
  1458.     this.element.removeAttribute('data-expanded');
  1459.     this.element.classList.remove(
  1460.       'ecl-mega-menu--start-panel',
  1461.       'ecl-mega-menu--two-panels',
  1462.       'ecl-mega-menu--one-panel',
  1463.     );
  1464.     this.open.setAttribute('aria-expanded', 'false');
  1465.     // Remove css class and attribute from inner menu
  1466.     this.inner.classList.remove('ecl-mega-menu__inner--expanded');
  1468.     // Reset heights
  1469.     const megaMenus = queryAll(
  1470.       '.ecl-mega-menu__item > .ecl-mega-menu__wrapper > .ecl-container > [data-ecl-mega-menu-mega]',
  1471.       this.element,
  1472.     );
  1473.     megaMenus.forEach((mega) => {
  1474.       mega.style.height = '';
  1475.       mega.style.top = '';
  1476.     });
  1477.     let currentItem = false;
  1478.     // Remove css class and attribute from menu items
  1479.     this.items.forEach((item) => {
  1480.       item.classList.remove('ecl-mega-menu__item--current');
  1481.       const itemLink = queryOne(this.linkSelector, item);
  1482.       if (item.getAttribute('aria-expanded') === 'true') {
  1483.         item.setAttribute('aria-expanded', 'false');
  1484.         item.classList.remove('ecl-mega-menu__item--expanded');
  1485.         itemLink.setAttribute('aria-expanded', 'false');
  1486.         currentItem = itemLink;
  1487.       }
  1488.       itemLink.removeAttribute('aria-current');
  1489.     });
  1490.     // Remove css class and attribute from menu subitems
  1491.     this.subItems.forEach((item) => {
  1492.       item.classList.remove('ecl-mega-menu__subitem--current');
  1493.       item.removeAttribute('aria-current');
  1494.       item.style.display = '';
  1495.       const itemLink = queryOne(this.subLinkSelector, item);
  1496.       itemLink.removeAttribute('aria-current');
  1497.       if (item.hasAttribute('aria-expanded')) {
  1498.         item.classList.remove('ecl-mega-menu__subitem--expanded');
  1499.         item.setAttribute('aria-expanded', 'false');
  1500.         item.style.display = '';
  1501.         itemLink.setAttribute('aria-expanded', 'false');
  1502.         itemLink.classList.remove('ecl-mega-menu__parent-link');
  1503.       }
  1504.     });
  1505.     // Remove styles set for the sublists
  1506.     const sublists = queryAll('.ecl-mega-menu__sublist');
  1507.     if (sublists) {
  1508.       sublists.forEach((sublist) => {
  1509.         sublist.classList.remove(
  1510.           'ecl-mega-menu__sublist--no-border',
  1511.           '.ecl-mega-menu__sublist--scrollable',
  1512.         );
  1513.       });
  1514.     }
  1515.     // Update label
  1516.     const openLabel = this.element.getAttribute(this.labelOpenAttribute);
  1517.     if (this.toggleLabel && openLabel) {
  1518.       this.toggleLabel.innerHTML = openLabel;
  1519.     }
  1520.     this.openPanel = {
  1521.       num: 0,
  1522.       item: false,
  1523.     };
  1524.     // If the focus trap is active, deactivate it
  1525.     this.focusTrap.deactivate();
  1526.     // Focus on the open button in mobile or on the formerly expanded item in desktop.
  1527.     if (!this.isDesktop && this.open && esc) {
  1528.       this.open.focus();
  1529.     } else if (this.isDesktop && currentItem && esc) {
  1530.       currentItem.focus();
  1531.     }
  1532.     this.trigger('onFocusTrapToggle', { active: false });
  1533.     this.isOpen = false;
  1534.   }
  1536.   /**
  1537.    * Focus out of a menu link
  1538.    *
  1539.    * @param {Event} e
  1540.    *
  1541.    * @fires MegaMenu#onFocusTrapToggle
  1542.    */
  1543.   handleFocusOut(e) {
  1544.     const element = e.target;
  1545.     const menuExpanded = this.element.getAttribute('aria-expanded');
  1547.     // Specific focus action for mobile menu
  1548.     // Loop through the items and go back to close button
  1549.     if (menuExpanded === 'true' && !this.isDesktop) {
  1550.       const nextItem = element.parentElement.nextSibling;
  1552.       if (!nextItem) {
  1553.         const nextFocusTarget = e.relatedTarget;
  1554.         if (!this.element.contains(nextFocusTarget)) {
  1555.           // This is the last item, go back to close button
  1556.           this.focusTrap.activate();
  1557.           this.trigger('onFocusTrapToggle', {
  1558.             active: true,
  1559.             lastFocusedEl: element.parentElement,
  1560.           });
  1561.         }
  1562.       }
  1563.     }
  1564.   }
  1566.   /**
  1567.    * Handles global click events, triggered outside of the menu.
  1568.    *
  1569.    * @param {Event} e
  1570.    */
  1571.   handleClickGlobal(e) {
  1572.     if (
  1573.       !e.target.classList.contains(
  1574.         'ecl-mega-menu__mega-container-scrollable',
  1575.       ) &&
  1576.       (e.target.classList.contains('ecl-mega-menu__overlay') ||
  1577.         !this.element.contains(e.target)) &&
  1578.       this.isOpen
  1579.     ) {
  1580.       this.closeOpenDropdown();
  1581.     }
  1582.   }
  1583. }
  1585. export default MegaMenu;