catalog/ts_web/elements/sio-fab.ts

import {
  DeesElement,
  property,
  html,
  customElement,
  type TemplateResult,
  cssManager,
  css,
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';

import { SioCombox } from './sio-combox.js';
SioCombox;

declare global {
  interface HTMLElementTagNameMap {
    'sio-fab': SioFab;
  }
}

@customElement('sio-fab')
export class SioFab extends DeesElement {
  @property()
  public showCombox = false;

  public static demo = () => html` <sio-fab .showCombox=${true}></sio-fab> `;

  constructor() {
    super();
    domtools.DomTools.setupDomTools();
  }

  public render(): TemplateResult {
    return html`
      ${domtools.elementBasic.styles}
      <style>
        :host {
          will-change: transform;
          position: absolute;
          display: block;
          bottom: 20px;
          right: 20px;
          z-index: 10000;
          color: #fff;
        }

        #mainbox {
          transition: all 0.2s;
          position: absolute;
          bottom: 0px;
          right: 0px;
          height: 60px;
          width: 60px;
          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
          line-height: 60px;
          text-align: center;
          color: #ccc;
          cursor: pointer;
          background: ${this.goBright
            ? 'linear-gradient(-45deg, #eeeeeb, #eeeeeb)'
            : 'linear-gradient(-45deg, #222222, #333333)'};
          border-radius: 50% 50% 50% 50%;
          user-select: none;
        }

        #mainbox:hover {
          transform: scale(1.05);
        }

        #mainbox:active {
          transform: scale(0.95);
        }

        #mainbox .icon {
          position: absolute;
          top: 0px;
          left: 0px;
          will-change: transform;
          transform: ${this.showCombox ? 'rotate(0deg)' : 'rotate(-360deg)'};
          transition: all 0.2s;
          height: 100%;
          width: 100%;
          object-fit: contain;
          -webkit-user-drag: none;
          -khtml-user-drag: none;
          -moz-user-drag: none;
          -o-user-drag: none;
          user-drag: none;
        }

        #mainbox .icon img {
          filter: grayscale(1) ${cssManager.bdTheme('invert(1)', '')};
          position: absolute;
          width: 100%;
          top: 0px;
          left: 0px;
          will-change: transform;
          transform: scale(0.2, 0.2) translateY(-5px);
        }
        #mainbox .icon.open:hover img {
          filter: grayscale(0);
        }

        #mainbox .icon.open {
          opacity: ${this.showCombox ? '0' : '1'};
          pointer-events: ${this.showCombox ? 'none' : 'all'};
        }

        #mainbox .icon.close {
          opacity: ${this.showCombox ? '1' : '0'};
          pointer-events: ${this.showCombox ? 'all' : 'none'};
        }
        #mainbox .icon.close:hover dees-icon {
          color: ${cssManager.bdTheme('#111', '#fff')};
        }

        #mainbox .icon.open dees-icon {
          position: absolute;
          width: 100%;
          height: 100%;
          font-size: 32px;
          color: ${cssManager.bdTheme('#777', '#999')};
          top: 2px;
        }

        #mainbox .icon.close dees-icon {
          position: absolute;
          width: 100%;
          height: 100%;
          font-size: 24px;
          color: ${cssManager.bdTheme('#666', '#CCC')};
        }

        #comboxContainer sio-combox {
          transition: transform 0.2s, opacity 0.2s;
          will-change: transform;
          transform: translateY(20px);
          bottom: 80px;
          opacity: 0;
          pointer-events: none;
        }

        #comboxContainer.show sio-combox {
          transform: translateY(0px);
          opacity: 1;
          pointer-events: all;
        }
      </style>
      <div id="mainbox" @click=${this.toggleCombox}>
        <div class="icon open">
          <dees-icon iconFA="message"></dees-icon>
          <img src="https://assetbroker.lossless.one/brandfiles/00general/favicon_socialio.svg" />
        </div>
        <div class="icon close">
          <dees-icon iconFa="xmark"></dees-icon>
        </div>
      </div>
      <div id="comboxContainer" class="${this.showCombox ? 'show' : null}">
        <sio-combox></sio-combox>
      </div>
    `;
  }

  /**
   * toggles the combox
   */
  public async toggleCombox() {
    console.log('toggle combox');
    this.showCombox = !this.showCombox;
  }

  public async firstUpdated(args) {
    super.firstUpdated(args);
    const domtools = await this.domtoolsPromise;
    const sioCombox: SioCombox = this.shadowRoot.querySelector('sio-combox');
    const mainBox: HTMLElement = this.shadowRoot.querySelector('#mainbox');
    sioCombox.referenceObject = mainBox;

    domtools.keyboard
      .on([domtools.keyboard.keyEnum.Ctrl, domtools.keyboard.keyEnum.S])
      .subscribe((event) => {
        this.showCombox = !this.showCombox;
      });
  }
}