dees-wcctools/ts_web/elements/wcc-dashboard.ts

185 lines
5.6 KiB
TypeScript
Raw Normal View History

2020-05-11 00:36:58 +00:00
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
2020-06-01 15:07:13 +00:00
import * as plugins from '../wcctools.plugins';
2020-05-27 22:13:50 +00:00
2020-05-11 00:36:58 +00:00
import { WccDefaultElement } from './wcc-defaultelement';
// wcc tools
import './wcc-frame';
import './wcc-sidebar';
import './wcc-properties';
2020-11-26 02:28:17 +00:00
import { TTheme } from './wcc-properties';
import { TElementType } from './wcc-sidebar';
import { TViewport } from '@designestate/dees-domtools/dist_ts/domtools.breakpoints';
2020-05-11 00:36:58 +00:00
@customElement('wcc-dashboard')
export class WccDashboard extends LitElement {
2020-07-15 19:55:35 +00:00
public domtools: plugins.deesDomtools.DomTools;
2020-11-26 02:28:17 +00:00
@property()
public selectedType: TElementType;
2020-05-11 00:36:58 +00:00
@property()
2020-11-27 15:59:18 +00:00
public selectedItemName: string;
@property()
public selectedItem: (() => TemplateResult) | LitElement;
2020-05-11 00:36:58 +00:00
@property()
2020-06-01 15:07:13 +00:00
public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop';
2020-05-11 00:36:58 +00:00
2020-11-26 02:28:17 +00:00
@property()
public selectedTheme: TTheme = 'dark';
2020-05-11 00:36:58 +00:00
@property()
2020-11-27 15:59:18 +00:00
public pages: { [key: string]: () => TemplateResult } = {};
2020-05-11 00:36:58 +00:00
@property()
2020-05-23 14:00:49 +00:00
public elements: { [key: string]: LitElement } = {};
2020-05-11 00:36:58 +00:00
2020-05-24 19:37:43 +00:00
@property()
public warning: string = null;
2020-11-26 02:28:17 +00:00
constructor(
elementsArg?: { [key: string]: LitElement },
2020-11-27 15:59:18 +00:00
pagesArg?: { [key: string]: () => TemplateResult }
2020-11-26 02:28:17 +00:00
) {
2020-05-11 00:36:58 +00:00
super();
2020-05-23 14:00:49 +00:00
if (elementsArg) {
this.elements = elementsArg;
2020-11-26 02:28:17 +00:00
console.log('got elements:');
console.log(this.elements);
2020-05-23 14:00:49 +00:00
}
if (pagesArg) {
this.pages = pagesArg;
}
2020-05-11 00:36:58 +00:00
}
public render(): TemplateResult {
return html`
<style>
:host {
font-family: 'Roboto', sans-serif;
background: #fcfcfc;
display: block;
box-sizing: border-box;
}
:host([hidden]) {
display: none;
}
</style>
2020-11-26 02:28:17 +00:00
<wcc-sidebar
.dashboardRef=${this}
.selectedItem=${this.selectedItem}
@selectedType=${(eventArg) => {
this.selectedType = eventArg.detail;
}}
2020-11-27 15:59:18 +00:00
@selectedItemName=${(eventArg) => {
this.selectedItemName = eventArg.detail;
}}
@selectedItem=${(eventArg) => {
this.selectedItem = eventArg.detail;
}}
2020-11-26 02:28:17 +00:00
></wcc-sidebar>
<wcc-properties
.dashboardRef=${this}
.warning="${this.warning}"
.selectedItem=${this.selectedItem}
2020-11-26 02:50:50 +00:00
.selectedViewport=${this.selectedViewport}
.selectedTheme=${this.selectedTheme}
2020-11-26 02:28:17 +00:00
@selectedViewport=${(eventArg) => {
this.selectedViewport = eventArg.detail;
this.performUpdate();
}}
@selectedTheme=${(eventArg) => {
this.selectedTheme = eventArg.detail;
}}
></wcc-properties>
2020-05-11 00:36:58 +00:00
<wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
${(() => {
2020-11-27 16:40:38 +00:00
if (this.selectedType === 'page' && this.selectedItem) {
if (typeof this.selectedItem === 'function') {
return this.selectedItem();
} else {
console.error('The selected item looks strange:')
console.log(this.selectedItem);
}
} else if (this.selectedType === 'element' && this.selectedItem) {
2020-11-26 02:28:17 +00:00
// console.log(this.selectedItem);
2020-05-11 00:36:58 +00:00
const anonItem: any = this.selectedItem;
2020-05-24 19:37:43 +00:00
if (!anonItem.demo) {
this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
return;
2020-05-11 00:36:58 +00:00
}
2020-05-24 19:37:43 +00:00
if (!(typeof anonItem.demo === 'function')) {
2020-11-26 02:28:17 +00:00
this.setWarning(
`component ${anonItem.name} has demo property, but it is not of type function`
);
2020-05-24 19:37:43 +00:00
return;
}
this.setWarning(null);
return html`${anonItem.demo()}`;
2020-05-11 00:36:58 +00:00
}
})()}
</wcc-frame>
`;
}
2020-05-24 19:37:43 +00:00
public setWarning(warningTextArg: string) {
if (this.warning !== warningTextArg) {
console.log(warningTextArg);
this.warning = warningTextArg;
setTimeout(() => {
super.performUpdate();
}, 0);
}
}
2020-07-15 21:00:47 +00:00
public async firstUpdated() {
this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
2020-11-26 02:28:17 +00:00
this.domtools.router.on('/:itemType/:itemName/:viewport/:theme', async (routeInfo) => {
2020-11-27 16:49:57 +00:00
this.selectedType = routeInfo.params.itemType as TElementType;
this.selectedItemName = routeInfo.params.itemName;
this.selectedViewport = routeInfo.params.viewport as TViewport;
this.selectedTheme = routeInfo.params.theme as TTheme;
2020-11-26 02:28:17 +00:00
if (routeInfo.params.itemType === 'element') {
this.selectedItem = this.elements[routeInfo.params.itemName];
} else if (routeInfo.params.itemType === 'page') {
2020-11-27 16:40:38 +00:00
this.selectedItem = this.pages[routeInfo.params.itemName];
2020-11-26 02:28:17 +00:00
}
const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
domtoolsInstance.setVirtualViewport(routeInfo.params.viewport as TViewport);
2020-11-26 02:50:50 +00:00
domtoolsInstance.themeManager.goBrightBoolean = this.selectedTheme === 'bright';
2020-07-15 21:00:47 +00:00
});
2020-11-26 02:28:17 +00:00
}
2020-07-15 21:00:47 +00:00
2020-11-26 02:28:17 +00:00
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(
2020-11-27 15:59:18 +00:00
`/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${
2020-11-26 02:28:17 +00:00
this.selectedTheme
2020-11-27 16:40:38 +00:00
}`
2020-11-26 02:28:17 +00:00
);
2020-07-15 21:00:47 +00:00
}
2020-05-11 00:36:58 +00:00
}