frayerjj-frontend 0.7.3 → 0.7.4

package/package.json

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

package/src/init.js

@@ -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

@@ -12,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);
+    }
+};