frayerjj-frontend 0.2.13 → 0.2.26

package/package.json

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

package/src/modal.js

@@ -1,4 +1,4 @@
-import * as bootstrap from 'bootstrap';
+import { Modal } from 'bootstrap';
 import { ajax } from './ajax.js';
 import { message } from './message.js';
 
@@ -23,19 +23,20 @@ export const modal = {
                         buttons = [{ text: 'OK' }];
                     else
                         buttons = [{ text: 'Save', class: 'btn-save' }, { text: 'Cancel' }];
-                    modal.show({
-                        id: el.getAttribute('data-bs-target').substring(1),
+                    let randomId = modal.randomId('ajax');
+                    document.querySelector('body').insertAdjacentHTML('beforeend', modal.build.modal({
+                        id: randomId,
                         title: el.getAttribute('modal-title'),
                         body: '',
                         class: (el.getAttribute('modal-class') ?? ''),
                         buttons: buttons
-                    });
-                    let ajaxModal = document.querySelector(el.getAttribute('data-bs-target')),
-                        bsAjaxModal = bootstrap.Modal.getOrCreateInstance(ajaxModal),
+                    }));
+                    let ajaxModal = document.getElementById(randomId),
                         ajaxModalBody = ajaxModal.querySelector('.modal-body');
                     ajaxModal.addEventListener('hidden.bs.modal', ev => {
                         ev.target.remove();
                     });
+                    let bsAjaxModal = Modal.getOrCreateInstance(ajaxModal);
                     bsAjaxModal.show();
                     loading.start(1, ajaxModalBody);
                     message.verbose('Loading AJAX Modal');
@@ -97,7 +98,20 @@ 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 randomId = modal.randomId('confirm');
+        document.querySelector('body').insertAdjacentHTML('beforeend', modal.build.modal({
+            id: randomId,
+            title: title,
+            body: '<p>' + msg + '</p>',
+            buttons: [ { text: button } ]
+        }));
+        let alertModal = document.getElementById(randomId),
+            bsAlertModal = Modal.getOrCreateInstance(alertModal);
+        alertModal.addEventListener('hidden.bs.modal', ev => {
+            ev.target.remove();
+        });
+        modal.close();
+        bsAlertModal.show();
     },
 
     build: {
@@ -179,7 +193,6 @@ export const modal = {
             modal.setAttribute('tabindex', '-1');
             modal.setAttribute('role', 'dialog');
             modal.setAttribute('aria-labelledby', vars.title);
-            modal.setAttribute('aria-hidden', 'true');
     
             // Modal dialog
             let modalDialog = document.createElement('div');
@@ -251,42 +264,39 @@ export const modal = {
     close: () => {
         message.verbose('Closing Modals');
         document.querySelectorAll('.modal').forEach(modal => {
-            let bsModal = bootstrap.Modal.getOrCreateInstance(modal);
+            let bsModal = Modal.getOrCreateInstance(modal);
             if (bsModal) bsModal.hide();
         });
     },
 
     confirm: (msg, onConfirm, onCancel, title = "Are you sure?", buttonYes = "Yes", buttonNo = "No") => {
         message.verbose('Building Confirm Modal');
-        modal.show({
-            id: 'confirm-modal',
-            title,
-            body: `<p>${msg}</p>`,
+        let randomId = modal.randomId('confirm');
+        document.querySelector('body').insertAdjacentHTML('beforeend', modal.build.modal({
+            id: randomId,
+            title: title,
+            body: '<p>' + msg + '</p>',
             buttons: [
-                { text: buttonYes, class: 'btn-confirm btn-primary', action: 'onConfirm' },
-                { text: buttonNo, class: 'btn-outline-danger', action: 'onCancel' }
-            ],
-            onConfirm,
-            onCancel
+                { text: buttonYes, class: 'btn-confirm' },
+                { text: buttonNo, class: 'btn-outline-danger' } ]
+        }));
+        let confirmModal = document.getElementById(randomId),
+            bsConfirmModal = Modal.getOrCreateInstance(confirmModal);
+        confirmModal.addEventListener('hidden.bs.modal', ev => {
+            ev.target.remove();
+        });
+        confirmModal.querySelector('.btn-confirm').addEventListener('click', () => {
+            onConfirm();
         });
+        confirmModal.querySelector('.btn-outline-danger').addEventListener('click', () => {
+            onCancel();
+        });
+        modal.close();
+        bsConfirmModal.show();
     },
 
-    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
+    randomId: (base = 'modal') => {
+        return `${base}-${Date.now()}-${Math.random().toString(36).slice(2, 5)}`;
     }
     
 };