104 lines
3.1 KiB
TypeScript
104 lines
3.1 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;
|
|
|
|
@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} @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;
|
|
this.updateSlot();
|
|
}
|
|
})()}
|
|
</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);
|
|
}
|
|
}
|
|
}
|