BookStack Code Mirror - bookstack/blob - resources/js/components/dropdown.js

   1 import {onSelect} from '../services/dom.ts';
   2 import {KeyboardNavigationHandler} from '../services/keyboard-navigation.ts';
   3 import {Component} from './component';
   4
   5 /**
   6  * Dropdown
   7  * Provides some simple logic to create simple dropdown menus.
   8  */
   9 export class Dropdown extends Component {
  10
  11     setup() {
  12         this.container = this.$el;
  13         this.menu = this.$refs.menu;
  14         this.toggle = this.$refs.toggle;
  15         this.moveMenu = this.$opts.moveMenu;
  16         this.bubbleEscapes = this.$opts.bubbleEscapes === 'true';
  17
  18         this.direction = (document.dir === 'rtl') ? 'right' : 'left';
  19         this.body = document.body;
  20         this.showing = false;
  21
  22         this.hide = this.hide.bind(this);
  23         this.setupListeners();
  24     }
  25
  26     show(event = null) {
  27         this.hideAll();
  28
  29         this.menu.style.display = 'block';
  30         this.menu.classList.add('anim', 'menuIn');
  31         this.toggle.setAttribute('aria-expanded', 'true');
  32
  33         const menuOriginalRect = this.menu.getBoundingClientRect();
  34         let heightOffset = 0;
  35         const toggleHeight = this.toggle.getBoundingClientRect().height;
  36         const dropUpwards = menuOriginalRect.bottom > window.innerHeight;
  37         const containerRect = this.container.getBoundingClientRect();
  38
  39         // If enabled, Move to body to prevent being trapped within scrollable sections
  40         if (this.moveMenu) {
  41             this.body.appendChild(this.menu);
  42             this.menu.style.position = 'fixed';
  43             this.menu.style.width = `${menuOriginalRect.width}px`;
  44             this.menu.style.left = `${menuOriginalRect.left}px`;
  45             if (dropUpwards) {
  46                 heightOffset = (window.innerHeight - menuOriginalRect.top - toggleHeight / 2);
  47             } else {
  48                 heightOffset = menuOriginalRect.top;
  49             }
  50         }
  51
  52         // Adjust menu to display upwards if near the bottom of the screen
  53         if (dropUpwards) {
  54             this.menu.style.top = 'initial';
  55             this.menu.style.bottom = `${heightOffset}px`;
  56             const maxHeight = (window.innerHeight - 40) - (window.innerHeight - containerRect.bottom);
  57             this.menu.style.maxHeight = `${Math.floor(maxHeight)}px`;
  58         } else {
  59             this.menu.style.top = `${heightOffset}px`;
  60             this.menu.style.bottom = 'initial';
  61             const maxHeight = (window.innerHeight - 40) - containerRect.top;
  62             this.menu.style.maxHeight = `${Math.floor(maxHeight)}px`;
  63         }
  64
  65         // Set listener to hide on mouse leave or window click
  66         this.menu.addEventListener('mouseleave', this.hide);
  67         window.addEventListener('click', clickEvent => {
  68             if (!this.menu.contains(clickEvent.target)) {
  69                 this.hide();
  70             }
  71         });
  72
  73         // Focus on first input if existing
  74         const input = this.menu.querySelector('input');
  75         if (input !== null) input.focus();
  76
  77         this.showing = true;
  78
  79         const showEvent = new Event('show');
  80         this.container.dispatchEvent(showEvent);
  81
  82         if (event) {
  83             event.stopPropagation();
  84         }
  85     }
  86
  87     hideAll() {
  88         for (const dropdown of window.$components.get('dropdown')) {
  89             dropdown.hide();
  90         }
  91     }
  92
  93     hide() {
  94         this.menu.style.display = 'none';
  95         this.menu.classList.remove('anim', 'menuIn');
  96         this.toggle.setAttribute('aria-expanded', 'false');
  97         this.menu.style.top = '';
  98         this.menu.style.bottom = '';
  99         this.menu.style.maxHeight = '';
 100
 101         if (this.moveMenu) {
 102             this.menu.style.position = '';
 103             this.menu.style[this.direction] = '';
 104             this.menu.style.width = '';
 105             this.menu.style.left = '';
 106             this.container.appendChild(this.menu);
 107         }
 108
 109         this.showing = false;
 110     }
 111
 112     setupListeners() {
 113         const keyboardNavHandler = new KeyboardNavigationHandler(this.container, event => {
 114             this.hide();
 115             this.toggle.focus();
 116             if (!this.bubbleEscapes) {
 117                 event.stopPropagation();
 118             }
 119         }, event => {
 120             if (event.target.nodeName === 'INPUT') {
 121                 event.preventDefault();
 122                 event.stopPropagation();
 123             }
 124             this.hide();
 125         });
 126
 127         if (this.moveMenu) {
 128             keyboardNavHandler.shareHandlingToEl(this.menu);
 129         }
 130
 131         // Hide menu on option click
 132         this.container.addEventListener('click', event => {
 133             const possibleChildren = Array.from(this.menu.querySelectorAll('a'));
 134             if (possibleChildren.includes(event.target)) {
 135                 this.hide();
 136             }
 137         });
 138
 139         onSelect(this.toggle, event => {
 140             event.stopPropagation();
 141             event.preventDefault();
 142             this.show(event);
 143             if (event instanceof KeyboardEvent) {
 144                 keyboardNavHandler.focusNext();
 145             }
 146         });
 147     }
 148
 149 }