respective book and chapter structure added.

[bookstack] / resources / js / components / notification.js

diff --git a/resources/js/components/notification.js b/resources/js/components/notification.js
index 35bab4ea656b1c052e875fac2bcdf0e4ef27d268..8a1ef922a97a5870d2cf0683204a2e46e3769631 100644 (file)
--- a/resources/js/components/notification.js
+++ b/resources/js/components/notification.js
@@ -1,19 +1,21 @@
+import {Component} from './component';

 
 

-class Notification {
+export class Notification extends Component {

 
 

-    constructor(elem) {
-        this.elem = elem;
-        this.type = elem.getAttribute('notification');
-        this.textElem = elem.querySelector('span');
-        this.autohide = this.elem.hasAttribute('data-autohide');
-        this.elem.style.display = 'grid';
+    setup() {
+        this.container = this.$el;
+        this.type = this.$opts.type;
+        this.textElem = this.container.querySelector('span');
+        this.autoHide = this.$opts.autoHide === 'true';
+        this.initialShow = this.$opts.show === 'true';
+        this.container.style.display = 'grid';

 
         window.$events.listen(this.type, text => {
             this.show(text);
         });
 
         window.$events.listen(this.type, text => {
             this.show(text);
         });

-        elem.addEventListener('click', this.hide.bind(this));
+        this.container.addEventListener('click', this.hide.bind(this));

 
 

-        if (elem.hasAttribute('data-show')) {
+        if (this.initialShow) {

             setTimeout(() => this.show(this.textElem.textContent), 100);
         }
 
             setTimeout(() => this.show(this.textElem.textContent), 100);
         }
 


@@ -21,14 +23,14 @@ class Notification {
     }
 
     show(textToShow = '') {
     }
 
     show(textToShow = '') {

-        this.elem.removeEventListener('transitionend', this.hideCleanup);
+        this.container.removeEventListener('transitionend', this.hideCleanup);

         this.textElem.textContent = textToShow;
         this.textElem.textContent = textToShow;

-        this.elem.style.display = 'grid';
+        this.container.style.display = 'grid';

         setTimeout(() => {
         setTimeout(() => {

-            this.elem.classList.add('showing');
+            this.container.classList.add('showing');

         }, 1);
 
         }, 1);
 

-        if (this.autohide) {
+        if (this.autoHide) {

             const words = textToShow.split(' ').length;
             const timeToShow = Math.max(2000, 1000 + (250 * words));
             setTimeout(this.hide.bind(this), timeToShow);
             const words = textToShow.split(' ').length;
             const timeToShow = Math.max(2000, 1000 + (250 * words));
             setTimeout(this.hide.bind(this), timeToShow);


@@ -36,15 +38,13 @@ class Notification {
     }
 
     hide() {
     }
 
     hide() {

-        this.elem.classList.remove('showing');
-        this.elem.addEventListener('transitionend', this.hideCleanup);
+        this.container.classList.remove('showing');
+        this.container.addEventListener('transitionend', this.hideCleanup);

     }
 
     hideCleanup() {
     }
 
     hideCleanup() {

-        this.elem.style.display = 'none';
-        this.elem.removeEventListener('transitionend', this.hideCleanup);
+        this.container.style.display = 'none';
+        this.container.removeEventListener('transitionend', this.hideCleanup);

     }
 
 }
     }
 
 }

-
-export default Notification;
\ No newline at end of file