import { LitElement, property, html, customElement, TemplateResult } from 'lit-element'; import * as plugins from '../wcctools.plugins'; import { WccDefaultElement } from './wcc-defaultelement'; // wcc tools import './wcc-frame'; import './wcc-sidebar'; import './wcc-properties'; import { TTheme } from './wcc-properties'; import { TElementType } from './wcc-sidebar'; import { TViewport } from '@designestate/dees-domtools/dist_ts/domtools.breakpoints'; @customElement('wcc-dashboard') export class WccDashboard extends LitElement { public domtools: plugins.deesDomtools.DomTools; @property() public selectedType: TElementType; @property() public selectedItem: TemplateResult | LitElement; @property() public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop'; @property() public selectedTheme: TTheme = 'dark'; @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; console.log('got elements:'); console.log(this.elements); } if (pagesArg) { this.pages = pagesArg; } } public render(): TemplateResult { return html` { this.selectedItem = eventArg.detail; }} @selectedType=${(eventArg) => { this.selectedType = eventArg.detail; }} > { this.selectedViewport = eventArg.detail; this.performUpdate(); }} @selectedTheme=${(eventArg) => { this.selectedTheme = eventArg.detail; }} > ${(() => { 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()}`; } })()} `; } public setWarning(warningTextArg: string) { if (this.warning !== warningTextArg) { console.log(warningTextArg); this.warning = warningTextArg; setTimeout(() => { super.performUpdate(); }, 0); } } public async firstUpdated() { this.domtools = await plugins.deesDomtools.DomTools.setupDomTools(); this.domtools.router.on('/:itemType/:itemName/:viewport/:theme', async (routeInfo) => { if (routeInfo.params.itemType === 'element') { this.selectedType = 'element'; this.selectedItem = this.elements[routeInfo.params.itemName]; } else if (routeInfo.params.itemType === 'page') { this.selectedType = 'page'; this.selectedItem = this.pages[routeInfo.params.pageName]; } const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup(); domtoolsInstance.setVirtualViewport(routeInfo.params.viewport as TViewport); this.selectedViewport = routeInfo.params.viewport as TViewport; this.selectedTheme = routeInfo.params.theme as TTheme; domtoolsInstance.themeManager.goBrightBoolean = this.selectedTheme === 'bright'; }); } private updating = false; public async updated() { if (this.updating) { return; } this.domtools = await plugins.deesDomtools.DomTools.setupDomTools(); await this.domtools.router._handleRouteState(); this.updating = true; const storeElement = this.selectedItem; setTimeout(async () => { this.selectedItem = null; setTimeout(async () => { this.selectedItem = storeElement; setTimeout(() => { this.updating = false; }, 0); }); }, 0); } public buildUrl() { this.domtools.router.pushUrl( `/${this.selectedType}/${(this.selectedItem as any).name}/${this.selectedViewport}/${ this.selectedTheme }`, 0 ); } }