@itcenteratunihelsinki/huds-lib 0.5.45 → 0.6.1

package/dist/collection/components/navigation/menu/menu.js

@@ -1,6 +1,8 @@
 import { Component, Element, Event, h, Listen, Prop, State } from '@stencil/core';
 import { MenuType } from '../../../utils/utils';
 import { jsonParserWorker } from '../../../global/globalScript';
+let breadcrumbTimeout = null;
+let addbreadTimeout = null;
 export class Menu {
   constructor() {
     this.isGroup = false;
@@ -10,49 +12,59 @@ export class Menu {
   }
   // Listener for removing a breadcrumb from mobile menu breadcrumbs.
   async removeBreadcrumb(data) {
+    clearTimeout(breadcrumbTimeout);
     let breadcrumbs = await jsonParserWorker(this.breadcrumbs);
-    let currentBreadcrumb = breadcrumbs
-      .map(function (e) {
-      return e.bid;
-    })
-      .indexOf(data.detail.bid);
-    for (let i = currentBreadcrumb, l = this.breadcrumbs.length; i < l; i++) {
-      this.menuContainerToggled.emit({
-        triggerItem: this.breadcrumbs[i].bid,
-        triggerType: 'remove',
-      });
-    }
-    this.breadcrumbs = [];
-    this.breadcrumbs = breadcrumbs.slice(0, -1);
-    // Reset if home breadcrumb link has been clicked.
-    if (currentBreadcrumb === 0) {
+    breadcrumbTimeout = setTimeout(() => {
+      let currentBreadcrumb = breadcrumbs
+        .map(function (e) {
+        return e.bid;
+      })
+        .indexOf(data.detail.bid);
+      for (let i = currentBreadcrumb, l = this.breadcrumbs.length; i < l; i++) {
+        this.menuContainerToggled.emit({
+          triggerItem: this.breadcrumbs[i].bid,
+          triggerType: 'remove',
+        });
+      }
       this.breadcrumbs = [];
-      // Notify menu-level-container toggle listener about closing all levels.
-      let elements = this.el.querySelectorAll('.hy-menu-level-container--mobile');
-      elements.forEach((element) => {
-        if (!element.classList.contains('hy-menu-level-container--level-0')) {
-          this.menuContainerToggled.emit({
-            triggerItem: element.getAttribute('trigger-item'),
-            triggerType: 'remove',
-          });
-        }
-      });
-    }
+      this.breadcrumbs = breadcrumbs.slice(0, -1);
+      // Reset if home breadcrumb link has been clicked.
+      if (currentBreadcrumb === 0) {
+        this.breadcrumbs = [];
+        // Notify menu-level-container toggle listener about closing all levels.
+        let elements = this.el.querySelectorAll('.hy-menu-level-container--mobile');
+        elements.forEach((element) => {
+          if (!element.classList.contains('hy-menu-level-container--level-0')) {
+            this.menuContainerToggled.emit({
+              triggerItem: element.getAttribute('trigger-item'),
+              triggerType: 'remove',
+            });
+          }
+        });
+      }
+    }, 100);
   }
   // Listener for adding a breadcrumb to mobile menu breadcrumbs.
   addBreadcrumb(event) {
-    this.breadcrumbs = [
-      ...this.breadcrumbs,
-      {
-        label: event.detail.label,
-        bid: event.detail.bid,
-        url: event.detail.url,
-      },
-    ];
+    clearTimeout(addbreadTimeout);
+    addbreadTimeout = setTimeout(() => {
+      this.breadcrumbs = [
+        ...this.breadcrumbs,
+        {
+          label: event.detail.label,
+          bid: event.detail.bid,
+          url: event.detail.url,
+        },
+      ];
+    }, 100);
   }
   async componentWillLoad() {
     this.breadcrumbs = [];
   }
+  disconnectedCallback() {
+    clearTimeout(breadcrumbTimeout);
+    clearTimeout(addbreadTimeout);
+  }
   componentWillUpdate() {
     // Pass the menu type and menu-button-submenu-expand attributes to
     // the child menu-level-container component.
@@ -262,7 +274,7 @@ export class Menu {
       "mutable": false,
       "complexType": {
         "original": "MenuType",
-        "resolved": "MenuType.desktop | MenuType.mobile | MenuType.sidenav | MenuType.sidepanel | MenuType.tablet",
+        "resolved": "MenuType.desktop | MenuType.mobile | MenuType.tablet",
         "references": {
           "MenuType": {
             "location": "import",

package/dist/collection/components/navigation/menu-item/menu-item.js

@@ -127,22 +127,6 @@ export class MenuItem {
           this.hasChildren && (h("button", { "aria-haspopup": 'true', "aria-label": `Open submenu for ${this.label}`, onClick: () => this.handleClick(), class: 'hy-menu-item__button' },
             h("hy-icon", { icon: 'hy-icon-caret-right', size: 16 }))),
           this.hasChildren && h("slot", null)));
-      case MenuType.sidenav:
-        let classAttributes = [
-          'hy-menu-item--sidenav',
-          this.isDemo ? 'is-demo' : '',
-          this.isActive ? 'is-active' : '',
-          this.isParent ? 'is-parent' : '',
-          this.isActiveChild ? 'is-active--child' : '',
-          this.inActiveTrail ? 'in-active-trail' : '',
-          this.depth != null ? 'hy-menu-item--level-' + this.depth : '',
-          this.isActive && this.hasChildren ? 'is-active--heading' : '',
-        ];
-        let anchorClassAttributes = [...classAttributes, this.isHeading ? 'is-heading' : ''];
-        classAttributes = [...classAttributes, 'hy-menu-item'];
-        return (h("li", { class: classAttributes.join(' ') },
-          h("a", { class: anchorClassAttributes.join(' '), href: this.url }, this.label),
-          this.hasChildren && h("slot", null)));
     }
   }
   static get is() { return "hy-menu-item"; }
@@ -321,7 +305,7 @@ export class MenuItem {
       "mutable": false,
       "complexType": {
         "original": "MenuType",
-        "resolved": "MenuType.desktop | MenuType.mobile | MenuType.sidenav | MenuType.sidepanel | MenuType.tablet",
+        "resolved": "MenuType.desktop | MenuType.mobile | MenuType.tablet",
         "references": {
           "MenuType": {
             "location": "import",

package/dist/collection/components/navigation/menu-level-container/menu-level-container.css

@@ -126,240 +126,4 @@
 
 .hy-menu-level-container--desktop.hy-menu-level-container--level-2 {
   background-color: var(--grayscale-background-box);
-}
-
-.hy-menu-level-container--sidepanel {
-  background-color: var(--grayscale-white);
-  border-left: 1px solid rgba(0, 0, 0, 0.2);
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 100vh;
-  left: 0;
-  margin: 0;
-  max-width: 320px;
-  padding-left: 13px;
-  padding-right: 13px;
-  padding-top: 240px;
-  position: absolute;
-  top: 0;
-  visibility: visible;
-  width: 20%;
-  z-index: 123;
-}
-
-.hy-menu-level-container--sidepanel:not(.hy-menu-level-container--level-0) {
-  display: none;
-  min-height: var(--minHeight);
-  -webkit-transform: translateX(calc(100% - 1px));
-  transform: translateX(calc(100% - 1px));
-}
-
-.hy-menu-level-container--sidepanel:not(.hy-menu-level-container--level-0).active-trail-panel, .hy-menu-level-container--sidepanel:not(.hy-menu-level-container--level-0).is-open {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  max-width: 320px;
-  width: 20vw;
-}
-
-.hy-menu-level-container--sidepanel.is-open, .hy-menu-level-container--sidepanel.active-trail-panel {
-  height: 100%;
-  min-height: var(--minHeight);
-}
-
-.hy-menu-level-container--sidenav {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-flow: column;
-  flex-flow: column;
-  margin: 0;
-  padding: 0;
-  position: relative;
-}
-
-.hy-menu-level-container--sidenav:not(.hy-menu-level-container--level-0) {
-  opacity: 0;
-  visibility: hidden;
-}
-
-.hy-menu-level-container--sidenav:not(.hy-menu-level-container--level-0).is-closed {
-  -webkit-animation-direction: normal;
-  animation-direction: normal;
-  -webkit-animation-duration: 0.25s;
-  animation-duration: 0.25s;
-  -webkit-animation-fill-mode: backwards;
-  animation-fill-mode: backwards;
-  -webkit-animation-name: slide-panel-in;
-  animation-name: slide-panel-in;
-}
-
-.hy-menu-level-container--sidenav:not(.hy-menu-level-container--level-0).is-open {
-  -webkit-animation-direction: normal;
-  animation-direction: normal;
-  -webkit-animation-duration: 0.25s;
-  animation-duration: 0.25s;
-  -webkit-animation-fill-mode: forwards;
-  animation-fill-mode: forwards;
-  -webkit-animation-name: slide-panel-in;
-  animation-name: slide-panel-in;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  max-width: 320px;
-  opacity: 1;
-  visibility: visible;
-  width: 20vw;
-}
-
-.hy-menu-level-container--sidenav.is-open.is-open-on-top {
-  display: none;
-  -webkit-transform: none !important;
-  transform: none !important;
-}
-
-.hy-menu-level-container--sidenav:not(.hy-menu-level-container--level-0).hy-menu-level-container.is-open {
-  max-width: 320px;
-  width: 20vw;
-}
-
-.hy-menu-level-container--sidenav .hy-menu-level-container--level-0 {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-}
-
-.hy-menu-level-container--sidenav:not(.hy-menu-level-container--level-0) {
-  background-color: var(--grayscale-white);
-  border-left: 1px solid rgba(0, 0, 0, 0.2);
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  height: 100vh;
-  left: 0;
-  margin: -100vh 0;
-  max-width: 320px;
-  min-height: var(--minHeight);
-  padding-left: 13px;
-  padding-right: 13px;
-  position: absolute;
-  -webkit-transform: translateX(calc(100% - 1px));
-  transform: translateX(calc(100% - 1px));
-  width: 20vw;
-  z-index: 123;
-}
-
-.hy-menu-level-container--sidenav:not(.hy-menu-level-container--level-0).hy-menu-level-container--level-1 {
-  -webkit-transform: translateX(100%) !important;
-  transform: translateX(100%) !important;
-}
-
-.hy-menu-level-container--sidenav .hy-menu-level-container--level-1 {
-  margin: -100vh 0;
-  padding: 100vh 13px;
-  top: 0;
-}
-
-.hy-menu-level-container--sidenav .hy-menu-level-container--level-2,
-.hy-menu-level-container--sidenav .hy-menu-level-container--level-3,
-.hy-menu-level-container--sidenav .hy-menu-level-container--level-4,
-.hy-menu-level-container--sidenav .hy-menu-level-container--level-5,
-.hy-menu-level-container--sidenav .hy-menu-level-container--level-6,
-.hy-menu-level-container--sidenav .hy-menu-level-container--level-7 {
-  padding: 100vh 13px;
-  top: 100vh;
-}
-
-@-webkit-keyframes slide-panel-in {
-  from {
-    display: none;
-    opacity: 0;
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-    z-index: 1;
-  }
-  25% {
-    display: -webkit-box;
-    display: flex;
-  }
-  35% {
-    -webkit-transform: translateX(calc(100% - 1px));
-    transform: translateX(calc(100% - 1px));
-  }
-  to {
-    opacity: 1;
-    z-index: 123;
-  }
-}
-
-@keyframes slide-panel-in {
-  from {
-    display: none;
-    opacity: 0;
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-    z-index: 1;
-  }
-  25% {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-  }
-  35% {
-    -webkit-transform: translateX(calc(100% - 1px));
-    transform: translateX(calc(100% - 1px));
-  }
-  to {
-    opacity: 1;
-    z-index: 123;
-  }
-}
-
-@-webkit-keyframes slide-panel-out {
-  from {
-    -webkit-transform: translateX(100%);
-    transform: translateX(100%);
-    opacity: 1;
-    z-index: 123;
-  }
-  25% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-  95% {
-    opacity: 0;
-    z-index: 1;
-  }
-  to {
-    display: none;
-  }
-}
-
-@keyframes slide-panel-out {
-  from {
-    -webkit-transform: translateX(100%);
-    transform: translateX(100%);
-    opacity: 1;
-    z-index: 123;
-  }
-  25% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-  95% {
-    opacity: 0;
-    z-index: 1;
-  }
-  to {
-    display: none;
-  }
 }

package/dist/collection/components/navigation/menu-level-container/menu-level-container.js

@@ -69,18 +69,6 @@ export class MenuLevelContainer {
         this.triggerItem = 'home';
       }
     }
-    // Set is-active-child and menu-level attributes to all sibling menu-items.
-    if (this.menuType === MenuType.sidenav) {
-      const parentMenuItem = this.el.closest('hy-menu-item-sidebar');
-      if (parentMenuItem && parentMenuItem.classList.contains('is-active')) {
-        this.menuIsOpen = true;
-        const items = Array.from(this.el.children);
-        items.forEach((item) => {
-          item.setAttribute('is-active-child', 'true');
-          item.setAttribute('menu-level', this.menuLevel.toString());
-        });
-      }
-    }
   }
   render() {
     let classAttributes = ['hy-menu-level-container', 'hy-menu-level-container--level-' + this.depth];
@@ -103,41 +91,6 @@ export class MenuLevelContainer {
             h("slot", null),
             h("slot", { name: "shortcuts" })));
         }
-      case MenuType.sidenav:
-        if (this.depth === 0) {
-          const shouldBeHidden = this.depth != null && this.depth === 0 ? 'is-open' : '';
-          classAttributes = [...classAttributes, 'hy-menu-level-container--sidenav', shouldBeHidden];
-          return (h("ul", { "data-menu-level": this.menuLevel, "data-depth": this.menuLevel, class: classAttributes.join(' ') },
-            h("slot", null)));
-        }
-        else {
-          const isMenuOpen = this.menuIsOpen ? 'is-open_is-open__sub-level' : null;
-          const shouldBeHidden = this.depth != null && this.depth === 0 ? 'is-open' : '';
-          const parentMenuItem = this.el.closest('hy-menu-item-sidebar');
-          const parentClone = parentMenuItem !== null ? parentMenuItem.cloneNode(true) : null;
-          const parentLink = parentClone ? parentClone.querySelector('.hy-menu-item-sidebar__label') : null;
-          classAttributes = [...classAttributes, 'hy-menu-level-container--sidenav', shouldBeHidden, isMenuOpen];
-          return (h("ul", { "data-menu-level": this.menuLevel, "data-depth": this.menuLevel, class: classAttributes.join(' ') },
-            parentLink && (h("li", { class: "hy-menu-item-sidebar is-parent is-parent--sub-level" },
-              h("hy-icon", { class: 'hy-menu-item-parent__icon', icon: 'hy-icon-dot-arrow-right', fill: 'currentColor', size: 20 }),
-              h("span", { "aria-level": this.depth, role: "heading", class: "hy-menu-item-sidebar--label-container", innerHTML: parentLink.outerHTML }))),
-            h("slot", null)));
-        }
-      case MenuType.sidepanel:
-        //const shouldBeHidden = (this.depth != null && this.depth === 1) ? 'is-open' : '';
-        classAttributes = [...classAttributes, 'hy-menu-level-container--sidepanel'];
-        const parentMenuItem = this.el.closest('hy-menu-item-sidebar');
-        const parentClone = parentMenuItem ? parentMenuItem.cloneNode(true) : null;
-        const parentLink = parentClone ? parentClone.querySelector('.hy-menu-item-sidebar__label') : null;
-        return (h("ul", { "data-menu-level": this.depth, "data-depth": this.menuLevel, class: classAttributes.join(' ') },
-          parentLink ? (h("li", { class: "hy-menu-item-sidebar is-parent is-parent--sub-level" },
-            h("hy-icon", { class: 'hy-menu-item-parent__icon', icon: 'hy-icon-dot-arrow-right', fill: 'currentColor', size: 20 }),
-            h("span", { "aria-level": this.depth, role: "heading", class: "hy-menu-item-sidebar--label-container", innerHTML: parentLink.outerHTML }))) : (h("li", { class: "hy-menu-item-sidebar is-parent is-parent--sub-level is-parent--frontpage" },
-            h("span", { class: 'hy-menu-item__parent__icon' },
-              h("hy-icon", { class: 'hy-menu-item__parent__icon__svg', icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 })),
-            h("div", { class: "hy-menu-item-sidebar--label-container" },
-              h("a", { class: "hy-menu-item-sidebar__label", href: this.frontUrl }, this.frontLabel)))),
-          h("slot", null)));
     }
   }
   static get is() { return "hy-menu-level-container"; }
@@ -204,7 +157,7 @@ export class MenuLevelContainer {
       "mutable": false,
       "complexType": {
         "original": "MenuType",
-        "resolved": "MenuType.desktop | MenuType.mobile | MenuType.sidenav | MenuType.sidepanel | MenuType.tablet",
+        "resolved": "MenuType.desktop | MenuType.mobile | MenuType.tablet",
         "references": {
           "MenuType": {
             "location": "import",

package/dist/collection/components/person-profile/person-profile.js

@@ -1,4 +1,5 @@
 import { Component, Host, h, Prop, State, Fragment } from '@stencil/core';
+let resizeTimeout = null;
 export class PersonProfile {
   constructor() {
     this.isFullAboutTextHidden = false;
@@ -6,6 +7,9 @@ export class PersonProfile {
   componentWillLoad() {
     this.viewportSize = window.innerWidth;
   }
+  disconnectedCallback() {
+    clearTimeout(resizeTimeout);
+  }
   toggleShowFullAboutText() {
     this.isFullAboutTextHidden = !this.isFullAboutTextHidden;
   }
@@ -37,7 +41,10 @@ export class PersonProfile {
       }
     }
     window.addEventListener('resize', () => {
-      this.viewportSize = window.innerWidth;
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(() => {
+        this.viewportSize = window.innerWidth;
+      }, 250);
     });
     return (h(Host, null,
       h("section", { class: "hy-profile-page" },

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

@@ -6,6 +6,8 @@ let keys = {
   tab: 'Tab',
   space: 'Space',
 };
+let scrollTimeout = null;
+let resizeTimeout = null;
 export class HyDesktopMenuLinks {
   constructor() {
     /*
@@ -95,18 +97,21 @@ export class HyDesktopMenuLinks {
     let backdropToolbarOffset = backdropOffset - 79;
     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);
+        clearTimeout(scrollTimeout);
+        scrollTimeout = setTimeout(() => {
+          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);
+              }
             }
           }
-        }
+        }, 250);
       });
     }
     if (!this.isDropdown) {
@@ -135,15 +140,18 @@ export class HyDesktopMenuLinks {
         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`;
-        }
+        clearTimeout(resizeTimeout);
+        resizeTimeout = setTimeout(() => {
+          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`;
+          }
+        }, 250);
       });
     }
   }

package/dist/collection/components/site-header/site-header.js

@@ -2,6 +2,8 @@ import { Component, Element, Event, Fragment, h, Listen, Prop, State } from '@st
 import ResizeObserver from 'resize-observer-polyfill';
 import { MenuType, ColorVariant, SiteLogoSize } from '../../utils/utils';
 import { jsonParserWorker } from '../../global/globalScript';
+let clickTimeout = null;
+let scrollTimeout = null;
 export class SiteHeader {
   constructor() {
     this.isGroup = false;
@@ -43,7 +45,10 @@ export class SiteHeader {
     this.menuMobileTopToggled.emit();
   }
   handleScroll() {
-    this.check();
+    clearTimeout(scrollTimeout);
+    scrollTimeout = setTimeout(() => {
+      this.check();
+    }, 250);
   }
   componentDidLoad() {
     // Set the browser resize observer to gather information about browser width.
@@ -142,6 +147,8 @@ export class SiteHeader {
   }
   disconnectedCallback() {
     this.ro.disconnect();
+    clearTimeout(scrollTimeout);
+    clearTimeout(clickTimeout);
   }
   applySizeClasses(size) {
     // Set the menu-type based on the width of the browser.
@@ -176,7 +183,12 @@ export class SiteHeader {
       }
     };
     if (this.isMenuOpen) {
-      window.addEventListener('click', handleClickOutside);
+      window.addEventListener('click', () => {
+        clearTimeout(clickTimeout);
+        clickTimeout = setTimeout(() => {
+          handleClickOutside;
+        }, 250);
+      });
     }
     let activeLang = 'en';
     let dataMenuLanguageArray = JSON.parse(this.dataMenuLanguage);
@@ -600,7 +612,7 @@ export class SiteHeader {
       "mutable": false,
       "complexType": {
         "original": "MenuType",
-        "resolved": "MenuType.desktop | MenuType.mobile | MenuType.sidenav | MenuType.sidepanel | MenuType.tablet",
+        "resolved": "MenuType.desktop | MenuType.mobile | MenuType.tablet",
         "references": {
           "MenuType": {
             "location": "import",

package/dist/collection/utils/utils.js

@@ -175,8 +175,6 @@ export var GridAlignVariants;
 export var MenuType;
 (function (MenuType) {
   MenuType["desktop"] = "desktop";
-  MenuType["sidenav"] = "sidenav";
-  MenuType["sidepanel"] = "sidepanel";
   MenuType["mobile"] = "mobile";
   MenuType["tablet"] = "tablet";
   MenuType["default"] = "desktop";