frayerjj-frontend 0.2.13 → 0.2.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frayerjj-frontend",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "description": "My base frontend for various projects",
   "main": "src/index.js",
   "type": "module",

package/src/modal.js

@@ -23,14 +23,15 @@ export const modal = {
                         buttons = [{ text: 'OK' }];
                     else
                         buttons = [{ text: 'Save', class: 'btn-save' }, { text: 'Cancel' }];
+                    let id = modal.randomId(el.getAttribute('data-bs-target').substring(1));
                     modal.show({
-                        id: el.getAttribute('data-bs-target').substring(1),
+                        id: id,
                         title: el.getAttribute('modal-title'),
                         body: '',
                         class: (el.getAttribute('modal-class') ?? ''),
                         buttons: buttons
                     });
-                    let ajaxModal = document.querySelector(el.getAttribute('data-bs-target')),
+                    let ajaxModal = document.getElementById(id),
                         bsAjaxModal = bootstrap.Modal.getOrCreateInstance(ajaxModal),
                         ajaxModalBody = ajaxModal.querySelector('.modal-body');
                     ajaxModal.addEventListener('hidden.bs.modal', ev => {
@@ -97,7 +98,8 @@ export const modal = {
 
     alert: (msg, title = "Alert", button = "OK") => {
         message.verbose('Building Alert Modal');
-        modal.show({ id: 'alert-modal', title, body: `<p>${msg}</p>`, buttons: [{ text: button }] });
+        let id = modal.randomId();
+        modal.show({ id: id, title, body: `<p>${msg}</p>`, buttons: [{ text: button }] });
     },
 
     build: {
@@ -258,8 +260,9 @@ export const modal = {
 
     confirm: (msg, onConfirm, onCancel, title = "Are you sure?", buttonYes = "Yes", buttonNo = "No") => {
         message.verbose('Building Confirm Modal');
+        let id = modal.randomId();
         modal.show({
-            id: 'confirm-modal',
+            id: id,
             title,
             body: `<p>${msg}</p>`,
             buttons: [
@@ -271,22 +274,24 @@ export const modal = {
         });
     },
 
+    randomId: (base = 'modal') => {
+        return `${base}-${Date.now()}-${Math.random().toString(36).substr(2, 5)}`;
+    },
+
     show: config => {
         modal.close();
         message.verbose('Showing Modal');
         document.body.appendChild(modal.build.modal(config));
-        setTimeout(() => {
-            let modalEl = document.getElementById(config.id);
-            let bsModal = new bootstrap.Modal(modalEl);
-            modalEl.addEventListener('hidden.bs.modal', () => modalEl.remove());
-            modalEl.querySelectorAll('[data-action]').forEach(button => 
-                button.addEventListener('click', () => {
-                    if (config[button.dataset.action]) config[button.dataset.action]();
-                    bsModal.hide();
-                })
-            );
-            bsModal.show();
-        }, 100); // Delay to allow DOM to update
+        let modalEl = document.getElementById(config.id);
+        let bsModal = new bootstrap.Modal(modalEl);
+        modalEl.addEventListener('hidden.bs.modal', () => modalEl.remove());
+        modalEl.querySelectorAll('[data-action]').forEach(button => 
+            button.addEventListener('click', () => {
+                if (config[button.dataset.action]) config[button.dataset.action]();
+                bsModal.hide();
+            })
+        );
+        bsModal.show();
     }
     
 };