ZIP Imports: Added API examples, finished testing

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

diff --git a/resources/js/components/dropdown.js b/resources/js/components/dropdown.js
index ed69088b29acae227a9f57557406299a74e71459..d2b044ee1ca871a96136415442b8e74add02c817 100644 (file)
--- a/resources/js/components/dropdown.js
+++ b/resources/js/components/dropdown.js
@@ -1,6 +1,6 @@
-import {onSelect} from "../services/dom";
-import {KeyboardNavigationHandler} from "../services/keyboard-navigation";
-import {Component} from "./component";
+import {findClosestScrollContainer, onSelect} from '../services/dom.ts';
+import {KeyboardNavigationHandler} from '../services/keyboard-navigation.ts';
+import {Component} from './component';

 
 /**
  * Dropdown
 
 /**
  * Dropdown


@@ -33,7 +33,9 @@ export class Dropdown extends Component {
         const menuOriginalRect = this.menu.getBoundingClientRect();
         let heightOffset = 0;
         const toggleHeight = this.toggle.getBoundingClientRect().height;
         const menuOriginalRect = this.menu.getBoundingClientRect();
         let heightOffset = 0;
         const toggleHeight = this.toggle.getBoundingClientRect().height;

-        const dropUpwards = menuOriginalRect.bottom > window.innerHeight;
+        const containerBounds = findClosestScrollContainer(this.menu).getBoundingClientRect();
+        const dropUpwards = menuOriginalRect.bottom > containerBounds.bottom;
+        const containerRect = this.container.getBoundingClientRect();

 
         // If enabled, Move to body to prevent being trapped within scrollable sections
         if (this.moveMenu) {
 
         // If enabled, Move to body to prevent being trapped within scrollable sections
         if (this.moveMenu) {


@@ -41,22 +43,30 @@ export class Dropdown extends Component {
             this.menu.style.position = 'fixed';
             this.menu.style.width = `${menuOriginalRect.width}px`;
             this.menu.style.left = `${menuOriginalRect.left}px`;
             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
         if (dropUpwards) {
             this.menu.style.top = 'initial';
             this.menu.style.bottom = `${heightOffset}px`;
         }
 
         // Adjust menu to display upwards if near the bottom of the screen
         if (dropUpwards) {
             this.menu.style.top = 'initial';
             this.menu.style.bottom = `${heightOffset}px`;

+            const maxHeight = (window.innerHeight - 40) - (window.innerHeight - containerRect.bottom);
+            this.menu.style.maxHeight = `${Math.floor(maxHeight)}px`;

         } else {
             this.menu.style.top = `${heightOffset}px`;
             this.menu.style.bottom = 'initial';
         } else {
             this.menu.style.top = `${heightOffset}px`;
             this.menu.style.bottom = 'initial';

+            const maxHeight = (window.innerHeight - 40) - containerRect.top;
+            this.menu.style.maxHeight = `${Math.floor(maxHeight)}px`;

         }
 
         // Set listener to hide on mouse leave or window click
         this.menu.addEventListener('mouseleave', this.hide);
         }
 
         // 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();
             }
         });
                 this.hide();
             }
         });


@@ -76,7 +86,7 @@ export class Dropdown extends Component {
     }
 
     hideAll() {
     }
 
     hideAll() {

-        for (let dropdown of window.$components.get('dropdown')) {
+        for (const dropdown of window.$components.get('dropdown')) {

             dropdown.hide();
         }
     }
             dropdown.hide();
         }
     }


@@ -87,6 +97,7 @@ export class Dropdown extends Component {
         this.toggle.setAttribute('aria-expanded', 'false');
         this.menu.style.top = '';
         this.menu.style.bottom = '';
         this.toggle.setAttribute('aria-expanded', 'false');
         this.menu.style.top = '';
         this.menu.style.bottom = '';

+        this.menu.style.maxHeight = '';

 
         if (this.moveMenu) {
             this.menu.style.position = '';
 
         if (this.moveMenu) {
             this.menu.style.position = '';


@@ -100,13 +111,13 @@ export class Dropdown extends Component {
     }
 
     setupListeners() {
     }
 
     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();
             }
             this.hide();
             this.toggle.focus();
             if (!this.bubbleEscapes) {
                 event.stopPropagation();
             }

-        }, (event) => {
+        }, event => {

             if (event.target.nodeName === 'INPUT') {
                 event.preventDefault();
                 event.stopPropagation();
             if (event.target.nodeName === 'INPUT') {
                 event.preventDefault();
                 event.stopPropagation();


@@ -120,14 +131,15 @@ export class Dropdown extends Component {
 
         // Hide menu on option click
         this.container.addEventListener('click', event => {
 
         // 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 => {
             event.stopPropagation();
         });
 
         onSelect(this.toggle, event => {
             event.stopPropagation();

+            event.preventDefault();

             this.show(event);
             if (event instanceof KeyboardEvent) {
                 keyboardNavHandler.focusNext();
             this.show(event);
             if (event instanceof KeyboardEvent) {
                 keyboardNavHandler.focusNext();