dees-wcctools/ts_web/elements/wcc-frame.ts
2021-11-26 17:47:08 +01:00

93 lines
3.4 KiB
TypeScript

import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
@customElement('wcc-frame')
export class WccFrame extends DeesElement {
@property()
public viewport: string;
public render(): TemplateResult {
return html`
<style>
:host {
border: 10px solid #ffaeaf;
position: absolute;
background: ${this.goBright ? '#333': '#000'};
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 - domtools.breakpoints.tablet) / 2
}px;
`;
case 'phablet':
return `
padding: 0px ${
(document.body.clientWidth - 200 - domtools.breakpoints.phablet) / 2
}px;
`;
case 'phone':
return `
padding: 0px ${
(document.body.clientWidth - 200 - domtools.breakpoints.phone) / 2
}px;
`;
}
})()}
}
.viewport {
container-type: inline-size;
container-name: wccToolsViewport;
position: relative;
${this.viewport !== 'desktop'
? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `
: html``}
min-height: 100%;
background:
${this.goBright ? `
radial-gradient(#CCCCCC 3px, transparent 4px),
radial-gradient(#CCCCCC 3px, transparent 4px),
linear-gradient(#eeeeee 4px, transparent 0),
linear-gradient(45deg, transparent 74px, transparent 75px, #CCCCCC 75px, #CCCCCC 76px, transparent 77px, transparent 109px),
linear-gradient(-45deg, transparent 75px, transparent 76px, #CCCCCC 76px, #CCCCCC 77px, transparent 78px, transparent 109px),
#eeeeee;
background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
` : `
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>
`;
}
public async getDisplayedInstance() {
await this.updateComplete;
const slottedContent = this.children;
console.log(slottedContent);
}
}