dees-catalog/ts_web/elements/dees-mobilenavigation.ts
2022-08-17 19:56:22 +02:00

143 lines
3.2 KiB
TypeScript

import * as plugins from './plugins.js';
import {
cssManager,
css,
customElement,
DeesElement,
domtools,
html,
property,
} from '@designestate/dees-element';
import { DeesWindowLayer } from './dees-windowlayer.js';
@customElement('dees-mobilenavigation')
export class DeesMobilenavigation extends DeesElement {
private static singletonRef: DeesMobilenavigation;
public static async createAndInit(menuItemsArg: plugins.tsclass.website.IMenuItem[]) {
if (!this.singletonRef) {
this.singletonRef = new DeesMobilenavigation();
document.body.append(this.singletonRef);
await this.singletonRef.init();
}
this.singletonRef.menuItems = menuItemsArg;
await this.singletonRef.readyDeferred.promise;
this.singletonRef.show();
return this.singletonRef;
}
// INSTANCE
@property({
type: Object,
})
public menuItems: plugins.tsclass.website.IMenuItem[] = [];
readyDeferred = domtools.plugins.smartpromise.defer();
/**
* inits the mobile navigation
*/
public async init() {
await this.updateComplete;
this.readyDeferred.resolve();
}
public static styles = [
cssManager.defaultStyles,
css`
:host {
}
.main {
transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
position: fixed;
height: 100vh;
min-width: 370px;
transform: translateX(200px);
color: #fff;
z-index: 250;
opacity: 0;
padding: 16px;
right: 0px;
top: 0px;
bottom: 0px;
background: #000;
border-left: 1px dashed #444;
pointer-events: none;
}
.main.show {
pointer-events: all;
transform: translateX(0px);
opacity: 1;
}
.menuItem {
text-align: center;
padding: 8px;
cursor: pointer;
border-radius: 3px;
}
.menuItem:hover {
background: #333;
}
`,
];
public render() {
return html`
<div class="main">
${this.menuItems.map((menuItem) => {
return html`
<div
class="menuItem"
@click="${() => {
this.hide();
menuItem.action();
}}"
>
${menuItem.name}
</div>
`;
})}
</div>
`;
}
private windowLayer: DeesWindowLayer;
/**
* inits the show
*/
public async show() {
const domtools = await this.domtoolsPromise;
const main = this.shadowRoot.querySelector('.main');
if (!this.windowLayer) {
this.windowLayer = new DeesWindowLayer();
this.windowLayer.addEventListener('click', () => {
this.hide();
});
}
document.body.append(this.windowLayer);
await domtools.convenience.smartdelay.delayFor(0);
this.windowLayer.show();
await domtools.convenience.smartdelay.delayFor(0);
main.classList.add('show');
}
/**
* inits the hide function
*/
public async hide() {
const domtools = await this.domtoolsPromise;
const main = this.shadowRoot.querySelector('.main');
main.classList.remove('show');
this.windowLayer.hide();
}
async disconnectedCallback () {
document.body.removeChild(this.windowLayer);
}
}