initial

2024-12-27 01:53:26 +01:00
commit cebae44ff5
21 changed files with 8510 additions and 0 deletions
--- a/ts_web/elements/sio-fab.ts
+++ b/ts_web/elements/sio-fab.ts
@@ -0,0 +1,185 @@
+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;
+      });
+  }
+}