2020-07-15 21:00:47 +00:00
|
|
|
import * as plugins from '../wcctools.plugins';
|
2020-05-11 00:36:58 +00:00
|
|
|
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
2020-07-15 19:55:35 +00:00
|
|
|
import { WccDashboard } from './wcc-dashboard';
|
2020-05-11 00:36:58 +00:00
|
|
|
|
2020-11-26 02:28:17 +00:00
|
|
|
export type TElementType = 'element' | 'page';
|
|
|
|
|
2020-05-11 00:36:58 +00:00
|
|
|
@customElement('wcc-sidebar')
|
|
|
|
export class WccSidebar extends LitElement {
|
2020-05-23 13:13:58 +00:00
|
|
|
@property({type: Array})
|
|
|
|
public websites: string[] = [];
|
|
|
|
|
2020-05-11 00:36:58 +00:00
|
|
|
@property({ attribute: false })
|
2020-11-27 16:40:38 +00:00
|
|
|
public selectedItem: LitElement | (() => TemplateResult);
|
2020-05-11 00:36:58 +00:00
|
|
|
|
2020-11-26 02:28:17 +00:00
|
|
|
@property({ attribute: false })
|
|
|
|
public selectedType: TElementType;
|
|
|
|
|
2020-07-15 19:55:35 +00:00
|
|
|
@property()
|
|
|
|
public dashboardRef: WccDashboard;
|
|
|
|
|
2020-05-11 00:36:58 +00:00
|
|
|
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">
|
2020-11-27 16:40:38 +00:00
|
|
|
wcc-tools
|
2020-05-11 00:36:58 +00:00
|
|
|
</div>
|
|
|
|
<div class="subheading">
|
|
|
|
</div>
|
|
|
|
<div class="menu">
|
|
|
|
<h3>Live Websites</h3>
|
2020-05-23 13:13:58 +00:00
|
|
|
${this.websites.map(website => {
|
|
|
|
return html`<div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">${website}</div></div>`;
|
|
|
|
})}
|
2020-05-11 00:36:58 +00:00
|
|
|
<h3>Pages</h3>
|
|
|
|
${(() => {
|
2020-07-15 19:55:35 +00:00
|
|
|
const pages = Object.keys(this.dashboardRef.pages);
|
2020-05-11 00:36:58 +00:00
|
|
|
return pages.map(pageName => {
|
2020-07-15 19:55:35 +00:00
|
|
|
const item = this.dashboardRef.pages[pageName];
|
2020-05-11 00:36:58 +00:00
|
|
|
return html`
|
|
|
|
<div
|
2020-11-26 03:16:18 +00:00
|
|
|
class="selectOption ${this.selectedItem === item ? 'selected' : null}"
|
2020-07-15 21:00:47 +00:00
|
|
|
@click=${async () => {
|
|
|
|
const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
|
2020-11-27 15:59:18 +00:00
|
|
|
this.selectItem('page', pageName, item);
|
2020-05-11 00:36:58 +00:00
|
|
|
}}
|
|
|
|
>
|
|
|
|
<i class="material-icons">insert_drive_file</i>
|
|
|
|
<div class="text">${pageName}</div>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
});
|
|
|
|
})()}
|
|
|
|
<h3>Elements</h3>
|
|
|
|
${(() => {
|
2020-07-15 19:55:35 +00:00
|
|
|
const elements = Object.keys(this.dashboardRef.elements);
|
2020-05-11 00:36:58 +00:00
|
|
|
return elements.map(elementName => {
|
2020-07-15 19:55:35 +00:00
|
|
|
const item = this.dashboardRef.elements[elementName];
|
2020-05-11 00:36:58 +00:00
|
|
|
return html`
|
|
|
|
<div
|
|
|
|
class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
|
2020-07-15 21:00:47 +00:00
|
|
|
@click=${async () => {
|
|
|
|
const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
|
2020-11-27 15:59:18 +00:00
|
|
|
this.selectItem('element', elementName, item);
|
2020-05-11 00:36:58 +00:00
|
|
|
}}
|
|
|
|
>
|
|
|
|
<i class="material-icons">featured_video</i>
|
|
|
|
<div class="text">${elementName}</div>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
});
|
|
|
|
})()}
|
|
|
|
</menu>
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
|
2020-11-27 15:59:18 +00:00
|
|
|
public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: (() => TemplateResult) | LitElement) {
|
2020-05-11 00:36:58 +00:00
|
|
|
console.log('selected item');
|
2020-11-27 16:40:38 +00:00
|
|
|
console.log(itemNameArg);
|
|
|
|
console.log(itemArg);
|
2020-11-26 02:28:17 +00:00
|
|
|
this.selectedItem = itemArg;
|
|
|
|
this.selectedType = typeArg;
|
2020-05-11 00:36:58 +00:00
|
|
|
this.dispatchEvent(
|
2020-11-27 15:59:18 +00:00
|
|
|
new CustomEvent('selectedType', {
|
|
|
|
detail: typeArg
|
2020-11-26 02:28:17 +00:00
|
|
|
})
|
|
|
|
);
|
|
|
|
this.dispatchEvent(
|
2020-11-27 15:59:18 +00:00
|
|
|
new CustomEvent('selectedItemName', {
|
|
|
|
detail: itemNameArg
|
|
|
|
})
|
|
|
|
);
|
|
|
|
this.dispatchEvent(
|
|
|
|
new CustomEvent('selectedItem', {
|
|
|
|
detail: itemArg
|
2020-05-11 00:36:58 +00:00
|
|
|
})
|
|
|
|
);
|
2020-11-27 15:59:18 +00:00
|
|
|
|
2020-11-26 02:28:17 +00:00
|
|
|
this.dashboardRef.buildUrl();
|
2020-05-11 00:36:58 +00:00
|
|
|
}
|
|
|
|
}
|