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

   1 import {fadeIn, fadeOut} from "../services/animations";
   2 import {onSelect} from "../services/dom";
   3
   4 /**
   5  * Popup window that will contain other content.
   6  * This component provides the show/hide functionality
   7  * with the ability for popup@hide child references to close this.
   8  * @extends {Component}
   9  */
  10 class Popup {
  11
  12     setup() {
  13         this.container = this.$el;
  14         this.hideButtons = this.$manyRefs.hide || [];
  15
  16         this.onkeyup = null;
  17         this.onHide = null;
  18         this.setupListeners();
  19     }
  20
  21     setupListeners() {
  22         let lastMouseDownTarget = null;
  23         this.container.addEventListener('mousedown', event => {
  24             lastMouseDownTarget = event.target;
  25         });
  26
  27         this.container.addEventListener('click', event => {
  28             if (event.target === this.container && lastMouseDownTarget === this.container) {
  29                 return this.hide();
  30             }
  31         });
  32
  33         onSelect(this.hideButtons, e => this.hide());
  34     }
  35
  36     hide(onComplete = null) {
  37         fadeOut(this.container, 120, onComplete);
  38         if (this.onkeyup) {
  39             window.removeEventListener('keyup', this.onkeyup);
  40             this.onkeyup = null;
  41         }
  42         if (this.onHide) {
  43             this.onHide();
  44         }
  45     }
  46
  47     show(onComplete = null, onHide = null) {
  48         fadeIn(this.container, 120, onComplete);
  49
  50         this.onkeyup = (event) => {
  51             if (event.key === 'Escape') {
  52                 this.hide();
  53             }
  54         };
  55         window.addEventListener('keyup', this.onkeyup);
  56         this.onHide = onHide;
  57     }
  58
  59 }
  60
  61 export default Popup;