@ecl/mega-menu 5.0.0-alpha.21 → 5.0.0-alpha.22.1

package/README.md

@@ -33,6 +33,7 @@ npm install --save @ecl/mega-menu
   "container": (string) Empty container to be filled in with content
   "info" (object) (default: {}) Info column
   "title" (string) Title of the info panel
+  "one_level_only" (boolean) (default: false)
   "content" (string) Content of the info panel
   "link" (object) Structure for the "discover more" link, following ECL Link
   "featured" (object) (optional) {

package/mega-menu-item.html.twig

@@ -6,6 +6,7 @@
   - "item" (object)
     - "label" (string) Label of the menu link
     - "external" (boolean) External link
+    - "one_level_only" (boolean) (default: false)
     - "promotional" (boolean) (default: false) Promotional menu item, styles can be custommized defining:
         --ecl-mega-menu-item-promotional-bg
         --ecl-mega-menu-item-promotional-hover-bg
@@ -62,6 +63,7 @@
 {% set _menu_list_item_class = 'ecl-mega-menu__item' %}
 {% set _featured = _item.featured|default({}) %}
 {% set _info = _item.info|default({}) %}
+{% set _one_level_only = _item.one_level_only|default(false) %}
 {% set _promotional = _item.promotional|default(false) %}
 {% set _see_all = see_all|default(false) %}
 {% set _sublist_class = 'ecl-mega-menu__sublist' %}
@@ -84,10 +86,18 @@
   {% set _menu_list_item_class = _menu_list_item_class ~ ' ecl-mega-menu__item--has-children' %}
 {% endif %}
 
+{% if _one_level_only %}
+  {% set _menu_list_item_class = _menu_list_item_class ~ ' ecl-mega-menu__item--one-level-only' %}
+{% endif %}
+
 {% if _item.level|default(0) < 2 and _featured is not empty %}
   {% set _mega_class = _mega_class ~ ' ecl-mega-menu__mega--has-featured' %}
 {% endif %}
 
+{% if _info is empty %}
+  {% set _mega_class = _mega_class ~ ' ecl-mega-menu__mega--no-info' %}
+{% endif %}
+
 {% if _item.level == 2 %}
   {% set _mega_class = _mega_class ~ ' ecl-mega-menu__mega--level-2' %}
   {% if _item.children is empty %}
@@ -350,9 +360,12 @@
         {%- endif -%}
         {%- if _featured.items is not empty and _featured.items is iterable -%}
           {% set sublink_id = sublink_id ? sublink_id : _id %}
+          {% set labelled_by = _featured.title is not empty ? 'ecl-mega-menu-featured-title-' ~ sublink_id ~ ' ' ~ sublink_id : sublink_id %}
           <ul
             class="ecl-mega-menu__featured-list"
-            aria-labelledby="{{ 'ecl-mega-menu-featured-title-' ~ sublink_id ~ ' ' ~ sublink_id }}"
+            {% if labelled_by is not empty %}
+              aria-labelledby="{{ labelled_by }}"
+            {% endif %}
           >
             {% for item in _featured.items %}
               {% include '@ecl/mega-menu/mega-menu-featured-item.html.twig' with item only %}

package/mega-menu.html.twig

@@ -17,6 +17,7 @@
       "path": (string) (default: '')
       "external": (boolean) (optional),
       "sr_external" (string) (default: '') Additional label for the external icon
+      "one_level_only" (boolean) (default: false)
       "extra_attributes" (optional) (array) (default: []) Extra attributes for link,
         - "name" (string) Attribute name, eg. 'data-test'
         - "value" (optional) (string) Attribute value, eg: 'data-test-1'

package/mega-menu.js

@@ -136,7 +136,8 @@ export class MegaMenu {
     this.menuOverlay = null;
     this.currentItem = null;
     this.totalItemsWidth = 0;
-    this.breakpointL = 1140;
+    this.breakpointTablet = 768;
+    this.breakpointDesktop = 1140;
     this.openPanel = { num: 0, item: {} };
     this.infoLinks = null;
     this.seeAllLinks = null;
@@ -461,7 +462,7 @@ export class MegaMenu {
     const isTablet = browser.getPlatformType() === 'tablet';
 
     // Detect mobile devices
-    if (isMobile) {
+    if (isMobile && window.innerWidth < this.breakpointTablet) {
       return false;
     }
 
@@ -471,8 +472,8 @@ export class MegaMenu {
       return false;
     }
 
-    // After all that, check if the hamburger button is displayed
-    if (window.innerWidth < this.breakpointL) {
+    // After all that, check the screen width
+    if (window.innerWidth < this.breakpointDesktop) {
       return false;
     }
 
@@ -627,16 +628,16 @@ export class MegaMenu {
     this.resizeTimer = setTimeout(() => {
       const screenWidth = window.innerWidth;
       if (this.prevScreenWidth !== undefined) {
-        // Check if the transition involves crossing the L breakpoint
+        // Check if the transition involves crossing the desktop breakpoint
         const isTransition =
-          (this.prevScreenWidth <= this.breakpointL &&
-            screenWidth > this.breakpointL) ||
-          (this.prevScreenWidth > this.breakpointL &&
-            screenWidth <= this.breakpointL);
-        // If we are moving in or out the L breakpoint, reset the styles
+          (this.prevScreenWidth <= this.breakpointDesktop &&
+            screenWidth > this.breakpointDesktop) ||
+          (this.prevScreenWidth > this.breakpointDesktop &&
+            screenWidth <= this.breakpointDesktop);
+        // If we are moving in or out the desktop breakpoint, reset the styles
         if (isTransition) {
           this.resetStyles(
-            screenWidth > this.breakpointL ? 'desktop' : 'mobile',
+            screenWidth > this.breakpointDesktop ? 'desktop' : 'mobile',
           );
         }
         if (this.prevScreenWidth >= 1368 && screenWidth >= 1140) {
@@ -709,15 +710,14 @@ export class MegaMenu {
         }
         if (infoPanel && this.isLarge) {
           heights.push(infoPanelHeight);
-        } else if (infoPanel && this.isDesktop) {
-          itemsHeight = infoPanelHeight;
-          subItemsHeight = infoPanelHeight;
-          featuredHeight = infoPanelHeight;
-          featuredFirstHeight = infoPanelHeight;
         }
 
         if (mainPanel) {
           mainPanel.style.height = '';
+          const seeAll = queryOne('.ecl-mega-menu__see-all', mainPanel);
+          if (seeAll) {
+            seeAll.style.top = 0;
+          }
           const mainTop = mainPanel.getBoundingClientRect().top;
           const list = queryOne('.ecl-mega-menu__sublist', mainPanel);
           if (!list) {
@@ -737,12 +737,23 @@ export class MegaMenu {
             }
           } else {
             const items = list.children;
-            if (items.length > 0) {
-              Array.from(items).forEach((item) => {
-                itemsHeight += item.getBoundingClientRect().height;
-              });
-              heights.push(itemsHeight);
+            if (
+              !list
+                .closest('.ecl-mega-menu__item')
+                .classList.contains('ecl-mega-menu__item--one-level-only')
+            ) {
+              if (items.length > 0) {
+                Array.from(items).forEach((item) => {
+                  itemsHeight += item.getBoundingClientRect().height;
+                });
+              }
+            } else {
+              if (items.length > 0) {
+                itemsHeight = list.offsetHeight;
+              }
             }
+
+            heights.push(itemsHeight);
           }
           featuredPanelFirst = queryOne(
             ':scope > .ecl-mega-menu__featured',
@@ -753,6 +764,7 @@ export class MegaMenu {
             Array.from(featuredPanelFirst.firstElementChild.children).forEach(
               (child) => {
                 const elStyle = window.getComputedStyle(child);
+
                 const marginHeight =
                   parseFloat(elStyle.marginTop) +
                   parseFloat(elStyle.marginBottom);
@@ -795,62 +807,64 @@ export class MegaMenu {
 
         const maxHeight = Math.max(...heights);
         const containerBounding = this.inner.getBoundingClientRect();
-        const containerBottom = containerBounding.bottom;
+        let containerBottom = containerBounding.bottom;
+        if (mainPanel && infoPanel && this.isDesktop && !this.isLarge) {
+          containerBottom += infoPanelHeight;
+        }
+
+        const availableHeight = window.innerHeight - containerBottom;
         // 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;
+        const allowedHeight = availableHeight * 0.7;
+        const wrapper = queryOne('.ecl-mega-menu__wrapper', menuItem);
+        const wrapperTop =
+          parseFloat(getComputedStyle(wrapper).paddingTop) || 0;
 
         if (maxHeight > availableHeight) {
-          height = availableHeight;
+          height = availableHeight - wrapperTop;
         } else {
-          height = maxHeight;
-        }
-
-        if (height < minHeight) {
-          height = minHeight;
+          height = maxHeight > allowedHeight ? allowedHeight : maxHeight;
         }
 
-        const wrapper = queryOne('.ecl-mega-menu__wrapper', menuItem);
         if (wrapper) {
-          wrapper.style.height = `${height}px`;
+          wrapper.style.height =
+            infoPanel && !this.isLarge
+              ? `${infoPanelHeight + height}px`
+              : `${height}px`;
         }
 
-        if (mainPanel && this.isLarge) {
+        if (mainPanel) {
           mainPanel.style.height = `${height}px`;
-        } else if (mainPanel && infoPanel && this.isDesktop) {
-          mainPanel.style.height = `${height - infoPanelHeight}px`;
+          const seeAll = queryOne('.ecl-mega-menu__see-all', mainPanel);
+          const firstOnly = mainPanel
+            .closest('li')
+            .classList.contains('ecl-mega-menu__item--one-level-only');
+          if (seeAll && firstOnly) {
+            const remaining =
+              mainPanel.offsetHeight - (seeAll.offsetTop + seeAll.offsetHeight);
+            if (remaining > 0) {
+              seeAll.style.top = `${remaining}px`;
+            }
+          }
         }
         if (infoPanel && this.isLarge) {
           infoPanel.style.height = `${height}px`;
         }
-        if (secondPanel && this.isLarge) {
+        if (secondPanel) {
           secondPanel.style.height = `${height}px`;
-        } else if (secondPanel && this.isDesktop) {
-          secondPanel.style.height = `${height - infoPanelHeight}px`;
+          secondPanel.style.opacity = 1;
         }
-        if (featuredPanelFirst && this.isLarge) {
+        if (featuredPanelFirst) {
           featuredPanelFirst.style.height = `${height}px`;
-        } else if (featuredPanelFirst && this.isDesktop) {
-          featuredPanelFirst.style.height = `${height - infoPanelHeight}px`;
         }
-        if (featuredPanel && this.isLarge) {
+        if (featuredPanel) {
           featuredPanel.style.height = `${height}px`;
-        } else if (featuredPanel && this.isDesktop) {
-          featuredPanel.style.height = `${height - infoPanelHeight}px`;
         }
-      }
-      if (mainPanel && this.isDesktop) {
-        mainPanel.style.opacity = 1;
-      }
-      if (infoPanel && this.isDesktop) {
-        infoPanel.style.opacity = 1;
-      }
-      if (secondPanel && this.isDesktop) {
-        secondPanel.style.opacity = 1;
+        if (mainPanel) {
+          mainPanel.style.opacity = 1;
+        }
+        if (infoPanel) {
+          infoPanel.style.opacity = 1;
+        }
       }
     }, 100);
   }

package/mega-menu.scss

@@ -12,6 +12,7 @@
 $theme: null !default;
 $mega-menu: null !default;
 
+/* stylelint-disable scss/dollar-variable-no-missing-interpolation */
 :root {
   --ecl-mega-menu-item-promotional-bg: #{map.get(
       $mega-menu,
@@ -49,6 +50,7 @@ $mega-menu: null !default;
       'promotional-item-focus-text-color'
     )};
 }
+/* stylelint-enable scss/dollar-variable-no-missing-interpolation */
 
 @mixin with-scrollbar {
   overflow-y: auto;
@@ -1116,7 +1118,6 @@ $mega-menu: null !default;
   ) {
     .ecl-mega-menu__wrapper {
       padding-top: var(--s-m);
-      min-height: 200px !important;
 
       &::before {
         background: var(--cm-border-neutral, '#e3e3e3');
@@ -1633,6 +1634,27 @@ $mega-menu: null !default;
       width: 96%;
       margin-inline-start: 2%;
     }
+
+    .ecl-mega-menu__item--one-level-only {
+      .ecl-mega-menu__mega {
+        width: calc(100% - var(--s-xl));
+
+        &.ecl-mega-menu__mega--has-featured {
+          width: calc(100% - 17.785rem - var(--s-xl));
+        }
+
+        .ecl-mega-menu__sublist {
+          column-count: 3;
+          column-gap: var(--s-2xl);
+          column-rule: 1px solid var(--cm-border-low);
+          display: block;
+        }
+
+        > .ecl-mega-menu__featured {
+          margin-inline-start: 0 !important;
+        }
+      }
+    }
   }
 }
 
@@ -1666,8 +1688,60 @@ $mega-menu: null !default;
         .ecl-mega-menu__mega {
           left: 22rem;
           width: 20.93rem;
+
+          &.ecl-mega-menu__mega--no-info {
+            left: 0;
+            width: 39.805rem;
+          }
+        }
+      }
+    }
+
+    // First panel one level only
+    .ecl-mega-menu__item.ecl-mega-menu__item--expanded.ecl-mega-menu__item--one-level-only
+      > .ecl-mega-menu__wrapper
+      > .ecl-container {
+      > .ecl-mega-menu__mega {
+        width: calc(100% - 22rem);
+
+        .ecl-mega-menu__sublist {
+          column-count: 3;
+          column-gap: var(--s-2xl);
+          column-rule: 1px solid var(--cm-border-low);
+          display: block;
+        }
+
+        // Without info
+        &.ecl-mega-menu__mega--no-info {
+          width: 100%;
+
+          .ecl-mega-menu__sublist {
+            column-count: 4;
+          }
+        }
+
+        // with featued panel
+        &.ecl-mega-menu__mega--has-featured {
+          width: calc(100% - 22rem - 18.875rem - calc(var(--s-3xl)));
+
+          .ecl-mega-menu__sublist {
+            column-count: 2;
+          }
+
+          // With featured & without info
+          &.ecl-mega-menu__mega--no-info {
+            width: calc(100% - 18.875rem - calc(var(--s-3xl)));
+
+            .ecl-mega-menu__sublist {
+              column-count: 3;
+            }
+          }
         }
       }
+
+      .ecl-mega-menu__featured {
+        margin-inline-start: 0 !important;
+      }
     }
 
     &.ecl-mega-menu--rtl
@@ -1676,6 +1750,10 @@ $mega-menu: null !default;
       > .ecl-container
       > .ecl-mega-menu__mega {
       right: 20.93rem;
+
+      &.ecl-mega-menu__mega--no-info {
+        right: 0;
+      }
     }
   }
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@ecl/mega-menu",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "5.0.0-alpha.21",
+  "version": "5.0.0-alpha.22.1",
   "description": "ECL Mega Menu",
   "publishConfig": {
     "access": "public"
@@ -11,13 +11,13 @@
   "module": "mega-menu.js",
   "style": "mega-menu.scss",
   "dependencies": {
-    "@ecl/button": "5.0.0-alpha.21",
-    "@ecl/dom-utils": "5.0.0-alpha.21",
-    "@ecl/event-manager": "5.0.0-alpha.21",
-    "@ecl/link": "5.0.0-alpha.21",
-    "@ecl/picture": "5.0.0-alpha.21",
-    "bowser": "2.12.1",
-    "focus-trap": "7.6.5"
+    "@ecl/button": "5.0.0-alpha.22.1",
+    "@ecl/dom-utils": "5.0.0-alpha.22.1",
+    "@ecl/event-manager": "5.0.0-alpha.22.1",
+    "@ecl/link": "5.0.0-alpha.22.1",
+    "@ecl/picture": "5.0.0-alpha.22.1",
+    "bowser": "2.13.1",
+    "focus-trap": "7.6.6"
   },
   "repository": {
     "type": "git",
@@ -33,5 +33,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "e3828f07421db8fa2a610b445bc178ff26903c95"
+  "gitHead": "014bab7282bbab90d4f7fd268d891fdc975d0e2f"
 }