import { DeesElement, property, html, customElement, type TemplateResult, cssManager } 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` `; @property({ type: Boolean }) isOnTop = false; @property() public projectSlug: string; @property() public isFocused = false; @property() public isElevated = false; @property() public showExpanded: boolean = false; constructor() { super(); this.setupEventing(); } public static styles = [ cssManager.defaultStyles, ] public render(): TemplateResult { return html`
All systems are up!
${this.showExpanded ? html`
last 24 hours:
${(() => { let counter = 0; const returnArray = []; while(counter < 24) { returnArray.push(html`
`) counter++; }; return returnArray; })()}
View full Statuspage ...
` : null}
`; } 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.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; this.windowLayer = await DeesWindowLayer.createAndShow({ blur: true, }); await domtools.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 () => { if (!this.isOnTop) { return; } this.windowLayer.destroy(); domtools.convenience.smartdelay.delayFor(200).then(() => { 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; } } }