BookStack Code Mirror - bookstack/blob - resources/js/components/header-mobile-toggle.js

   1 import {Component} from './component';
   2
   3 export class HeaderMobileToggle extends Component {
   4
   5     setup() {
   6         this.elem = this.$el;
   7         this.toggleButton = this.$refs.toggle;
   8         this.menu = this.$refs.menu;
   9
  10         this.open = false;
  11         this.toggleButton.addEventListener('click', this.onToggle.bind(this));
  12         this.onWindowClick = this.onWindowClick.bind(this);
  13         this.onKeyDown = this.onKeyDown.bind(this);
  14     }
  15
  16     onToggle(event) {
  17         this.open = !this.open;
  18         this.menu.classList.toggle('show', this.open);
  19         this.toggleButton.setAttribute('aria-expanded', this.open ? 'true' : 'false');
  20         if (this.open) {
  21             this.elem.addEventListener('keydown', this.onKeyDown);
  22             window.addEventListener('click', this.onWindowClick);
  23         } else {
  24             this.elem.removeEventListener('keydown', this.onKeyDown);
  25             window.removeEventListener('click', this.onWindowClick);
  26         }
  27         event.stopPropagation();
  28     }
  29
  30     onKeyDown(event) {
  31         if (event.code === 'Escape') {
  32             this.onToggle(event);
  33         }
  34     }
  35
  36     onWindowClick(event) {
  37         this.onToggle(event);
  38     }
  39
  40 }