Compare commits

...

20 Commits

Author SHA1 Message Date
100f657e04 1.0.44 2020-11-27 16:40:38 +00:00
46e0b9f9db fix(core): update 2020-11-27 16:40:38 +00:00
64d6379cd2 1.0.43 2020-11-27 15:59:18 +00:00
847733286c fix(core): update 2020-11-27 15:59:18 +00:00
67a037c511 1.0.42 2020-11-26 03:16:19 +00:00
21bcdb2e01 fix(core): update 2020-11-26 03:16:18 +00:00
1743490a26 1.0.41 2020-11-26 02:59:47 +00:00
2f9ec6a700 fix(core): update 2020-11-26 02:59:46 +00:00
3a89888289 1.0.40 2020-11-26 02:56:12 +00:00
98909c61ff fix(core): update 2020-11-26 02:56:11 +00:00
324808dd03 1.0.39 2020-11-26 02:50:50 +00:00
c5eec2ac22 fix(core): update 2020-11-26 02:50:50 +00:00
b1350c463b 1.0.38 2020-11-26 02:28:17 +00:00
40f54c574d fix(core): update 2020-11-26 02:28:17 +00:00
ebc2c82b7f 1.0.37 2020-07-15 21:30:02 +00:00
15481c5e24 fix(core): update 2020-07-15 21:30:01 +00:00
357320d40a 1.0.36 2020-07-15 21:00:48 +00:00
08d92d9d3e fix(core): update 2020-07-15 21:00:47 +00:00
0ce9a96b90 1.0.35 2020-07-15 20:42:55 +00:00
959a4cae89 fix(core): update 2020-07-15 20:42:54 +00:00
14 changed files with 1942 additions and 2031 deletions

View File

@ -19,23 +19,35 @@ mirror:
stage: security stage: security
script: script:
- npmci git mirror - npmci git mirror
only:
- tags
tags: tags:
- lossless - lossless
- docker - docker
- notpriv - notpriv
audit: auditProductionDependencies:
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
stage: security
script:
- npmci npm prepare
- npmci command npm install --production --ignore-scripts
- npmci command npm config set registry https://registry.npmjs.org
- npmci command npm audit --audit-level=high --only=prod --production
tags:
- docker
auditDevDependencies:
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
stage: security stage: security
script: script:
- npmci npm prepare - npmci npm prepare
- npmci command npm install --ignore-scripts - npmci command npm install --ignore-scripts
- npmci command npm config set registry https://registry.npmjs.org - npmci command npm config set registry https://registry.npmjs.org
- npmci command npm audit --audit-level=high - npmci command npm audit --audit-level=high --only=dev
tags: tags:
- lossless
- docker - docker
- notpriv allow_failure: true
# ==================== # ====================
# test stage # test stage
@ -50,9 +62,7 @@ testStable:
- npmci npm test - npmci npm test
coverage: /\d+.?\d+?\%\s*coverage/ coverage: /\d+.?\d+?\%\s*coverage/
tags: tags:
- lossless
- docker - docker
- priv
testBuild: testBuild:
stage: test stage: test
@ -63,9 +73,7 @@ testBuild:
- npmci command npm run build - npmci command npm run build
coverage: /\d+.?\d+?\%\s*coverage/ coverage: /\d+.?\d+?\%\s*coverage/
tags: tags:
- lossless
- docker - docker
- notpriv
release: release:
stage: release stage: release
@ -85,6 +93,8 @@ release:
codequality: codequality:
stage: metadata stage: metadata
allow_failure: true allow_failure: true
only:
- tags
script: script:
- npmci command npm install -g tslint typescript - npmci command npm install -g tslint typescript
- npmci npm prepare - npmci npm prepare

View File

@ -15,7 +15,7 @@
"properties": { "properties": {
"projectType": { "projectType": {
"type": "string", "type": "string",
"enum": ["website", "element", "service", "npm"] "enum": ["website", "element", "service", "npm", "wcc"]
} }
} }
} }

View File

@ -9,7 +9,6 @@
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
/> />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<style> <style>
body { body {
@ -18,9 +17,8 @@
} }
</style> </style>
<script src="../ts_web/index.ts"></script> <script src="./index.ts"></script>
</head> </head>
<body> <body>
<wcc-dashboard></wcc-dashboard>
</body> </body>
</html> </html>

10
html/index.ts Normal file
View File

@ -0,0 +1,10 @@
// dees tools
import * as deesWccTools from '../ts_web';
import * as deesDomTools from '@designestate/dees-domtools';
// elements and pages
import * as elements from '../test/elements';
import * as pages from '../test/pages';
deesWccTools.setupWccTools(elements as any, pages);
deesDomTools.elementBasic.setup();

View File

@ -1,6 +1,6 @@
{ {
"gitzone": { "gitzone": {
"projectType": "element", "projectType": "wcc",
"module": { "module": {
"githost": "gitlab.com", "githost": "gitlab.com",
"gitscope": "designestate", "gitscope": "designestate",

3571
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
{ {
"name": "@designestate/dees-wcctools", "name": "@designestate/dees-wcctools",
"version": "1.0.34", "version": "1.0.44",
"private": false, "private": false,
"description": "wcc tools for creating element catalogues", "description": "wcc tools for creating element catalogues",
"main": "dist_ts_web/index.js", "main": "dist_ts_web/index.js",
@ -13,20 +13,21 @@
"author": "Lossless GmbH", "author": "Lossless GmbH",
"license": "UNLICENSED", "license": "UNLICENSED",
"dependencies": { "dependencies": {
"@designestate/dees-domtools": "^1.0.38", "@designestate/dees-domtools": "^1.0.74",
"@designestate/dees-element": "^1.0.6",
"@gitzone/tsrun": "^1.2.12", "@gitzone/tsrun": "^1.2.12",
"@pushrocks/smartdelay": "^2.0.10", "@pushrocks/smartdelay": "^2.0.10",
"@pushrocks/smartexpress": "^3.0.73", "@pushrocks/smartexpress": "^3.0.97",
"lit-element": "^2.0.0-rc.5", "lit-element": "^2.4.0",
"lit-html": "^1.0.0-rc.2", "lit-html": "^1.3.0",
"typescript": "^3.9.6" "typescript": "^4.1.2"
}, },
"devDependencies": { "devDependencies": {
"@gitzone/tsbuild": "^2.1.24", "@gitzone/tsbuild": "^2.1.25",
"@gitzone/tsbundle": "^1.0.72", "@gitzone/tsbundle": "^1.0.78",
"@gitzone/tswatch": "^1.0.50", "@gitzone/tswatch": "^1.0.50",
"@pushrocks/projectinfo": "^4.0.5", "@pushrocks/projectinfo": "^4.0.5",
"tslint": "^6.1.2", "tslint": "^6.1.3",
"tslint-config-prettier": "^1.17.0" "tslint-config-prettier": "^1.17.0"
}, },
"files": [ "files": [

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

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

View File

@ -0,0 +1,38 @@
import { DeesElement, customElement, TemplateResult, html } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
@customElement('test-demoelement')
export class TestDemoelement extends DeesElement {
public static demo = () => html`<test-demoelement></test-demoelement>`;
public render() {
return html`
<style>
.maincontainer, .themeindicator {
display: block;
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, .themeindicator {
border-radius: 50px;
}
`)}
</style>
<div class="maincontainer"><slot>This is a demo element</slot></div>
<div class="themeindicator">
You have selected the ${this.goBright ? 'bright' : 'dark'} theme;
</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,19 +8,31 @@ import { WccDefaultElement } from './wcc-defaultelement';
import './wcc-frame'; import './wcc-frame';
import './wcc-sidebar'; import './wcc-sidebar';
import './wcc-properties'; 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') @customElement('wcc-dashboard')
export class WccDashboard extends LitElement { export class WccDashboard extends LitElement {
public domtools: plugins.deesDomtools.DomTools; public domtools: plugins.deesDomtools.DomTools;
@property() @property()
public selectedItem: TemplateResult | LitElement; public selectedType: TElementType;
@property()
public selectedItemName: string;
@property()
public selectedItem: (() => TemplateResult) | LitElement;
@property() @property()
public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop'; public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop';
@property() @property()
public pages: { [key: string]: TemplateResult } = {}; public selectedTheme: TTheme = 'dark';
@property()
public pages: { [key: string]: () => TemplateResult } = {};
@property() @property()
public elements: { [key: string]: LitElement } = {}; public elements: { [key: string]: LitElement } = {};
@ -28,33 +40,25 @@ export class WccDashboard extends LitElement {
@property() @property()
public warning: string = null; public warning: string = null;
constructor(elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: TemplateResult }) { constructor(
elementsArg?: { [key: string]: LitElement },
pagesArg?: { [key: string]: () => TemplateResult }
) {
super(); super();
if (elementsArg) { if (elementsArg) {
this.elements = elementsArg; this.elements = elementsArg;
console.log('got elements:');
console.log(this.elements);
} }
if (pagesArg) { if (pagesArg) {
this.pages = pagesArg; this.pages = pagesArg;
} }
this.init();
}
public async init() {
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.selectedItem = this.pages[routeInfo.params.pageName];
});
} }
public render(): TemplateResult { public render(): TemplateResult {
return html` return html`
<style> <style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
:host { :host {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
background: #fcfcfc; background: #fcfcfc;
@ -65,53 +69,63 @@ export class WccDashboard extends LitElement {
display: none; display: none;
} }
</style> </style>
<wcc-sidebar .dashboardRef=${this} @selectedItem=${eventArg => { <wcc-sidebar
this.selectedItem = eventArg.detail; .dashboardRef=${this}
}}></wcc-sidebar> .selectedItem=${this.selectedItem}
<wcc-properties .warning="${this.warning}" .selectedItem=${this.selectedItem} @selectedViewport=${eventArg => {this.selectedViewport = eventArg.detail; this.updateSlot();}}></wcc-properties> @selectedType=${(eventArg) => {
this.selectedType = eventArg.detail;
}}
@selectedItemName=${(eventArg) => {
this.selectedItemName = eventArg.detail;
}}
@selectedItem=${(eventArg) => {
this.selectedItem = eventArg.detail;
}}
></wcc-sidebar>
<wcc-properties
.dashboardRef=${this}
.warning="${this.warning}"
.selectedItem=${this.selectedItem}
.selectedViewport=${this.selectedViewport}
.selectedTheme=${this.selectedTheme}
@selectedViewport=${(eventArg) => {
this.selectedViewport = eventArg.detail;
this.performUpdate();
}}
@selectedTheme=${(eventArg) => {
this.selectedTheme = eventArg.detail;
}}
></wcc-properties>
<wcc-frame id="wccFrame" viewport=${this.selectedViewport}> <wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
${(() => { ${(() => {
if (this.selectedItem instanceof TemplateResult) { if (this.selectedType === 'page' && this.selectedItem) {
return this.selectedItem; if (typeof this.selectedItem === 'function') {
} else if (this.selectedItem) { return this.selectedItem();
console.log(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; const anonItem: any = this.selectedItem;
if (!anonItem.demo) { if (!anonItem.demo) {
this.setWarning(`component ${anonItem.name} does not expose a demo property.`); this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
return; return;
} }
if (!(typeof anonItem.demo === 'function')) { 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; return;
} }
this.setWarning(null); this.setWarning(null);
return html`${anonItem.demo()}`; return html`${anonItem.demo()}`;
} else {
this.updateSlot();
} }
})()} })()}
</wcc-frame> </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) { public setWarning(warningTextArg: string) {
if (this.warning !== warningTextArg) { if (this.warning !== warningTextArg) {
console.log(warningTextArg); console.log(warningTextArg);
@ -121,4 +135,50 @@ export class WccDashboard extends LitElement {
}, 0); }, 0);
} }
} }
public async firstUpdated() {
this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
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.itemName];
}
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;
domtoolsInstance.themeManager.goBrightBoolean = this.selectedTheme === 'bright';
});
}
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.selectedItemName}/${this.selectedViewport}/${
this.selectedTheme
}`
);
}
} }

View File

@ -16,7 +16,6 @@ export class WccDefaultElement extends LitElement {
public render(): TemplateResult { public render(): TemplateResult {
return html` return html`
<style> <style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
:host { :host {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
background: #333; background: #333;

View File

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

View File

@ -1,13 +1,19 @@
import * as plugins from '../wcctools.plugins';
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element'; import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
import { WccDashboard } from './wcc-dashboard'; import { WccDashboard } from './wcc-dashboard';
export type TElementType = 'element' | 'page';
@customElement('wcc-sidebar') @customElement('wcc-sidebar')
export class WccSidebar extends LitElement { export class WccSidebar extends LitElement {
@property({type: Array}) @property({type: Array})
public websites: string[] = []; public websites: string[] = [];
@property({ attribute: false }) @property({ attribute: false })
public selectedItem: LitElement | TemplateResult; public selectedItem: LitElement | (() => TemplateResult);
@property({ attribute: false })
public selectedType: TElementType;
@property() @property()
public dashboardRef: WccDashboard; public dashboardRef: WccDashboard;
@ -86,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>
@ -103,10 +108,10 @@ export class WccSidebar extends LitElement {
const item = this.dashboardRef.pages[pageName]; const item = this.dashboardRef.pages[pageName];
return html` return html`
<div <div
class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}" class="selectOption ${this.selectedItem === item ? 'selected' : null}"
@click=${() => { @click=${async () => {
this.selectItem(item); const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
this.dashboardRef.domtools.router.pushUrl(`/pages/${pageName}`); this.selectItem('page', pageName, item);
}} }}
> >
<i class="material-icons">insert_drive_file</i> <i class="material-icons">insert_drive_file</i>
@ -123,9 +128,9 @@ export class WccSidebar extends LitElement {
return html` return html`
<div <div
class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}" class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
@click=${() => { @click=${async () => {
this.selectItem(item); const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
this.dashboardRef.domtools.router.pushUrl(`/elements/${elementName}`); this.selectItem('element', elementName, item);
}} }}
> >
<i class="material-icons">featured_video</i> <i class="material-icons">featured_video</i>
@ -138,13 +143,28 @@ export class WccSidebar extends LitElement {
`; `;
} }
public selectItem(item: TemplateResult | LitElement) { public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: (() => TemplateResult) | LitElement) {
console.log('selected item'); console.log('selected item');
this.selectedItem = item; console.log(itemNameArg);
console.log(itemArg);
this.selectedItem = itemArg;
this.selectedType = typeArg;
this.dispatchEvent( this.dispatchEvent(
new CustomEvent('selectedItem', { new CustomEvent('selectedType', {
detail: item detail: typeArg
}) })
); );
this.dispatchEvent(
new CustomEvent('selectedItemName', {
detail: itemNameArg
})
);
this.dispatchEvent(
new CustomEvent('selectedItem', {
detail: itemArg
})
);
this.dashboardRef.buildUrl();
} }
} }