frayerjj-frontend 0.5.6 → 0.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frayerjj-frontend",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "description": "My base frontend for various projects",
   "main": "src/index.js",
   "type": "module",
@@ -10,8 +10,7 @@
   },
   "style": "src/scss/styles.scss",
   "files": [
-    "src/index.js",
-    "src/scss/"
+    "src/"
   ],
   "scripts": {
     "build": "echo 'No build step required'",

package/src/avatarCropper.js

@@ -0,0 +1,97 @@
+import Cropper from 'cropperjs';
+import { modal } from './modal';
+
+export const avatarCropper = {
+
+    export: (selection, redirect) => {
+        selection.$toCanvas().then(canvas => {
+            canvas.toBlob(blob => {
+                let formData = new FormData();
+                formData.append('file', blob, 'avatar.png');
+                // Send the blob to the server
+                fetch(window.location.href, {
+                    method: 'POST',
+                    body: formData,
+                    headers: {
+                        'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+                    }
+                }).then(response => {
+                    if (response.ok) {
+                        // Show success message
+                        modal.alert('Avatar updated successfully.');
+                        // Redirect to the specified URL
+                        window.location.href = redirect;
+                    } else
+                        // Show error message
+                        modal.alert('Error updating avatar. Please try again.');
+                });
+            });
+        });
+    },
+
+    loadImage: (file, cropperImg, selection, exportBtn) => {
+        // If valid image
+        if (file && file.type.match(/image.*/)) {
+            // Load image
+            let reader = new FileReader();
+            reader.onload = () => {
+                // Set image on Cropper
+                cropperImg.onload = () => {
+                    // Reset selector
+                    selection.$reset();
+                    selection.$center();
+                    // Show export button
+                    exportBtn.style.display = 'block';
+                }
+                cropperImg.src = e.target.result;
+            };
+            reader.readAsDataURL(file);
+        } else
+            // Show error message
+            modal.alert('Invalid file type. Please select an image file.');
+    },
+
+    init:() => {
+        let img = document.getElementById('avatar-cropper');
+        if (img) {
+
+            // Set the image to a transparent 1x1 pixel
+            img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
+
+            // Initialize the cropper
+            new Cropper(img);
+            let canvas = document.querySelector('cropper-canvas');
+            canvas.classList.add('container-fixed');
+            window.dispatchEvent(new Event('resize'));
+            let selection = document.querySelector('cropper-selection');
+            selection.style.overflow = 'hidden';
+            selection.style.borderRadius = '50%';
+            selection.aspectRatio = 1;
+            let cropperImg = document.querySelector('cropper-image');
+
+            // Set export button
+            let exportBtn = document.querySelector(cropperImg.getAttribute('data-export-btn'));
+            let redirectUrl = img.getAttribute('data-redirect');
+            exportBtn.style.display = 'none';
+            exportBtn.addEventListener('click', () => {
+                avatarCropper.export(selection, redirectUrl);
+            });
+
+            // Create a file input element
+            let fileInput = document.createElement('input');
+            fileInput.setAttribute('type', 'file');
+            fileInput.setAttribute('accept', 'image/*');
+            fileInput.style.display = 'none';
+            img.insertAdjacentElement('afterend', fileInput);
+            fileInput.addEventListener('change', ev => {
+                avatarCropper.loadImage(ev.target.files[0], cropperImg, selection, exportBtn);
+            });
+
+            // Set upload button
+            let uploadBtn = document.querySelector(img.getAttribute('data-upload-btn'));
+            uploadBtn.addEventListener('click', () => {
+                fileInput.click();
+            });
+        }
+    }
+};

package/src/ckeupload.js

@@ -0,0 +1,95 @@
+import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
+import { msg } from "./msg";
+
+export const ckeupload = {
+    adapter: editor => {
+        editor.plugins.get('FileRepository').createUploadAdapter = loader => {
+            return new CkeUploadAdapter(loader, editor.config._config.extraParams.uri, editor.config._config.extraParams.token);
+        };
+    },
+    init: () => {
+        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);
+            }
+        };
+        window.editors = [];
+        document.querySelectorAll('.wysiwyg').forEach(el => {
+            if (el.getAttribute('data-bs-toggle') === 'tooltip') {
+                let placement = el.getAttribute('data-bs-placement'),
+                    title = el.getAttribute('title');
+                el.parentElement.setAttribute('data-bs-toggle', 'tooltip');
+                el.parentElement.setAttribute('data-bs-placement', placement);
+                el.parentElement.setAttribute('title', title);
+                el.removeAttribute('data-bs-toggle');
+                el.removeAttribute('data-bs-placement');
+                el.removeAttribute('title');
+            }
+            ClassicEditor.create(el, {
+                licenseKey: 'GPL',
+                htmlSupport: {
+                    allow: [{
+                        name: /.*/,
+                        attributes: true,
+                        classes: true,
+                        styles: true
+                    }]
+                },
+                extraParams: {
+                    uri: document.querySelector('meta[name="asset-upload"]').getAttribute('content'), 
+                    token: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+                },
+                extraPlugins: [ CkeUploadAdapter ]
+            }).then(editor => {
+                window.editors[el.id] = editor;
+                msg.verbose('CKEditor Initialized');
+            }).catch( error => {
+                console.error( 'There was a problem initializing the editor.', error );
+            });
+        }); 
+    }
+}

package/src/fileUpload.js

@@ -0,0 +1,230 @@
+import { loading } from "./loading";
+import { msg } from "./msg";
+import { modal } from "./modal";
+
+export const fileUpload = {
+    
+    imgFormats: ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml', 'image/webp'],
+
+    icons: {
+        'application/msword': 'fa-file-word',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'fa-file-word',
+        'application/vnd.ms-excel': 'fa-file-excel',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'fa-file-excel',
+        'application/vnd.ms-powerpoint': 'fa-file-powerpoint',
+        'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'fa-file-powerpoint',
+        'application/pdf': 'fa-file-pdf',
+    },
+    
+    sampleArgs: {
+        name: 'files', // Variable name
+        mimes: ['image/jpeg', 'image/png'], // Allowed MIME types
+        iconSize: 128, // Icon size
+        files: [ // Existing files
+            { id: 1, name: 'file1.jpg', mime: 'image/jpeg', uri: '/path/to/file1.jpg' },
+        ],
+        messages: { // Messages
+            instructions: 'Drag and drop files here or click the button below.',
+            browse: 'Browse',
+            close: 'Close',
+            view: 'View',
+            delete: 'Delete',
+            errorTitle: 'Error',
+            uploadError: 'Error uploading file.',
+            deleteError: 'Error deleting file.'
+        },
+        uris: { // URIs
+            upload: '/path/to/upload',
+            delete: '/path/to/delete'
+        }
+    },
+
+    build: {
+
+        core: args => {
+            let container = document.createElement('div');
+            let list = document.createElement('ul');
+            list.classList.add('upload-files');
+            Objects.values(args.files).forEach(file => {
+                list.insertAdjacentHTML('beforeend', fileUpload.build.item(args, file));
+            });
+            let input = document.createElement('input');
+            input.type = 'file';
+            input.style.display = 'none';
+            let instructions = document.createElement('div');
+            instructions.classList.add('upload-instructions');
+            let icon = document.createElement('span');
+            icon.classList.add('fas', 'fa-arrow-alt-circle-u');
+            instructions.appendChild(icon);
+            let text = document.createElement('p');
+            text.textContent = args.messages.instructions ?? fileUpload.sampleArgs.messages.instructions;
+            instructions.appendChild(text);
+            let button = document.createElement('button');
+            button.classList.add('btn', 'btn-outline-secondary', 'btn-browse');
+            button.textContent = args.messages.browse ?? fileUpload.sampleArgs.messages.browse;
+            instructions.appendChild(button);
+            container.appendChild(list);
+            container.appendChild(input);
+            container.appendChild(instructions);
+            return container.outerHTML;
+        },
+
+        item: (args, file) => {
+            let item = document.createElement('li');
+            item.classList.add('upload-file');
+            item.title = file.name;
+            item.setAttribute('data-uri', file.uri);
+            if (fileUpload.imgFormats.includes(file.mime))
+                item.classList.add('upload-type-image');
+            else
+                item.classList.add('upload-type-file');
+            let input = document.createElement('input');
+            input.type = 'hidden';
+            input.name = args.name + '[]';
+            input.value = file.id;
+            item.appendChild(input);
+            let icon = fileUpload.imgFormats.includes(file.mime) ? fileUpload.build.thumb(file) : fileUpload.build.icon(file);
+            item.appendChild(icon);
+            let heading = document.createElement('h6');
+            heading.textContent = file.name;
+            item.appendChild(heading);
+            let buttons = document.createElement('div');
+            buttons.classList.add('btn-group');
+            let view = document.createElement('button');
+            view.classList.add('btn', 'btn-outline-secondary', 'btn-view');
+            view.textContent = args.messages.view ?? fileUpload.sampleArgs.messages.view;
+            buttons.appendChild(view);
+            let del = document.createElement('button');
+            del.classList.add('btn', 'btn-outline-danger', 'btn-delete');
+            del.textContent = args.messages.delete ?? fileUpload.sampleArgs.messages.delete;
+            buttons.appendChild(del);
+            item.appendChild(buttons);
+            return item.outerHTML;
+        },
+
+        icon: file => {
+            let icon = document.createElement('span');
+            icon.classList.add('border', 'fas');
+            if (fileUpload.icons[file.mime])
+                icon.classList.add(fileUpload.icons[file.mime]);
+            else
+                icon.classList.add('fa-file');
+            icon.style.width = fileUpload.iconSize + 'px';
+            icon.style.height = fileUpload.iconSize + 'px';
+            return icon;
+        },
+
+        thumb: file => {
+            let thumb = document.createElement('img');
+            thumb.src = file.uri;
+            thumb.style.width = fileUpload.iconSize + 'px';
+            thumb.style.height = fileUpload.iconSize + 'px';
+            return thumb;
+        }
+    },
+
+    delete: (el, item) => {
+        loading.start(1, el);
+        let data = new FormData();
+        data.append('id', item.querySelector('input[type="hidden"]').value);
+        fetch(el.getAttribute('data-delete-uri'), {
+            method: 'POST',
+            body: data,
+            headers: {
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
+            }
+        }).then(response => response.json()).then(result => {
+            if (result.success)
+                item.remove();
+            else
+                modal.alert(args.messages.errorTitle ?? fileUpload.sampleArgs.messages.errorTitle, args.messages.deleteError ?? fileUpload.sampleArgs.messages.deleteError);
+            loading.stop();
+        }).catch(error => {
+            modal.alert(args.messages.errorTitle ?? fileUpload.sampleArgs.messages.errorTitle, args.messages.deleteError ?? fileUpload.sampleArgs.messages.deleteError);
+            msg.error(error);
+            loading.stop();
+        });
+    },
+
+    init: () => {
+        document.querySelectorAll('.file-upload').forEach(el => {
+            // Get arguments
+            let args = JSON.parse(el.innerHTML);
+            // Build has many input
+            el.innerHTML = fileUpload.build.core(args);
+            // Add event listeners
+            el.querySelector('.btn-browse').addEventListener('click', () => {
+                el.querySelector('input[type="file"]').click();
+            });
+            el.querySelector('input[type="file"]').addEventListener('change', ev => {
+                fileUpload.upload(el, args, ev.target.files);
+            });
+            el.addEventListener('dragover', ev => {
+                ev.preventDefault();
+                el.classList.add('dragover');
+            });
+            el.addEventListener('dragleave', ev => {
+                el.classList.remove('dragover');
+            });
+            el.addEventListener('drop', ev => {
+                ev.preventDefault();
+                el.classList.remove('dragover');
+                fileUpload.upload(el, args, ev.dataTransfer.files);
+            });
+            el.querySelectorAll('.btn-delete').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    fileUpload.delete(el, btn.closest('.upload-file'));
+                });
+            });
+            el.querySelectorAll('.btn-view').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    fileUpload.view(args, btn.closest('.upload-file'));
+                });
+            });
+        });
+    },
+
+    upload: (el, file, args) => {
+        loading.start(1, el);
+        let data = new FormData();
+        data.append('owner', args.name);
+        data.append('file', file[0]);
+        fetch(args.uris.upload, {
+            method: 'POST',
+            body: data,
+            headers: {
+                'multipart': 'form-data',
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
+            }
+        }).then(response => response.json()).then(result => {
+            if (result.success)
+                el.querySelector('.upload-files').insertAdjacentHTML('beforeend', fileUpload.build.item(args, result.file));
+            else
+                modal.alert(args.messages.errorTitle ?? fileUpload.sampleArgs.messages.errorTitle, args.messages.uploadError ?? fileUpload.sampleArgs.messages.uploadError);
+            loading.stop();
+        }).catch(error => {
+            modal.alert(args.messages.errorTitle ?? fileUpload.sampleArgs.messages.errorTitle, args.messages.uploadError ?? fileUpload.sampleArgs.messages.uploadError);
+            msg.error(error);
+            loading.stop();
+        });
+    },
+
+    view: (args, item) => {
+        if (item.classList.contains('upload-type-image')) {
+            let body = document.createElement('img');
+            body.src = item.querySelector('img').src;
+        }
+        else {
+            let body = document.createElement('iframe');
+            body.src = `https://docs.google.com/gview?url=${window.location.protocol}//${window.location.host}${item.getAttribute('data-uri')}&embedded=true`;
+        }
+        let randomId = modal.randomId('fileview');
+        document.querySelector('body').insertAdjacentHTML('beforeend', modal.build.modal({
+            id: randomId,
+            className: 'modal-lg',
+            title: item.title,
+            body: body.outerHTML,
+            buttons: [{ text: args.messages.close ?? fileUpload.sampleArgs.messages.close }]
+        }));
+    }
+};

package/src/hasMany.js

@@ -0,0 +1,152 @@
+import { msg } from './msg.js';
+import { modal } from './modal.js';
+
+export const hasMany = {
+
+    sampleArgs: {
+        name: 'name', // Variable name
+        title: 'Title', // Verbose name
+        notb: false, // Use None of the Below
+        messages: {
+            notbLabel: 'None', // Label for None of the Below
+            close: 'Close', // Close button text
+            button: 'Select Objects' // OK button text
+        },
+        options: [
+            { id: 1, label: 'Option 1', checked: false },
+            { id: 2, label: 'Option 2', checked: true }
+        ]
+    },
+
+    build: {
+
+        core: args => {
+            msg.verbose('Building Has Many Inupt');
+            // Create container
+            let container = document.createElement('div');
+            // Create list of selected items
+            let list = document.createElement('ul');
+            list.id = 'id_' + args.name;
+            list.className = 'list-group list-group-flush';
+            // Create list of all options for modal
+            let modalList = document.createElement('ul');
+            modalList.className = 'list-group list-group-flush';
+            // Create hidden input for when there is no selected items
+            let input = document.createElement('input');
+            input.type = 'hidden';
+            input.name = args.name + '[]';
+            // If using None of the Below
+            if (args.notb)
+                modalList.insertAdjacentHTML('beforeend', hasMany.build.checkItem(args.name, {
+                    id: 'notb',
+                    label: (args.notbLabel ?? hasMany.sampleArgs.messages.notbLabel),
+                    notb: true
+                }));
+            // Cycle through all options
+            Objects.values(args.options).forEach(option => {
+                modalList.insertAdjacentHTML('beforeend', hasMany.build.checkItem(args.name, option));
+                // If option is selected, add to list
+                if (option.checked)
+                    list.insertAdjacentHTML('beforeend', hasMany.build.item(args.name, option));
+            });
+            // Create modal
+            let randomId = modal.randomId('hasmany');
+            document.querySelector('body').insertAdjacentHTML('beforeend', modal.build.modal({
+                id: randomId,
+                title: args.title,
+                body: modalList.outerHTML,
+                buttons: [ { text: args.messages.close ?? hasMany.sampleArgs.messages.close } ]
+            }));
+            // Create button to open modal
+            let button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'btn btn-outline-secondary btn-block';
+            button.setAttribute('data-bs-toggle', 'modal');
+            button.setAttribute('data-bs-target', '#' + randomId);
+            button.textContent = args.messages.button ?? hasMany.sampleArgs.messages.button;
+            // Add elements to container
+            container.appendChild(input);
+            container.appendChild(list);
+            container.appendChild(button);
+            // Return container
+            return container.outerHTML;
+        },
+
+        checkItem: (name, option) => {
+            // Create list item
+            let item = document.createElement('li');
+            item.className = 'list-group-item';
+            // Create checkbox
+            let input = document.createElement('input');
+            input.classList.add('form-check-input');
+            if (option.notb)
+                input.classList.add('hasmany-' + name + 'notb');
+            else
+                input.classList.add('hasmany-' + name);
+            input.type = 'checkbox';
+            if (option.checked)
+                input.checked = true
+            input.id = name + option.id;
+            input.value = id;
+            item.appendChild(input);
+            // Create label
+            let label = document.createElement('label');
+            label.setAttribute('for', name + option.id);
+            label.textContent = option.label;
+            item.appendChild(label);
+            return item.outerHTML;
+        },
+
+        listItem: (name, option) => {
+            // Create list item
+            let item = document.createElement('li');
+            item.id = 'id_' + name + '_' + option.id;
+            item.textContent = option.label;
+            item.className = 'list-group-item';
+            // Create hidden input
+            let input = document.createElement('input');
+            input.type = 'hidden';
+            input.name = name + '[]';
+            input.value = option.id;
+            item.appendChild(input);
+            return item.outerHTML;
+        }
+    },
+    
+    init: () => {
+        document.querySelectorAll('.has-many').forEach(el => {
+            // Get arguments
+            let args = JSON.parse(el.innerHTML);
+            // Build has many input
+            el.innerHTML = hasMany.build.core(args);
+            // Add event listeners
+            document.querySelectorAll('.hasmany-' + args.name).forEach(input => {
+                input.addEventListener('change', ev => {
+                    if (ev.target.checked) {
+                        // Add item to list
+                        document.querySelector('#id_' + args.name).insertAdjacentHTML('beforeend', hasMany.build.item(args.name, {
+                            id: ev.target.value,
+                            label: ev.target.nextElementSibling.textContent
+                        }));
+                        // If using None of the Below, make sure it is unchecked
+                        if (args.notb)
+                            document.querySelector('.hasmany-' + args.name + 'notb').checked = false;
+                    } else
+                        // Remove item from list
+                        document.querySelector('#id_' + args.name + '_' + ev.target.value).remove();
+                });
+            });
+            // Add event listener for None of the Below
+            if (args.notb)
+                document.querySelector('.hasmany-' + args.name + 'notb').addEventListener('change', ev => {
+                    if (ev.target.checked)
+                        // Uncheck all other items
+                        document.querySelectorAll('hasmany-' + args.name).forEach(input => {
+                            input.checked = false;
+                        });
+                        // Remove all items from list
+                        document.querySelector('#id_' + args.name).innerHTML = '';
+                });
+        });
+    }
+}

package/src/index.js

@@ -1,3 +1,2 @@
 import { init } from './init';
-
 export { init };