frayerjj-frontend 0.7.2 → 0.7.4

package/package.json

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

package/src/ckeupload.js

@@ -1,12 +1,25 @@
-import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
+import { 
+    ClassicEditor,
+    Essentials,
+    Autoformat,
+    Bold,
+    Italic,
+    BlockQuote,
+    GeneralHtmlSupport,
+    Heading,
+    Image,
+    ImageUpload,
+    List,
+    Paragraph,
+    Table,
+    TableToolbar,
+    Link,
+    Undo
+} from 'ckeditor5';
+
 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) {
@@ -57,7 +70,19 @@ export const ckeupload = {
                 this.xhr.send(data);
             }
         };
+
+        function CustomUploadAdapterPlugin(editor) {
+            editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
+                const uri = document.querySelector('meta[name="asset-upload"]').getAttribute('content');
+                const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+                return new CkeUploadAdapter(loader, uri, token);
+            };
+        }
+
+        const ckeLicenseKey = document.querySelector('meta[name="cke-license-key"]')?.getAttribute('content') || 'GPL';
+
         window.editors = [];
+
         document.querySelectorAll('.wysiwyg').forEach(el => {
             if (el.getAttribute('data-bs-toggle') === 'tooltip') {
                 let placement = el.getAttribute('data-bs-placement'),
@@ -70,7 +95,19 @@ export const ckeupload = {
                 el.removeAttribute('title');
             }
             ClassicEditor.create(el, {
-                licenseKey: 'GPL',
+                plugins: [
+                    Essentials, Autoformat, Bold, Italic, BlockQuote, Heading, Image, 
+                    ImageUpload, List, Paragraph, Table, TableToolbar, Link, Undo,
+                    GeneralHtmlSupport, CustomUploadAdapterPlugin
+                ],
+                toolbar: [
+                    'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 
+                    '|', 'outdent', 'indent', '|', 'imageUpload', 'blockQuote', 'insertTable', 'undo', 'redo'
+                ],
+                table: {
+                    contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
+                },
+                licenseKey: ckeLicenseKey,
                 htmlSupport: {
                     allow: [{
                         name: /.*/,
@@ -78,12 +115,7 @@ export const ckeupload = {
                         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');

package/src/init.js

@@ -1,5 +1,5 @@
 import * as bootstrap from 'bootstrap';
-import { ClassicEditor } from '@ckeditor/ckeditor5-build-classic';
+import { ClassicEditor } from 'ckeditor5';
 import { createPopper } from '@popperjs/core';
 import { avatarCropper } from './avatarCropper';
 import { ckeupload } from './ckeupload';
@@ -8,6 +8,7 @@ import { hasMany } from './hasMany';
 import { loading } from './loading';
 import { msg } from './msg';
 import { modal } from './modal';
+import { wizard } from './wizard';
 import { phoneInput } from './phoneInput';
 import { session } from './session';
 import { validate } from './validate';
@@ -21,6 +22,7 @@ export const init = (args) => {
     window.session = session;
     window.validate = validate;
     window.loading = loading;
+    window.wizard = wizard;
     window.ClassicEditor = ClassicEditor;
     loading.init(args?.loadingAnimationStyle ?? 'default');
 
@@ -34,6 +36,7 @@ export const init = (args) => {
         modal.ajax.init();
         phoneInput.init();
         validate.init();
+        wizard.init();
 
         //Dynamic height for container-fixed
         let container = document.querySelectorAll('.container-fixed');
@@ -58,7 +61,7 @@ export const init = (args) => {
         document.querySelectorAll('.dt-localize').forEach(el => {
             msg.verbose('Localizing Date/Time');
             const date = new Date(el.dataset.utc);
-            el.innerText = date.toLocaleString();
+            el.innerText = date.toLocaleString(undefined, options);
         });
             
         // Updates the id in the form action inside a modal. Used for delete confirm and edit modals.

package/src/scss/_wizard.scss

@@ -0,0 +1,20 @@
+.wizard {
+    overflow: hidden;
+    position: relative;
+}
+
+.wizard-step {
+    display: none;
+    width: 100%;
+    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+
+.wizard-step.active {
+    display: block;
+}
+
+.slide-in-right { transform: translateX(100%); opacity: 0; }
+.slide-in-left { transform: translateX(-100%); opacity: 0; }
+.slide-out-right { transform: translateX(100%); opacity: 0; }
+.slide-out-left { transform: translateX(-100%); opacity: 0; }
+.slide-center { transform: translateX(0); opacity: 1; }

package/src/scss/styles.scss

@@ -1,5 +1,6 @@
 @import 'bootstrap/scss/bootstrap';
 @import 'flag-icons/css/flag-icons.min.css';
+@import 'ckeditor5/ckeditor5.css';
 @import url(//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css);
 @import url(//use.typekit.net/oox8pkj.css);
 @import 'fonts';
@@ -11,3 +12,4 @@
 @import 'footer';
 @import 'loading';
 @import 'forms';
+@import 'wizard';

package/src/wizard.js

@@ -0,0 +1,60 @@
+import { msg } from './msg.js';
+import { validate } from './validate.js';
+
+export const wizard = {
+    init: () => {
+        msg.verbose('Initializing Wizard');
+        document.querySelectorAll('.wizard').forEach(wizard => {
+            const animated = wizard.getAttribute('wizard-animated') !== 'false';
+            const animationSpeed = parseInt(wizard.getAttribute('wizard-animation-speed')) || 300;
+            const steps = wizard.querySelectorAll('.wizard-step');
+            let currentStep = 0;
+            
+            steps[currentStep].classList.add('active');
+            steps[currentStep].style.opacity = 1;
+
+            wizard.querySelectorAll('.wizard-next').forEach(button => {
+                button.addEventListener('click', () => {
+                    if (!validate.check(steps[currentStep])) {
+                        msg.warn('Form failed validation. Please fix the errors before proceeding.');
+                        return;
+                    }
+                    wizard.transition(steps[currentStep], steps[currentStep + 1], 'next', animated, animationSpeed);
+                    currentStep++;
+                });
+            });
+            wizard.querySelectorAll('.wizard-back').forEach(button => {
+                button.addEventListener('click', () => {
+                    wizard.transition(steps[currentStep], steps[currentStep - 1], 'back', animated, animationSpeed);
+                    currentStep--;
+                });
+            });
+        });
+    },
+    transition: (from, to, direction, animated, speed) => {
+        if (!animated) {
+            from.classList.remove('active');
+            to.classList.add('active');
+            return;
+        }
+
+        const outClass = direction === 'next' ? 'slide-out-left' : 'slide-out-right';
+        const inClass = direction === 'next' ? 'slide-in-right' : 'slide-in-left';
+
+        to.style.transition = 'none';
+        to.classList.add('active', inClass);
+        to.offsetHeight; // Trigger reflow
+        from.style.transition = `transform ${speed}ms, opacity ${speed}ms`;
+        to.style.transition = `transform ${speed}ms, opacity ${speed}ms`;
+        from.classList.add(outClass);
+        to.classList.remove(inClass);
+        to.classList.add('slide-center');
+
+        setTimeout(() => {
+            from.classList.remove('active', outClass);
+            to.classList.remove(inClass, 'slide-center');
+            from.style.transition = '';
+            to.style.transition = '';
+        }, speed);
+    }
+};