webwidget/ts_web/elements/uptimelink-webwidget.ts

import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';

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()
  public projectSlug: string;

  @property()
  public isFocused = false;

  @property()
  public isElevated = false;

  @property()
  public showExpanded: boolean = false;

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

  public render(): TemplateResult {
    return html`
      ${domtools.elementBasic.styles}
      <style>
        :host {
          position: relative;
          display: block;
          height: 30px;
          z-index: ${this.isElevated ? '10' : 'auto'} ;
        }
        .mainbox {
          position: relative;
          line-height: 1em;
          margin: auto;
          font-family: Roboto;
          font-weight: 400;
          font-size: 13px;
          box-sizing: border-box;
          width: 150px;
          border-radius: 15px;
          height: 30px;
          background: ${this.goBright ? '#fff' : '#222' };
          box-shadow: ${this.goBright ? '0px 0px 5px rgba(0,0,0,0.1)' : ''};
          padding: 5px;
          color: ${this.goBright ? '#333' : '#CCC' };
          cursor: pointer;
          transition: all 0.2s;
          overflow: hidden;
        }

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

        .mainbox.focused {
          width: 200px;
          height: 118px;
        }

        .statusindicator {
          height: 20px;
          width: 20px;
          background:  #66BB6A;
          border-radius: 10px;
        }
        .statustext {
          padding-top: 3px;
        }

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

        .miniHeading {
          position: absolute;
          width: 190px;
          top: 25px;
          left: calc(50% - 95px);

          margin-top: 10px;
          font-size: 12px;
        }

        .miniOverview24h {
          position: absolute;
          top: 55px;
          left: calc(50% - 95px);
          background: ${this.goBright ? 'rgba(0,0,0,0.07)' : 'rgba(255,255,255,0.07)'};
          border-radius: 3px;
          width: 190px;
          height: 30px;
          display: grid;
          padding: 3px 3px;
          grid-template-columns: repeat(30, 4px);
          grid-column-gap: 3px;
        }

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

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

        .viewStatuspage {
          position: absolute;
          width: 190px;
          top: 80px;
          left: calc(50% - 95px);
          text-align: center;
          background: ${this.goBright ? '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: ${this.goBright ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.1)'};
        }
      </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 26 hours:
            </div>
            <div class="miniOverview24h">
              ${(() => {
                let counter = 0;
                const returnArray = [];
                while(counter < 26) {
                  returnArray.push(html`<div class="statusBar ok"></div>`)
                  counter++;
                };
                return returnArray;
              })()}
            </div>
            <div class="viewStatuspage">View full Statuspage ...</div>
          </div>
        ` : null}
      </div>
    `;
  }

  private async setupEventing() {
    await this.updateComplete;
    const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
    mainbox.onmouseenter = async () => {
      this.isElevated = true;
      this.isFocused = true;
      await domtools.DomTools.getGlobalDomToolsSync().convenience.smartdelay.delayFor(200);
      if (!this.isFocused) {
        return;
      }
      this.showExpanded = true;
      await this.performUpdate();
      await (await this.domtoolsPromise).convenience.smartdelay.delayFor(50);
      const expandedDiv = this.shadowRoot.querySelector('.expanded') as HTMLElement;
      expandedDiv.style.opacity = '1';
    };
    mainbox.onmouseleave = async () => {
      (await this.domtoolsPromise).convenience.smartdelay.delayFor(200).then(() => {
        if (!this.isFocused) {
          this.isElevated = false;
        }
      });
      if (!this.showExpanded) {
        this.isFocused = false;
        return;
      }
      this.showExpanded = false;
      await domtools.DomTools.getGlobalDomToolsSync().convenience.smartdelay.delayFor(50);
      this.isFocused = false;
    }
  }
}