54 lines
1.5 KiB
JavaScript
54 lines
1.5 KiB
JavaScript
|
|
class FCMenu extends HTMLElement {
|
|
#rollBack;
|
|
|
|
connectedCallback() {
|
|
const windowsChangeEvent = ('onorientationchange' in window) ? 'orientationchange':'resize';
|
|
window.addEventListener(windowsChangeEvent, this.closeMenu.bind(this));
|
|
}
|
|
|
|
toggleHorizontal() {
|
|
this.classList.remove('closing');
|
|
for(const element of this.querySelectorAll('.fc-toggle-menu')) {
|
|
element.classList.toggle('pure-menu-horizontal');
|
|
}
|
|
}
|
|
|
|
toggleMenu() {
|
|
// Set timeout so that the panel has a chance to roll up before the menu switches states.
|
|
if (this.classList.contains('open')) {
|
|
this.classList.add('closing');
|
|
this.#rollBack = setTimeout(this.toggleHorizontal.bind(this), 500);
|
|
}
|
|
else {
|
|
if (this.classList.contains('closing')) {
|
|
clearTimeout(this.#rollBack);
|
|
} else {
|
|
this.toggleHorizontal();
|
|
}
|
|
}
|
|
this.classList.toggle('open');
|
|
};
|
|
|
|
closeMenu() {
|
|
if (this.classList.contains('open')) {
|
|
this.toggleMenu();
|
|
}
|
|
}
|
|
}
|
|
window.customElements.define('fc-menu', FCMenu)
|
|
|
|
class FCMenuToggleButton extends HTMLElement {
|
|
connectedCallback() {
|
|
this.addEventListener('click', this.onClick.bind(this))
|
|
}
|
|
|
|
onClick() {
|
|
const menu = this.closest("fc-menu");
|
|
console.assert(menu != null);
|
|
menu.toggleMenu();
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
window.customElements.define('fc-menu-toggle-button', FCMenuToggleButton)
|