fix(core): update

This commit is contained in:
Philipp Kunz 2020-11-27 16:40:38 +00:00
parent 64d6379cd2
commit 46e0b9f9db
4 changed files with 35 additions and 16 deletions

View File

@ -1,27 +1,38 @@
import { LitElement, customElement, TemplateResult, html } from 'lit-element';
import { DeesElement, customElement, TemplateResult, html } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
@customElement('test-demoelement')
export class TestDemoelement extends LitElement {
export class TestDemoelement extends DeesElement {
public static demo = () => html`<test-demoelement></test-demoelement>`;
public render() {
return html`
<style>
.maincontainer {
.maincontainer, .themeindicator {
display: block;
background: #fff;
padding: 10px;
border-radius: 10px;
margin-bottom: 20px;
}
.maincontainer {
color: #fff;
background: #000;
}
.themeindicator {
color: ${this.goBright ? '#000' : '#fff'};
background: ${this.goBright ? '#fff' : '#000'};
}
${domtools.breakpoints.cssForPhablet(`
.maincontainer {
background: #000;
.maincontainer, .themeindicator {
border-radius: 50px;
}
`)}
</style>
<div class="maincontainer">This is a demo element</div>
<div class="maincontainer"><slot>This is a demo element</slot></div>
<div class="themeindicator">
You have selected the ${this.goBright ? 'bright' : 'dark'} theme;
</div>
`;
}
}

View File

@ -98,9 +98,14 @@ export class WccDashboard extends LitElement {
></wcc-properties>
<wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
${(() => {
if (this.selectedType === 'page') {
if (this.selectedType === 'page' && this.selectedItem) {
if (typeof this.selectedItem === 'function') {
return this.selectedItem();
} else if (this.selectedItem) {
} else {
console.error('The selected item looks strange:')
console.log(this.selectedItem);
}
} else if (this.selectedType === 'element' && this.selectedItem) {
// console.log(this.selectedItem);
const anonItem: any = this.selectedItem;
if (!anonItem.demo) {
@ -139,7 +144,7 @@ export class WccDashboard extends LitElement {
this.selectedItem = this.elements[routeInfo.params.itemName];
} else if (routeInfo.params.itemType === 'page') {
this.selectedType = 'page';
this.selectedItem = this.pages[routeInfo.params.pageName];
this.selectedItem = this.pages[routeInfo.params.itemName];
}
const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
domtoolsInstance.setVirtualViewport(routeInfo.params.viewport as TViewport);
@ -173,8 +178,7 @@ export class WccDashboard extends LitElement {
this.domtools.router.pushUrl(
`/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${
this.selectedTheme
}`,
0
}`
);
}
}

View File

@ -130,6 +130,9 @@ export class WccProperties extends LitElement {
${(() => {
if (this.selectedItem && !(this.selectedItem instanceof TemplateResult)) {
const anonItem: any = this.selectedItem;
if (!anonItem._classProperties) {
return `You have selected a page!`;
}
const classProperties: Map<string, any> = anonItem._classProperties;
const returnArray: TemplateResult[] = [];
for (const key of classProperties.keys()) {

View File

@ -10,7 +10,7 @@ export class WccSidebar extends LitElement {
public websites: string[] = [];
@property({ attribute: false })
public selectedItem: LitElement | () => TemplateResult;
public selectedItem: LitElement | (() => TemplateResult);
@property({ attribute: false })
public selectedType: TElementType;
@ -92,10 +92,9 @@ export class WccSidebar extends LitElement {
</style>
<div class="heading">
lele-catalog
wcc-tools
</div>
<div class="subheading">
Lossless GmbH
</div>
<div class="menu">
<h3>Live Websites</h3>
@ -146,6 +145,8 @@ export class WccSidebar extends LitElement {
public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: (() => TemplateResult) | LitElement) {
console.log('selected item');
console.log(itemNameArg);
console.log(itemArg);
this.selectedItem = itemArg;
this.selectedType = typeArg;
this.dispatchEvent(