webwidget/ts_web/elements/uptimelink-webwidget.ts

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

import { DeesWindowLayer } from '@design.estate/dees-catalog';

declare global {
  interface HTMLElementTagNameMap {
    'uptimelink-webwidget': UptimelinkWebwidget;
  }
}

@customElement('uptimelink-webwidget')
export class UptimelinkWebwidget extends DeesElement {
  public static demo = () => html`
    <uptimelink-webwidget projectSlug="uptime.link"></uptimelink-webwidget>
  `;

  @property({
    type: Boolean,
    reflect: true,
  })
  isOnTop = false;

  @property()
  public projectSlug: string;

  @property()
  public isFocused = false;

  @property()
  public isElevated = false;

  @property({
    type: Boolean,
    reflect: true,
  })
  public showExpanded: boolean = false;

  public parentWebwidget: UptimelinkWebwidget;

  constructor() {
    super();
    this.setupEventing();
  }

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        position: relative;
        display: block;
        height: 30px;
      }
      .mainbox {
        position: relative;
        line-height: 1em;
        margin: auto;
        font-family: Roboto;
        font-weight: 540;
        font-size: 12px;
        box-sizing: border-box;
        width: 150px;
        border-radius: 15px;
        height: 30px;
        background: ${cssManager.bdTheme('#ffffff', '#000000')};
        box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', '')};
        border: 1px solid ${cssManager.bdTheme('#ffffff', '#333333')};
        padding: 4px;
        color: ${cssManager.bdTheme('#333', '#CCC')};
        cursor: pointer;
        transition: all 0.2s, background 0.1s;
        overflow: hidden;
        will-change: transform;
        opacity: 1;
      }
      .mainbox.hidden {
        opacity: 0;
      }

      .firstLine {
        display: grid;
        grid-template-columns: 26px auto;
      }

      .mainbox.focused {
        width: 182px;
        height: 117px;
        transform: translateX(-16px);
        background: ${cssManager.bdTheme('#ffffff', '#222222')} !important; 
        box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', '')} !important;
      }

      .statusindicator {
        transform: translate(4px, 4px);
        height: 12px;
        width: 12px;
        background: #66bb6a;
        border-radius: 10px;
      }
      .statustext {
        line-height: 20px;
      }

      .expanded {
        opacity: 0;
        transition: opacity 0.1s;
      }

      .miniHeading {
        position: absolute;
        width: 190px;
        top: 25px;
        left: 5px;
        margin-top: 10px;
        font-size: 12px;
      }

      .miniOverview24h {
        position: absolute;
        top: 55px;
        left: 5px;
        background: ${cssManager.bdTheme('rgba(0,0,0,0.07)', 'rgba(255,255,255,0.07)')};
        border-radius: 3px;
        width: 172px;
        height: 30px;
        display: grid;
        padding: 3px 3px;
        grid-template-columns: repeat(30, 4px);
        grid-column-gap: 3px;
      }

      .miniOverview24h .statusBar {
        background: ${cssManager.bdTheme('rgba(0,0,0,0.15)', 'rgba(255,255,255,0.15)')};
        border-radius: 10px;
      }

      .miniOverview24h .statusBar.ok {
        background: #66bb6a;
      }

      .viewStatuspage {
        position: absolute;
        width: 172px;
        top: 80px;
        left: 5px;
        text-align: center;
        background: ${cssManager.bdTheme('rgba(0,0,0,0.07)', 'rgba(255,255,255,0.07)')};
        border-radius: 3px 3px 10px 10px;
        padding: 5px;
        margin-top: 10px;
        transition: background 0.1s;
      }

      .viewStatuspage:hover {
        background: ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(255,255,255,0.1)')};
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <style>
      :host {
        z-index: ${this.isElevated || this.isOnTop ? '1000' : 'auto'};
      }
      </style>
      <div class="mainbox ${this.isFocused ? 'focused' : null}">
        <div class="firstLine">
          <div class="statusindicator"></div>
          <div class="statustext">All systems are up!</div>
        </div>
        ${this.showExpanded
          ? html`
              <div class="expanded">
                <div class="miniHeading">last 24 hours:</div>
                <div class="miniOverview24h">
                  ${(() => {
                    let counter = 0;
                    const returnArray = [];
                    while (counter < 24) {
                      returnArray.push(html`<div class="statusBar ok"></div>`);
                      counter++;
                    }
                    return returnArray;
                  })()}
                </div>
                <div class="viewStatuspage">View full Statuspage ...</div>
              </div>
            `
          : null}
      </div>
    `;
  }

  public windowLayer: DeesWindowLayer;
  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.parentWebwidget = this;
        uptimelinkWidget.isOnTop = true;
        uptimelinkWidget.style.position = 'fixed';
        uptimelinkWidget.style.top = `${rect.top}px`;
        uptimelinkWidget.style.left = `${rect.left}px`;
        document.body.append(uptimelinkWidget);
        mainbox.classList.add('hidden');
        return;
      }
      this.isElevated = true;
      this.isFocused = true;
      this.windowLayer = await DeesWindowLayer.createAndShow({
        blur: false,
      });
      await domtools.convenience.smartdelay.delayFor(200);
      if (!this.isFocused) {
        return;
      }
      this.showExpanded = true;
      await this.performUpdate();
      await domtools.convenience.smartdelay.delayFor(0);
      const expandedDiv = this.shadowRoot.querySelector('.expanded') as HTMLElement;
      expandedDiv.style.opacity = '1';
    };
    mainbox.onmouseleave = async () => {
      if (!this.isOnTop) {
        return;
      }
      this.windowLayer.destroy();
      this.parentWebwidget.shadowRoot.querySelector('.mainbox').classList.remove('hidden');
      domtools.convenience.smartdelay.delayFor(200).then(async () => {
        if (!this.isFocused) {
          this.isElevated = false;
          this.remove();
        }
      });
      if (!this.showExpanded) {
        this.isFocused = false;
        return;
      }
      this.showExpanded = false;
      await domtools.convenience.smartdelay.delayFor(50);
      this.isFocused = false;
    };
  }
}