@itcenteratunihelsinki/huds-lib 0.5.46 → 0.6.0

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

@@ -1,677 +0,0 @@
-import { Component, Element, h, State, Listen, Prop } from '@stencil/core';
-import { MenuType, SiteLogoSize, ColorVariant } from '../../../utils/utils';
-import ResizeObserver from 'resize-observer-polyfill';
-let sidebarClickTimeout = null;
-let sidepanelClickTimeout = null;
-export class MenuSidebar {
-  constructor() {
-    /**
-     * Is menu open boolean.
-     */
-    this.menuIsOpen = false;
-    /**
-     * Menu type. Defaults to sidenav.
-     */
-    this.menuType = MenuType.sidenav;
-    this.pageSize = MenuType.mobile;
-    /**
-     * Upper menus panel boolean.
-     */
-    this.panelOpen = false;
-    /**
-     * Logo size
-     */
-    this.size = SiteLogoSize.big;
-    /**
-     * Isdemo
-     */
-    this.isDemo = false;
-    /**
-     * Should have link to front page or show full menu button
-     */
-    this.noChildren = false;
-    /**
-     * IsResearchGroup
-     */
-    this.isResearchGroup = false;
-    /**
-     * is Active helps to define how to render Research Group link.
-     */
-    this.isActive = false;
-    this.minHeight = null;
-  }
-  panelToggle(e) {
-    if (this.menuIsOpen) {
-      this.closeWholeTree();
-      this.panelOpen = !this.panelOpen;
-    }
-    else {
-      this.panelOpen = !this.panelOpen;
-    }
-    e.preventDefault();
-    e.stopPropagation();
-  }
-  async componentWillLoad() {
-    if (this.pageSize === MenuType.mobile)
-      return;
-    const sideBar = document.querySelector('.layout-sidebar-first');
-    if (sideBar) {
-      if (this.menuIsOpen) {
-        sideBar.classList.add('menu-is-open');
-      }
-      else if (sideBar.classList.contains('menu-is-open')) {
-        sideBar.classList.remove('menu-is-open');
-      }
-    }
-  }
-  componentDidLoad() {
-    this.ro = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        this.applySize(entry.contentRect.width);
-      }
-    });
-    this.ro.observe(document.body);
-    const panels = document.querySelectorAll('.hy-menu-level-container');
-    if (panels) {
-      const height = Math.max.apply(Math, [...panels].map((panel) => panel.scrollHeight));
-      this.minHeight = height;
-    }
-  }
-  applySize(size) {
-    // Set the menu-type based on the width of the browser.
-    if (size <= 960) {
-      this.pageSize = MenuType.mobile;
-    }
-    else {
-      this.pageSize = MenuType.desktop;
-    }
-  }
-  handlePanel(e) {
-    const target = e.target;
-    const targetElement = target.tagName.toLowerCase();
-    const possibleTags = [targetElement].some((r) => ['svg', 'path'].indexOf(r) >= 0);
-    if (target.classList.contains('hy-menu-item__label__icon') || possibleTags) {
-      const menuItem = target.closest('.hy-menu-item-sidebar');
-      const menuItemId = menuItem.getAttribute('data-link-id');
-      const menuItemLevel = menuItem.getAttribute('item-level');
-      const menuPanel = menuItem.closest('.hy-menu-level-container');
-      const childList = menuItem.querySelector('.hy-menu-level-container');
-      const menu = target.closest('.hy-menu');
-      if (menu.classList.contains('hy-menu-sidepanel') && !this.previousPanel) {
-        const sameLevelItem = menuPanel.querySelector('.is-active-item');
-        if (sameLevelItem) {
-          const sameLevelChildList = sameLevelItem.querySelector('.hy-menu-level-container');
-          this.updatePrevious(menuPanel, sameLevelItem);
-          this.togglePanel(sameLevelItem, sameLevelChildList, true);
-          this.togglePanel(menuItem, childList);
-          return;
-        }
-      }
-      // If no previous, as in first time clicking menu
-      if (!this.previousPanel) {
-        this.updatePrevious(menuPanel, menuItem);
-        this.togglePanel(menuItem, childList);
-        return;
-      }
-      const prevId = this.previousItem.dataset.linkId;
-      const prevLevel = this.previousItem.getAttribute('item-level');
-      // If clicking same menu item again.
-      if (menuItemId === prevId) {
-        if (menuItem.classList.contains('is-active-item')) {
-          this.togglePanel(menuItem, childList, true);
-          if (menuItemLevel == 0) {
-            this.menuIsOpen = false;
-            this.toggleSidebarBg();
-          }
-        }
-        else {
-          this.togglePanel(menuItem, childList);
-        }
-        return;
-      }
-      // If clicking menu item on same level or going back up
-      if (menuItemLevel <= prevLevel) {
-        // If clicking already active, close children
-        if (menuItem.classList.contains('is-active-item')) {
-          this.togglePanel(menuItem, childList, true);
-          this.updatePrevious(menuPanel, menuItem);
-          return;
-        }
-        // Close previous panels
-        this.togglePanel(this.previousItem, menuPanel, true);
-        // Open newly clicked panel
-        this.togglePanel(menuItem, childList);
-        // Update previous
-        this.updatePrevious(menuPanel, menuItem);
-      }
-      else if (menuItemLevel > prevLevel) {
-        this.togglePanel(menuItem, childList);
-        this.updatePrevious(menuPanel, menuItem);
-      }
-    }
-    e.stopImmediatePropagation();
-    e.stopPropagation();
-  }
-  updatePrevious(panel, item) {
-    this.previousPanel = panel;
-    this.previousItem = item;
-  }
-  closeWholeTree() {
-    const sidebarLevel1 = document.querySelector('.hy-menu-level-container--level-0');
-    let firstItem = document.querySelector('.hy-menu-item-sidebar--sidenav.hy-menu-item--level-0.has-children.is-active-item');
-    if (firstItem) {
-      this.togglePanel(firstItem, sidebarLevel1, true);
-    }
-    else {
-      firstItem = document.querySelector('.hy-menu-item-sidebar--sidenav.hy-menu-item--level-0.is-active-item');
-    }
-    const body = document.querySelector('body');
-    const container = document.querySelector('.hy-menu-sidebar--container');
-    if (container.classList.contains('sidebar-open') && firstItem) {
-      container.classList.remove('sidebar-open');
-      body.classList.remove('hy-menu-sidebar__no-scroll');
-    }
-  }
-  togglePanel(menuItem, panel, shouldClose = false) {
-    const buttonElement = menuItem.querySelector('button');
-    const level = menuItem.getAttribute('item-level');
-    if (level == 0 && !this.menuIsOpen) {
-      if (window.pageYOffset > 50 && !this.isDemo) {
-        window.scrollTo({ top: 0 });
-      }
-      this.menuIsOpen = true;
-    }
-    if (shouldClose) {
-      const children = panel.querySelectorAll('.hy-menu-item-sidebar');
-      const activeChild = [...children].filter((c) => c.classList.contains('is-active-item'));
-      if (level == 0 && activeChild) {
-        this.menuIsOpen = false;
-        this.toggleSidebarBg();
-      }
-      if (activeChild.length > 0) {
-        for (let i = 0; i < activeChild.length; i++) {
-          const element = activeChild[i];
-          this.closeChildren(element);
-        }
-      }
-      if (buttonElement) {
-        buttonElement.setAttribute('aria-expanded', 'false');
-      }
-      this.closeChildren(menuItem);
-      return;
-    }
-    buttonElement.setAttribute('aria-expanded', 'true');
-    panel.classList.add('is-open');
-    menuItem.classList.add('is-active-item');
-  }
-  closeChildren(menuItem) {
-    if (menuItem.classList.contains('is-active-item')) {
-      menuItem.classList.remove('is-active-item');
-    }
-    if (menuItem.classList.contains('has-children')) {
-      const menuButton = menuItem.querySelector('button');
-      menuButton.setAttribute('aria-expanded', 'false');
-      const childList = menuItem.querySelector('.hy-menu-level-container');
-      childList.classList.remove('is-open');
-      const childItems = childList.querySelectorAll('.hy-menu-item-sidebar');
-      if (childList.classList.contains('is-active')) {
-        childList.classList.remove('is-active');
-      }
-      childItems.forEach((element) => {
-        element.classList.remove('is-active-item');
-        if (element.classList.contains('has-children')) {
-          const menuButton = element.querySelector('button');
-          menuButton.setAttribute('aria-expanded', 'false');
-          this.closeChildren(element);
-        }
-        else {
-          return;
-        }
-      });
-    }
-  }
-  toggleSidebarBg() {
-    const sideBar = document.querySelector('.layout-sidebar-first');
-    if (this.menuIsOpen) {
-      sideBar.classList.add('menu-is-open');
-    }
-    else if (sideBar.classList.contains('menu-is-open')) {
-      sideBar.classList.remove('menu-is-open');
-    }
-  }
-  render() {
-    const sidebarContainer = document.querySelector('.hy-menu-sidebar--container');
-    if (sidebarContainer) {
-      sidebarContainer.addEventListener('click', (e) => {
-        clearTimeout(sidebarClickTimeout);
-        sidebarClickTimeout = setTimeout(() => {
-          if (e.target.classList.contains('sidebar-open')) {
-            this.closeWholeTree();
-          }
-        }, 250);
-      });
-    }
-    const sidepanelContainer = document.querySelector('.hy-menu-sidepanel--container');
-    if (sidepanelContainer) {
-      sidepanelContainer.addEventListener('click', (e) => {
-        clearTimeout(sidepanelClickTimeout);
-        sidepanelClickTimeout = setTimeout(() => {
-          if (e.target.classList.contains('sidepanel-open')) {
-            this.panelToggle(e);
-          }
-        }, 250);
-      });
-    }
-    const logoColor = ColorVariant.black;
-    const panelClassAttributes = ['hy-menu-sidepanel--container', this.panelOpen ? 'sidepanel-open' : ''].join(' ');
-    switch (this.menuType) {
-      case MenuType.sidepanel:
-        return (h("div", { class: "hy-menu-sidebar__container", style: {
-            '--minHeight': `${this.minHeight}px`,
-          } },
-          this.noChildren && this.isResearchGroup && this.isActive && (h("a", { "aria-label": this.frontLabel, class: "hy-menu-sidebar__panel-toggle", href: this.frontUrl },
-            h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }),
-            this.frontLabel)),
-          this.noChildren && this.isResearchGroup && !this.isActive && (h("a", { "aria-label": this.frontLabel, class: "hy-menu-sidebar__panel-toggle", href: this.frontUrl },
-            h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }),
-            h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }),
-            this.frontLabel)),
-          this.noChildren && !this.isResearchGroup && (h("a", { "aria-label": this.frontLabel, class: "hy-menu-sidebar__panel-toggle", href: this.frontUrl },
-            h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }),
-            h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }),
-            this.frontLabel)),
-          !this.noChildren && (h("button", { "aria-label": this.panelToggleAriaLabel, class: "hy-menu-sidebar__panel-toggle", onClick: (e) => this.panelToggle(e) },
-            h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }),
-            h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }),
-            this.panelToggleLabel)),
-          h("div", { class: panelClassAttributes, "aria-hidden": this.panelOpen ? 'false' : 'true', "aria-expanded": this.panelOpen ? 'true' : 'false' },
-            h("div", { class: "hy-menu-sidepanel__nav-container" },
-              h("div", { class: "hy-menu-sidepanel__logo-container" },
-                h("div", { class: "hy-menu-sidepanel__logo", "aria-hidden": this.panelOpen ? 'false' : 'true', tabindex: this.panelOpen ? '0' : '-1' },
-                  h("hy-site-logo", { size: 56, color: logoColor, url: this.logoUrl, label: this.logoLabel })),
-                h("button", { "aria-label": this.panelToggleCloseAriaLabel, "aria-hidden": this.panelOpen ? 'false' : 'true', tabindex: this.panelOpen ? '0' : '-1', class: "hy-menu-sidebar__panel-toggle", onClick: (e) => this.panelToggle(e) },
-                  h("hy-icon", { icon: 'hy-icon-remove', fill: 'currentColor', size: 10 }),
-                  this.panelToggleCloseLabel)),
-              h("nav", { role: 'navigation', "aria-hidden": this.panelOpen ? 'false' : 'true', tabindex: this.panelOpen ? '0' : '-1', class: {
-                  'hy-menu': true,
-                  'hy-menu-sidepanel': true,
-                  'is-demo': this.isDemo,
-                } },
-                h("slot", null))))));
-      case MenuType.sidenav:
-        return (h("div", { class: "hy-menu-sidebar--container", style: {
-            '--minHeight': `${this.minHeight}px`,
-          } },
-          h("div", { class: "hy-menu-sidebar__logo" },
-            h("hy-site-logo", { size: 56, color: logoColor, url: this.logoUrl, label: this.logoLabel })),
-          h("button", { "aria-label": this.panelToggleAriaLabel, class: "hy-menu-sidebar__panel-toggle", onClick: (e) => this.panelToggle(e) },
-            h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }),
-            h("hy-icon", { icon: 'hy-icon-caret-left', fill: 'currentColor', size: 10 }),
-            this.panelToggleLabel),
-          h("nav", { role: 'navigation', "aria-hidden": this.menuIsOpen ? 'false' : 'true', class: {
-              'hy-menu': true,
-              'hy-menu-sidebar': true,
-              'is-demo': this.isDemo,
-            } },
-            h("slot", null))));
-    }
-  }
-  static get is() { return "hy-menu-sidebar"; }
-  static get originalStyleUrls() { return {
-    "$": ["menu-sidebar.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["menu-sidebar.css"]
-  }; }
-  static get properties() { return {
-    "menuIsOpen": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Is menu open boolean."
-      },
-      "attribute": "menu-is-open",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "menuType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "MenuType",
-        "resolved": "MenuType.desktop | MenuType.mobile | MenuType.sidenav | MenuType.sidepanel | MenuType.tablet",
-        "references": {
-          "MenuType": {
-            "location": "import",
-            "path": "../../../utils/utils"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Menu type. Defaults to sidenav."
-      },
-      "attribute": "menu-type",
-      "reflect": false,
-      "defaultValue": "MenuType.sidenav"
-    },
-    "pageSize": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "MenuType",
-        "resolved": "MenuType.desktop | MenuType.mobile | MenuType.sidenav | MenuType.sidepanel | MenuType.tablet",
-        "references": {
-          "MenuType": {
-            "location": "import",
-            "path": "../../../utils/utils"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "page-size",
-      "reflect": false,
-      "defaultValue": "MenuType.mobile"
-    },
-    "panelOpen": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Upper menus panel boolean."
-      },
-      "attribute": "panel-open",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "panelToggleLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Label for panel toggle button."
-      },
-      "attribute": "panel-toggle-label",
-      "reflect": false
-    },
-    "panelToggleAriaLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Label for panel toggle button."
-      },
-      "attribute": "panel-toggle-aria-label",
-      "reflect": false
-    },
-    "panelToggleCloseLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Label for panel toggle button."
-      },
-      "attribute": "panel-toggle-close-label",
-      "reflect": false
-    },
-    "panelToggleCloseAriaLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Label for panel toggle button."
-      },
-      "attribute": "panel-toggle-close-aria-label",
-      "reflect": false
-    },
-    "logoUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Url for logo."
-      },
-      "attribute": "logo-url",
-      "reflect": false
-    },
-    "logoLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Logo label"
-      },
-      "attribute": "logo-label",
-      "reflect": false
-    },
-    "size": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "SiteLogoSize",
-        "resolved": "SiteLogoSize.big | SiteLogoSize.large | SiteLogoSize.small",
-        "references": {
-          "SiteLogoSize": {
-            "location": "import",
-            "path": "../../../utils/utils"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Logo size"
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "SiteLogoSize.big"
-    },
-    "isDemo": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Isdemo"
-      },
-      "attribute": "is-demo",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "noChildren": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Should have link to front page or show full menu button"
-      },
-      "attribute": "no-children",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "frontUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Url to frontpage"
-      },
-      "attribute": "front-url",
-      "reflect": false
-    },
-    "frontLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label for frontpage"
-      },
-      "attribute": "front-label",
-      "reflect": false
-    },
-    "isResearchGroup": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "IsResearchGroup"
-      },
-      "attribute": "is-research-group",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "isActive": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "is Active helps to define how to render Research Group link."
-      },
-      "attribute": "is-active",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "minHeight": {
-      "type": "any",
-      "mutable": true,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "min-height",
-      "reflect": false,
-      "defaultValue": "null"
-    }
-  }; }
-  static get states() { return {
-    "previousPanel": {},
-    "previousItem": {}
-  }; }
-  static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "panelToggle",
-      "method": "panelToggle",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "click",
-      "method": "handlePanel",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
-}