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

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