dees-catalog/ts_web/elements/dees-mobilenavigation.ts

185 lines
4.3 KiB
TypeScript
Raw Normal View History

2022-08-17 17:27:14 +00:00
import * as plugins from './plugins.js';
import {
cssManager,
css,
2023-08-07 18:02:18 +00:00
type CSSResult,
2022-08-17 17:27:14 +00:00
customElement,
DeesElement,
domtools,
html,
property,
2023-08-07 17:13:29 +00:00
} from '@design.estate/dees-element';
2022-08-17 17:27:14 +00:00
import { DeesWindowLayer } from './dees-windowlayer.js';
2022-08-17 17:28:11 +00:00
@customElement('dees-mobilenavigation')
export class DeesMobilenavigation extends DeesElement {
2022-08-18 00:11:35 +00:00
// STATIC
public static demo = () => html`
2023-09-04 17:28:50 +00:00
<dees-button @click=${() => {
2023-09-13 11:41:56 +00:00
DeesMobilenavigation.createAndShow([
2022-08-18 00:11:35 +00:00
{
2023-09-04 17:28:50 +00:00
name: 'Test',
2023-09-13 11:41:56 +00:00
action: async (deesMobileNav) => {
2023-09-04 17:28:50 +00:00
alert('test');
2023-09-13 11:41:56 +00:00
return null;
2023-09-04 17:28:50 +00:00
},
2022-08-18 00:11:35 +00:00
},
2023-09-04 17:28:50 +00:00
]);
}}></dees-button>
2022-08-18 00:11:35 +00:00
`;
2022-08-17 17:28:11 +00:00
private static singletonRef: DeesMobilenavigation;
2023-09-13 11:41:56 +00:00
public static async createAndShow(menuItemsArg: plugins.tsclass.website.IMenuItem<DeesMobilenavigation>[]) {
2022-08-17 17:27:14 +00:00
if (!this.singletonRef) {
2022-08-17 17:28:11 +00:00
this.singletonRef = new DeesMobilenavigation();
2022-08-17 17:27:14 +00:00
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({
2022-08-18 00:11:35 +00:00
type: Array,
})
public heading: string = `MENU`;
@property({
type: Array,
2022-08-17 17:27:14 +00:00
})
public menuItems: plugins.tsclass.website.IMenuItem[] = [];
2023-08-07 18:02:18 +00:00
readyDeferred: plugins.smartpromise.Deferred<any> = domtools.plugins.smartpromise.defer();
2022-08-17 17:27:14 +00:00
2022-08-18 00:11:35 +00:00
constructor() {
super();
2022-08-18 00:15:41 +00:00
/* this.init().then(() => {
2022-08-18 00:11:35 +00:00
this.show();
2022-08-18 00:15:41 +00:00
}); */
2022-08-18 00:11:35 +00:00
}
2022-08-17 17:27:14 +00:00
/**
* 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;
2022-08-18 00:11:35 +00:00
min-width: 280px;
2022-08-17 17:27:14 +00:00
transform: translateX(200px);
2022-08-18 00:15:41 +00:00
color: ${cssManager.bdTheme('#333', '#fff')};
2022-08-17 17:56:22 +00:00
z-index: 250;
2022-08-17 17:27:14 +00:00
opacity: 0;
2022-08-18 00:11:35 +00:00
padding: 16px 32px;
2022-08-17 17:27:14 +00:00
right: 0px;
2022-08-17 17:56:22 +00:00
top: 0px;
bottom: 0px;
2022-08-18 00:15:41 +00:00
background: ${cssManager.bdTheme('#eeeeeb', '#000')};;
2022-08-17 17:27:14 +00:00
border-left: 1px dashed #444;
pointer-events: none;
}
.main.show {
pointer-events: all;
transform: translateX(0px);
opacity: 1;
}
.menuItem {
2022-08-18 00:11:35 +00:00
text-align: left;
2022-08-17 17:27:14 +00:00
padding: 8px;
2022-08-18 00:11:35 +00:00
margin-left: -8px;
margin-right: -8px;
2022-08-17 17:27:14 +00:00
cursor: pointer;
border-radius: 3px;
}
.menuItem:hover {
2022-08-18 00:15:41 +00:00
background: ${cssManager.bdTheme('#CCC', '#333')};;
2022-08-17 17:27:14 +00:00
}
2022-08-18 00:11:35 +00:00
.heading {
text-align: left;
font-size: 24px;
padding: 8px 0px;
2023-08-07 17:13:29 +00:00
font-family: 'Mona Sans', 'Inter', sans-serif;
2022-08-18 00:11:35 +00:00
font-weight: 300;
border-bottom: 1px dashed #444;
margin-top: 16px;
margin-bottom: 16px;
}
2022-08-17 17:27:14 +00:00
`,
];
public render() {
return html`
<div class="main">
2022-08-18 00:11:35 +00:00
<div class="heading">${this.heading}</div>
2022-08-17 17:27:14 +00:00
${this.menuItems.map((menuItem) => {
return html`
<div
class="menuItem"
@click="${() => {
this.hide();
2023-09-13 11:41:56 +00:00
menuItem.action(this);
2022-08-17 17:27:14 +00:00
}}"
>
${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();
}
2022-08-18 00:11:35 +00:00
async disconnectedCallback() {
2022-08-17 17:27:14 +00:00
document.body.removeChild(this.windowLayer);
}
}