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 68962ca288aa2a94563b64414f302c41416197cc..8c8d4fb40a2750db69a15bd1b25acf32482ccd55 100644 (file)
--- 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
         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 {
     };
 
     class InteractiveMermaidViewer {


@@ -361,28 +359,18 @@
         }
 
         showNotification(message, isError = false) {
         }
 
         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() {
         }
 
         destroy() {


@@ -401,9 +389,6 @@
             document.removeEventListener('mousemove', this.boundMouseMoveHandler);
             window.removeEventListener('mouseup', this.boundMouseUpHandler, true);
 
             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
         }
     }
             this.container.innerHTML = ''; // Clear the container's content
         }
     }


@@ -549,22 +534,4 @@
         gap: 5px;
         z-index: 10;
     }
         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
 </style>
\ No newline at end of file