141 lines
3.2 KiB
TypeScript
141 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('lele-mobilenavigation')
|
|
export class LeleMobilenavigation extends DeesElement {
|
|
private static singletonRef: LeleMobilenavigation;
|
|
public static async createAndInit(menuItemsArg: plugins.tsclass.website.IMenuItem[]) {
|
|
if (!this.singletonRef) {
|
|
this.singletonRef = new LeleMobilenavigation();
|
|
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: 100;
|
|
opacity: 0;
|
|
padding: 16px;
|
|
right: 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);
|
|
}
|
|
}
|