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

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