fix(core): update
This commit is contained in:
parent
addec288bd
commit
c0900e265b
@ -21,6 +21,6 @@
|
|||||||
<script src="../ts_web/index.ts"></script>
|
<script src="../ts_web/index.ts"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<></>
|
<wcc-dashboard></wcc-dashboard>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
9
package-lock.json
generated
9
package-lock.json
generated
@ -1933,15 +1933,6 @@
|
|||||||
"symbol-tree": "^3.2.4"
|
"symbol-tree": "^3.2.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@pushrocks/parcel-plugin-wrapper": {
|
|
||||||
"version": "1.0.5",
|
|
||||||
"resolved": "https://verdaccio.lossless.one/@pushrocks%2fparcel-plugin-wrapper/-/parcel-plugin-wrapper-1.0.5.tgz",
|
|
||||||
"integrity": "sha512-xsWIffLeBEB6P6V1+y3LHB1fko3e3nh8qDxH5meWcIMe8/BiaXhtDx1NyvHMWUXWFF0UzbQ1FGT9QBUwwyac6Q==",
|
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
|
||||||
"@gitzone/tsrun": "^1.1.17"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@pushrocks/projectinfo": {
|
"@pushrocks/projectinfo": {
|
||||||
"version": "4.0.2",
|
"version": "4.0.2",
|
||||||
"resolved": "https://verdaccio.lossless.one/@pushrocks%2fprojectinfo/-/projectinfo-4.0.2.tgz",
|
"resolved": "https://verdaccio.lossless.one/@pushrocks%2fprojectinfo/-/projectinfo-4.0.2.tgz",
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
{
|
{
|
||||||
"name": "@losslessone_private/dees-wcctools",
|
"name": "@designestate/dees-wcctools",
|
||||||
"version": "1.0.18",
|
"version": "1.0.18",
|
||||||
"private": false,
|
"private": false,
|
||||||
"description": "website for lossless.com",
|
"description": "wcc tools for creating element catalogues",
|
||||||
"main": "dist_ts_web/index.js",
|
"main": "dist_ts_web/index.js",
|
||||||
"typings": "dist_ts_web/index.d.ts",
|
"typings": "dist_ts_web/index.d.ts",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
@ -22,7 +22,6 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@gitzone/tsbuild": "^2.1.8",
|
"@gitzone/tsbuild": "^2.1.8",
|
||||||
"@gitzone/tswatch": "^1.0.30",
|
"@gitzone/tswatch": "^1.0.30",
|
||||||
"@pushrocks/parcel-plugin-wrapper": "^1.0.5",
|
|
||||||
"@pushrocks/projectinfo": "^4.0.2",
|
"@pushrocks/projectinfo": "^4.0.2",
|
||||||
"tslint": "^5.11.0",
|
"tslint": "^5.11.0",
|
||||||
"tslint-config-prettier": "^1.17.0"
|
"tslint-config-prettier": "^1.17.0"
|
||||||
|
|||||||
80
ts_web/elements/wcc-dashboard.ts
Normal file
80
ts_web/elements/wcc-dashboard.ts
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
||||||
|
|
||||||
|
import { WccDefaultElement } from './wcc-defaultelement';
|
||||||
|
|
||||||
|
// wcc tools
|
||||||
|
import './wcc-frame';
|
||||||
|
import './wcc-sidebar';
|
||||||
|
import './wcc-properties';
|
||||||
|
|
||||||
|
@customElement('wcc-dashboard')
|
||||||
|
export class WccDashboard extends LitElement {
|
||||||
|
@property()
|
||||||
|
public selectedItem: TemplateResult | LitElement = WccDefaultElement as any;
|
||||||
|
|
||||||
|
@property()
|
||||||
|
public selectedInstance;
|
||||||
|
|
||||||
|
@property()
|
||||||
|
public selectedViewport: string = 'desktop';
|
||||||
|
|
||||||
|
@property()
|
||||||
|
public pages: TemplateResult[] = [];
|
||||||
|
|
||||||
|
@property()
|
||||||
|
public elements: LitElement[] = [];
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
public render(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Roboto');
|
||||||
|
:host {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
background: #fcfcfc;
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
:host([hidden]) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<wcc-sidebar .pages=${this.pages} .elements=${this.elements} @selectedItem=${eventArg => {
|
||||||
|
this.selectedItem = eventArg.detail;
|
||||||
|
}}></wcc-sidebar>
|
||||||
|
<wcc-properties .selectedItem=${this.selectedItem} .selectedInstance=${this.selectedInstance} @selectedViewport=${eventArg => {this.selectedViewport = eventArg.detail; this.updateSlot();}}></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);
|
||||||
|
const anonItem: any = this.selectedItem;
|
||||||
|
if (anonItem.demo) {
|
||||||
|
return html`${anonItem.demo}`;
|
||||||
|
} else {
|
||||||
|
alert(`component does not expose a demo property.`);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
|
||||||
|
}
|
||||||
|
})()}
|
||||||
|
</wcc-frame>
|
||||||
|
${this.selectedViewport}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
public updateSlot() {
|
||||||
|
console.log('updateSlot');
|
||||||
|
const oldSelectedItem = this.selectedItem;
|
||||||
|
this.selectedItem = null;
|
||||||
|
setTimeout(() => {
|
||||||
|
this.selectedItem = oldSelectedItem;
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
@ -1,8 +1,10 @@
|
|||||||
import { LitElement, property, html, customElement } from 'lit-element';
|
import { LitElement, property, html, customElement } from 'lit-element';
|
||||||
import { TemplateResult } from 'lit-html';
|
import { TemplateResult } from 'lit-html';
|
||||||
|
|
||||||
@customElement('lele-element')
|
@customElement('wcc-defaultelement')
|
||||||
export class LeleElement extends LitElement {
|
export class WccDefaultElement extends LitElement {
|
||||||
|
public static demo = html`<wcc-defaultelement></wcc-defaultelement>`;
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
public footerText = `Lossless GmbH - 2018`;
|
public footerText = `Lossless GmbH - 2018`;
|
||||||
|
|
||||||
@ -20,16 +22,20 @@ export class LeleElement extends LitElement {
|
|||||||
@import url('https://fonts.googleapis.com/css?family=Roboto');
|
@import url('https://fonts.googleapis.com/css?family=Roboto');
|
||||||
:host {
|
:host {
|
||||||
font-family: 'Roboto', sans-serif;
|
font-family: 'Roboto', sans-serif;
|
||||||
background: #FCFCFC;
|
background: #333;
|
||||||
|
text-align: center;
|
||||||
|
padding:30px;
|
||||||
box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
|
box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
|
||||||
display: block;
|
display: block;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
:host([hidden]) {
|
:host([hidden]) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<slot></slot>
|
No Element specified!
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
71
ts_web/elements/wcc-frame.ts
Normal file
71
ts_web/elements/wcc-frame.ts
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
||||||
|
|
||||||
|
const breakpoints = {
|
||||||
|
desktop: 1240,
|
||||||
|
tablet: 700,
|
||||||
|
phablet: 500,
|
||||||
|
phone: 340,
|
||||||
|
};
|
||||||
|
|
||||||
|
@customElement('wcc-frame')
|
||||||
|
export class WccFrame extends LitElement {
|
||||||
|
@property()
|
||||||
|
public viewport: string;
|
||||||
|
|
||||||
|
public render(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
border: 10px solid #ffaeaf;
|
||||||
|
background: #222;
|
||||||
|
position: absolute;
|
||||||
|
left: 200px;
|
||||||
|
right: 0px;
|
||||||
|
top: 0px;
|
||||||
|
bottom: 100px;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: auto;
|
||||||
|
${(() => {
|
||||||
|
switch (this.viewport) {
|
||||||
|
case 'desktop':
|
||||||
|
return `
|
||||||
|
padding: 0px 0px;
|
||||||
|
`;
|
||||||
|
case 'tablet':
|
||||||
|
return `
|
||||||
|
padding: 0px ${(document.body.clientWidth - 200 - breakpoints.tablet) / 2}px;
|
||||||
|
`;
|
||||||
|
case 'phablet':
|
||||||
|
return `
|
||||||
|
padding: 0px ${(document.body.clientWidth - 200 - breakpoints.phablet) / 2}px;
|
||||||
|
`;
|
||||||
|
case 'phone':
|
||||||
|
return `
|
||||||
|
padding: 0px ${(document.body.clientWidth - 200 - breakpoints.phone) / 2}px;
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
})()}
|
||||||
|
}
|
||||||
|
.viewport {
|
||||||
|
position: relative;
|
||||||
|
${this.viewport !== 'desktop'
|
||||||
|
? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `
|
||||||
|
: html``}
|
||||||
|
min-height: 100%;
|
||||||
|
background:
|
||||||
|
radial-gradient(#444444 3px, transparent 4px),
|
||||||
|
radial-gradient(#444444 3px, transparent 4px),
|
||||||
|
linear-gradient(#222222 4px, transparent 0),
|
||||||
|
linear-gradient(45deg, transparent 74px, transparent 75px, #444444 75px, #444444 76px, transparent 77px, transparent 109px),
|
||||||
|
linear-gradient(-45deg, transparent 75px, transparent 76px, #444444 76px, #444444 77px, transparent 78px, transparent 109px),
|
||||||
|
#222222;
|
||||||
|
background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
|
||||||
|
background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="viewport">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
182
ts_web/elements/wcc-properties.ts
Normal file
182
ts_web/elements/wcc-properties.ts
Normal file
@ -0,0 +1,182 @@
|
|||||||
|
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
||||||
|
|
||||||
|
export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
|
||||||
|
|
||||||
|
let environment: TEnvironment = 'native';
|
||||||
|
|
||||||
|
export const setEnvironment = envArg => {
|
||||||
|
environment = envArg;
|
||||||
|
};
|
||||||
|
|
||||||
|
@customElement('wcc-properties')
|
||||||
|
export class WccProperties extends LitElement {
|
||||||
|
@property()
|
||||||
|
public selectedItem: TemplateResult | LitElement;
|
||||||
|
|
||||||
|
@property()
|
||||||
|
public selectedInstance;
|
||||||
|
|
||||||
|
@property()
|
||||||
|
public selectedViewport = 'native';
|
||||||
|
|
||||||
|
public render(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: absolute;
|
||||||
|
left: 200px;
|
||||||
|
height: 100px;
|
||||||
|
bottom: 0px;
|
||||||
|
right: 0px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #111;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 300px 70px;
|
||||||
|
}
|
||||||
|
.properties {
|
||||||
|
border-right: 1px solid #999;
|
||||||
|
height: 100px;
|
||||||
|
overflow-y: auto;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 33% 33% 33%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.properties .property {
|
||||||
|
padding: 5px;
|
||||||
|
background: #444;
|
||||||
|
border: 1px solid #000;
|
||||||
|
}
|
||||||
|
.viewports {
|
||||||
|
border-right: 1px solid #999;
|
||||||
|
}
|
||||||
|
.viewport-selectors {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 25% 25% 25% 25%;
|
||||||
|
}
|
||||||
|
.viewport {
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid #000;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.viewport:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #333;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewport.selected {
|
||||||
|
background: #455A64;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewport.selected:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #ffffff;
|
||||||
|
background: #455a64;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panelheading {
|
||||||
|
padding: 5px;
|
||||||
|
font-weight: bold;
|
||||||
|
background: #444;
|
||||||
|
border: 1px solid #000;
|
||||||
|
}
|
||||||
|
.docs {
|
||||||
|
text-align: center;
|
||||||
|
line-height: 100px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.docs:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #333;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="properties">
|
||||||
|
<div class="panelheading">Properties</div>
|
||||||
|
${(() => {
|
||||||
|
if (this.selectedItem && !(this.selectedItem instanceof TemplateResult)) {
|
||||||
|
const anonItem: any = this.selectedItem;
|
||||||
|
const classProperties: Map<string, any> = anonItem._classProperties;
|
||||||
|
const returnArray: TemplateResult[] = [];
|
||||||
|
for (const key of classProperties.keys()) {
|
||||||
|
returnArray.push(
|
||||||
|
html`
|
||||||
|
<div class="property">
|
||||||
|
${key} / ${classProperties.get(key).type.name} /
|
||||||
|
<pre>
|
||||||
|
${(() => {
|
||||||
|
const result = this.selectedInstance
|
||||||
|
? JSON.stringify(this.selectedInstance[key], null, 2)
|
||||||
|
: null;
|
||||||
|
return result;
|
||||||
|
})()}</pre
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return returnArray;
|
||||||
|
}
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
|
<div class="viewports">
|
||||||
|
<div class="panelheading">Viewports</div>
|
||||||
|
<div class="viewport-selectors">
|
||||||
|
<div
|
||||||
|
class="viewport ${this.selectedViewport === 'phone' ? 'selected' : null}"
|
||||||
|
@click=${() => {
|
||||||
|
this.selectViewport('phone');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Phone<br /><i class="material-icons">smartphone</i>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="viewport ${this.selectedViewport === 'phablet' ? 'selected' : null}"
|
||||||
|
@click=${() => {
|
||||||
|
this.selectViewport('phablet');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Phablet<br /><i class="material-icons">smartphone</i>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="viewport ${this.selectedViewport === 'tablet' ? 'selected' : null}"
|
||||||
|
@click=${() => {
|
||||||
|
this.selectViewport('tablet');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Tablet<br /><i class="material-icons">tablet</i>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="viewport ${this.selectedViewport === 'desktop' || this.selectedViewport === 'native' ? 'selected' : null}"
|
||||||
|
@click=${() => {
|
||||||
|
this.selectViewport('native');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Desktop<br /><i class="material-icons">desktop_windows</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="docs">Docs</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
public selectViewport(viewport: TEnvironment) {
|
||||||
|
this.selectedViewport = viewport;
|
||||||
|
setEnvironment(viewport);
|
||||||
|
this.dispatchEvent(
|
||||||
|
new CustomEvent('selectedViewport', {
|
||||||
|
detail: viewport
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
147
ts_web/elements/wcc-sidebar.ts
Normal file
147
ts_web/elements/wcc-sidebar.ts
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
||||||
|
|
||||||
|
@customElement('wcc-sidebar')
|
||||||
|
export class WccSidebar extends LitElement {
|
||||||
|
@property()
|
||||||
|
public pages: { [key: string]: TemplateResult };
|
||||||
|
|
||||||
|
@property()
|
||||||
|
public elements: { [key: string]: LitElement };
|
||||||
|
|
||||||
|
@property({ attribute: false })
|
||||||
|
public selectedItem: LitElement | TemplateResult;
|
||||||
|
|
||||||
|
public render(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
border-right: 1px solid #999;
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
width: 200px;
|
||||||
|
top: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
overflow-x: hidden;
|
||||||
|
background: #222;
|
||||||
|
color: #fff;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading {
|
||||||
|
font-size: 24px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 20px 5px 5px 5px;
|
||||||
|
}
|
||||||
|
.subheading {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.selectOption {
|
||||||
|
position: relative;
|
||||||
|
line-height: 24px;
|
||||||
|
padding: 5px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 28px auto;
|
||||||
|
}
|
||||||
|
.selectOption:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 5px;
|
||||||
|
color: #333;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectOption.selected {
|
||||||
|
background: #455A64;;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectOption.selected:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #ffffff;
|
||||||
|
background: #455A64;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectOption .material-icons {
|
||||||
|
color: #666;
|
||||||
|
display: block;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectOption.selected .material-icons {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectOption .text {
|
||||||
|
display: block;
|
||||||
|
word-wrap: break-word;
|
||||||
|
word-break: break-all;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<div class="heading">
|
||||||
|
lele-catalog
|
||||||
|
</div>
|
||||||
|
<div class="subheading">
|
||||||
|
Lossless GmbH
|
||||||
|
</div>
|
||||||
|
<div class="menu">
|
||||||
|
<h3>Live Websites</h3>
|
||||||
|
<div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">lossless.com</div></div>
|
||||||
|
<div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">central.eu</div></div>
|
||||||
|
<div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">coffee.link</div></div>
|
||||||
|
<h3>Pages</h3>
|
||||||
|
${(() => {
|
||||||
|
const pages = Object.keys(this.pages);
|
||||||
|
return pages.map(pageName => {
|
||||||
|
const item = this.pages[pageName];
|
||||||
|
return html`
|
||||||
|
<div
|
||||||
|
class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
|
||||||
|
@click=${() => {
|
||||||
|
this.selectItem(item);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<i class="material-icons">insert_drive_file</i>
|
||||||
|
<div class="text">${pageName}</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
})()}
|
||||||
|
<h3>Elements</h3>
|
||||||
|
${(() => {
|
||||||
|
const elements = Object.keys(this.elements);
|
||||||
|
return elements.map(elementName => {
|
||||||
|
const item = this.elements[elementName];
|
||||||
|
return html`
|
||||||
|
<div
|
||||||
|
class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
|
||||||
|
@click=${() => {
|
||||||
|
this.selectItem(item);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<i class="material-icons">featured_video</i>
|
||||||
|
<div class="text">${elementName}</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
});
|
||||||
|
})()}
|
||||||
|
</menu>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
public selectItem(item: TemplateResult | LitElement) {
|
||||||
|
console.log('selected item');
|
||||||
|
this.selectedItem = item;
|
||||||
|
this.dispatchEvent(
|
||||||
|
new CustomEvent('selectedItem', {
|
||||||
|
detail: item
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { LeleElement } from './elements/lele-element';
|
import { WccDashboard } from './elements/wcc-dashboard';
|
||||||
|
|
||||||
export {
|
export {
|
||||||
LeleElement
|
WccDashboard
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user