fix(core): update

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

View File

@ -18,9 +18,7 @@
}
</style>
<script src="../ts_web/index.ts"></script>
<script src="../test/index.ts"></script>
</head>
<body>
<wcc-dashboard></wcc-dashboard>
</body>
<body></body>
</html>

2811
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -13,20 +13,20 @@
"author": "Lossless GmbH",
"license": "UNLICENSED",
"dependencies": {
"@designestate/dees-domtools": "^1.0.38",
"@designestate/dees-domtools": "^1.0.74",
"@gitzone/tsrun": "^1.2.12",
"@pushrocks/smartdelay": "^2.0.10",
"@pushrocks/smartexpress": "^3.0.73",
"lit-element": "^2.0.0-rc.5",
"lit-html": "^1.0.0-rc.2",
"typescript": "^3.9.6"
"@pushrocks/smartexpress": "^3.0.97",
"lit-element": "^2.4.0",
"lit-html": "^1.3.0",
"typescript": "^4.1.2"
},
"devDependencies": {
"@gitzone/tsbuild": "^2.1.24",
"@gitzone/tsbundle": "^1.0.72",
"@gitzone/tsbuild": "^2.1.25",
"@gitzone/tsbundle": "^1.0.78",
"@gitzone/tswatch": "^1.0.50",
"@pushrocks/projectinfo": "^4.0.5",
"tslint": "^6.1.2",
"tslint": "^6.1.3",
"tslint-config-prettier": "^1.17.0"
},
"files": [

1
test/elements/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './test-demoelement';

View File

@ -0,0 +1,27 @@
import { LitElement, customElement, TemplateResult, html } from 'lit-element';
import * as domtools from '@designestate/dees-domtools';
@customElement('test-demoelement')
export class TestDemoelement extends LitElement {
public static demo = () => html`<test-demoelement></test-demoelement>`;
public render() {
return html`
<style>
.maincontainer {
display: block;
background: #fff;
padding: 10px;
border-radius: 10px;
}
${domtools.breakpoints.cssForPhablet(`
.maincontainer {
background: #000;
}
`)}
</style>
<div class="maincontainer">This is a demo element</div>
`;
}
}

3
test/index.ts Normal file
View File

@ -0,0 +1,3 @@
import * as wcctools from '../ts_web/index';
import * as elements from './elements';
wcctools.setupWccTools(elements as any, {});

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 => {
<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>
}}
@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('/pages/:pageName', async routeInfo => {
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._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
);
}
}

View File

@ -1,20 +1,28 @@
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
import { WccDashboard } from './wcc-dashboard';
export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
export type TTheme = 'bright' | 'dark';
let environment: TEnvironment = 'native';
export const setEnvironment = envArg => {
export const setEnvironment = (envArg) => {
environment = envArg;
};
@customElement('wcc-properties')
export class WccProperties extends LitElement {
@property()
dashboardRef: WccDashboard;
@property()
public selectedItem: TemplateResult | LitElement;
@property()
public selectedViewport = 'native';
public selectedViewport: TEnvironment = 'native';
@property()
public selectedTheme: TTheme = 'dark';
@property()
public warning: string = null;
@ -37,7 +45,7 @@ export class WccProperties extends LitElement {
}
.grid {
display: grid;
grid-template-columns: auto 300px 70px;
grid-template-columns: auto 150px 300px 70px;
}
.properties {
border-right: 1px solid #999;
@ -52,30 +60,35 @@ export class WccProperties extends LitElement {
background: #444;
border: 1px solid #000;
}
.viewports {
.viewportSelector,
.themeSelector {
border-right: 1px solid #999;
}
.viewport-selectors {
.selectorButtons2 {
display: grid;
grid-template-columns: 50% 50%;
}
.selectorButtons4 {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
.viewport {
.button {
padding: 10px;
text-align: center;
border: 1px solid #000;
transition: all 0.2s;
}
.viewport:hover {
.button:hover {
cursor: pointer;
color: #333;
background: #fff;
}
.viewport.selected {
background: #455A64;
.button.selected {
background: #455a64;
}
.viewport.selected:hover {
.button.selected:hover {
cursor: pointer;
color: #ffffff;
background: #455a64;
@ -121,22 +134,39 @@ export class WccProperties extends LitElement {
const returnArray: TemplateResult[] = [];
for (const key of classProperties.keys()) {
returnArray.push(
html`
<div class="property">
${key} / ${classProperties.get(key).type.name}
</div>
`
html` <div class="property">${key} / ${classProperties.get(key).type.name}</div> `
);
}
return returnArray;
}
})()}
</div>
<div class="viewports">
<div class="panelheading">Viewports</div>
<div class="viewport-selectors">
<div class="themeSelector">
<div class="panelheading">Theme</div>
<div class="selectorButtons2">
<div
class="viewport ${this.selectedViewport === 'phone' ? 'selected' : null}"
class="button ${this.selectedTheme === 'dark' ? 'selected' : null}"
@click=${() => {
this.selectTheme('dark');
}}
>
Dark<br /><i class="material-icons">nights_stay</i>
</div>
<div
class="button ${this.selectedTheme === 'bright' ? 'selected' : null}"
@click=${() => {
this.selectTheme('bright');
}}
>
Bright<br /><i class="material-icons">flare</i>
</div>
</div>
</div>
<div class="viewportSelector">
<div class="panelheading">Viewport</div>
<div class="selectorButtons4">
<div
class="button ${this.selectedViewport === 'phone' ? 'selected' : null}"
@click=${() => {
this.selectViewport('phone');
}}
@ -144,7 +174,7 @@ export class WccProperties extends LitElement {
Phone<br /><i class="material-icons">smartphone</i>
</div>
<div
class="viewport ${this.selectedViewport === 'phablet' ? 'selected' : null}"
class="button ${this.selectedViewport === 'phablet' ? 'selected' : null}"
@click=${() => {
this.selectViewport('phablet');
}}
@ -152,7 +182,7 @@ export class WccProperties extends LitElement {
Phablet<br /><i class="material-icons">smartphone</i>
</div>
<div
class="viewport ${this.selectedViewport === 'tablet' ? 'selected' : null}"
class="button ${this.selectedViewport === 'tablet' ? 'selected' : null}"
@click=${() => {
this.selectViewport('tablet');
}}
@ -160,7 +190,10 @@ export class WccProperties extends LitElement {
Tablet<br /><i class="material-icons">tablet</i>
</div>
<div
class="viewport ${this.selectedViewport === 'desktop' || this.selectedViewport === 'native' ? 'selected' : null}"
class="button ${this.selectedViewport === 'desktop' ||
this.selectedViewport === 'native'
? 'selected'
: null}"
@click=${() => {
this.selectViewport('native');
}}
@ -171,19 +204,29 @@ export class WccProperties extends LitElement {
</div>
<div class="docs">Docs</div>
</div>
${this.warning ? html`<div class="warning">
${this.warning}
</div>` : null}
${this.warning ? html`<div class="warning">${this.warning}</div>` : null}
`;
}
public selectTheme(themeArg: TTheme) {
this.selectedTheme = themeArg;
this.dispatchEvent(
new CustomEvent('selectedTheme', {
detail: themeArg,
})
);
console.log(this.dashboardRef.selectedType);
this.dashboardRef.buildUrl();
}
public selectViewport(viewport: TEnvironment) {
this.selectedViewport = viewport;
setEnvironment(viewport);
this.dispatchEvent(
new CustomEvent('selectedViewport', {
detail: viewport
detail: viewport,
})
);
this.dashboardRef.buildUrl();
}
}

View File

@ -2,6 +2,8 @@ import * as plugins from '../wcctools.plugins';
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
import { WccDashboard } from './wcc-dashboard';
export type TElementType = 'element' | 'page';
@customElement('wcc-sidebar')
export class WccSidebar extends LitElement {
@property({type: Array})
@ -10,6 +12,9 @@ export class WccSidebar extends LitElement {
@property({ attribute: false })
public selectedItem: LitElement | TemplateResult;
@property({ attribute: false })
public selectedType: TElementType;
@property()
public dashboardRef: WccDashboard;
@ -107,8 +112,7 @@ export class WccSidebar extends LitElement {
class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
@click=${async () => {
const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
this.selectItem(item);
domtools.router.pushUrl(`/pages/${pageName}`);
this.selectItem('page', item);
}}
>
<i class="material-icons">insert_drive_file</i>
@ -127,8 +131,7 @@ export class WccSidebar extends LitElement {
class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
@click=${async () => {
const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
this.selectItem(item);
domtools.router.pushUrl(`/elements/${elementName}`);
this.selectItem('element', item);
}}
>
<i class="material-icons">featured_video</i>
@ -141,13 +144,20 @@ export class WccSidebar extends LitElement {
`;
}
public selectItem(item: TemplateResult | LitElement) {
public selectItem(typeArg: TElementType, itemArg: TemplateResult | LitElement) {
console.log('selected item');
this.selectedItem = item;
this.selectedItem = itemArg;
this.selectedType = typeArg;
this.dispatchEvent(
new CustomEvent('selectedItem', {
detail: item
detail: itemArg
})
);
this.dispatchEvent(
new CustomEvent('selectedType', {
detail: typeArg
})
);
this.dashboardRef.buildUrl();
}
}