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