dees-wcctools/ts_web/elements/wcc-sidebar.ts

151 lines
4.0 KiB
TypeScript
Raw Normal View History

2020-05-11 00:36:58 +00:00
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
@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()
2020-05-23 13:13:58 +00:00
public pages: { [key: string]: TemplateResult } = {};
2020-05-11 00:36:58 +00:00
@property()
2020-05-23 13:13:58 +00:00
public elements: { [key: string]: LitElement } = {};
2020-05-11 00:36:58 +00:00
@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>
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>
${(() => {
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
})
);
}
}