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

   1 import {onSelect} from '../services/dom';
   2 import {KeyboardNavigationHandler} from '../services/keyboard-navigation';
   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
  38         // If enabled, Move to body to prevent being trapped within scrollable sections
  39         if (this.moveMenu) {
  40             this.body.appendChild(this.menu);
  41             this.menu.style.position = 'fixed';
  42             this.menu.style.width = `${menuOriginalRect.width}px`;
  43             this.menu.style.left = `${menuOriginalRect.left}px`;
  44             if (dropUpwards) {
  45                 heightOffset = (window.innerHeight - menuOriginalRect.top - toggleHeight / 2);
  46             } else {
  47                 heightOffset = menuOriginalRect.top;
  48             }
  49         }
  50
  51         // Adjust menu to display upwards if near the bottom of the screen
  52         if (dropUpwards) {
  53             this.menu.style.top = 'initial';
  54             this.menu.style.bottom = `${heightOffset}px`;
  55         } else {
  56             this.menu.style.top = `${heightOffset}px`;
  57             this.menu.style.bottom = 'initial';
  58         }
  59
  60         // Set listener to hide on mouse leave or window click
  61         this.menu.addEventListener('mouseleave', this.hide);
  62         window.addEventListener('click', clickEvent => {
  63             if (!this.menu.contains(clickEvent.target)) {
  64                 this.hide();
  65             }
  66         });
  67
  68         // Focus on first input if existing
  69         const input = this.menu.querySelector('input');
  70         if (input !== null) input.focus();
  71
  72         this.showing = true;
  73
  74         const showEvent = new Event('show');
  75         this.container.dispatchEvent(showEvent);
  76
  77         if (event) {
  78             event.stopPropagation();
  79         }
  80     }
  81
  82     hideAll() {
  83         for (const dropdown of window.$components.get('dropdown')) {
  84             dropdown.hide();
  85         }
  86     }
  87
  88     hide() {
  89         this.menu.style.display = 'none';
  90         this.menu.classList.remove('anim', 'menuIn');
  91         this.toggle.setAttribute('aria-expanded', 'false');
  92         this.menu.style.top = '';
  93         this.menu.style.bottom = '';
  94
  95         if (this.moveMenu) {
  96             this.menu.style.position = '';
  97             this.menu.style[this.direction] = '';
  98             this.menu.style.width = '';
  99             this.menu.style.left = '';
 100             this.container.appendChild(this.menu);
 101         }
 102
 103         this.showing = false;
 104     }
 105
 106     setupListeners() {
 107         const keyboardNavHandler = new KeyboardNavigationHandler(this.container, event => {
 108             this.hide();
 109             this.toggle.focus();
 110             if (!this.bubbleEscapes) {
 111                 event.stopPropagation();
 112             }
 113         }, event => {
 114             if (event.target.nodeName === 'INPUT') {
 115                 event.preventDefault();
 116                 event.stopPropagation();
 117             }
 118             this.hide();
 119         });
 120
 121         if (this.moveMenu) {
 122             keyboardNavHandler.shareHandlingToEl(this.menu);
 123         }
 124
 125         // Hide menu on option click
 126         this.container.addEventListener('click', event => {
 127             const possibleChildren = Array.from(this.menu.querySelectorAll('a'));
 128             if (possibleChildren.includes(event.target)) {
 129                 this.hide();
 130             }
 131         });
 132
 133         onSelect(this.toggle, event => {
 134             event.stopPropagation();
 135             this.show(event);
 136             if (event instanceof KeyboardEvent) {
 137                 keyboardNavHandler.focusNext();
 138             }
 139         });
 140     }
 141
 142 }