1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-30 15:42:41 +01:00
BookStack/resources/js/components/header-mobile-toggle.js
Dan Brown e711290d8b
Ran eslint fix on existing codebase
Had to do some manual fixing of the app.js file due to misplaced
comments
2023-04-18 22:20:02 +01:00

41 lines
1.2 KiB
JavaScript

import {Component} from './component';
export class HeaderMobileToggle extends Component {
setup() {
this.elem = this.$el;
this.toggleButton = this.$refs.toggle;
this.menu = this.$refs.menu;
this.open = false;
this.toggleButton.addEventListener('click', this.onToggle.bind(this));
this.onWindowClick = this.onWindowClick.bind(this);
this.onKeyDown = this.onKeyDown.bind(this);
}
onToggle(event) {
this.open = !this.open;
this.menu.classList.toggle('show', this.open);
this.toggleButton.setAttribute('aria-expanded', this.open ? 'true' : 'false');
if (this.open) {
this.elem.addEventListener('keydown', this.onKeyDown);
window.addEventListener('click', this.onWindowClick);
} else {
this.elem.removeEventListener('keydown', this.onKeyDown);
window.removeEventListener('click', this.onWindowClick);
}
event.stopPropagation();
}
onKeyDown(event) {
if (event.code === 'Escape') {
this.onToggle(event);
}
}
onWindowClick(event) {
this.onToggle(event);
}
}