frayerjj-frontend 0.1.1

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "frayerjj-frontend",
+  "version": "0.1.1",
+  "description": "My base frontend for various projects",
+  "main": "src/index.js",
+  "type": "module",
+  "scripts": {
+    "build": "echo 'No build step required'",
+    "test": "echo 'No tests yet'"
+  },
+  "author": "Joshua Frayer",
+  "license": "MIT",
+  "dependencies": {
+    "@ckeditor/ckeditor5-build-classic": "^44.1.0",
+    "@popperjs/core": "^2.11.8",
+    "bootstrap": "^5.3.3"
+  }
+}

package/src/ckeupload.js

@@ -0,0 +1,55 @@
+class CkeUploadAdapter {
+    constructor(loader, uri, token) {
+        this.loader = loader;
+        this.uri = uri;
+        this.token = token;
+    }
+    upload() {
+        return this.loader.file
+            .then(file => new Promise((resolve, reject) => {
+                this._initRequest();
+                this._initListeners(resolve, reject, file);
+                this._sendRequest(file);
+            }));
+    }
+    abort() {
+        if (this.xhr) this.xhr.abort();
+    }
+    _initRequest() {
+        const xhr = this.xhr = new XMLHttpRequest();
+        xhr.open('POST', this.uri, true);
+        xhr.setRequestHeader('X-CSRFToken', this.token);
+        xhr.responseType = 'json';
+    }
+    _initListeners(resolve, reject, file) {
+        const xhr = this.xhr;
+        const loader = this.loader;
+        const genericErrorText = `Couldn't upload file: ${ file.name }.`;
+        xhr.addEventListener( 'error', () => reject(genericErrorText) );
+        xhr.addEventListener( 'abort', () => reject() );
+        xhr.addEventListener( 'load', () => {
+            const response = xhr.response;
+            if (!response || response.error) return reject(response && response.error ? response.error.message : genericErrorText);
+            resolve({ default: response.url });
+        });
+        if (xhr.upload) {
+            xhr.upload.addEventListener('progress', evt => {
+                if (evt.lengthComputable) {
+                    loader.uploadTotal = evt.total;
+                    loader.uploaded = evt.loaded;
+                }
+            });
+        }
+    }
+    _sendRequest(file) {
+        const data = new FormData();
+        data.append('file', file);
+        this.xhr.send(data);
+    }
+};
+
+export function CkeUploadAdapterPlugin(editor) {
+    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
+        return new CkeUploadAdapter(loader, editor.config._config.extraParams.uri, editor.config._config.extraParams.token);
+    };
+}

package/src/helpers.js

@@ -0,0 +1,94 @@
+function encodeVars(vars) {
+    let s = '';
+    for (var v in vars) s += v + '=' + vars[v] + "&";
+    return s ? s.substring(0, s.length - 1) : s;
+}
+
+export function getIntVar(varName, defaultVal) {
+    var val = parseInt(sessionStorage.getItem(varName));
+    return isNaN(val) ? defaultVal : val;
+}
+
+export function ajax(args) {
+    if (args.method == 'GET' && args.vars) args.uri += '?' + encodeVars(args.vars);
+    message.verbose('Making Request: ' + args.method + ' ' + args.uri);
+    let xhr = new XMLHttpRequest();
+    xhr.open(args.method, args.uri, true);
+    if (args.method == 'POST' && args.vars) xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+    xhr.onreadystatechange = () => {
+        if (xhr.readyState === XMLHttpRequest.DONE) {
+            const status = xhr.status;
+            if (status === 0 || (status >= 200 && status < 400)) {
+                message.verbose('AJAX Request Successful');
+                if (typeof args.success == 'function') args.success.call(xhr, args.json != false ? JSON.parse(xhr.responseText) : xhr.responseText);
+            } else {
+                message.warn('AJAX Request Failed (HTTP ' + xhr.status + ': ' + xhr.statusText + ')');
+                if (typeof args.failure == 'function') args.failure.call(xhr);
+            }
+        }
+    };
+    xhr.send(args.method == 'POST' && args.vars ? encodeVars(args.vars) : null);
+}
+
+export function pageInit() {
+    
+    // Updates the id in the form action inside a modal. Used for delete confirm and edit modals.
+    document.querySelectorAll('.modal-uuid-update').forEach(el => {
+        el.addEventListener('click', ev => {
+            ev.preventDefault();
+            let uuid = el.getAttribute('inst-uuid'),
+                modalSelector = el.getAttribute('data-bs-target'),
+                form = document.querySelector(`${modalSelector} form`);
+            if (uuid.match(/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/i) && form) {
+                let action = form.getAttribute('action');
+                if (action.match(/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/i))
+                    action = action.replace(/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/i, uuid);
+                form.setAttribute('action', action);
+            }
+            else console.error('Modal UUID Update: No UUID found, make sure to set inst-uuid.');
+        });
+    });
+
+    // Automatically submits on change.
+    document.querySelectorAll('.change-submit').forEach(el => {
+        el.addEventListener('change', () => {
+            let form = el.closest('form');
+            if (form) form.submit();
+            else console.error('Change Submit: No form found, make sure to wrap the input in a form.');
+        });
+    });
+
+    // AJAX Modal is a custom plugin for loading AJAX partial views into a modal.
+    modal.ajax.init();
+    
+    // Confirm/Delete Modals
+    document.querySelectorAll('.confirm-link').forEach(el => {
+        el.addEventListener('click', ev => {
+            ev.preventDefault();
+            modal.confirm(
+                el.getAttribute('confirm-msg') || 'Are you sure?',
+                () => {
+                    location.href = el.getAttribute('href');
+                },
+                () => {},
+                el.getAttribute('confirm-title') || 'Confirm',
+                el.getAttribute('confirm-yes') || 'Yes',
+                el.getAttribute('confirm-no') || 'No'
+            );
+        });
+    });
+    
+    // Scroll to top button
+    let toTop = document.getElementById('to_top_btn');
+        toTop.style.visibility = "hidden";
+    toTop.addEventListener('click', () => {
+        scrollTo(0, 0);
+    });
+    window.addEventListener('scroll', () => {
+        if (scrollY > 1500) toTop.style.visibility = "visible";
+        else toTop.style.visibility = "hidden";
+    });
+    
+    // Initialize form validation
+    validate.init();    
+}

package/src/index.js

@@ -0,0 +1,7 @@
+import modal from "./modal.js";
+import { ajax, getIntVar, pageInit } from "./helpers.js";
+import { loading } from "./loading.js";
+import { message } from "./message.js";
+import { validate } from "./validate.js";
+
+export default { modal, ajax, getIntVar, pageInit, loading, message, validate };

package/src/loading.js

@@ -0,0 +1,105 @@
+
+const loading = {
+
+    rotation: getIntVar('loadingRotation', 3),
+
+    build: el => {
+        if (loading.interval != null) loading.clear();
+        el.classList.add('loading')
+        el.insertAdjacentHTML("afterbegin",
+            '<div class="loader">' +
+                '<div class="loader-circle"></div>' +
+                '<div class="loader-line-mask" style="transform:rotate(' + loading.rotation + 'deg)">' +
+                    '<div class="loader-line"></div>' +
+                '</div>' +
+                '<div class="loader-logo"></div>' +
+                '<div class="loader-text">Loading</div>' + 
+            '</div>');
+    },
+    
+    animation: () => {
+        if (document.querySelector('.loading') == null) {
+            clearInterval(loading.interval);
+            loading.interval = null;
+        } else {
+            loading.rotation += 3;
+            if (loading.rotation >= 360) loading.rotation = 0;
+            let mask = document.querySelector('.loader-line-mask');
+            if (mask) mask.style.cssText = 'transform:rotate(' + loading.rotation + 'deg)';
+            sessionStorage.setItem('loadingRotation', loading.rotation);
+        }
+    },
+    
+    start: (unload = 0, el) => {
+        if (loading.interval != null) return;
+        else {
+            if (el == null) el = document.querySelector('body');
+            loading.build(el);
+            if (unload) {
+                let opacity = 0;
+                let fade = setInterval(() => {
+                    el.style.opacity = '.' + opacity++;
+                    if (opacity == 10) {
+                        clearInterval(fade);
+                        el.style.opacity = null;
+                    }
+                }, 50);
+            }
+            loading.interval = setInterval(loading.animation, 10);
+        }
+    },
+    
+    clear: () => {
+        document.querySelector('.loading')?.classList.remove('loading');
+        document.querySelector('.loader')?.remove();
+        clearInterval(loading.interval);
+        loading.interval = null;
+    },
+    
+    stop: () => {
+        let el = document.querySelector('.loader');
+        let opacity = 9;
+        let fade = setInterval(() => {
+            el.style.opacity = '.' + opacity--;
+            if (opacity == 0) {
+                clearInterval(fade);
+                loading.clear();
+            }
+        }, 50);
+    },
+
+    init: () => {
+        window.addEventListener('DOMContentLoaded', () => {
+            message.verbose('DOM Loaded, Starting Animation');
+            loading.start();
+        });
+        window.addEventListener('beforeunload', () => {
+            message.verbose('Navigating Away, Starting Animation');
+            loading.start(1);
+        });
+        window.addEventListener('error', () => {
+            message.verbose('DOM Error, Clearing Animation');
+            loading.clear();
+        });
+        window.addEventListener('abort', () => {
+            message.verbose('Load Aborted, Clearing Animation');
+            loading.clear();
+        });
+        window.addEventListener('unload', () => {
+            message.verbose('Page Unloaded, Clearing Animation');
+            loading.clear();
+        });
+        window.addEventListener('load', () => {
+            message.verbose('Resources Loaded, Stopping Animation');
+            loading.stop();
+        });
+        window.addEventListener('pageshow', (e) => {
+            if (e.originalEvent && e.originalEvent.persisted) {
+                message.verbose('Back button detected, Stopping Animation');
+                loading.stop();
+            }
+        });
+    }
+};
+
+export { loading };

package/src/message.js

@@ -0,0 +1,15 @@
+const message = {
+
+    verbose: (msg) => {
+        if (window.verbose) console.log(msg);
+        else console.debug(msg);
+    },
+
+    warn: (msg) => {
+        if (window.verbose) console.warn(msg);
+        else console.debug(msg);
+    }
+
+};
+
+export { message };

package/src/modal.js

@@ -0,0 +1,193 @@
+import bootstrap from "bootstrap";
+import ajax from './helpers.js';
+
+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 => {
+        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") => {
+        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 = new bootstrap.Modal(alertModal);
+        bsAlertModal.show();
+    },
+    
+    confirm: (msg, onConfirm, onCancel, title = "Are you sure?", buttonYes = "Yes", buttonNo = "No") => {
+        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 = new bootstrap.Modal(confirmModal);
+        bsConfirmModal.show();
+    },
+    
+    ajax: {
+    
+        error: {
+            load: { title: 'Unable to Load Data', msg: 'There was a problem trying to load data. Please try again.' },
+            save: { title: 'Unable to Save Data', msg: 'There was a problem trying to save data. Please try again' }
+        },
+    
+        init: () => {
+            // Cycle through all AJAX Modals in DOM
+            document.querySelectorAll('.ajax-modal').forEach(el => {
+                // Add Click Handler
+                el.addEventListener('click', () => {
+                    // Build 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({
+                        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));
+                    ajaxModal.addEventListener('hidden.bs.modal', ev => {
+                        ev.target.remove();
+                    });
+                    let bsAjaxModal = new bootstrap.Modal(ajaxModal);
+                    let ajaxModalBody = ajaxModal.querySelector('.modal-body');
+                    bsAjaxModal.show();
+                    loading.start(ajaxModalBody);
+                    // Make request to load partial view
+                    ajax({
+                        method: 'GET',
+                        uri: el.getAttribute('modal-load-uri'),
+                        json: false,
+                        success: html => {
+                            // Insert partial view into view
+                            ajaxModalBody.insertAdjacentHTML('afterbegin', html);
+                            let images = ajaxModalBody.querySelectorAll('img')
+                            // Ensure all images are loaded prior to lifting loading animation
+                            if (images.length) {
+                                let counter = images.length;
+                                images.forEach(image => {
+                                    if (image.complete && --counter == 0) loading.stop();
+                                    else image.addEventListener('load', () => {
+                                        if (--counter == 0) loading.stop();
+                                    });
+                                });
+                            } else loading.stop();
+                            // Set save handler
+                            if (!el.getAttribute('modal-info')) {
+                                let saveButton = ajaxModal.querySelector('.btn-save');
+                                saveButton.removeAttribute('data-bs-dismiss').addEventListener('click', () => {
+                                    loading.start(ajaxModal.querySelector('.modal-body'));
+                                    let form = ajaxModal.querySelector('form');
+                                    ajax({
+                                        method: 'POST',
+                                        uri: form.getAttribute('action'),
+                                        vars: serialize(form),
+                                        success: () => {
+                                            bsAjaxModal.hide();
+                                            ajaxModal.remove();
+                                        },
+                                        failure: () => {
+                                            modal.alert(modal.ajax.error.save.msg, modal.ajax.error.save.title);
+                                            loading.stop();
+                                        }
+                                    });
+                                });
+                            }
+                        },
+                        failure: () => {
+                            loading.stop();
+                            bsAjaxModal.hide();
+                            ajaxModal.remove();
+                            modal.alert(modal.ajax.error.load.msg, modal.ajax.error.load.title);
+                        }
+                    });
+                });
+            });
+        }
+    }
+};
+
+export default modal;

package/src/validate.js

@@ -0,0 +1,55 @@
+const validate = {
+    methods: {
+        required: input => {
+            return input.value.length > 0;
+        },
+        identifier: input => {
+            return /^[a-z0-9_-]*$/i.test(input.value) && input.value.length > 0 && input.value.length <= 50;
+        },
+        email: input => {
+            return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(input.value);
+        },
+        uri: input => {
+            return /^\/[0-9a-z?=&#~:@!$+,;%()*\/\-[\]\.]*$/i.test(input.value);
+        },
+        url: input => {
+            return /^((http|https):\/\/[a-z0-9_]+([\-\.]{1}[a-z_0-9]+)*\.[_a-z]{2,5}(:[0-9]{1,5})?)?\/[0-9a-z?=&#~:@!$+,;%()*\/\-[\]\.]*$/i.test(input.value);
+        },
+        zip: input => {
+            return /^[0-9]{5}(-)?([0-9]{4})?$/.test(input.value);
+        }
+    },
+    check: form => {
+        let blurEvent = new Event('blur');
+        form.querySelectorAll('input,select,textarea').forEach(input => {
+            input.dispatchEvent(blurEvent);
+        });
+        return form.querySelectorAll('input.is-invalid,select.is-invalid,textarea.is-invalid').length == 0;
+    },
+    init: () => {
+        Object.entries(validate.methods).forEach(([ className, validationMethod ]) => {
+            document.querySelectorAll('input.' + className + ',select.' + className + ',textarea.' + className).forEach(input => {
+                input.addEventListener('blur', () => {
+                    if (validationMethod(input)) {
+                        input.classList.add('is-valid');
+                        input.classList.remove('is-invalid');
+                    } else {
+                        input.classList.add('is-invalid');
+                        input.classList.remove('is-valid');
+                    }
+                });
+            });
+        });
+        document.querySelectorAll('form:not(.skip-validation)').forEach(form => {
+            form.addEventListener('submit', ev => {
+                if (!validate.check(form)) {
+                    ev.preventDefault();
+                    form.querySelector('input.is-invalid,select.is-invalid,textarea.is-invalid').focus();
+                    message.warn('Form failed validation. Submited cancelled.');
+                } 
+            });
+        });
+    }
+};
+
+export { validate };