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

   1
   2 class Notification {
   3
   4     constructor(elem) {
   5         this.elem = elem;
   6         this.type = elem.getAttribute('notification');
   7         this.textElem = elem.querySelector('span');
   8         this.autohide = this.elem.hasAttribute('data-autohide');
   9         this.elem.style.display = 'grid';
  10
  11         window.$events.listen(this.type, text => {
  12             this.show(text);
  13         });
  14         elem.addEventListener('click', this.hide.bind(this));
  15
  16         if (elem.hasAttribute('data-show')) {
  17             setTimeout(() => this.show(this.textElem.textContent), 100);
  18         }
  19
  20         this.hideCleanup = this.hideCleanup.bind(this);
  21     }
  22
  23     show(textToShow = '') {
  24         this.elem.removeEventListener('transitionend', this.hideCleanup);
  25         this.textElem.textContent = textToShow;
  26         this.elem.style.display = 'grid';
  27         setTimeout(() => {
  28             this.elem.classList.add('showing');
  29         }, 1);
  30
  31         if (this.autohide) {
  32             const words = textToShow.split(' ').length;
  33             const timeToShow = Math.max(2000, 1000 + (250 * words));
  34             setTimeout(this.hide.bind(this), timeToShow);
  35         }
  36     }
  37
  38     hide() {
  39         this.elem.classList.remove('showing');
  40         this.elem.addEventListener('transitionend', this.hideCleanup);
  41     }
  42
  43     hideCleanup() {
  44         this.elem.style.display = 'none';
  45         this.elem.removeEventListener('transitionend', this.hideCleanup);
  46     }
  47
  48 }
  49
  50 export default Notification;