frayerjj-frontend 0.8.33 → 0.8.34

package/README.md

@@ -4,4 +4,24 @@ These are my basic scripts for extending Bootstrap 5, CKEditor, and the basic th
 
 You can install them with:
 
-npm install frayerjj-frontend
+npm install frayerjj-frontend
+
+## Entry Points
+
+This package now exposes two frontend presets:
+
+- Full (all features):
+
+	```js
+	import { init } from 'frayerjj-frontend/full';
+	import 'frayerjj-frontend/styles/full';
+	```
+
+- Slim (core-only):
+
+	```js
+	import { init } from 'frayerjj-frontend/slim';
+	import 'frayerjj-frontend/styles/slim';
+	```
+
+The default package root export remains available for backward compatibility.

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "frayerjj-frontend",
-  "version": "0.8.33",
+  "version": "0.8.34",
   "description": "My base frontend for various projects",
   "main": "src/index.js",
   "type": "module",
   "exports": {
     ".": "./src/index.js",
-    "./styles": "./src/scss/styles.scss"
+    "./full": "./src/full.js",
+    "./slim": "./src/slim.js",
+    "./styles": "./src/scss/styles.scss",
+    "./styles/full": "./src/scss/full.scss",
+    "./styles/slim": "./src/scss/slim.scss"
   },
-  "style": "src/scss/styles.scss",
+  "style": "src/scss/full.scss",
   "sideEffects": [
     "**/*.css",
     "**/*.scss"

package/src/full.js

@@ -0,0 +1 @@
+export { init } from './init';

package/src/scss/full.scss

@@ -0,0 +1,4 @@
+@import 'slim';
+@import 'autocomplete';
+@import 'tokenfield';
+@import 'wizard';

package/src/scss/slim.scss

@@ -0,0 +1,12 @@
+@import 'bootstrap/scss/bootstrap';
+@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';
+@import 'colors';
+@import 'dialog';
+@import 'content';
+@import 'nav';
+@import 'header';
+@import 'footer';
+@import 'loading';
+@import 'forms';

package/src/slim.js

@@ -0,0 +1,189 @@
+import * as bootstrap from 'bootstrap';
+import { loading } from './loading';
+import { msg } from './msg';
+import { modal } from './modal';
+import { session } from './session';
+import { validate } from './validate';
+
+export const init = (args) => {
+
+    const excluded = new Set(args?.exclude ?? []);
+    const use = (name) => !excluded.has(name);
+
+    window.bootstrap = bootstrap;
+    window.msg = msg;
+    window.modal = modal;
+    window.session = session;
+    window.validate = validate;
+    window.loading = loading;
+    loading.init(args?.loadingAnimationStyle ?? 'default');
+
+    window.addEventListener('load', async () => {
+
+        msg.verbose('Page Loaded, Initializing');
+        if (use('modal')) modal.ajax.init();
+        if (use('validate')) validate.init();
+
+        // Dynamic height for container-fixed
+        let container = document.querySelectorAll('.container-fixed');
+        if (container.length) {
+            let setHeigth = () => {
+                let sub = document.querySelectorAll('.navbar,header,footer');
+                if (container) {
+                    let height = window.innerHeight;
+                    sub.forEach((el) => {
+                        height -= el.offsetHeight;
+                    });
+                    container.forEach((el) => {
+                        el.style.height = height + 'px';
+                    });
+                }
+            };
+            setHeigth();
+            window.addEventListener('resize', setHeigth);
+        }
+
+        // Update date/time values to browser settings.
+        document.querySelectorAll('.dt-localize').forEach(el => {
+            msg.verbose('Localizing Date/Time');
+            const date = new Date(el.dataset.utc);
+            el.innerText = date.toLocaleString();
+        });
+
+        // Updates the id in the form action inside a modal. Used for delete confirm and edit modals.
+        document.querySelectorAll('.modal-uuid-update').forEach(el => {
+            msg.verbose('Enabling Modal UUID Update');
+            el.addEventListener('click', ev => {
+                msg.verbose('Updating Modal UUID');
+                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 {
+                    msg.warn('Unable to update modal UUID.');
+                    modal.close();
+                    modal.alert('Error', 'Unable to initialize form.');
+                }
+            });
+        });
+
+        // Automatically submits on change. Used in Page Nav Selects.
+        document.querySelectorAll('.change-submit').forEach(el => {
+            msg.verbose('Enabling Change Submit');
+            el.addEventListener('change', () => {
+                msg.verbose('Change Submit Triggered');
+                el.closest('form').submit();
+            });
+        });
+
+        // Confirm/Delete Modals
+        document.querySelectorAll('.confirm-link').forEach(el => {
+            msg.verbose('Enabling Confirm Link');
+            el.addEventListener('click', ev => {
+                msg.verbose('Confirm Link Triggered');
+                ev.preventDefault();
+                modal.confirm(
+                    el.getAttribute('confirm-msg') || 'Are you sure?',
+                    () => {
+                        const href = el.getAttribute('href');
+                        if (el.classList.contains('delete-link')) {
+                            const form = document.createElement('form');
+                            form.method = 'POST';
+                            form.action = href;
+                            const methodInput = document.createElement('input');
+                            methodInput.type = 'hidden';
+                            methodInput.name = '_method';
+                            methodInput.value = 'DELETE';
+                            form.appendChild(methodInput);
+                            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
+                            if (csrfToken) {
+                                const csrfInput = document.createElement('input');
+                                csrfInput.type = 'hidden';
+                                csrfInput.name = 'csrfmiddlewaretoken';
+                                csrfInput.value = csrfToken;
+                                form.appendChild(csrfInput);
+                            }
+                            document.body.appendChild(form);
+                            form.submit();
+                        } else
+                            location.href = href;
+                    },
+                    () => {},
+                    el.getAttribute('confirm-title') || 'Confirm',
+                    el.getAttribute('confirm-yes') || 'Yes',
+                    el.getAttribute('confirm-no') || 'No');
+            });
+        });
+
+        // Filter Selects
+        let filterSelects = document.querySelectorAll('.filter-select');
+        if (filterSelects.length) filterSelects.forEach(select => {
+            msg.verbose('Enabling Filter Select');
+            select.addEventListener('change', ev => {
+                msg.verbose('Filter Select Triggered');
+                document.querySelectorAll('.filter-item').forEach(el => {
+                    el.style.display = '';
+                    filterSelects.forEach(filter => {
+                        if (filter.value) {
+                            let attr = filter.getAttribute('filter-attr');
+                            if (el.getAttribute(attr) != filter.value)
+                                el.style.display = 'none';
+                        }
+                    });
+                });
+            });
+        });
+
+        // Scroll to top button
+        let toTop = document.getElementById('toTopBtn');
+        if (toTop) {
+            toTop.style.visibility = 'hidden';
+            toTop.addEventListener('click', () => {
+                msg.verbose('Scrolling to Top');
+                scrollTo(0, 0);
+            });
+            window.addEventListener('scroll', () => {
+                if (scrollY > 1500) {
+                    msg.verbose('Scrolling to Top Button Visible');
+                    toTop.style.visibility = 'visible';
+                } else {
+                    msg.verbose('Scrolling to Top Button Hidden');
+                    toTop.style.visibility = 'hidden';
+                }
+            });
+        }
+
+        // Tab Session Persistence
+        const PERSIST_CLASS = 'tab-session-persist';
+        document.querySelectorAll(`.${PERSIST_CLASS}`).forEach(container => {
+            const storageKey = `activeTab_${window.location.pathname}_${container.id}`;
+            const savedTarget = session.getStrVar(storageKey);
+            msg.verbose(`Restoring tab for container #${container.id} with key ${storageKey}:`, savedTarget);
+            if (savedTarget) {
+                const tabEl = container.querySelector(`[data-bs-target="${savedTarget}"], [href="${savedTarget}"]`);
+                if (tabEl) {
+                    const tab = new bootstrap.Tab(tabEl);
+                    tab.show();
+                }
+            }
+        });
+        document.addEventListener('shown.bs.tab', event => {
+            const tabButton = event.target;
+            const container = tabButton.closest(`.${PERSIST_CLASS}`);
+            if (container) {
+                const storageKey = `activeTab_${window.location.pathname}_${container.id}`;
+                const target = tabButton.getAttribute('data-bs-target') || tabButton.getAttribute('href');
+                session.set(storageKey, target);
+                msg.verbose(`Saved active tab for container #${container.id} with key ${storageKey}:`, target);
+            }
+        });
+
+    });
+
+};