dees-catalog/ts_web/elements/dees-mobilenavigation.ts

import * as plugins from './plugins.js';
import {
  cssManager,
  css,
  customElement,
  DeesElement,
  domtools,
  html,
  property,
} from '@designestate/dees-element';
import { DeesWindowLayer } from './dees-windowlayer.js';

@customElement('lele-mobilenavigation')
export class LeleMobilenavigation extends DeesElement {
  private static singletonRef: LeleMobilenavigation;
  public static async createAndInit(menuItemsArg: plugins.tsclass.website.IMenuItem[]) {
    if (!this.singletonRef) {
      this.singletonRef = new LeleMobilenavigation();
      document.body.append(this.singletonRef);
      await this.singletonRef.init();
    }
    this.singletonRef.menuItems = menuItemsArg;
    await this.singletonRef.readyDeferred.promise;
    this.singletonRef.show();
    return this.singletonRef;
  }

  // INSTANCE
  @property({
    type: Object,
  })
  public menuItems: plugins.tsclass.website.IMenuItem[] = [];

  readyDeferred = domtools.plugins.smartpromise.defer();

  /**
   * inits the mobile navigation
   */
  public async init() {
    await this.updateComplete;
    this.readyDeferred.resolve();
  }

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
      }

      .main {
        transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
        position: fixed;
        height: 100vh;
        min-width: 370px;
        transform: translateX(200px);
        color: #fff;
        z-index: 100;
        opacity: 0;
        padding: 16px;
        right: 0px;
        background: #000;
        border-left: 1px dashed #444;
        pointer-events: none;
      }

      .main.show {
        pointer-events: all;
        transform: translateX(0px);
        opacity: 1;
      }

      .menuItem {
        text-align: center;
        padding: 8px;
        cursor: pointer;
        border-radius: 3px;
      }
      .menuItem:hover {
        background: #333;
      }
    `,
  ];

  public render() {
    return html`
      <div class="main">
        ${this.menuItems.map((menuItem) => {
          return html`
            <div
              class="menuItem"
              @click="${() => {
                this.hide();
                menuItem.action();
              }}"
            >
              ${menuItem.name}
            </div>
          `;
        })}
      </div>
    `;
  }

  private windowLayer: DeesWindowLayer;

  /**
   * inits the show
   */
  public async show() {
    const domtools = await this.domtoolsPromise;
    const main = this.shadowRoot.querySelector('.main');
    if (!this.windowLayer) {
      this.windowLayer = new DeesWindowLayer();
      this.windowLayer.addEventListener('click', () => {
        this.hide();
      });
    }
    document.body.append(this.windowLayer);
    await domtools.convenience.smartdelay.delayFor(0);
    this.windowLayer.show();

    await domtools.convenience.smartdelay.delayFor(0);
    main.classList.add('show');
  }

  /**
   * inits the hide function
   */
  public async hide() {
    const domtools = await this.domtoolsPromise;
    const main = this.shadowRoot.querySelector('.main');
    main.classList.remove('show');
    this.windowLayer.hide();
  }

  async disconnectedCallback () {
    document.body.removeChild(this.windowLayer);
  }
}