menu.tsx

import {Component, Element, Event, EventEmitter, h, Listen, Prop, State} from '@stencil/core';
import {DonateLink} from '../../site-header/site-header';
import {ColorVariant, MenuType, SiteLogoSize} from '../../../utils/utils';

@Component({
  tag: 'hy-menu',
  styleUrl: 'menu.scss',
  shadow: true,
})
export class Menu {
  @Element() el: HTMLElement;
  @Event() menuContainerToggled: EventEmitter;
  @Prop() dataMenuDonate: string;
  @Prop() dataMenuLanguage: string;
  @Prop() isDemo: boolean = false;
  @Prop() labelFrontPage: string;
  @Prop() logoUrl: string;
  @Prop() logoLabel: string;
  @Prop() menuIsOpen = true;
  @Prop() menuType: MenuType = MenuType.desktop;
  @Prop() menuButtonSubmenuExpand: string;
  @Prop() menuButtonBreadcrumbReturn: string;
  @State() breadcrumbs: any;
  private donateLink: DonateLink[];

  // Listener for removing a breadcrumb from mobile menu breadcrumbs.
  @Listen('removeBreadcrumb') removeBreadcrumb(data) {
    let breadcrumbs = JSON.parse(JSON.stringify(this.breadcrumbs));
    let currentBreadcrumb = breadcrumbs
      .map(function (e) {
        return e.bid;
      })
      .indexOf(data.detail.bid);
    breadcrumbs.length = currentBreadcrumb;

    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;

    // 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-1')) {
          this.menuContainerToggled.emit({
            triggerItem: element.getAttribute('trigger-item'),
            triggerType: 'remove',
          });
        }
      });
    }
  }

  // Listener for adding a breadcrumb to mobile menu breadcrumbs.
  @Listen('addBreadcrumb') addBreadcrumb(event) {
    this.breadcrumbs = [
      ...this.breadcrumbs,
      {
        label: event.detail.label,
        bid: event.detail.bid,
        url: event.detail.url,
      },
    ];
  }

  componentWillLoad() {
    this.breadcrumbs = [];
  }

  componentWillUpdate() {
    // Pass the menu type and menu-button-submenu-expand attributes to
    // the child menu-level-container component.
    this.el.children[0].setAttribute('menu-type', this.menuType);
    this.el.children[0].setAttribute('menu-button-submenu-expand', this.menuButtonSubmenuExpand);
  }

  componentWillRender() {
    // Set the donate link data.
    if (this.dataMenuDonate) {
      this.donateLink = JSON.parse(this.dataMenuDonate);
    }

    // Set demo value to all children to provide better UI for DS users.
    if (this.isDemo) {
      const items = Array.from(this.el.children);
      items.forEach((item) => {
        item.setAttribute('is-demo', 'true');
      });
    }
  }

  render() {
    switch (this.menuType) {
      case MenuType.desktop:
        return (
          <div class={'hy-wrapper'}>
            <nav
              role={'navigation'}
              class={{
                'hy-menu-wrapper--desktop': true,
                'is-open': this.menuIsOpen,
              }}
            >
              <div class={'hy-menu hy-menu--desktop'}>
                <slot />
              </div>
            </nav>
          </div>
        );

      case MenuType.mobile:
        return (
          <nav
            role={'navigation'}
            class={{
              'hy-menu-wrapper--mobile': true,
              'is-open': this.menuIsOpen,
            }}
          >
            <div class={'hy-menu__logo-container'} id={'menu-logo'}>
              <hy-site-logo
                size={SiteLogoSize.small}
                color={ColorVariant.black}
                url={this.logoUrl}
                label={this.logoLabel}
              />
            </div>
            <div class="hy-menu-container--mobile">
              <div
                id={'menu-bc-container'}
                class={{
                  'hy-menu__breadcrumbs': true,
                  'is-empty': this.breadcrumbs.length === 0,
                }}
              >
                <hy-menu-language is-mobile={true} data-menu-language={this.dataMenuLanguage} />
                {this.breadcrumbs.length
                  ? this.breadcrumbs.map((breadcrumb, index) => {
                      return (
                        <hy-menu-mobile-breadcrumb
                          label-back={this.menuButtonBreadcrumbReturn}
                          label-front-page={this.labelFrontPage}
                          label={breadcrumb.label}
                          bid={breadcrumb.bid}
                          is-first={index === 0}
                        />
                      );
                    })
                  : ''}
              </div>
              <div
                aria-hidden={this.menuIsOpen ? 'false' : 'true'}
                class={{
                  'hy-menu': true,
                  'hy-menu--mobile': true,
                  'is-open': this.menuIsOpen,
                  'is-demo': this.isDemo,
                }}
              >
                <slot />
              </div>
            </div>
            <div class={'hy-link__donate'}>
              {this.donateLink
                ? this.donateLink.map((i) => {
                    return <a href={i.url}>{i.label}</a>;
                  })
                : ''}
            </div>
          </nav>
        );

      case MenuType.sidenav:
        return (
          <nav
            role={'navigation'}
            aria-hidden={this.menuIsOpen ? 'false' : 'true'}
            class={{
              'hy-menu': true,
              'hy-menu--sidenav': true,
              'is-demo': this.isDemo,
            }}
          >
            <slot />
          </nav>
        );
    }
  }
}