dees-wcctools/ts_web/elements/wcc-dashboard.ts
2020-05-27 22:13:50 +00:00

106 lines
3.2 KiB
TypeScript

import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
import * as deesDomtools from '@designestate/dees-domtools';
import { WccDefaultElement } from './wcc-defaultelement';
// wcc tools
import './wcc-frame';
import './wcc-sidebar';
import './wcc-properties';
@customElement('wcc-dashboard')
export class WccDashboard extends LitElement {
@property()
public selectedItem: TemplateResult | LitElement = WccDefaultElement as any;
@property()
public selectedInstance;
@property()
public selectedViewport: deesDomtools.breakpoints.TViewport = 'desktop';
@property()
public pages: { [key: string]: TemplateResult } = {};
@property()
public elements: { [key: string]: LitElement } = {};
@property()
public warning: string = null;
constructor(elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: TemplateResult }) {
super();
if (elementsArg) {
this.elements = elementsArg;
}
if (pagesArg) {
this.pages = pagesArg;
}
}
public render(): TemplateResult {
return html`
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
:host {
font-family: 'Roboto', sans-serif;
background: #fcfcfc;
display: block;
box-sizing: border-box;
}
:host([hidden]) {
display: none;
}
</style>
<wcc-sidebar .pages=${this.pages} .elements=${this.elements} @selectedItem=${eventArg => {
this.selectedItem = eventArg.detail;
}}></wcc-sidebar>
<wcc-properties .warning="${this.warning}" .selectedItem=${this.selectedItem} .selectedInstance=${this.selectedInstance} @selectedViewport=${eventArg => {this.selectedViewport = eventArg.detail; this.updateSlot();}}></wcc-properties>
<wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
${(() => {
if (this.selectedItem instanceof TemplateResult) {
return this.selectedItem;
} else if (this.selectedItem) {
console.log(this.selectedItem);
const anonItem: any = this.selectedItem;
if (!anonItem.demo) {
this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
return;
}
if (!(typeof anonItem.demo === 'function')) {
this.setWarning(`component ${anonItem.name} has demo property, but it is not of type function`);
return;
}
this.setWarning(null);
return html`${anonItem.demo()}`;
} else {
this.selectedItem = WccDefaultElement as any;
}
})()}
</wcc-frame>
${this.selectedViewport}
`;
}
public async updateSlot() {
console.log('updateSlot');
const oldSelectedItem = this.selectedItem;
this.selectedItem = null;
const domtools = await deesDomtools.DomTools.setupDomTools();
domtools.setVirtualViewport(this.selectedViewport);
this.selectedItem = oldSelectedItem;
}
public setWarning(warningTextArg: string) {
if (this.warning !== warningTextArg) {
console.log(warningTextArg);
this.warning = warningTextArg;
setTimeout(() => {
super.performUpdate();
}, 0);
}
}
}