dees-wcctools/ts_web/elements/wcc-properties.ts
2020-05-24 19:37:43 +00:00

201 lines
5.6 KiB
TypeScript

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';
@property()
public warning: string = null;
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;
}
.warning {
position: absolute;
background: #800000;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
padding: 20px;
font-size: 25px;
}
</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>
${this.warning ? html`<div class="warning">
${this.warning}
</div>` : null}
`;
}
public selectViewport(viewport: TEnvironment) {
this.selectedViewport = viewport;
setEnvironment(viewport);
this.dispatchEvent(
new CustomEvent('selectedViewport', {
detail: viewport
})
);
}
}