frayerjj-frontend 0.2.10 → 0.2.12

package/package.json

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

package/src/modal.js

@@ -3,119 +3,6 @@ import { ajax } from './ajax.js';
 import { message } from './message.js';
 
 export const modal = {
-
-    buildLine: vars => {
-        let row = '<div class="row ' + (vars.rowClass ?? '') + '">';
-        if (vars.label) row += '<label class="fw-bold text-dark">' + vars.label + "</label>";
-        row += '</div>';
-        return row;
-    },
-
-    buildInput: vars => {
-        let input = '';
-        if (vars.type == 'textarea') input += '<textarea class="form-control ';
-        if (vars.type == 'select') input += '<select class="form-select ';
-        else input += '<input type="' + vars.type + '" value="' + vars.value + '" placeholder="' + (vars.placeholder ?? vars.label) + '" class="form-control ';
-        input += (vars.inputClass ?? '') + '" id="' + vars.id + '" aria-label="' + (vars.placeholder ?? vars.label) + '" ' + (vars.checked ? 'checked' : '') + '>';
-        if (vars.type == 'textarea') input += vars.value + '</textarea>'
-        if (vars.type == 'select') input += '</select>';
-        return input;
-    },
-
-    buildInputLine: vars => {
-        let row = '<div class="row ' + (vars.rowClass ?? '') + '">';
-        if (vars.type == 'checkbox' || vars.type == 'radio') {
-            row += modal.buildInput(vars);
-            if (vars.label) row += '<label for="' + vars.id + '" class="fw-bold text-dark">' + vars.label + '</label>';
-        } else {
-            if (vars.label) row += '<label for="' + vars.id + '" class="fw-bold text-dark">' + vars.label + '</label>';
-            row += '<div class="input-group">';
-            if (vars.prepend) row += '<span class="input-group-text">' + vars.prepend + '</span>';
-            row += modal.buildInput(vars);
-            if (vars.append) row += '<span class="input-group-text">' + vars.append + '</span>';
-            row += '</div></div>';
-        }
-        return row;
-    },
-    
-    build: vars => {
-        message.verbose('Building Dynamic Modal');
-        let html =
-            '<div id="' + vars.id + '" class="modal" tabindex="-1">' +
-                '<div class="modal-dialog ' + (vars.class ?? '') + '">' +
-                    '<div class="modal-content">' +
-                        '<div class="modal-header">' +
-                            '<h5 class="modal-title">' + vars.title + '</h5>' +
-                            '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>' +
-                        '</div>' +
-                        '<div class="modal-body">' +
-                            '<div class="col">' + (vars.body ?? '');
-        if (vars.inputs) Object.values(vars.inputs).forEach(i => {
-            if (i.type) html += modal.buildInputLine(i);
-            else html += modal.buildLine(i);
-        });
-        html +=
-                            '</div>' +
-                        '</div>' +
-                        '<div class="modal-footer">';
-        if (vars.buttons) Object.values(vars.buttons).forEach(b => {
-            html += '<button type="button" class="btn btn-outline-secondary me-1 ' + (b.class ?? '') + '" data-bs-dismiss="modal">' + b.text + '</button>';
-        });                
-        html +=                
-                        '</div>' +
-                    '</div>' +
-                '</div>' +
-            '</div>';
-        return html;
-    },
-    
-    alert: (msg, title = "Alert", button = "OK") => {
-        message.verbose('Building Alert Modal');
-        document.querySelector('body').insertAdjacentHTML('beforeend', modal.build({
-            id: 'alert-modal',
-            title: title,
-            body: '<p>' + msg + '</p>',
-            buttons: [ { text: button } ]
-        }));
-        let alertModal = document.getElementById('alert-modal');
-        alertModal.addEventListener('hidden.bs.modal', ev => {
-            ev.target.remove();
-        });
-        let bsAlertModal = bootstrap.Modal.getOrCreateInstance(alertModal);
-        bsAlertModal.show();
-    },
-    
-    confirm: (msg, onConfirm, onCancel, title = "Are you sure?", buttonYes = "Yes", buttonNo = "No") => {
-        message.verbose('Building Confirm Modal');
-        document.querySelector('body').insertAdjacentHTML('beforeend', modal.build({
-            id: 'confirm-modal',
-            title: title,
-            body: '<p>' + msg + '</p>',
-            buttons: [
-                { text: buttonYes, class: 'btn-confirm' },
-                { text: buttonNo, class: 'btn-outline-danger' } ]
-        }));
-        let confirmModal = document.getElementById('confirm-modal');
-        confirmModal.addEventListener('hidden.bs.modal', ev => {
-            ev.target.remove();
-        });
-        confirmModal.querySelector('.btn-confirm').addEventListener('click', () => {
-            onConfirm();
-        });
-        confirmModal.querySelector('.btn-outline-danger').addEventListener('click', () => {
-            onCancel();
-        });
-        let bsConfirmModal = bootstrap.Modal.getOrCreateInstance(confirmModal);
-        bsConfirmModal.show();
-    },
-
-    close: () => {
-        message.verbose('Closing Modals');
-        document.querySelectorAll('.modal').forEach(modal => {
-            let bsModal = bootstrap.Modal.getOrCreateInstance(modal);
-            if (bsModal) bsModal.hide();
-        });
-    },
     
     ajax: {
     
@@ -132,23 +19,25 @@ export const modal = {
                     ev.preventDefault();
                     message.verbose('Building AJAX Modal');
                     let buttons;
-                    if (el.getAttribute('modal-info')) buttons = [{ text: 'OK' }];
-                    else buttons = [{ text: 'Save', class: 'btn-save' }, { text: 'Cancel' }];
-                    document.querySelector('body').insertAdjacentHTML('beforeend', modal.build({
+                    if (el.getAttribute('modal-info'))
+                        buttons = [{ text: 'OK' }];
+                    else
+                        buttons = [{ text: 'Save', class: 'btn-save' }, { text: 'Cancel' }];
+                    modal.show({
                         id: el.getAttribute('data-bs-target').substring(1),
                         title: el.getAttribute('modal-title'),
                         body: '',
                         class: (el.getAttribute('modal-class') ?? ''),
                         buttons: buttons
-                    }));
-                    let ajaxModal = document.getElementById(el.getAttribute('data-bs-target').substring(1));
+                    });
+                    let ajaxModal = document.querySelector(el.getAttribute('data-bs-target')),
+                        bsAjaxModal = bootstrap.Modal.getOrCreateInstance(ajaxModal),
+                        ajaxModalBody = ajaxModal.querySelector('.modal-body');
                     ajaxModal.addEventListener('hidden.bs.modal', ev => {
                         ev.target.remove();
                     });
-                    let ajaxModalBody = ajaxModal.querySelector('.modal-body');
-                    let bsAjaxModal = bootstrap.Modal.getOrCreateInstance(ajaxModal);
                     bsAjaxModal.show();
-                    loading.start(ajaxModalBody);
+                    loading.start(1, ajaxModalBody);
                     message.verbose('Loading AJAX Modal');
                     window.ajax({
                         method: 'GET',
@@ -168,10 +57,11 @@ export const modal = {
                             } else loading.stop();
                             message.verbose('AJAX Modal Loaded');
                             if (!el.getAttribute('modal-info')) {
+                                message.verbose('Adding submit handler to AJAX Modal');
                                 let saveButton = ajaxModal.querySelector('.btn-save');
                                 saveButton.removeAttribute('data-bs-dismiss').addEventListener('click', () => {
-                                    message.verbose('Saving AJAX Modal');
-                                    loading.start(ajaxModal.querySelector('.modal-body'));
+                                    message.verbose('Submitting AJAX Modal');
+                                    loading.start(1, ajaxModalBody);
                                     let form = ajaxModal.querySelector('form');
                                     ajax({
                                         method: 'POST',
@@ -179,14 +69,14 @@ export const modal = {
                                         vars: serialize(form),
                                         success: () => {
                                             message.verbose('AJAX Modal Saved');
-                                            if (bsAjaxModal) bsAjaxModal.hide();
-                                            ajaxModal.remove();
                                             loading.stop();
+                                            bsAjaxModal.hide();
+                                            ajaxModal.remove();                                            
                                         },
                                         failure: () => {
                                             message.warn('AJAX Modal Save Failed');
-                                            modal.alert(modal.ajax.error.save.msg, modal.ajax.error.save.title);
                                             loading.stop();
+                                            modal.alert(modal.ajax.error.save.msg, modal.ajax.error.save.title);
                                         }
                                     });
                                 });
@@ -195,7 +85,7 @@ export const modal = {
                         failure: () => {
                             message.warn('AJAX Modal Load Failed');
                             loading.stop();
-                            if (bsAjaxModal) bsAjaxModal.hide();
+                            bsAjaxModal.hide();
                             ajaxModal.remove();
                             modal.alert(modal.ajax.error.load.msg, modal.ajax.error.load.title);
                         }
@@ -203,5 +93,196 @@ 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 }] });
+    },
+
+    build: {
+
+        input: vars => {
+            let input;
+            if (vars.type == 'select') {
+                input = document.createElement('select');
+                input.className = 'form-select';
+                if (vars.opts)
+                    for (let [key, val] of  Object.entries(vars.opts)) {
+                        let option = document.createElement('option');
+                        option.value = key;
+                        option.textContent = val;
+                        if (key == vars.value)
+                            option.setAttribute('selected', 'selected');
+                        input.appendChild(option);
+                    }
+            } else {
+                if (vars.type == 'textarea')
+                    input = document.createElement('textarea');
+                else {
+                    input = document.createElement('input');
+                    input.setAttribute('type', vars.type);
+                    input.value = vars.value;
+                }
+                input.className = 'form-control';
+                if (vars.placeholder)
+                    input.setAttribute('placeholder', vars.placeholder);
+            }
+            input.id = vars.id;
+            input.setAttribute('aria-label', vars.placeholder ?? vars.label);
+            if (vars.checked)
+                input.setAttribute('checked', 'checked');
+            if (vars.inputClass)
+                input.classList.add(vars.inputClass);
+            return input.outerHTML;
+        },
+    
+        inputLine: vars => {
+            let row = document.createElement('div');
+            row.className = 'row';
+            if (vars.rowClass)
+                row.classList.add(vars.rowClass);
+            row.insertAdjacentHTML('beforeend', modal.build.input(vars));
+            if (vars.label)
+                if (vars.type == 'checkbox' || vars.type == 'radio')
+                    row.insertAdjacentHTML('beforeend', label);
+                else
+                    row.insertAdjacentHTML('afterbegin', modal.build.label(vars));
+            return row.outerHTML;
+        },
+    
+        line: vars => {
+            let row = document.createElement('div');
+            row.className = 'row';
+            if (vars.rowClass)
+                row.classList.add(vars.rowClass);
+            if (vars.label)
+                row.insertAdjacentHTML('beforeend', modal.build.label(vars));
+            return row.outerHTML;
+        },
+    
+        label: vars => {
+            let label = document.createElement('label');
+            label.setAttribute('for', vars.id);
+            label.className = 'fw-bold text-dark';
+            label.textContent = vars.label;
+            return label.outerHTML;
+        },
+
+        modal: vars => {
+            message.verbose('Building Dynamic Modal');
+            
+            // Modal container
+            let modal = document.createElement('div');
+            modal.className = 'modal fade';
+            modal.id = vars.id;
+            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');
+            modalDialog.className = 'modal-dialog';
+            if (vars.class)
+                modalDialog.classList.add(vars.class);
+    
+            // Modal content
+            let modalContent = document.createElement('div');
+            modalContent.className = 'modal-content';
+    
+            // Modal header
+            let modalHeader = document.createElement('div');
+            modalHeader.className = 'modal-header';
+    
+            let modalTitle = document.createElement('h5');
+            modalTitle.className = 'modal-title';
+            modalTitle.id = `${vars.id}Label`;
+            modalTitle.textContent = vars.title;
+    
+            let closeButton = document.createElement('button');
+            closeButton.className = 'btn-close';
+            closeButton.setAttribute('type', 'button');
+            closeButton.setAttribute('data-bs-dismiss', 'modal');
+            closeButton.setAttribute('aria-label', 'Close');
+    
+            modalHeader.appendChild(modalTitle);
+            modalHeader.appendChild(closeButton);
+    
+            // Modal body
+            let modalBody = document.createElement('div');
+            modalBody.className = 'modal-body';
+            modalBody.innerHTML = vars.body ?? '';
+    
+            if (vars.inputs)
+                Object.values(vars.inputs).forEach(i => {
+                    if (i.type)
+                        modalBody.insertAdjacentHTML('beforeend', modal.build.inputLine(i));
+                    else
+                        modalBody.insertAdjacentHTML('beforeend', modal.build.line(i));
+                });
+    
+            // Modal footer
+            let modalFooter = document.createElement('div');
+            modalFooter.className = 'modal-footer';
+    
+            if (vars.buttons)
+                Object.values(vars.buttons).forEach(b => {
+                    let button = document.createElement('button');
+                    button.className = 'btn btn-outline-secondary me-1';
+                    if (b.class)
+                        button.classList.add(b.class);
+                    button.setAttribute('type', 'button');
+                    button.setAttribute('data-bs-dismiss', 'modal');
+                    button.textContent = b.text;
+                    modalFooter.appendChild(button);
+                });
+                
+            modalContent.appendChild(modalHeader);
+            modalContent.appendChild(modalBody);
+            modalContent.appendChild(modalFooter);
+            modalDialog.appendChild(modalContent);
+            modal.appendChild(modalDialog);
+    
+            return modal.outerHTML;
+        }
+    },
+    
+    close: () => {
+        message.verbose('Closing Modals');
+        document.querySelectorAll('.modal').forEach(modal => {
+            let bsModal = bootstrap.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>`,
+            buttons: [
+                { text: buttonYes, class: 'btn-confirm btn-primary', action: 'onConfirm' },
+                { text: buttonNo, class: 'btn-outline-danger', action: 'onCancel' }
+            ],
+            onConfirm,
+            onCancel
+        });
+    },
+
+    show: config => {
+        document.body.appendChild(modal.build.modal(config));
+        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();
     }
+    
 };