From: Alexander Wilms <redacted>
Date: Thu, 26 Jun 2025 21:49:07 +0000 (+0200)
Subject: feat(mermaid-viewer): Use event system for notifications
X-Git-Url: http://source.bookstackapp.com/hacks/commitdiff_plain/c3c836307d49945afd368976176590990b2bb9fe

feat(mermaid-viewer): Use event system for notifications

This commit replaces the custom notification system with the BookStack event system for displaying success and error messages.
If the event system is not available, it falls back to console log.
---

diff --git a/content/mermaid-viewer/head.html b/content/mermaid-viewer/head.html
index 68962ca..8c8d4fb 100644
--- a/content/mermaid-viewer/head.html
+++ b/content/mermaid-viewer/head.html
@@ -33,9 +33,7 @@
         UNLOCK_ICON: 'fa fa-unlock',
         INTERACTIVE_HOVER: 'interactive-hover', // Class for 'grab' cursor state
         INTERACTIVE_PAN: 'interactive-pan',     // Class for 'grabbing' cursor state
-        BUTTON_BASE: 'mermaid-viewer-button-base', // Base class for all viewer buttons
-        NOTIFICATION: 'mermaid-notification', // Keep existing notification classes
-        NOTIFICATION_SHOW: 'show' // Keep existing notification classes
+        BUTTON_BASE: 'mermaid-viewer-button-base' // Base class for all viewer buttons
     };
 
     class InteractiveMermaidViewer {
@@ -361,28 +359,18 @@
         }
 
         showNotification(message, isError = false) {
-            let notification = document.querySelector(`.${CSS_CLASSES.NOTIFICATION}`);
-            if (!notification) {
-                notification = document.createElement('div');
-                notification.className = CSS_CLASSES.NOTIFICATION;
-                document.body.appendChild(notification);
-            }
-            notification.innerHTML = `<i class="fa ${isError ? 'fa-times-circle' : 'fa-check'}"></i> ${message}`;
-            notification.style.background = isError ? '#dc3545' : '#28a745'; // Red for error, green for success
-            // Ensure it's visible before triggering transition
-            notification.style.transform = 'translateX(400px)'; // Reset if previously shown
-            requestAnimationFrame(() => { // Allow repaint
-                notification.classList.add(CSS_CLASSES.NOTIFICATION_SHOW);
-            });
-
-            // Clear any existing timeout to prevent premature hiding if clicked again
-            if (this.notificationTimeout) {
-                clearTimeout(this.notificationTimeout);
+            if (window.$events) {
+                const eventName = isError ? 'error' : 'success';
+                window.$events.emit(eventName, message);
+            } else {
+                // Fallback for if the event system is not available
+                console.warn('BookStack event system not found, falling back to console log for notification.');
+                if (isError) {
+                    console.error(message);
+                } else {
+                    console.log(message);
+                }
             }
-            this.notificationTimeout = setTimeout(() => {
-                notification.classList.remove(CSS_CLASSES.NOTIFICATION_SHOW);
-                this.notificationTimeout = null;
-            }, NOTIFICATION_DISPLAY_TIMEOUT_MS);
         }
 
         destroy() {
@@ -401,9 +389,6 @@
             document.removeEventListener('mousemove', this.boundMouseMoveHandler);
             window.removeEventListener('mouseup', this.boundMouseUpHandler, true);
 
-            if (this.notificationTimeout) {
-                clearTimeout(this.notificationTimeout);
-            }
             this.container.innerHTML = ''; // Clear the container's content
         }
     }
@@ -549,22 +534,4 @@
         gap: 5px;
         z-index: 10;
     }
-
-    .mermaid-notification {
-        position: fixed;
-        top: 20px;
-        right: 20px;
-        background: #28a745;
-        color: white;
-        padding: 12px 16px;
-        border-radius: 6px;
-        transform: translateX(400px);
-        transition: transform 0.3s ease;
-        z-index: 10000;
-        /* Increased z-index to appear above site header */
-    }
-
-    .mermaid-notification.show {
-        transform: translateX(0);
-    }
 </style>
\ No newline at end of file