fix(core): update

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@uptime.link/webwidget',
-  version: '1.0.73',
+  version: '1.0.74',
   description: 'the webwidget for public use of uptimelink'
 }

ts_web/elements/uptimelink-webwidget.ts

@@ -1,5 +1,6 @@
-import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
+import { DeesElement, property, html, customElement, type TemplateResult, cssManager } from '@design.estate/dees-element';
+
+import { UptimelinkWindowLayer } from './uptimelink-windowlayer.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -13,6 +14,11 @@ export class UptimelinkWebwidget extends DeesElement {
     <uptimelink-webwidget projectSlug="uptime.link"></uptimelink-webwidget>
   `;
 
+  @property({
+    type: Boolean
+  })
+  isOnTop = false;
+
   @property()
   public projectSlug: string;
 
@@ -27,19 +33,21 @@ export class UptimelinkWebwidget extends DeesElement {
 
   constructor() {
     super();
-    domtools.DomTools.setupDomTools();
     this.setupEventing();
   }
 
+  public static styles = [
+    cssManager.defaultStyles,
+  ]
+
   public render(): TemplateResult {
     return html`
-      ${domtools.elementBasic.styles}
       <style>
         :host {
           position: relative;
           display: block;
           height: 30px;
-          z-index: ${this.isElevated ? '10' : 'auto'} ;
+          z-index: ${this.isElevated ? '1000' : 'auto'} ;
         }
         .mainbox {
           position: relative;
@@ -163,13 +171,29 @@ export class UptimelinkWebwidget extends DeesElement {
     `;
   }
 
+  public windowLayer: UptimelinkWindowLayer;
   private async setupEventing() {
+    const domtools = await this.domtoolsPromise;
     await this.updateComplete;
     const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
     mainbox.onmouseenter = async () => {
+      if (!this.isOnTop) {
+        const mainbox = this.shadowRoot.querySelector('.mainbox') as HTMLElement;
+        const rect = mainbox.getBoundingClientRect();
+        const uptimelinkWidget = new UptimelinkWebwidget();
+        uptimelinkWidget.isOnTop = true;
+        uptimelinkWidget.style.position = 'fixed';
+        uptimelinkWidget.style.top = `${rect.top}px`;
+        uptimelinkWidget.style.left = `${rect.left}px`;
+        document.body.append(uptimelinkWidget);
+        return;
+      }
       this.isElevated = true;
       this.isFocused = true;
-      await domtools.DomTools.getGlobalDomToolsSync().convenience.smartdelay.delayFor(200);
+      this.windowLayer = await UptimelinkWindowLayer.createAndShow({
+        blur: true,
+      });
+      await domtools.convenience.smartdelay.delayFor(200);
       if (!this.isFocused) {
         return;
       }
@@ -180,9 +204,14 @@ export class UptimelinkWebwidget extends DeesElement {
       expandedDiv.style.opacity = '1';
     };
     mainbox.onmouseleave = async () => {
-      (await this.domtoolsPromise).convenience.smartdelay.delayFor(200).then(() => {
+      if (!this.isOnTop) {
+        return;
+      }
+      this.windowLayer.destroy();
+      domtools.convenience.smartdelay.delayFor(200).then(() => {
         if (!this.isFocused) {
           this.isElevated = false;
+          this.remove();
         }
       });
       if (!this.showExpanded) {
@@ -190,7 +219,7 @@ export class UptimelinkWebwidget extends DeesElement {
         return;
       }
       this.showExpanded = false;
-      await domtools.DomTools.getGlobalDomToolsSync().convenience.smartdelay.delayFor(50);
+      await domtools.convenience.smartdelay.delayFor(50);
       this.isFocused = false;
     }
   }

ts_web/elements/uptimelink-windowlayer.ts

@@ -0,0 +1,113 @@
+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 {
+    'uptimelink-windowlayer': UptimelinkWindowLayer;
+  }
+}
+
+export interface IOptions_UptimeLinkWindowLayer {
+  blur: boolean;
+}
+
+@customElement('dees-windowlayer')
+export class UptimelinkWindowLayer extends DeesElement {
+  // STATIC
+  public static demo = () => html`<uptimelink-windowlayer></uptimelink-windowlayer>`;
+
+  public static async createAndShow(optionsArg?: IOptions_UptimeLinkWindowLayer) {
+    const domtoolsInstance = domtools.DomTools.getGlobalDomToolsSync();
+    const windowLayer = new UptimelinkWindowLayer();
+    windowLayer.options = {
+      ...windowLayer.options,
+      ...optionsArg,
+    }
+    document.body.append(windowLayer);
+    await domtoolsInstance.convenience.smartdelay.delayFor(0);
+    windowLayer.show();
+    return windowLayer;
+  }
+
+  @state()
+  public options: IOptions_UptimeLinkWindowLayer = {
+    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;
+        }
+        
+        .visible {
+          background: rgba(0, 0, 0, 0.2);
+          backdrop-filter: brightness(0.9) ${this.options.blur ? 'blur(2px)' : ''};
+        }
+      </style>
+      <div @click=${this.dispatchClicked} class="windowOverlay ${this.visible ? 'visible' : null}">
+        <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();
+  }
+}