@ecl/mega-menu 5.0.0-alpha.2 → 5.0.0-alpha.20

package/mega-menu.js

@@ -1,9 +1,7 @@
-/* eslint-disable  class-methods-use-this */
-
 import { queryOne, queryAll } from '@ecl/dom-utils';
 import EventManager from '@ecl/event-manager';
-import isMobile from 'mobile-device-detect';
 import { createFocusTrap } from 'focus-trap';
+import Bowser from 'bowser';
 
 /**
  * @param {HTMLElement} element DOM element for component instantiation and scope
@@ -138,7 +136,7 @@ export class MegaMenu {
     this.menuOverlay = null;
     this.currentItem = null;
     this.totalItemsWidth = 0;
-    this.breakpointL = 996;
+    this.breakpointL = 1140;
     this.openPanel = { num: 0, item: {} };
     this.infoLinks = null;
     this.seeAllLinks = null;
@@ -361,9 +359,7 @@ export class MegaMenu {
         this.back.removeEventListener('click', this.handleClickOnBack);
       }
 
-      if (this.attachClickListener) {
-        document.removeEventListener('click', this.handleClickGlobal);
-      }
+      document.removeEventListener('click', this.handleClickGlobal);
     }
 
     if (this.links) {
@@ -460,13 +456,17 @@ export class MegaMenu {
    * - not having hamburger menu on screen
    */
   useDesktopDisplay() {
+    const browser = Bowser.getParser(window.navigator.userAgent);
+    const isMobile = browser.getPlatformType() === 'mobile';
+    const isTablet = browser.getPlatformType() === 'tablet';
+
     // Detect mobile devices
-    if (isMobile.isMobileOnly) {
+    if (isMobile) {
       return false;
     }
 
     // Force mobile display on tablet
-    if (isMobile.isTablet) {
+    if (isTablet) {
       this.element.classList.add('ecl-mega-menu--forced-mobile');
       return false;
     }
@@ -492,14 +492,25 @@ export class MegaMenu {
 
     // Remove display:none from the sublists
     if (subLists && viewport === 'mobile') {
-      const megaMenus = queryAll(
-        '.ecl-mega-menu__item > .ecl-mega-menu__wrapper > .ecl-container > [data-ecl-mega-menu-mega]',
+      const megaMenus = queryAll('[data-ecl-mega-menu-mega]', this.element);
+      const featuredPanels = queryAll(
+        '[data-ecl-mega-menu-featured]',
         this.element,
       );
+      if (featuredPanels.length) {
+        megaMenus.push(...featuredPanels);
+      }
+
       megaMenus.forEach((menu) => {
         menu.style.height = '';
       });
 
+      if (subLists.length) {
+        subLists.forEach((list) => {
+          list.style.height = '';
+        });
+      }
+
       // Reset top position and height of the wrappers
       if (this.wrappers) {
         this.wrappers.forEach((wrapper) => {
@@ -578,7 +589,6 @@ export class MegaMenu {
           this.checkDropdownHeight(current);
         });
       } else {
-        this.element.setAttribute('aria-expanded', 'false');
         this.element.removeAttribute('data-expanded');
         this.open.setAttribute('aria-expanded', 'false');
         this.enableScroll();
@@ -600,10 +610,10 @@ export class MegaMenu {
 
     if (viewport === 'desktop' && this.header) {
       if (this.headerBanner) {
-        this.headerBanner.style.display = 'flex';
+        this.headerBanner.style.display = '';
       }
       if (this.headerNotification) {
-        this.headerNotification.style.display = 'flex';
+        this.headerNotification.style.display = '';
       }
     }
   }
@@ -629,12 +639,12 @@ export class MegaMenu {
             screenWidth > this.breakpointL ? 'desktop' : 'mobile',
           );
         }
-        if (this.prevScreenWidth > 1140 && screenWidth > 996) {
+        if (this.prevScreenWidth >= 1368 && screenWidth >= 1140) {
           this.resetStyles('desktop', true);
         }
       }
       this.isDesktop = this.useDesktopDisplay();
-      this.isLarge = window.innerWidth > 1140;
+      this.isLarge = window.innerWidth >= 1368;
       // Update previous screen width
       this.prevScreenWidth = screenWidth;
       this.element.classList.remove('ecl-mega-menu--forced-mobile');
@@ -663,6 +673,11 @@ export class MegaMenu {
   checkDropdownHeight(menuItem, hide = true) {
     const infoPanel = queryOne('.ecl-mega-menu__info', menuItem);
     const mainPanel = queryOne('.ecl-mega-menu__mega', menuItem);
+    const expanded = queryOne('.ecl-mega-menu__subitem--expanded', menuItem);
+    let secondPanel = null;
+    if (expanded) {
+      secondPanel = queryOne('.ecl-mega-menu__mega--level-2', expanded);
+    }
     // Hide the panels while calculating their heights
     if (mainPanel && this.isDesktop && hide) {
       mainPanel.style.opacity = 0;
@@ -670,6 +685,10 @@ export class MegaMenu {
     if (infoPanel && this.isDesktop && hide) {
       infoPanel.style.opacity = 0;
     }
+    // Second panel has already zero opacity in reality, this is for consistency
+    if (secondPanel && this.isDesktop && hide) {
+      secondPanel.opacity = 0;
+    }
     setTimeout(() => {
       const viewportHeight = window.innerHeight;
       let infoPanelHeight = 0;
@@ -677,11 +696,12 @@ export class MegaMenu {
       if (this.isDesktop) {
         const heights = [];
         let height = 0;
-        let secondPanel = null;
         let featuredPanel = null;
+        let featuredPanelFirst = null;
         let itemsHeight = 0;
         let subItemsHeight = 0;
         let featuredHeight = 0;
+        let featuredFirstHeight = 0;
 
         if (infoPanel) {
           infoPanel.style.height = '';
@@ -693,6 +713,7 @@ export class MegaMenu {
           itemsHeight = infoPanelHeight;
           subItemsHeight = infoPanelHeight;
           featuredHeight = infoPanelHeight;
+          featuredFirstHeight = infoPanelHeight;
         }
 
         if (mainPanel) {
@@ -723,39 +744,52 @@ export class MegaMenu {
               heights.push(itemsHeight);
             }
           }
+          featuredPanelFirst = queryOne(
+            ':scope > .ecl-mega-menu__featured',
+            mainPanel,
+          );
+          if (featuredPanelFirst) {
+            // Get the elements inside the scrollable container and calculate their heights.
+            Array.from(featuredPanelFirst.firstElementChild.children).forEach(
+              (child) => {
+                const elStyle = window.getComputedStyle(child);
+                const marginHeight =
+                  parseFloat(elStyle.marginTop) +
+                  parseFloat(elStyle.marginBottom);
+                featuredFirstHeight += child.offsetHeight + marginHeight;
+              },
+            );
+            // Add 8px to the featured panel height to prevent scrollbar
+            featuredFirstHeight += 8;
+            heights.push(featuredFirstHeight);
+          }
         }
-        const expanded = queryOne(
-          '.ecl-mega-menu__subitem--expanded',
-          menuItem,
-        );
-
-        if (expanded) {
-          secondPanel = queryOne('.ecl-mega-menu__mega--level-2', expanded);
-          if (secondPanel) {
-            secondPanel.style.height = '';
-            const subItems = queryAll(`${this.subItemSelector}`, secondPanel);
-            if (subItems.length > 0) {
-              subItems.forEach((item) => {
-                subItemsHeight += item.getBoundingClientRect().height;
-              });
-            }
-            heights.push(subItemsHeight);
-            // Featured panel calculations.
-            featuredPanel = queryOne('.ecl-mega-menu__featured', expanded);
-            if (featuredPanel) {
-              // Get the elements inside the scrollable container and calculate their heights.
-              Array.from(featuredPanel.firstElementChild.children).forEach(
-                (child) => {
-                  const elStyle = window.getComputedStyle(child);
-                  const marginHeight =
-                    parseFloat(elStyle.marginTop) +
-                    parseFloat(elStyle.marginBottom);
-                  featuredHeight += child.offsetHeight + marginHeight;
-                },
-              );
 
-              heights.push(featuredHeight);
-            }
+        if (secondPanel) {
+          secondPanel.style.height = '';
+          const subItems = queryAll(`${this.subItemSelector}`, secondPanel);
+          if (subItems.length > 0) {
+            subItems.forEach((item) => {
+              subItemsHeight += item.getBoundingClientRect().height;
+            });
+          }
+          heights.push(subItemsHeight);
+          // Featured panel calculations.
+          featuredPanel = queryOne('.ecl-mega-menu__featured', expanded);
+          if (featuredPanel) {
+            // Get the elements inside the scrollable container and calculate their heights.
+            Array.from(featuredPanel.firstElementChild.children).forEach(
+              (child) => {
+                const elStyle = window.getComputedStyle(child);
+                const marginHeight =
+                  parseFloat(elStyle.marginTop) +
+                  parseFloat(elStyle.marginBottom);
+                featuredHeight += child.offsetHeight + marginHeight;
+              },
+            );
+            // Add 5px to the featured panel height to prevent scrollbar on hover
+            featuredHeight += 5;
+            heights.push(featuredHeight);
           }
         }
 
@@ -764,6 +798,11 @@ export class MegaMenu {
         const containerBottom = containerBounding.bottom;
         // By requirements, limit the height to the 70% of the available space.
         const availableHeight = (window.innerHeight - containerBottom) * 0.7;
+        const minHeight =
+          parseFloat(
+            window.getComputedStyle(queryOne('.ecl-mega-menu__wrapper'))
+              .minHeight,
+          ) || 0;
 
         if (maxHeight > availableHeight) {
           height = availableHeight;
@@ -771,10 +810,15 @@ export class MegaMenu {
           height = maxHeight;
         }
 
+        if (height < minHeight) {
+          height = minHeight;
+        }
+
         const wrapper = queryOne('.ecl-mega-menu__wrapper', menuItem);
         if (wrapper) {
           wrapper.style.height = `${height}px`;
         }
+
         if (mainPanel && this.isLarge) {
           mainPanel.style.height = `${height}px`;
         } else if (mainPanel && infoPanel && this.isDesktop) {
@@ -788,6 +832,11 @@ export class MegaMenu {
         } else if (secondPanel && this.isDesktop) {
           secondPanel.style.height = `${height - infoPanelHeight}px`;
         }
+        if (featuredPanelFirst && this.isLarge) {
+          featuredPanelFirst.style.height = `${height}px`;
+        } else if (featuredPanelFirst && this.isDesktop) {
+          featuredPanelFirst.style.height = `${height - infoPanelHeight}px`;
+        }
         if (featuredPanel && this.isLarge) {
           featuredPanel.style.height = `${height}px`;
         } else if (featuredPanel && this.isDesktop) {
@@ -800,6 +849,9 @@ export class MegaMenu {
       if (infoPanel && this.isDesktop) {
         infoPanel.style.opacity = 1;
       }
+      if (secondPanel && this.isDesktop) {
+        secondPanel.style.opacity = 1;
+      }
     }, 100);
   }
 
@@ -824,46 +876,62 @@ export class MegaMenu {
           const item = queryOne('.ecl-mega-menu__item--expanded', this.element);
 
           if (item) {
-            const subList = queryOne('.ecl-mega-menu__sublist', item);
-            if (subList && this.openPanel.num === 1) {
-              const info = queryOne('.ecl-mega-menu__info', item);
-              if (info) {
-                const bottomRect = info.getBoundingClientRect();
-                const bottomInfo = bottomRect.bottom;
-                availableHeight = window.innerHeight - bottomInfo - 16;
+            const hasFeatured = queryOne(
+              '.ecl-mega-menu__mega--has-featured',
+              item,
+            );
+            const info = queryOne('.ecl-mega-menu__info', item);
+            if (info && this.openPanel.num === 1) {
+              const bottomRect = info.getBoundingClientRect();
+              const bottomInfo = bottomRect.bottom;
+              availableHeight = window.innerHeight - bottomInfo - 16;
+            }
+            if (hasFeatured) {
+              const hasFeaturedRect = hasFeatured.getBoundingClientRect();
+              const hasFeaturedTop = hasFeaturedRect.top;
+              availableHeight =
+                availableHeight || window.innerHeight - hasFeaturedTop;
+              hasFeatured.style.height = `${availableHeight}px`;
+            } else {
+              const subList = queryOne('.ecl-mega-menu__sublist', item);
+              if (subList && this.openPanel.num === 1) {
+                const subListRect = subList.getBoundingClientRect();
+                const subListRectTop = subListRect.top;
                 subList.classList.add('ecl-mega-menu__sublist--scrollable');
+                availableHeight =
+                  availableHeight || window.innerHeight - subListRectTop;
                 subList.style.height = `${availableHeight}px`;
+              } else if (subList) {
+                subList.classList.remove('ecl-mega-menu__sublist--scrollable');
+                subList.style.height = '';
               }
-            } else if (subList) {
-              subList.classList.remove('ecl-mega-menu__sublist--scrollable');
-              subList.style.height = '';
-            }
-          }
 
-          if (this.openPanel.num === 2) {
-            const subItem = queryOne(
-              '.ecl-mega-menu__subitem--expanded',
-              this.element,
-            );
-            if (subItem) {
-              const subMega = queryOne(
-                '.ecl-mega-menu__mega--level-2',
-                subItem,
-              );
-              if (subMega) {
-                const subMegaRect = subMega.getBoundingClientRect();
-                const subMegaTop = subMegaRect.top;
-                availableHeight = window.innerHeight - subMegaTop;
-                subMega.style.height = `${availableHeight}px`;
+              if (this.openPanel.num === 2) {
+                const subItem = queryOne(
+                  '.ecl-mega-menu__subitem--expanded',
+                  this.element,
+                );
+                if (subItem) {
+                  const subMega = queryOne(
+                    '.ecl-mega-menu__mega--level-2',
+                    subItem,
+                  );
+                  if (subMega) {
+                    const subMegaRect = subMega.getBoundingClientRect();
+                    const subMegaTop = subMegaRect.top;
+                    availableHeight = window.innerHeight - subMegaTop;
+                    subMega.style.height = `${availableHeight}px`;
+                  }
+                }
+              }
+              if (this.wrappers) {
+                this.wrappers.forEach((wrapper) => {
+                  wrapper.style.top = '';
+                  wrapper.style.height = '';
+                });
               }
             }
           }
-          if (this.wrappers) {
-            this.wrappers.forEach((wrapper) => {
-              wrapper.style.top = '';
-              wrapper.style.height = '';
-            });
-          }
         }
       }, 0);
     } else {
@@ -903,7 +971,7 @@ export class MegaMenu {
   handleKeyboard(e) {
     const element = e.target;
     const cList = element.classList;
-    const menuExpanded = this.element.getAttribute('aria-expanded');
+    const menuExpanded = this.element.getAttribute('data-expanded');
 
     // Detect press on Escape
     if (e.key === 'Escape' || e.key === 'Esc') {
@@ -911,7 +979,7 @@ export class MegaMenu {
         element.blur();
       }
 
-      if (menuExpanded === 'false') {
+      if (!menuExpanded) {
         this.closeOpenDropdown();
       }
       return;
@@ -1155,7 +1223,7 @@ export class MegaMenu {
     } else {
       e.preventDefault();
       this.disableScroll();
-      this.element.setAttribute('aria-expanded', 'true');
+      this.element.setAttribute('data-expanded', true);
       this.element.classList.add('ecl-mega-menu--start-panel');
       this.element.classList.remove(
         'ecl-mega-menu--one-panel',
@@ -1197,7 +1265,7 @@ export class MegaMenu {
    * @fires Menu#onClose
    */
   handleClickOnClose(e) {
-    if (this.element.getAttribute('aria-expanded') === 'true') {
+    if (this.element.getAttribute('data-expanded')) {
       this.focusTrap.deactivate();
       this.closeOpenDropdown();
       this.trigger('onClose', e);
@@ -1238,6 +1306,7 @@ export class MegaMenu {
         'ecl-mega-menu--start-panel',
       );
       this.element.classList.add('ecl-mega-menu--one-panel');
+      this.element.classList.remove('ecl-mega-menu--has-secondary-featured');
       level2.setAttribute('aria-expanded', 'false');
       level2.classList.remove(
         'ecl-mega-menu__subitem--expanded',
@@ -1263,10 +1332,10 @@ export class MegaMenu {
     } else {
       if (this.header) {
         if (this.headerBanner) {
-          this.headerBanner.style.display = 'flex';
+          this.headerBanner.style.display = '';
         }
         if (this.headerNotification) {
-          this.headerNotification.style.display = 'flex';
+          this.headerNotification.style.display = '';
         }
       }
       // Remove expanded class from inner menu
@@ -1291,9 +1360,9 @@ export class MegaMenu {
       if (this.header) {
         this.header.classList.add('ecl-site-header--open-menu-start');
       }
-      this.positionMenuOverlay();
     }
 
+    this.positionMenuOverlay();
     this.trigger('onBack', { level: level2 ? 2 : 1 });
   }
 
@@ -1312,7 +1381,6 @@ export class MegaMenu {
         this.positionMenuOverlay();
         this.checkDropdownHeight(menuItem);
         this.element.setAttribute('data-expanded', true);
-        this.element.setAttribute('aria-expanded', 'true');
         this.element.classList.add('ecl-mega-menu--one-panel');
         this.element.classList.remove('ecl-mega-menu--start-panel');
         this.open.setAttribute('aria-expanded', 'true');
@@ -1360,19 +1428,6 @@ export class MegaMenu {
         };
         const details = { panel: 1, item: menuItem };
         this.trigger('OnOpenPanel', details);
-        if (this.isDesktop) {
-          const list = queryOne('.ecl-mega-menu__sublist', menuItem);
-          if (list) {
-            // Expand the item in the sublist if it contains children.
-            const firstExpandedChild = Array.from(list.children).find((child) =>
-              child.firstElementChild?.hasAttribute('aria-expanded'),
-            );
-
-            if (firstExpandedChild) {
-              this.handleSecondPanel(firstExpandedChild, 'expand', true);
-            }
-          }
-        }
         break;
       }
 
@@ -1392,7 +1447,7 @@ export class MegaMenu {
    *
    * @fires MegaMenu#onOpenPanel
    */
-  handleSecondPanel(menuItem, op, noCheck = false) {
+  handleSecondPanel(menuItem, op) {
     const infoPanel = queryOne(
       '.ecl-mega-menu__info',
       menuItem.closest('.ecl-container'),
@@ -1410,17 +1465,30 @@ export class MegaMenu {
           if (item === menuItem) {
             if (itemLink && itemLink.hasAttribute('aria-expanded')) {
               itemLink.setAttribute('aria-expanded', 'true');
-
+              const mega = queryOne('.ecl-mega-menu__mega', item);
               if (!this.isDesktop) {
                 // We use this class mainly to recover the default behavior of the link.
                 itemLink.classList.add('ecl-mega-menu__parent-link');
                 if (this.back) {
                   this.back.focus();
                 }
+              } else {
+                // Hide the panel since it will be resized later.
+                mega.style.opacity = 0;
               }
               item.classList.add('ecl-mega-menu__subitem--expanded');
             }
             item.classList.add('ecl-mega-menu__subitem--current');
+            const hasFeatured = queryOne('.ecl-mega-menu__featured', item);
+            if (hasFeatured) {
+              this.element.classList.add(
+                'ecl-mega-menu--has-secondary-featured',
+              );
+            } else {
+              this.element.classList.remove(
+                'ecl-mega-menu--has-secondary-featured',
+              );
+            }
             this.backItemLevel2 = item;
           } else {
             if (itemLink && itemLink.hasAttribute('aria-expanded')) {
@@ -1450,12 +1518,11 @@ export class MegaMenu {
           });
         }
         this.positionMenuOverlay();
-        if (!noCheck) {
-          this.checkDropdownHeight(
-            menuItem.closest('.ecl-mega-menu__item'),
-            false,
-          );
-        }
+        this.checkDropdownHeight(
+          menuItem.closest('.ecl-mega-menu__item'),
+          false,
+        );
+
         const details = { panel: 2, item: menuItem };
         this.trigger('OnOpenPanel', details);
         break;
@@ -1463,6 +1530,7 @@ export class MegaMenu {
 
       case 'collapse':
         this.element.classList.remove('ecl-mega-menu--two-panels');
+        this.element.classList.remove('ecl-mega-menu--has-secondary-featured');
         this.openPanel = { num: 1 };
         // eslint-disable-next-line no-case-declarations
         const itemLink = queryOne(this.subLinkSelector, menuItem);
@@ -1474,6 +1542,12 @@ export class MegaMenu {
         if (infoPanel) {
           infoPanel.style.top = '';
         }
+
+        this.positionMenuOverlay();
+        this.checkDropdownHeight(
+          menuItem.closest('.ecl-mega-menu__item'),
+          false,
+        );
         break;
 
       default:
@@ -1560,20 +1634,20 @@ export class MegaMenu {
    * @fires MegaMenu#onFocusTrapToggle
    */
   closeOpenDropdown(esc = false) {
+    this.element.classList.remove('ecl-mega-menu--has-secondary-featured');
     if (this.header) {
       this.header.classList.remove(
         'ecl-site-header--open-menu',
         'ecl-site-header--open-menu-start',
       );
       if (this.headerBanner) {
-        this.headerBanner.style.display = 'flex';
+        this.headerBanner.style.display = '';
       }
       if (this.headerNotification) {
-        this.headerNotification.style.display = 'flex';
+        this.headerNotification.style.display = '';
       }
     }
     this.enableScroll();
-    this.element.setAttribute('aria-expanded', 'false');
     this.element.removeAttribute('data-expanded');
     this.element.classList.remove(
       'ecl-mega-menu--start-panel',
@@ -1626,7 +1700,7 @@ export class MegaMenu {
       sublists.forEach((sublist) => {
         sublist.classList.remove(
           'ecl-mega-menu__sublist--no-border',
-          '.ecl-mega-menu__sublist--scrollable',
+          'ecl-mega-menu__sublist--scrollable',
         );
       });
     }
@@ -1660,11 +1734,11 @@ export class MegaMenu {
    */
   handleFocusOut(e) {
     const element = e.target;
-    const menuExpanded = this.element.getAttribute('aria-expanded');
+    const menuExpanded = this.element.getAttribute('data-expanded');
 
     // Specific focus action for mobile menu
     // Loop through the items and go back to close button
-    if (menuExpanded === 'true' && !this.isDesktop) {
+    if (menuExpanded && !this.isDesktop) {
       const nextItem = element.parentElement.nextSibling;
 
       if (!nextItem) {