feat: DrawerComonent

2025-09-16 14:35:09 +02:00
parent f9dc811239
commit 27f93959ff
5 changed files with 177 additions and 157 deletions
--- a/public/scripts/components/DrawerComponent.js
+++ b/public/scripts/components/DrawerComponent.js
@@ -0,0 +1,130 @@
+// Reusable Drawer Component for desktop slide-in panels
+class DrawerComponent {
+    constructor() {
+        this.detailsDrawer = null;
+        this.detailsDrawerContent = null;
+        this.detailsDrawerBackdrop = null;
+        this.activeDrawerComponent = null;
+    }
+
+    // Determine if we should use desktop drawer behavior
+    isDesktop() {
+        try {
+            return window && window.innerWidth >= 1024; // desktop threshold
+        } catch (_) {
+            return false;
+        }
+    }
+
+    ensureDrawer() {
+        if (this.detailsDrawer) return;
+        
+        // Create backdrop
+        this.detailsDrawerBackdrop = document.createElement('div');
+        this.detailsDrawerBackdrop.className = 'details-drawer-backdrop';
+        document.body.appendChild(this.detailsDrawerBackdrop);
+
+        // Create drawer
+        this.detailsDrawer = document.createElement('div');
+        this.detailsDrawer.className = 'details-drawer';
+
+        // Header with close button
+        const header = document.createElement('div');
+        header.className = 'details-drawer-header';
+        header.innerHTML = `
+            <div class="drawer-title">Node Details</div>
+            <button class="drawer-close" aria-label="Close">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M18 6L6 18M6 6l12 12"/>
+                </svg>
+            </button>
+        `;
+        this.detailsDrawer.appendChild(header);
+
+        // Content container
+        this.detailsDrawerContent = document.createElement('div');
+        this.detailsDrawerContent.className = 'details-drawer-content';
+        this.detailsDrawer.appendChild(this.detailsDrawerContent);
+
+        document.body.appendChild(this.detailsDrawer);
+
+        // Close handlers
+        const close = () => this.closeDrawer();
+        header.querySelector('.drawer-close').addEventListener('click', close);
+        this.detailsDrawerBackdrop.addEventListener('click', close);
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') close();
+        });
+    }
+
+    openDrawer(title, contentCallback, errorCallback) {
+        this.ensureDrawer();
+
+        // Set drawer title
+        const titleEl = this.detailsDrawer.querySelector('.drawer-title');
+        if (titleEl) {
+            titleEl.textContent = title;
+        }
+
+        // Clear previous component if any
+        if (this.activeDrawerComponent && typeof this.activeDrawerComponent.unmount === 'function') {
+            try { 
+                this.activeDrawerComponent.unmount(); 
+            } catch (_) {}
+        }
+        this.detailsDrawerContent.innerHTML = '<div class="loading-details">Loading detailed information...</div>';
+
+        // Execute content callback
+        try {
+            contentCallback(this.detailsDrawerContent, (component) => {
+                this.activeDrawerComponent = component;
+            });
+        } catch (error) {
+            logger.error('Failed to load drawer content:', error);
+            if (errorCallback) {
+                errorCallback(error);
+            } else {
+                this.detailsDrawerContent.innerHTML = `
+                    <div class="error">
+                        <strong>Error loading content:</strong><br>
+                        ${this.escapeHtml ? this.escapeHtml(error.message) : error.message}
+                    </div>
+                `;
+            }
+        }
+
+        // Open drawer
+        this.detailsDrawer.classList.add('open');
+        this.detailsDrawerBackdrop.classList.add('visible');
+    }
+
+    closeDrawer() {
+        if (this.detailsDrawer) this.detailsDrawer.classList.remove('open');
+        if (this.detailsDrawerBackdrop) this.detailsDrawerBackdrop.classList.remove('visible');
+    }
+
+    // Clean up drawer elements
+    destroy() {
+        if (this.detailsDrawer && this.detailsDrawer.parentNode) {
+            this.detailsDrawer.parentNode.removeChild(this.detailsDrawer);
+        }
+        if (this.detailsDrawerBackdrop && this.detailsDrawerBackdrop.parentNode) {
+            this.detailsDrawerBackdrop.parentNode.removeChild(this.detailsDrawerBackdrop);
+        }
+        
+        this.detailsDrawer = null;
+        this.detailsDrawerContent = null;
+        this.detailsDrawerBackdrop = null;
+        this.activeDrawerComponent = null;
+    }
+
+    // Helper method for HTML escaping (can be overridden)
+    escapeHtml(text) {
+        if (typeof text !== 'string') return text;
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+}
+
+window.DrawerComponent = DrawerComponent;