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'; import * as domtools from '@designestate/dees-domtools';
@customElement('test-demoelement') @customElement('test-demoelement')
export class TestDemoelement extends LitElement { export class TestDemoelement extends DeesElement {
public static demo = () => html`<test-demoelement></test-demoelement>`; public static demo = () => html`<test-demoelement></test-demoelement>`;
public render() { public render() {
return html` return html`
<style> <style>
.maincontainer { .maincontainer, .themeindicator {
display: block; display: block;
background: #fff;
padding: 10px; padding: 10px;
border-radius: 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(` ${domtools.breakpoints.cssForPhablet(`
.maincontainer { .maincontainer, .themeindicator {
background: #000; border-radius: 50px;
} }
`)} `)}
</style> </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-properties>
<wcc-frame id="wccFrame" viewport=${this.selectedViewport}> <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(); 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); // console.log(this.selectedItem);
const anonItem: any = this.selectedItem; const anonItem: any = this.selectedItem;
if (!anonItem.demo) { if (!anonItem.demo) {
@ -139,7 +144,7 @@ export class WccDashboard extends LitElement {
this.selectedItem = this.elements[routeInfo.params.itemName]; this.selectedItem = this.elements[routeInfo.params.itemName];
} else if (routeInfo.params.itemType === 'page') { } else if (routeInfo.params.itemType === 'page') {
this.selectedType = '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(); const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
domtoolsInstance.setVirtualViewport(routeInfo.params.viewport as TViewport); domtoolsInstance.setVirtualViewport(routeInfo.params.viewport as TViewport);
@ -173,8 +178,7 @@ export class WccDashboard extends LitElement {
this.domtools.router.pushUrl( this.domtools.router.pushUrl(
`/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${ `/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${
this.selectedTheme this.selectedTheme
}`, }`
0
); );
} }
} }

View File

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

View File

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