81 lines
2.2 KiB
TypeScript
81 lines
2.2 KiB
TypeScript
|
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
||
|
|
|
||
|
|
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: string = 'desktop';
|
||
|
|
|
||
|
|
@property()
|
||
|
|
public pages: TemplateResult[] = [];
|
||
|
|
|
||
|
|
@property()
|
||
|
|
public elements: LitElement[] = [];
|
||
|
|
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
}
|
||
|
|
|
||
|
|
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 .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) {
|
||
|
|
return html`${anonItem.demo}`;
|
||
|
|
} else {
|
||
|
|
alert(`component does not expose a demo property.`);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
|
||
|
|
}
|
||
|
|
})()}
|
||
|
|
</wcc-frame>
|
||
|
|
${this.selectedViewport}
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
public updateSlot() {
|
||
|
|
console.log('updateSlot');
|
||
|
|
const oldSelectedItem = this.selectedItem;
|
||
|
|
this.selectedItem = null;
|
||
|
|
setTimeout(() => {
|
||
|
|
this.selectedItem = oldSelectedItem;
|
||
|
|
}, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|