BookStack Code Mirror - bookstack/blob - resources/assets/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         let closeButtons = elem.querySelectorAll('.overlay-close');
  10         for (let i=0; i < closeButtons.length; i++) {
  11             closeButtons[i].addEventListener('click', this.hide.bind(this));
  12         }
  13     }
  14
  15     toggle(show = true) {
  16         let start = Date.now();
  17         let duration = 240;
  18
  19         function setOpacity() {
  20             let elapsedTime = (Date.now() - start);
  21             let targetOpacity = show ? (elapsedTime / duration) : 1-(elapsedTime / duration);
  22             this.container.style.opacity = targetOpacity;
  23             if (elapsedTime > duration) {
  24                 this.container.style.display = show ? 'flex' : 'none';
  25                 this.container.style.opacity = '';
  26             } else {
  27                 requestAnimationFrame(setOpacity.bind(this));
  28             }
  29         }
  30
  31         requestAnimationFrame(setOpacity.bind(this));
  32     }
  33
  34     hide() { this.toggle(false); }
  35     show() { this.toggle(true); }
  36
  37 }
  38
  39 module.exports = Overlay;