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

166 lines
4.7 KiB
TypeScript
Raw Normal View History

2022-03-24 14:39:17 +00:00
import * as plugins from '../wcctools.plugins.js';
2023-08-07 16:20:17 +00:00
import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
2022-03-24 14:39:17 +00:00
import { WccDashboard } from './wcc-dashboard.js';
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')
2022-03-24 14:39:17 +00:00
export class WccSidebar extends DeesElement {
2020-05-11 00:36:58 +00:00
@property({ attribute: false })
2022-03-24 14:39:17 +00:00
public selectedItem: DeesElement | (() => 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;
2023-10-05 12:25:39 +00:00
font-family: 'Roboto', 'Inter', sans-serif;
2023-10-08 11:11:00 +00:00
font-size: 12px;
2020-05-11 00:36:58 +00:00
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;
}
2023-01-07 13:05:25 +00:00
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
2023-01-07 13:14:12 +00:00
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
2023-01-07 13:05:25 +00:00
}
2020-05-11 00:36:58 +00:00
.selectOption {
2023-12-10 15:20:31 +00:00
user-select: none;
2020-05-11 00:36:58 +00:00
position: relative;
line-height: 24px;
padding: 5px;
transition: all 0.2s;
display: grid;
grid-template-columns: 28px auto;
}
.selectOption:hover {
padding: 5px;
color: #333;
background: #fff;
}
.selectOption.selected {
background: #455A64;;
}
.selectOption.selected:hover {
color: #ffffff;
background: #455A64;
}
2023-01-07 13:05:25 +00:00
.selectOption .material-symbols-outlined {
2020-05-11 00:36:58 +00:00
color: #666;
display: block;
transition: all 0.2s;
}
2023-01-07 13:05:25 +00:00
.selectOption.selected .material-symbols-outlined {
2020-05-11 00:36:58 +00:00
color: #000;
}
.selectOption .text {
display: block;
word-wrap: break-word;
word-break: break-all;
max-width: 100%;
}
</style>
<div class="menu">
<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
}}
>
2023-01-07 13:05:25 +00:00
<i class="material-symbols-outlined">insert_drive_file</i>
2020-05-11 00:36:58 +00:00
<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
2020-12-07 04:20:29 +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('element', elementName, item);
2020-05-11 00:36:58 +00:00
}}
>
2023-01-07 13:05:25 +00:00
<i class="material-symbols-outlined">featured_video</i>
2020-05-11 00:36:58 +00:00
<div class="text">${elementName}</div>
</div>
`;
});
})()}
2023-10-08 11:11:00 +00:00
</div>
2020-05-11 00:36:58 +00:00
`;
}
2022-03-24 14:39:17 +00:00
public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: (() => TemplateResult) | DeesElement) {
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
}
}