design.estate/dees-wcctools
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(core): update

Browse Source
This commit is contained in:
Philipp Kunz
2020-11-26 02:28:17 +00:00
parent ebc2c82b7f
commit 40f54c574d
9 changed files with 2473 additions and 628 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
ts_web/elements/wcc-dashboard.ts
View File

@ -8,17 +8,26 @@ import { WccDefaultElement } from './wcc-defaultelement';
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 } = {};
@ -28,10 +37,15 @@ export class WccDashboard extends LitElement {
@property()
public warning: string = null;
constructor(elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: TemplateResult }) {
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) {
@ -53,53 +67,53 @@ export class WccDashboard extends LitElement {
display: none;
}
</style>
<wcc-sidebar .dashboardRef=${this} .selectedItem=${this.selectedItem} @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-sidebar
.dashboardRef=${this}
.selectedItem=${this.selectedItem}
@selectedItem=${(eventArg) => {
this.selectedItem = eventArg.detail;
}}
@selectedType=${(eventArg) => {
this.selectedType = eventArg.detail;
}}
></wcc-sidebar>
<wcc-properties
.dashboardRef=${this}
.warning="${this.warning}"
.selectedItem=${this.selectedItem}
@selectedViewport=${(eventArg) => {
this.selectedViewport = eventArg.detail;
this.performUpdate();
}}
@selectedTheme=${(eventArg) => {
this.selectedTheme = eventArg.detail;
}}
></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);
// 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`);
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.updateSlot();
}
})()}
</wcc-frame>
`;
}
private currentlyUpdating: boolean = false;
public async updateSlot() {
if (this.currentlyUpdating) {
return;
}
this.currentlyUpdating = true;
!this.selectedItem ? this.selectedItem = WccDefaultElement as any : null;
const localSelectedItem = this.selectedItem;
this.selectedItem = null;
console.log('updateSlot');
this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
this.domtools.setVirtualViewport(this.selectedViewport);
// await super.performUpdate();
this.selectedItem = localSelectedItem;
await super.performUpdate();
this.currentlyUpdating = false;
}
public setWarning(warningTextArg: string) {
if (this.warning !== warningTextArg) {
console.log(warningTextArg);
@ -112,13 +126,49 @@ export class WccDashboard extends LitElement {
public async firstUpdated() {
this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
this.domtools.router.on('/elements/:elementName', async routeInfo => {
this.selectedItem = this.elements[routeInfo.params.elementName];
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;
});
}
this.domtools.router.on('/pages/:pageName', async routeInfo => {
this.selectedItem = this.pages[routeInfo.params.pageName];
});
this.domtools.router._handleRouteState();
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
);
}
}