wip

app/static/js/modal.js

@@ -5,44 +5,59 @@ document.addEventListener('DOMContentLoaded', function () {
 });
 
 function initializeModals() {
-    // Setup modal triggers
-    document.querySelectorAll('[data-toggle="modal"]').forEach(trigger => {
-        const targetId = trigger.getAttribute('data-target');
-        const targetModal = document.querySelector(targetId);
+    // Get all modals
+    const modals = document.querySelectorAll('.modal');
 
-        if (targetModal) {
-            trigger.addEventListener('click', function (e) {
-                e.preventDefault();
-                openModal(targetId);
+    // Initialize each modal
+    modals.forEach(modal => {
+        // Get close button
+        const closeBtn = modal.querySelector('.modal-close');
+        const cancelBtn = modal.querySelector('.modal-cancel');
+
+        // Close modal when close button is clicked
+        if (closeBtn) {
+            closeBtn.addEventListener('click', function () {
+                modal.classList.remove('active');
             });
         }
-    });
 
-    // Setup direct modal triggers (like the new folder button)
-    const newFolderBtn = document.getElementById('new-folder-btn');
-    if (newFolderBtn) {
-        newFolderBtn.addEventListener('click', function () {
-            openModal('#new-folder-modal');
-        });
-    }
+        // Close modal when cancel button is clicked
+        if (cancelBtn) {
+            cancelBtn.addEventListener('click', function () {
+                modal.classList.remove('active');
+            });
+        }
 
-    const emptyNewFolderBtn = document.getElementById('empty-new-folder-btn');
-    if (emptyNewFolderBtn) {
-        emptyNewFolderBtn.addEventListener('click', function () {
-            openModal('#new-folder-modal');
-        });
-    }
-
-    // Close buttons
-    document.querySelectorAll('.modal-close, .modal-cancel').forEach(closeBtn => {
-        closeBtn.addEventListener('click', function () {
-            const modal = this.closest('.modal');
-            if (modal) {
-                closeModal('#' + modal.id);
+        // Close modal when clicking outside
+        modal.addEventListener('click', function (e) {
+            if (e.target === modal) {
+                modal.classList.remove('active');
             }
         });
     });
 
+    // Open modal when trigger is clicked
+    document.querySelectorAll('[data-modal]').forEach(trigger => {
+        trigger.addEventListener('click', function () {
+            const modalId = this.dataset.modal;
+            const modal = document.getElementById(modalId);
+            if (modal) {
+                modal.classList.add('active');
+            }
+        });
+    });
+
+    // New folder button
+    const newFolderBtn = document.getElementById('new-folder-btn');
+    if (newFolderBtn) {
+        newFolderBtn.addEventListener('click', function () {
+            const modal = document.getElementById('new-folder-modal');
+            if (modal) {
+                modal.classList.add('active');
+            }
+        });
+    }
+
     // Close on background click
     document.querySelectorAll('.modal').forEach(modal => {
         modal.addEventListener('click', function (e) {