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

import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, state, } from '@design.estate/dees-element';

import * as domtools from '@design.estate/dees-domtools';

declare global {
  interface HTMLElementTagNameMap {
    'dees-windowlayer': DeesWindowLayer;
  }
}

export interface IOptions_DeesWindowLayer {
  blur: boolean;
}

@customElement('dees-windowlayer')
export class DeesWindowLayer extends DeesElement {
  // STATIC
  public static demo = () => html`<dees-windowlayer></dees-windowlayer>`;

  public static async createAndShow(optionsArg?: IOptions_DeesWindowLayer) {
    const domtoolsInstance = domtools.DomTools.getGlobalDomToolsSync();
    const windowLayer = new DeesWindowLayer();
    windowLayer.options = {
      ...windowLayer.options,
      ...optionsArg,
    }
    document.body.append(windowLayer);
    await domtoolsInstance.convenience.smartdelay.delayFor(0);
    windowLayer.show();
    return windowLayer;
  }

  @state()
  public options: IOptions_DeesWindowLayer = {
    blur: false
  };

  // INSTANCE
  @property({
    type: Boolean
  })
  public visible = false;

  constructor() {
    super();
    domtools.elementBasic.setup();
  }

  public render(): TemplateResult {
    return html`
      ${domtools.elementBasic.styles}
      <style>
        .windowOverlay {
          transition: all 0.2s;
          will-change: transform;
          position: fixed;
          top: 0px;
          left: 0px;
          height: 100vh;
          width: 100vw;
          display: flex;
          justify-content: center;
          align-items: center;
          background: rgba(0, 0, 0, 0.0);
          backdrop-filter: brightness(1) ${this.options.blur ? 'blur(0px)' : ''};
          pointer-events: none;
          z-index: 200;
        }
        .slotContent {
          position: fixed;
          height: 100vh;
          width: 100vw;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 201;
        }
        
        .visible {
          background: rgba(0, 0, 0, 0.2);
          backdrop-filter: brightness(0.9) ${this.options.blur ? 'blur(2px)' : ''};
        }
      </style>
      <div class="windowOverlay ${this.visible ? 'visible' : null}">
      </div>
      <div @click=${this.dispatchClicked} class="slotContent">
        <slot></slot>
      </div>
    `;
  }

  firstUpdated() {
    setTimeout(() => {
      this.visible = true;
    }, 100);
  }

  dispatchClicked() {
    this.dispatchEvent(new CustomEvent('clicked'));
  }

  public toggleVisibility () {
    this.visible = !this.visible;
  }

  public async show() {
    const domtools = await this.domtoolsPromise;
    await domtools.convenience.smartdelay.delayFor(0);
    this.visible = true;
  }

  public async hide() {
    const domtools = await this.domtoolsPromise;
    await domtools.convenience.smartdelay.delayFor(0);
    this.visible = false;
  }

  public async destroy() {
    const domtools = await this.domtoolsPromise;
    await this.hide();
    await domtools.convenience.smartdelay.delayFor(300);
    this.remove();
  }
}