@itcenteratunihelsinki/huds-lib 0.5.12 → 0.5.16

package/dist/collection/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.js

@@ -1,4 +1,3 @@
-import { ColorVariant } from '../../../utils/utils';
 import { Component, h, Element, Prop, State, Event, Listen } from '@stencil/core';
 import { jsonParserWorker } from '../../../global/globalScript';
 import ResizeObserver from 'resize-observer-polyfill';
@@ -9,13 +8,18 @@ let keys = {
 };
 export class HyDesktopMenuLinks {
   constructor() {
+    /*
+    First level menu links to be displayed on Desktop screens.
+    * */
+    this.isGroup = false;
+    this.isDropdown = false;
     this.firstLevelLinksList = [];
     this.menuLinkItems = [];
     this.hasToolbar = false;
     this.isDesktopMenuOpen = false;
     this.currenOpenMenuId = 0;
     this.isNewMenuIdOnHover = false;
-    this._submenuLeftMargin = 32;
+    // private _submenuLeftMargin: number = 32;
     this._headerBorderOffset = 0;
     this._hoverTimer = null;
     this._fadeOutTimer = null;
@@ -36,7 +40,7 @@ export class HyDesktopMenuLinks {
     if (!hyHeader)
       return;
     let hyBackdropDiv = hyHeader.children[0];
-    if (hyBackdropDiv) {
+    if (hyBackdropDiv && !this.isDropdown) {
       if (state === 'open') {
         const windowHeight = window.outerHeight;
         hyBackdropDiv.style.height = `${windowHeight}px`;
@@ -57,36 +61,26 @@ export class HyDesktopMenuLinks {
     clearTimeout(this._fadeOutTimer);
     // Open desktop menu panel
     this.isDesktopMenuOpen = true;
-    const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`);
-    const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel'); // all panels
-    const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`);
+    const menuItems = this.el.shadowRoot.querySelectorAll(`.hy-desktop-menu__button`);
+    const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu__panel'); // all panels
+    const activeMenuItem = this.el.shadowRoot.querySelector(`.hy-desktop-menu__button[link-id="${id}"]`);
     const activeMenuItemSibling = activeMenuItem.nextElementSibling; // current panel
     // Reset elements by removing the active classes.
     menuItems.forEach((item) => {
-      item.classList.remove('desktop-menu-link--is-active');
       item.setAttribute('aria-expanded', 'false');
     });
     menuPanelItems.forEach((item) => {
-      item.classList.remove('hy-desktop-menu-panel--is-active');
-      item.classList.remove('hy-desktop-menu-panel--overflow');
       item.setAttribute('aria-hidden', 'true');
       item.style.transition = 'none';
       item.style.opacity = '0';
     });
-    // Add active classes to the currently active item and its sibling element.
-    activeMenuItem.classList.add('desktop-menu-link--is-active');
+    // Set active attributes to currently active panel.
     activeMenuItem.setAttribute('aria-expanded', 'true');
-    activeMenuItemSibling.classList.add('hy-desktop-menu-panel--is-active');
     activeMenuItemSibling.style.opacity = '1';
     if (this.hasToolbar) {
-      activeMenuItemSibling.classList.add('hy-desktop-menu-panel--is-active--has-toolbar');
+      activeMenuItemSibling.classList.add('has-toolbar');
     }
     activeMenuItemSibling.setAttribute('aria-hidden', 'false');
-    //Hide is-active-trail underlining
-    const activeTrailMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link__label--is-active-trail`);
-    if (activeTrailMenuItem) {
-      activeTrailMenuItem.classList.add('desktop-menu-link__label--is-active-trail--disabled');
-    }
     // Add panels top value automatically with the correct header height
     let topOffset = window.pageYOffset;
     const bodyElementClasses = document.body.classList;
@@ -99,11 +93,23 @@ export class HyDesktopMenuLinks {
     let rect = activeMenuItemSibling.getBoundingClientRect();
     let backdropOffset = headerElementHeight + headerElementOffset + rect.height;
     let backdropToolbarOffset = backdropOffset - 79;
-    window.addEventListener('scroll', () => {
-      topOffset = window.pageYOffset;
-      if (topOffset === 0) {
-        activeMenuItemSibling.style.top = `${panelElementOffset}px`;
-      }
+    if (!this.isDropdown) {
+      window.addEventListener('scroll', () => {
+        topOffset = window.pageYOffset;
+        if (topOffset === 0) {
+          activeMenuItemSibling.style.top = `${panelElementOffset}px`;
+        }
+        if (headerShadowRootElement.classList.contains('hy-site-header--sticky-active') && topOffset > 0) {
+          if (bodyElementClasses.contains('toolbar-horizontal')) {
+            activeMenuItemSibling.style.top = `${headerElementHeight}px`;
+            if (this.isDesktopMenuOpen) {
+              this.showBackdropShadow('open', backdropToolbarOffset);
+            }
+          }
+        }
+      });
+    }
+    if (!this.isDropdown) {
       if (headerShadowRootElement.classList.contains('hy-site-header--sticky-active') && topOffset > 0) {
         if (bodyElementClasses.contains('toolbar-horizontal')) {
           activeMenuItemSibling.style.top = `${headerElementHeight}px`;
@@ -111,13 +117,9 @@ export class HyDesktopMenuLinks {
             this.showBackdropShadow('open', backdropToolbarOffset);
           }
         }
-      }
-    });
-    if (headerShadowRootElement.classList.contains('hy-site-header--sticky-active') && topOffset > 0) {
-      if (bodyElementClasses.contains('toolbar-horizontal')) {
-        activeMenuItemSibling.style.top = `${headerElementHeight}px`;
-        if (this.isDesktopMenuOpen) {
-          this.showBackdropShadow('open', backdropToolbarOffset);
+        else {
+          activeMenuItemSibling.style.top = `${panelElementOffset}px`;
+          this.showBackdropShadow('open', backdropOffset);
         }
       }
       else {
@@ -125,28 +127,24 @@ export class HyDesktopMenuLinks {
         this.showBackdropShadow('open', backdropOffset);
       }
     }
-    else {
-      activeMenuItemSibling.style.top = `${panelElementOffset}px`;
-      this.showBackdropShadow('open', backdropOffset);
-    }
-    // Position submenu block under the activated top menu item.
-    const menuPanelLeftPosition = activeMenuItem.offsetLeft - this._submenuLeftMargin;
-    activeMenuItemSibling.style.paddingLeft = `${menuPanelLeftPosition}px`;
-    // Position shortcuts block.
-    let shortcutsDiv = activeMenuItemSibling.querySelectorAll('ul.shortcuts-panel')[0]; // shortcuts block
-    if (shortcutsDiv) {
-      let subMenuDiv = activeMenuItemSibling.querySelectorAll('.hy-desktop-menu-panel__desktop-menu__menu-items')[0]; // 2nd level menu block
-      let spaceLeftAfterSubmenu = subMenuDiv.getBoundingClientRect().right + shortcutsDiv.offsetWidth;
-      if (spaceLeftAfterSubmenu >= document.body.scrollWidth) {
-        // Shortcuts should be placed to the left.
-        let shortcutsLeftPosition = subMenuDiv.getBoundingClientRect().left - shortcutsDiv.offsetWidth;
-        shortcutsDiv.style.left = shortcutsLeftPosition.toString().concat('px');
-      }
-      else {
-        // Shortcuts should be placed to the right.
-        let shortcutsLeftPosition = subMenuDiv.getBoundingClientRect().right;
-        shortcutsDiv.style.left = shortcutsLeftPosition.toString().concat('px');
+    if (this.isDropdown) {
+      let windowWidth = window.outerWidth;
+      const desktopMenuPanelWidth = activeMenuItemSibling.offsetWidth;
+      if (windowWidth - activeMenuItem.getBoundingClientRect().left < desktopMenuPanelWidth) {
+        activeMenuItemSibling.style.left = `auto`;
+        activeMenuItemSibling.style.right = `-17px`;
       }
+      window.addEventListener('resize', () => {
+        windowWidth = window.outerWidth;
+        if (windowWidth - activeMenuItem.getBoundingClientRect().left < desktopMenuPanelWidth) {
+          activeMenuItemSibling.style.left = `auto`;
+          activeMenuItemSibling.style.right = `-17px`;
+        }
+        else {
+          activeMenuItemSibling.style.left = `-17px`;
+          activeMenuItemSibling.style.right = `auto`;
+        }
+      });
     }
   }
   closePanel(fadeOut = false) {
@@ -158,16 +156,11 @@ export class HyDesktopMenuLinks {
     clearTimeout(this._hoverTimer);
   }
   clearPanelItemsStatus(fadeOut = false) {
-    const menuItems = this.el.shadowRoot.querySelectorAll(`.desktop-menu-link`);
-    const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu-panel');
-    //Show is-active-trail underlining
-    const activeTrailMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link__label--is-active-trail`);
-    if (activeTrailMenuItem) {
-      activeTrailMenuItem.classList.remove('desktop-menu-link__label--is-active-trail--disabled');
-    }
+    const menuItems = this.el.shadowRoot.querySelectorAll(`.hy-desktop-menu__button`);
+    const menuPanelItems = this.el.shadowRoot.querySelectorAll('.hy-desktop-menu__panel');
     // Reset elements by removing the active classes.
     menuItems.forEach((item) => {
-      item.classList.remove('desktop-menu-link--is-active');
+      // item.classList.remove('desktop-menu-link--is-active');
       item.setAttribute('aria-expanded', 'false');
     });
     if (fadeOut) {
@@ -177,14 +170,14 @@ export class HyDesktopMenuLinks {
       });
       this._fadeOutTimer = window.requestAnimationFrame(() => {
         menuPanelItems.forEach((item) => {
-          item.classList.remove('hy-desktop-menu-panel--is-active');
+          // item.classList.remove('hy-desktop-menu-panel--is-active');
           item.setAttribute('aria-hidden', 'true');
         });
       });
     }
     else {
       menuPanelItems.forEach((item) => {
-        item.classList.remove('hy-desktop-menu-panel--is-active');
+        // item.classList.remove('hy-desktop-menu-panel--is-active');
         item.setAttribute('aria-hidden', 'true');
         item.style.opacity = '0';
         item.style.transition = 'none';
@@ -223,7 +216,7 @@ export class HyDesktopMenuLinks {
       this._mouseEnter = setTimeout(() => {
         this.isNewMenuIdOnHover = true;
         clearTimeout(this._fadeOutTimer);
-        const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`);
+        const activeMenuItem = this.el.shadowRoot.querySelector(`.hy-desktop-menu__button[link-id="${id}"]`);
         // Set focus to the button.
         if (activeMenuItem !== null)
           activeMenuItem.focus();
@@ -237,19 +230,6 @@ export class HyDesktopMenuLinks {
     clearTimeout(this._mouseEnter);
     this._mouseEnter = null;
   }
-  // Not used??
-  /*   handleDesktopMenuFocus(event, id) {
-    if (this.isDesktopMenuOpen) {
-      if (this.currenOpenMenuId != id) {
-        this._hoverTimer = setTimeout(() => {
-          this.currenOpenMenuId = id;
-          this.showPanel(id);
-        }, 500);
-      }
-
-      event.stopPropagation();
-    }
-  } */
   handleWindowClick(event) {
     // Check if event is being fired during pressing a key (event.detail==0 in this case)
     if (event.detail == 0)
@@ -264,9 +244,7 @@ export class HyDesktopMenuLinks {
     if (event.detail == 0)
       return;
     event.stopPropagation();
-    const targetElement = event.target.tagName.toLowerCase();
-    const possibleTags = [targetElement].some((r) => ['svg', 'span', 'path'].indexOf(r) >= 0);
-    if (!this.isDesktopMenuOpen && possibleTags) {
+    if (!this.isDesktopMenuOpen) {
       this.currenOpenMenuId = id;
       this.showPanel(id);
     }
@@ -306,70 +284,57 @@ export class HyDesktopMenuLinks {
     let menuLinkItems = [];
     if (links) {
       links.map(({ menuLinkId: id, shortcuts, items, url, description, toggleOff, label, labelExtra, isExternal, isActive, shortcutsTitle, closeButtonTitle, }) => {
-        let classAttributes = [
-          'desktop-menu-link',
-          isActive === 'true' ? 'desktop-menu-link--is-active-trail' : '',
-        ].join(' ');
-        let classAttributesLabel = [
-          'desktop-menu-link__label',
-          isActive === 'true' ? 'desktop-menu-link__label--is-active-trail' : '',
-        ].join(' ');
         let target = isExternal ? '_blank' : '_self';
         if (toggleOff) {
-          menuLinkItems.push(h("li", { onMouseEnter: (e) => this.handleDesktopMenuClose(e) },
-            h("a", { "aria-current": label, href: url, target: target, class: "desktop-menu-link toggle", "menu-link-id": id }, labelExtra ? h("span", { class: "label" }, labelExtra) : h("span", { class: "label" }, label))));
+          menuLinkItems.push(h("li", { onMouseEnter: (e) => this.handleDesktopMenuClose(e), class: `hy-desktop-menu__item ${isActive === 'true' ? 'is-active-trail' : ''}` },
+            h("a", { "aria-current": label, href: url, target: target, class: "hy-desktop-menu__button", "menu-link-id": id }, labelExtra ? h("span", { class: "label" }, labelExtra) : h("span", { class: "label" }, label))));
         }
         else {
-          menuLinkItems.push(h("li", null,
-            h("button", { tabindex: "0", type: "button", class: classAttributes, "link-id": id, onClick: (e) => this.handleDesktopMenuClick(e, id), onKeyDown: (e) => this.handleKeyDown(e, id), onMouseEnter: (e) => this.handleDesktopMenuEnter(e, id), onMouseLeave: () => this.handleDesktopMenuLeave(), "aria-expanded": "false" },
-              h("span", { class: classAttributesLabel }, label),
+          menuLinkItems.push(h("li", { class: "hy-desktop-menu__item" },
+            h("button", { tabindex: "0", type: "button", class: `hy-desktop-menu__button ${isActive === 'true' ? 'is-active-trail' : ''}`, "link-id": id, onClick: (e) => this.handleDesktopMenuClick(e, id), onKeyDown: (e) => this.handleKeyDown(e, id), onMouseEnter: (e) => this.handleDesktopMenuEnter(e, id), onMouseLeave: () => this.handleDesktopMenuLeave(), "aria-expanded": "false" },
+              h("span", null, label),
               h("hy-icon", { icon: 'hy-icon-caret-down', size: 32 })),
-            h("div", { class: "hy-desktop-menu-panel", "aria-hidden": "true" },
-              h("div", { class: "hy-desktop-menu-panel__desktop-menu" },
-                h("div", { class: "hy-desktop-menu-panel__desktop-menu__menu-items" },
-                  h("a", { "aria-current": label, href: url, target: target, class: "hy-desktop-menu-panel__desktop-menu__first-level-menu-item", "menu-link-id": id },
-                    h("span", { class: "heading-icon" },
-                      h("hy-icon", { icon: 'hy-icon-arrow-right', size: 40 })),
-                    labelExtra ? h("span", { class: "label" }, labelExtra) : h("span", { class: "label" }, label),
-                    description && h("span", { class: "description" }, description)),
-                  h("ul", { class: 'hy-desktop-menu-panel__desktop-menu__second-level-menu', "menu-link-id": id }, items.map(({ label, url, isExternal }) => {
-                    let subitemTarget = isExternal ? '_blank' : '_self';
-                    return (h("li", null,
-                      h("a", { href: url, target: subitemTarget },
-                        h("span", { class: "heading-icon" },
-                          h("hy-icon", { icon: 'hy-icon-caret-right', size: 12 })),
-                        h("span", { class: "label" }, label),
-                        isExternal && (h("span", { class: "external-icon" },
-                          h("hy-icon", { icon: 'hy-icon-arrow-right', size: 12 }))))));
-                  }))),
-                shortcuts.length > 0 && (h("ul", { class: "shortcuts-panel" },
-                  h("h2", { class: "shortcuts-panel__title" }, shortcutsTitle),
-                  shortcuts.map(({ shortcut_title, shortcut_url, shortcut_is_external, shortcut_aria_label }, index) => {
-                    let target = shortcut_is_external ? '_blank' : '_self';
-                    let shortcutClass = [
-                      'shortcuts-panel__shortcut-item',
-                      index == 0 ? 'shortcuts-panel__shortcut-item__first' : '',
-                    ].join(' ');
-                    return (h("li", { class: shortcutClass },
-                      h("a", { "aria-current": shortcut_aria_label, href: shortcut_url, class: "shortcut-item__link", target: target, "aria-label": shortcut_aria_label },
-                        h("span", { class: "label" }, shortcut_title),
-                        h("span", { class: "icon" },
-                          h("hy-icon", { icon: 'hy-icon-arrow-right', size: 24 })))));
-                  })))),
-              h("button", { onClick: (e) => this.handleDesktopMenuClose(e), class: {
-                  'hy-desktop-menu-panel__panel-toggle': true,
-                }, "aria-label": "Close menu" },
-                h("span", { class: "hy-desktop-menu-panel__panel-toggle__label" },
-                  h("span", { class: "hy-desktop-menu-panel__panel-toggle__label__title" }, closeButtonTitle),
-                  h("hy-icon", { icon: 'hy-icon-remove', size: 20, fill: ColorVariant.black }))))));
+            h("section", { class: `hy-desktop-menu__panel ${this.isDropdown ? 'is-dropdown' : ''}`, "aria-hidden": "true" },
+              h("div", { class: "hy-desktop-menu__panel-container" },
+                h("div", { class: "hy-desktop-menu__panel-menu" },
+                  h("div", { class: "hy-desktop-menu__panel-header" },
+                    h("hy-icon", { icon: 'hy-icon-arrow-right', size: 24 }),
+                    h("a", { "aria-current": label, href: url, target: target, "menu-link-id": id }, labelExtra || label),
+                    description && !this.isDropdown && h("p", null, description)),
+                  h("div", { class: `hy-desktop-menu__panel-content ${shortcuts.length > 0 ? 'has-shortcuts' : ''}` },
+                    h("ul", { class: 'hy-desktop-menu__panel-links hy-desktop-menu__panel-links--menu', "menu-link-id": id }, items.map(({ label, url, isExternal }) => {
+                      let subitemTarget = isExternal ? '_blank' : '_self';
+                      return (h("li", { class: "hy-desktop-menu__panel-links-item" },
+                        h("a", { class: "hy-desktop-menu__panel-link", href: url, target: subitemTarget },
+                          h("hy-icon", { icon: 'hy-icon-caret-right', size: 10 }),
+                          h("span", null,
+                            label,
+                            isExternal && h("hy-icon", { icon: 'hy-icon-arrow-right', size: 12 })))));
+                    })),
+                    shortcuts.length > 0 && (h("div", { class: "hy-desktop-menu__panel-shortcuts" },
+                      h("h2", null, shortcutsTitle),
+                      h("ul", { class: "hy-desktop-menu__panel-links hy-desktop-menu__panel-links--shortcuts" }, shortcuts.map(({ shortcut_title, shortcut_url, shortcut_is_external, shortcut_aria_label }) => {
+                        let target = shortcut_is_external ? '_blank' : '_self';
+                        return (h("li", { class: "hy-desktop-menu__panel-links-item" },
+                          h("a", { "aria-current": shortcut_aria_label, href: shortcut_url, class: "hy-desktop-menu__panel-link", target: target, "aria-label": shortcut_aria_label },
+                            h("hy-icon", { icon: 'hy-icon-caret-right', size: 10 }),
+                            h("span", null,
+                              shortcut_title,
+                              shortcut_is_external && h("hy-icon", { icon: 'hy-icon-arrow-right', size: 12 })))));
+                      })))))),
+                !this.isDropdown && (h("button", { onClick: (e) => this.handleDesktopMenuClose(e), class: {
+                    'hy-desktop-menu__panel-close-button': true,
+                  }, "aria-label": "Close menu" },
+                  h("span", null, closeButtonTitle),
+                  h("hy-icon", { icon: 'hy-icon-remove', size: 16 })))))));
         }
       });
     }
     this.menuLinkItems = menuLinkItems;
   }
   render() {
-    return (h("nav", { role: 'navigation', class: "hy-site-header__menu-desktop" },
-      h("ul", { class: "hy-site-header__menu-desktop-container" }, this.menuLinkItems)));
+    return (h("nav", { role: 'navigation', class: `hy-site-header__menu-desktop ${this.isGroup ? 'is-group' : ''} ${this.isDropdown ? 'is-dropdown' : ''}` },
+      h("ul", { class: `hy-desktop-menu ${this.isDesktopMenuOpen ? 'is-panel-open' : ''}` }, this.menuLinkItems)));
   }
   static get is() { return "hy-desktop-menu-links"; }
   static get encapsulation() { return "shadow"; }
@@ -380,6 +345,42 @@ export class HyDesktopMenuLinks {
     "$": ["hy-desktop-menu-links.css"]
   }; }
   static get properties() { return {
+    "isGroup": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-group",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "isDropdown": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-dropdown",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "dataDesktopLinks": {
       "type": "string",
       "mutable": false,