mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-27 12:41:58 +00:00
![Dan Brown](/assets/img/avatar_default.png)
Intended to fix issues raised in #2681. Changes up the tri-layout tabs, and the main header menu toggle, to be buttons while adding better text and keyboard controls. Updated the component format of a few elements along the way.
41 lines
1.1 KiB
JavaScript
41 lines
1.1 KiB
JavaScript
|
|
class HeaderMobileToggle {
|
|
|
|
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);
|
|
}
|
|
|
|
}
|
|
|
|
export default HeaderMobileToggle; |