@ecl/mega-menu 5.0.0-alpha.4 → 5.0.0-alpha.6

package/README.md

@@ -31,7 +31,7 @@ npm install --save @ecl/mega-menu
   "featured" (object) (optional) {
   "title": (string)
   "content": (string)
-  "items": (associative array)
+  "items": (associative array) Array of items with image and link
   }
   "children": (associative array) (optional): [
   {

package/mega-menu-item.html.twig

@@ -20,6 +20,7 @@
       - "title" (string) Title of the featured panel
       - "content" (string) Content of the featured panel
       - "items" (associative array) Array of items
+        - "picture": (object) (default: {}) Object of type Picture
         - "path" (string) Path or Url for the href
         - "label" (string) Label of the item
         - "external" (boolean) Whether the link is external
@@ -247,7 +248,7 @@
         {% endif %}
         <li
           class="{{ _subitem_class }}"
-          {{- _subitem_attrs|raw -}}
+          {{ _subitem_attrs|raw }}
         >
         {%- if child.children is defined and child.children is not empty -%}
           {# Children, 2nd level #}
@@ -322,13 +323,6 @@
         data-ecl-mega-menu-featured
       >
         <div class="ecl-mega-menu__featured-scrollable">
-      {% if _featured.picture is not empty %}
-        {% include '@ecl/picture/picture.html.twig' with {
-          picture: _featured.picture,
-          extra_classes: 'ecl-mega-menu__featured-picture',
-          extra_image_classes: 'ecl-mega-menu__featured-image',
-        } only %}
-      {% endif %}
       {% if _featured.title is not empty %}
         <span
           class="ecl-mega-menu__featured-title"
@@ -347,6 +341,13 @@
           >
             {% for item in _featured.items %}
               <li class="ecl-mega-menu__featured-list__item">
+              {% if item.picture is not empty %}
+                {% include '@ecl/picture/picture.html.twig' with {
+                  picture: item.picture,
+                  extra_classes: 'ecl-mega-menu__featured-picture',
+                  extra_image_classes: 'ecl-mega-menu__featured-image',
+                } only %}
+              {% endif %}
               {% include '@ecl/link/link.html.twig' with {
                 link: item|merge({ type: 'standalone', icon_path: _icon_path }),
                 extra_attributes: [

package/mega-menu.html.twig

@@ -27,7 +27,7 @@
       "featured" (oject) (optional) {
         - "title": (string) Title of the featured panel
         - "content": (string) Top content of the featured panel
-        - "items": (associative array) (optional) Object of type ECL link
+        - "items": (associative array) (optional) Array of items with image and link
       }
       "children": (associative array) (optional): [
         {
@@ -93,7 +93,6 @@
   {%- if _close is not empty and _close.label is defined and _close.label is not empty -%}
     data-ecl-mega-menu-label-close="{{ _close.label }}"
   {%- endif -%}
-  aria-expanded="false"
   role="navigation"
   id={{ _id }}
   {%- if _aria_label is not empty %}

package/mega-menu.js

@@ -2,8 +2,8 @@
 
 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
@@ -143,6 +143,7 @@ export class MegaMenu {
     this.infoLinks = null;
     this.seeAllLinks = null;
     this.featuredLinks = null;
+    this.featuredImages = null;
 
     // Bind `this` for use in callbacks
     this.handleClickOnOpen = this.handleClickOnOpen.bind(this);
@@ -152,6 +153,8 @@ export class MegaMenu {
     this.handleClickGlobal = this.handleClickGlobal.bind(this);
     this.handleClickOnItem = this.handleClickOnItem.bind(this);
     this.handleClickOnSubitem = this.handleClickOnSubitem.bind(this);
+    this.handleClickOnFeaturedImage =
+      this.handleClickOnFeaturedImage.bind(this);
     this.handleFocusOut = this.handleFocusOut.bind(this);
     this.handleKeyboard = this.handleKeyboard.bind(this);
     this.handleKeyboardGlobal = this.handleKeyboardGlobal.bind(this);
@@ -194,6 +197,10 @@ export class MegaMenu {
     );
     this.toggleLabel = queryOne('.ecl-button__label', this.open);
     this.menuOverlay = queryOne('.ecl-mega-menu__overlay', this.element);
+    this.featuredImages = queryAll(
+      '.ecl-mega-menu__featured-image',
+      this.element,
+    );
 
     // Check if we should use desktop display (it does not rely only on breakpoints)
     this.isDesktop = this.useDesktopDisplay();
@@ -211,6 +218,12 @@ export class MegaMenu {
         this.back.addEventListener('keyup', this.handleKeyboard);
       }
 
+      if (this.featuredImages) {
+        this.featuredImages.forEach((img) => {
+          img.addEventListener('click', this.handleClickOnFeaturedImage);
+        });
+      }
+
       // Global click
       if (this.attachClickListener) {
         document.addEventListener('click', this.handleClickGlobal);
@@ -361,9 +374,13 @@ export class MegaMenu {
         this.back.removeEventListener('click', this.handleClickOnBack);
       }
 
-      if (this.attachClickListener) {
-        document.removeEventListener('click', this.handleClickGlobal);
+      if (this.featuredImages) {
+        this.featuredImages.forEach((img) => {
+          img.removeEventListener('click', this.handleClickOnFeaturedImage);
+        });
       }
+
+      document.removeEventListener('click', this.handleClickGlobal);
     }
 
     if (this.links) {
@@ -460,13 +477,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;
     }
@@ -578,7 +599,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();
@@ -663,6 +683,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 +695,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,7 +706,6 @@ export class MegaMenu {
       if (this.isDesktop) {
         const heights = [];
         let height = 0;
-        let secondPanel = null;
         let featuredPanel = null;
         let itemsHeight = 0;
         let subItemsHeight = 0;
@@ -724,38 +752,31 @@ export class MegaMenu {
             }
           }
         }
-        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;
-                },
-              );
+        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);
-            }
+            heights.push(featuredHeight);
           }
         }
 
@@ -800,6 +821,9 @@ export class MegaMenu {
       if (infoPanel && this.isDesktop) {
         infoPanel.style.opacity = 1;
       }
+      if (secondPanel && this.isDesktop) {
+        secondPanel.style.opacity = 1;
+      }
     }, 100);
   }
 
@@ -903,7 +927,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 +935,7 @@ export class MegaMenu {
         element.blur();
       }
 
-      if (menuExpanded === 'false') {
+      if (!menuExpanded) {
         this.closeOpenDropdown();
       }
       return;
@@ -1155,7 +1179,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 +1221,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);
@@ -1297,6 +1321,19 @@ export class MegaMenu {
     this.trigger('onBack', { level: level2 ? 2 : 1 });
   }
 
+  /**
+   * Programmatically click the related link when an image is clicked
+   *
+   * @param {Event} e
+   */
+  handleClickOnFeaturedImage(e) {
+    const featuredImage = e.target;
+    const featuredLink = featuredImage.parentElement.nextSibling;
+    if (featuredLink) {
+      featuredLink.click();
+    }
+  }
+
   /**
    * Show/hide the first panel
    *
@@ -1312,7 +1349,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 +1396,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 +1415,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,13 +1433,16 @@ 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');
             }
@@ -1450,12 +1476,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;
@@ -1573,7 +1598,6 @@ export class MegaMenu {
       }
     }
     this.enableScroll();
-    this.element.setAttribute('aria-expanded', 'false');
     this.element.removeAttribute('data-expanded');
     this.element.classList.remove(
       'ecl-mega-menu--start-panel',
@@ -1660,11 +1684,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) {

package/mega-menu.scss

@@ -80,7 +80,7 @@ $mega-menu: null !default;
   }
 }
 
-.ecl-mega-menu[aria-expanded='true'] .ecl-mega-menu__open {
+.ecl-mega-menu[data-expanded] .ecl-mega-menu__open {
   background-color: map.get($mega-menu, 'mobile', 'open-background-active');
 
   .ecl-icon:first-of-type {
@@ -164,7 +164,7 @@ $mega-menu: null !default;
 }
 
 // Expanded
-.ecl-mega-menu[aria-expanded='true'] .ecl-mega-menu__inner {
+.ecl-mega-menu[data-expanded] .ecl-mega-menu__inner {
   display: block;
   right: 0;
 }
@@ -275,8 +275,7 @@ $mega-menu: null !default;
   z-index: -1;
 }
 
-.ecl-mega-menu[aria-expanded='true'],
-.ecl-mega-menu[data-expanded='true'] {
+.ecl-mega-menu[data-expanded] {
   .ecl-mega-menu__overlay {
     display: block;
   }
@@ -318,6 +317,7 @@ $mega-menu: null !default;
 .ecl-mega-menu__wrapper {
   background: map.get($theme, 'color', 'white');
   display: none;
+  font: map.get($mega-menu, 'global', 'font');
   position: absolute;
   height: 100%;
   left: 0;
@@ -358,12 +358,14 @@ $mega-menu: null !default;
 .ecl-mega-menu__featured-list__item .ecl-link {
   align-items: center;
   background: transparent;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
   border-bottom: 1px solid
     map.get($mega-menu, 'desktop', 'sublink-current-background');
   border-radius: 0;
   box-sizing: border-box;
   color: map.get($mega-menu, 'mobile', 'item-color');
   display: inline-flex;
+  font: map.get($mega-menu, 'global', 'font');
   line-height: map.get($theme, 'line-height-ui', 'xs');
   padding: map.get($mega-menu, 'mobile', 'item-padding');
   position: relative;
@@ -468,7 +470,6 @@ $mega-menu: null !default;
   }
 
   .ecl-mega-menu__info-content {
-    font: var(--f-m);
     max-width: var(--max-w);
   }
 }
@@ -553,7 +554,6 @@ $mega-menu: null !default;
       border-radius: 0;
       color: map.get($mega-menu, 'desktop', 'item-color');
       display: inline-flex;
-      font: var(--f-m);
       height: 100%;
       line-height: map.get($mega-menu, 'desktop', 'link-line-height');
       padding: map.get($mega-menu, 'desktop', 'link-padding');
@@ -686,8 +686,6 @@ $mega-menu: null !default;
     background-color: map.get($mega-menu, 'global', 'greysh-background');
     box-shadow: none;
     display: none;
-    font: map.get($mega-menu, 'mobile', 'subtitle-font');
-    font-weight: map.get($mega-menu, 'mobile', 'subtitle-font-weight');
   }
 }
 
@@ -771,7 +769,6 @@ $mega-menu: null !default;
       border-radius: 0;
       box-sizing: border-box;
       color: var(--c-d);
-      font: var(--f-m);
       margin: 0 var(--s-l);
       padding: var(--s-xs) 0;
 
@@ -798,10 +795,12 @@ $mega-menu: null !default;
 .ecl-mega-menu__sublink {
   background: transparent;
   box-sizing: border-box;
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
   border-bottom: 1.5px solid
     map.get($mega-menu, 'desktop', 'sublink-current-background');
   border-radius: 0;
   color: map.get($mega-menu, 'mobile', 'item-color');
+  font: map.get($mega-menu, 'global', 'font');
   padding: map.get($mega-menu, 'mobile', 'subitem-padding');
   position: relative;
   line-height: map.get($theme, 'line-height-ui', 'xs');
@@ -906,9 +905,11 @@ $mega-menu: null !default;
     display: block;
 
     .ecl-mega-menu__featured-image {
-      aspect-ratio: 21/9;
+      cursor: pointer;
+      aspect-ratio: 16/9;
       display: block;
       margin-inline-start: var(--s-l);
+      margin-block-start: var(--s-m);
       max-width: 15.25rem;
     }
   }
@@ -917,7 +918,7 @@ $mega-menu: null !default;
     display: block;
     margin: calc(var(--s-xs) + 2px) var(--s-m) calc(var(--s-xs) + 2px)
       var(--s-l);
-    font: var(--f-l);
+    font: var(--f-m);
   }
 
   .ecl-mega-menu__featured-content {
@@ -1291,6 +1292,8 @@ $mega-menu: null !default;
     top: 0;
 
     .ecl-mega-menu__featured-scrollable {
+      height: 100%;
+
       @include with-scrollbar;
     }
 
@@ -1298,8 +1301,9 @@ $mega-menu: null !default;
       display: block;
 
       .ecl-mega-menu__featured-image {
-        aspect-ratio: 21/9;
+        aspect-ratio: 16/9;
         display: block;
+        margin-block-start: 0;
         margin-inline-start: var(--s-s);
         max-width: calc(100% - var(--s-s));
       }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@ecl/mega-menu",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "5.0.0-alpha.4",
+  "version": "5.0.0-alpha.6",
   "description": "ECL Mega Menu",
   "publishConfig": {
     "access": "public"
@@ -11,12 +11,12 @@
   "module": "mega-menu.js",
   "style": "mega-menu.scss",
   "dependencies": {
-    "@ecl/button": "5.0.0-alpha.4",
-    "@ecl/dom-utils": "5.0.0-alpha.4",
-    "@ecl/event-manager": "5.0.0-alpha.4",
-    "@ecl/link": "5.0.0-alpha.4",
-    "focus-trap": "7.6.4",
-    "mobile-device-detect": "0.4.3"
+    "@ecl/button": "5.0.0-alpha.6",
+    "@ecl/dom-utils": "5.0.0-alpha.6",
+    "@ecl/event-manager": "5.0.0-alpha.6",
+    "@ecl/link": "5.0.0-alpha.6",
+    "bowser": "2.11.0",
+    "focus-trap": "7.6.4"
   },
   "repository": {
     "type": "git",
@@ -32,5 +32,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "d0f4af0122c47a1332d9b73dd3c17ae26c933e7c"
+  "gitHead": "3a1f904e4fdd672e374de174cc24a2a92e1268c4"
 }