Merge branch 'master' into update_japanese_translation

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

diff --git a/resources/assets/js/components/notification.js b/resources/assets/js/components/notification.js
index 4b809c9351bf545f7e8f1cee257f70695abd4d4b..c352a9c85328d7f9f412d83eb736f08569db48d7 100644 (file)
--- a/resources/assets/js/components/notification.js
+++ b/resources/assets/js/components/notification.js
@@ -6,17 +6,19 @@ class Notification {
         this.type = elem.getAttribute('notification');
         this.textElem = elem.querySelector('span');
         this.autohide = this.elem.hasAttribute('data-autohide');
-        window.Events.listen(this.type, text => {
-            console.log('show', text);
+        window.$events.listen(this.type, text => {
             this.show(text);
         });
         elem.addEventListener('click', this.hide.bind(this));
         if (elem.hasAttribute('data-show')) this.show(this.textElem.textContent);
+
+        this.hideCleanup = this.hideCleanup.bind(this);
     }
 
     show(textToShow = '') {
+        this.elem.removeEventListener('transitionend', this.hideCleanup);
         this.textElem.textContent = textToShow;
-        this.elem.style.display = 'block';
+        this.elem.style.display = 'grid';
         setTimeout(() => {
             this.elem.classList.add('showing');
         }, 1);
@@ -26,13 +28,12 @@ class Notification {
 
     hide() {
         this.elem.classList.remove('showing');
+        this.elem.addEventListener('transitionend', this.hideCleanup);
+    }
 
-        function transitionEnd() {
-            this.elem.style.display = 'none';
-            this.elem.removeEventListener('transitionend', transitionEnd);
-        }
-
-        this.elem.addEventListener('transitionend', transitionEnd.bind(this));
+    hideCleanup() {
+        this.elem.style.display = 'none';
+        this.elem.removeEventListener('transitionend', this.hideCleanup);
     }
 
 }