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

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