@itcenteratunihelsinki/huds-lib 0.6.5 → 0.6.7

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

@@ -1,482 +0,0 @@
-import { Component, h, Element, Prop, State, Event, Listen } from '@stencil/core';
-import { jsonParserWorker } from '../../../global/globalScript';
-import ResizeObserver from 'resize-observer-polyfill';
-let scrollTimer = null;
-let resizeTimer = null;
-let keys = {
-  enter: 'Enter',
-  tab: 'Tab',
-  space: 'Space',
-};
-let scrollTimeout = null;
-let resizeTimeout = null;
-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;
-    // private _submenuLeftMargin: number = 32;
-    this._headerBorderOffset = 0;
-    this._hoverTimer = null;
-    this._fadeOutTimer = null;
-    this._mouseEnter = null;
-    this._mouseLeave = null;
-  }
-  async componentWillLoad() {
-    this._dataDesktopLinks = await jsonParserWorker(this.dataDesktopLinks);
-  }
-  disconnectedCallback() {
-    clearTimeout(scrollTimer);
-    clearTimeout(resizeTimer);
-  }
-  removeBackdropShadow(size) {
-    // Close backdrop shadow if the screen is < 1200px
-    if (size < 1200) {
-      this.showBackdropShadow();
-    }
-  }
-  showBackdropShadow(state = 'close', top = 0) {
-    let hyHeader = this.el.closest('.hy-site-header');
-    if (!hyHeader)
-      return;
-    let hyBackdropDiv = hyHeader.children[0];
-    if (hyBackdropDiv && !this.isDropdown) {
-      if (state === 'open') {
-        const windowHeight = window.outerHeight;
-        hyBackdropDiv.style.height = `${windowHeight}px`;
-        hyBackdropDiv.style.top = `${top}px`;
-        hyBackdropDiv.style.position = 'absolute';
-        hyBackdropDiv.classList.add('is-active');
-      }
-      else {
-        hyBackdropDiv.removeAttribute('style');
-        hyBackdropDiv.classList.remove('is-active');
-      }
-    }
-  }
-  showPanel(id) {
-    // Close menu lang menu if it's open
-    this.menuDesktopToggled.emit();
-    clearTimeout(this._hoverTimer);
-    clearTimeout(this._fadeOutTimer);
-    // Open desktop menu panel
-    this.isDesktopMenuOpen = true;
-    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.setAttribute('aria-expanded', 'false');
-    });
-    menuPanelItems.forEach((item) => {
-      item.setAttribute('aria-hidden', 'true');
-      item.style.transition = 'none';
-      item.style.opacity = '0';
-    });
-    // Set active attributes to currently active panel.
-    activeMenuItem.setAttribute('aria-expanded', 'true');
-    activeMenuItemSibling.style.opacity = '1';
-    if (this.hasToolbar) {
-      activeMenuItemSibling.classList.add('has-toolbar');
-    }
-    activeMenuItemSibling.setAttribute('aria-hidden', 'false');
-    // Add panels top value automatically with the correct header height
-    let topOffset = window.pageYOffset;
-    const bodyElementClasses = document.body.classList;
-    const headerElement = document.querySelector('hy-site-header');
-    const headerShadowRootElement = headerElement.shadowRoot.querySelector('header');
-    let headerElementHeight = headerShadowRootElement.offsetHeight + this._headerBorderOffset;
-    let headerElementOffset = headerShadowRootElement.offsetTop;
-    let panelElementOffset = headerElementHeight + headerElementOffset;
-    // Add shadow backdrop
-    let rect = activeMenuItemSibling.getBoundingClientRect();
-    let backdropOffset = headerElementHeight + headerElementOffset + rect.height;
-    let backdropToolbarOffset = backdropOffset - 79;
-    if (!this.isDropdown) {
-      window.addEventListener('scroll', () => {
-        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) {
-      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 {
-        activeMenuItemSibling.style.top = `${panelElementOffset}px`;
-        this.showBackdropShadow('open', backdropOffset);
-      }
-    }
-    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', () => {
-        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);
-      });
-    }
-  }
-  closePanel(fadeOut = false) {
-    this.isDesktopMenuOpen = false;
-    this.isNewMenuIdOnHover = false;
-    this.currenOpenMenuId = 0;
-    this.showBackdropShadow();
-    this.clearPanelItemsStatus(fadeOut);
-    clearTimeout(this._hoverTimer);
-  }
-  clearPanelItemsStatus(fadeOut = false) {
-    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.setAttribute('aria-expanded', 'false');
-    });
-    if (fadeOut) {
-      menuPanelItems.forEach((item) => {
-        item.style.opacity = '0';
-        item.style.transition = 'opacity 1s';
-      });
-      this._fadeOutTimer = window.requestAnimationFrame(() => {
-        menuPanelItems.forEach((item) => {
-          // 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.setAttribute('aria-hidden', 'true');
-        item.style.opacity = '0';
-        item.style.transition = 'none';
-      });
-    }
-  }
-  handleDesktopMenuClose(event) {
-    let fadeOut = true;
-    this.closePanel(fadeOut);
-    event.stopPropagation();
-  }
-  // CLose the desktop menu panel if user opens the language menu.
-  menuLanguageToggled() {
-    let fadeOut = true;
-    this.closePanel(fadeOut);
-  }
-  // Close the desktop menu panel if user opens University main menu
-  universityMainMenuPanelToggled() {
-    let fadeOut = true;
-    this.closePanel(fadeOut);
-  }
-  // Close the desktop menu panel if user opens search panel
-  searchPanelToggled() {
-    let fadeOut = true;
-    this.closePanel(fadeOut);
-  }
-  // CLose the desktop menu panel if user scrolls Sticky Header till the very top.
-  headerScrollUp() {
-    let fadeOut = false;
-    this.closePanel(fadeOut);
-  }
-  handleDesktopMenuEnter(event, id) {
-    if (this.isDesktopMenuOpen && this._mouseEnter == null) {
-      clearTimeout(this._mouseLeave);
-      this._mouseLeave = null;
-      this._mouseEnter = setTimeout(() => {
-        this.isNewMenuIdOnHover = true;
-        clearTimeout(this._fadeOutTimer);
-        const activeMenuItem = this.el.shadowRoot.querySelector(`.hy-desktop-menu__button[link-id="${id}"]`);
-        // Set focus to the button.
-        if (activeMenuItem !== null)
-          activeMenuItem.focus();
-        this.currenOpenMenuId = id;
-        this.showPanel(id);
-        event.stopPropagation();
-      }, 500);
-    }
-  }
-  handleDesktopMenuLeave() {
-    clearTimeout(this._mouseEnter);
-    this._mouseEnter = null;
-  }
-  handleWindowClick(event) {
-    // Check if event is being fired during pressing a key (event.detail==0 in this case)
-    if (event.detail == 0)
-      return;
-    if (this.isDesktopMenuOpen) {
-      this.handleDesktopMenuClose(event);
-      event.stopPropagation();
-    }
-  }
-  handleDesktopMenuClick(event, id) {
-    // Check if event is being fired during pressing a key (event.detail==0 in this case)
-    if (event.detail == 0)
-      return;
-    event.stopPropagation();
-    if (!this.isDesktopMenuOpen) {
-      this.currenOpenMenuId = id;
-      this.showPanel(id);
-    }
-    else if (this.isDesktopMenuOpen) {
-      this.handleDesktopMenuClose(event);
-    }
-    if (this.isNewMenuIdOnHover) {
-      this.isNewMenuIdOnHover = false;
-    }
-  }
-  handleKeyDown(event, id) {
-    event.stopPropagation();
-    const key = event.code;
-    if ([keys.enter, keys.space].includes(key)) {
-      if (!this.isDesktopMenuOpen) {
-        this.currenOpenMenuId = id;
-        this.showPanel(id);
-      }
-      else {
-        this.handleDesktopMenuClose(event);
-      }
-    }
-  }
-  componentDidLoad() {
-    // Set the browser resize observer to gather information about browser width.
-    this.ro = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        this.removeBackdropShadow(entry.contentRect.width);
-      }
-    });
-    this.ro.observe(document.body);
-    let hyToolbar = document.querySelectorAll('#toolbar-administration')[0];
-    if (hyToolbar) {
-      this.hasToolbar = true;
-    }
-    const links = this._dataDesktopLinks;
-    let menuLinkItems = [];
-    if (links) {
-      links.map(({ menuLinkId: id, shortcuts, items, url, description, toggleOff, label, labelExtra, isExternal, isActive, shortcutsTitle, closeButtonTitle, }) => {
-        let target = isExternal ? '_blank' : '_self';
-        const isLabelLong = label.split(' ').length >= 3 ? true : false;
-        let customizedLabel = [];
-        if (isLabelLong && !this.isGroup) {
-          customizedLabel = label.split(' ');
-          customizedLabel.splice(2, 0, '</br>');
-        }
-        if (toggleOff) {
-          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 ${isLabelLong && !this.isGroup ? 'is-long' : ''}`, "menu-link-id": id }, labelExtra ? h("span", { class: "label" }, labelExtra) : h("span", { class: "label" }, label))));
-        }
-        else {
-          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' : ''} ${isLabelLong && !this.isGroup ? 'is-long' : ''}`, "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", { innerHTML: isLabelLong && !this.isGroup ? customizedLabel.join(' ') : label }),
-              h("hy-icon", { icon: 'hy-icon-caret-down', size: 32 })),
-            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 ${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"; }
-  static get originalStyleUrls() { return {
-    "$": ["hy-desktop-menu-links.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["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,
-      "complexType": {
-        "original": "DesktopLinks[] | string",
-        "resolved": "DesktopLinks[] | string",
-        "references": {
-          "DesktopLinks": {
-            "location": "local"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "data-desktop-links",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "firstLevelLinksList": {},
-    "menuLinkItems": {},
-    "hasToolbar": {},
-    "isDesktopMenuOpen": {},
-    "currenOpenMenuId": {},
-    "isNewMenuIdOnHover": {}
-  }; }
-  static get events() { return [{
-      "method": "menuDesktopToggled",
-      "name": "menuDesktopToggled",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "menuLanguageToggled",
-      "method": "menuLanguageToggled",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "universityMainMenuToggled",
-      "method": "universityMainMenuPanelToggled",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "searchPanelToggled",
-      "method": "searchPanelToggled",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "headerScrollUp",
-      "method": "headerScrollUp",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "click",
-      "method": "handleWindowClick",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }]; }
-}