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

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