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` `; @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}
All systems are up!
${this.showExpanded ? html`
last 26 hours:
${(() => { let counter = 0; const returnArray = []; while(counter < 26) { returnArray.push(html`
`) counter++; }; return returnArray; })()}
View full Statuspage ...
` : null}
`; } 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; } } }