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

   1
   2 class Overlay {
   3
   4     constructor(elem) {
   5         this.container = elem;
   6         elem.addEventListener('click', event => {
   7              if (event.target === elem) return this.hide();
   8         });
   9
  10         window.addEventListener('keyup', event => {
  11             if (event.key === 'Escape') {
  12                 this.hide();
  13             }
  14         });
  15
  16         let closeButtons = elem.querySelectorAll('.popup-header-close');
  17         for (let i=0; i < closeButtons.length; i++) {
  18             closeButtons[i].addEventListener('click', this.hide.bind(this));
  19         }
  20     }
  21
  22     hide() { this.toggle(false); }
  23     show() { this.toggle(true); }
  24
  25     toggle(show = true) {
  26         let start = Date.now();
  27         let duration = 240;
  28
  29         function setOpacity() {
  30             let elapsedTime = (Date.now() - start);
  31             let targetOpacity = show ? (elapsedTime / duration) : 1-(elapsedTime / duration);
  32             this.container.style.opacity = targetOpacity;
  33             if (elapsedTime > duration) {
  34                 this.container.style.display = show ? 'flex' : 'none';
  35                 if (show) {
  36                     this.focusOnBody();
  37                 }
  38                 this.container.style.opacity = '';
  39             } else {
  40                 requestAnimationFrame(setOpacity.bind(this));
  41             }
  42         }
  43
  44         requestAnimationFrame(setOpacity.bind(this));
  45     }
  46
  47     focusOnBody() {
  48         const body = this.container.querySelector('.popup-body');
  49         if (body) {
  50             body.focus();
  51         }
  52     }
  53
  54 }
  55
  56 export default Overlay;