Updated command classes to include "Command" in name

[bookstack] / resources / js / components / dropdown.js

diff --git a/resources/js/components/dropdown.js b/resources/js/components/dropdown.js
index 514a6c138962ec17ec30770d78f45aca71de187d..b68f332b6f13a04a2d2db7fd706cfae0d42dc8bd 100644 (file)
--- a/resources/js/components/dropdown.js
+++ b/resources/js/components/dropdown.js
@@ -1,12 +1,12 @@
-import {onSelect} from "../services/dom";
-import {KeyboardNavigationHandler} from "../services/keyboard-navigation";
+import {onSelect} from '../services/dom';
+import {KeyboardNavigationHandler} from '../services/keyboard-navigation';
+import {Component} from './component';
 
 /**
  * Dropdown
  * Provides some simple logic to create simple dropdown menus.
- * @extends {Component}
  */
-class DropDown {
+export class Dropdown extends Component {
 
     setup() {
         this.container = this.$el;
@@ -41,7 +41,11 @@ class DropDown {
             this.menu.style.position = 'fixed';
             this.menu.style.width = `${menuOriginalRect.width}px`;
             this.menu.style.left = `${menuOriginalRect.left}px`;
-            heightOffset = dropUpwards ? (window.innerHeight - menuOriginalRect.top  - toggleHeight / 2) : menuOriginalRect.top;
+            if (dropUpwards) {
+                heightOffset = (window.innerHeight - menuOriginalRect.top - toggleHeight / 2);
+            } else {
+                heightOffset = menuOriginalRect.top;
+            }
         }
 
         // Adjust menu to display upwards if near the bottom of the screen
@@ -55,8 +59,8 @@ class DropDown {
 
         // Set listener to hide on mouse leave or window click
         this.menu.addEventListener('mouseleave', this.hide);
-        window.addEventListener('click', event => {
-            if (!this.menu.contains(event.target)) {
+        window.addEventListener('click', clickEvent => {
+            if (!this.menu.contains(clickEvent.target)) {
                 this.hide();
             }
         });
@@ -76,7 +80,7 @@ class DropDown {
     }
 
     hideAll() {
-        for (let dropdown of window.components.dropdown) {
+        for (const dropdown of window.$components.get('dropdown')) {
             dropdown.hide();
         }
     }
@@ -100,13 +104,13 @@ class DropDown {
     }
 
     setupListeners() {
-        const keyboardNavHandler = new KeyboardNavigationHandler(this.container, (event) => {
+        const keyboardNavHandler = new KeyboardNavigationHandler(this.container, event => {
             this.hide();
             this.toggle.focus();
             if (!this.bubbleEscapes) {
                 event.stopPropagation();
             }
-        }, (event) => {
+        }, event => {
             if (event.target.nodeName === 'INPUT') {
                 event.preventDefault();
                 event.stopPropagation();
@@ -120,10 +124,10 @@ class DropDown {
 
         // Hide menu on option click
         this.container.addEventListener('click', event => {
-             const possibleChildren = Array.from(this.menu.querySelectorAll('a'));
-             if (possibleChildren.includes(event.target)) {
-                 this.hide();
-             }
+            const possibleChildren = Array.from(this.menu.querySelectorAll('a'));
+            if (possibleChildren.includes(event.target)) {
+                this.hide();
+            }
         });
 
         onSelect(this.toggle, event => {
@@ -136,5 +140,3 @@ class DropDown {
     }
 
 }
-
-export default DropDown;
\ No newline at end of file