Merge pull request #2791 from BookStackApp/attachments_open_in_browser

[bookstack] / resources / js / components / header-mobile-toggle.js

diff --git a/resources/js/components/header-mobile-toggle.js b/resources/js/components/header-mobile-toggle.js
index eccd4b8f0a6b25e722b1754cd6c611db1ed3ac64..99737bfb8b0fb741564a5c854d566fd3f774067a 100644 (file)
--- a/resources/js/components/header-mobile-toggle.js
+++ b/resources/js/components/header-mobile-toggle.js
@@ -1,31 +1,41 @@
 
 class HeaderMobileToggle {
 
 
 class HeaderMobileToggle {
 

-    constructor(elem) {
-        this.elem = elem;
-        this.toggleButton = elem.querySelector('.mobile-menu-toggle');
-        this.menu = elem.querySelector('.header-links');
-        this.open = false;
+    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.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);
     }
 
     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) {
         if (this.open) {

+            this.elem.addEventListener('keydown', this.onKeyDown);

             window.addEventListener('click', this.onWindowClick)
         } else {
             window.addEventListener('click', this.onWindowClick)
         } else {

+            this.elem.removeEventListener('keydown', this.onKeyDown);

             window.removeEventListener('click', this.onWindowClick)
         }
         event.stopPropagation();
     }
 
             window.removeEventListener('click', this.onWindowClick)
         }
         event.stopPropagation();
     }
 

+    onKeyDown(event) {
+        if (event.code === 'Escape') {
+            this.onToggle(event);
+        }
+    }
+

     onWindowClick(event) {
         this.onToggle(event);
     }
 
 }
 
     onWindowClick(event) {
         this.onToggle(event);
     }
 
 }
 

-module.exports = HeaderMobileToggle;
\ No newline at end of file
+export default HeaderMobileToggle;
\ No newline at end of file