mypgs 1.0.0

package/README.md

@@ -0,0 +1,33 @@
+# MyPGS
+
+Libreria frontend con asset JavaScript e CSS precompilati per i componenti e i pattern MyPGS.
+
+## Installazione
+
+```bash
+npm install mypgs
+```
+
+## Utilizzo
+
+Importa gli asset compilati nel tuo progetto:
+
+```js
+import "mypgs";
+import "mypgs/style.css";
+```
+
+Lo script inizializza le funzionalita' globali della libreria ed espone `pgs` su `globalThis`.
+
+## Contenuto del pacchetto
+
+- `dist/javascript/index.js`
+- `dist/javascript/index.min.js`
+- `dist/css/index.css`
+- `dist/css/index.min.css`
+
+## Sviluppo
+
+```bash
+npm run build
+```

package/assets/javascript/_pgs.js

@@ -0,0 +1,214 @@
+/**
+ * @param {Element | Document} root
+*/
+export function pgs(root) {
+    const ATTR = "pgs";
+    if (!root) throw new TypeError("pgs(root): root richiesto");
+
+    const canAttr = typeof root.getAttribute === "function" && typeof root.setAttribute === "function";
+    const canQuery = typeof root.querySelector === "function" && typeof root.querySelectorAll === "function";
+
+    if (!canQuery) {
+        throw new TypeError("pgs(root): root deve supportare querySelector/querySelectorAll");
+    }
+
+    //+
+    function attrOnlyForElements(methodName) {
+        throw new TypeError(`pgs(${root.nodeName || "root"}).${methodName}(): disponibile solo su Element (non su Document)`);
+    };
+
+    //+
+    function concactSelector(value) {
+        if (Array.isArray(value)) value = value.join(",");
+        return String(value)
+            .split(",")
+            .map(v => v.trim())
+            .filter(Boolean)
+            .map(v => `[${ATTR}~="${v}"]`)
+            .join(",");
+    }
+
+    //+
+    function getValues(el, separator = " ") {
+        return (el.getAttribute(ATTR) || "")
+            .split(separator)
+            .filter(Boolean);
+    }
+
+    //+
+    function setValues(el, values, separator = " ") {
+        el.setAttribute(ATTR, values.join(separator));
+    }
+
+    //= BASE PGS 
+    function createBasePgs() {
+        function api() {
+            return api;
+        }
+
+        api.querySelector = function (value) {
+            return root.querySelector(concactSelector(value));
+        };
+
+        api.querySelectorAll = function (value) {
+            return root.querySelectorAll(concactSelector(value));
+        };
+
+        api.add = function (...values) {
+            if (!canAttr) return attrOnlyForElements("add");
+            const current = getValues(root);
+            for (const v of values) if (!current.includes(v)) current.push(v);
+            setValues(root, current);
+            return api;
+        };
+
+        api.remove = function (...values) {
+            if (!canAttr) return attrOnlyForElements("remove");
+            setValues(root, getValues(root).filter(v => !values.includes(v)));
+            return api;
+        };
+
+        api.toggle = function (value, force) {
+            if (!canAttr) return attrOnlyForElements("toggle");
+
+            const exists = getValues(root).includes(value);
+
+            if (force !== undefined) {
+                if (force && !exists) api.add(value);
+                if (!force && exists) api.remove(value);
+                return !!force;
+            }
+
+            if (exists) {
+                api.remove(value);
+                return false;
+            }
+
+            api.add(value);
+            return true;
+        };
+
+        api.contains = function (value) {
+            if (!canAttr) return attrOnlyForElements("contains");
+            return getValues(root).includes(value);
+        };
+
+        Object.defineProperty(api, "value", {
+            get() {
+                if (!canAttr) return undefined;
+                return root.getAttribute(ATTR);
+            },
+            set(v) {
+                if (!canAttr) return attrOnlyForElements("value");
+                root.setAttribute(ATTR, v);
+            }
+        });
+
+        return api;
+    }
+
+    //= STATE
+    function createState(attribute) {
+        if (!canAttr) return undefined;
+
+        const read = (sep = " ") =>
+            (root.getAttribute(attribute) || "").split(sep).filter(Boolean);
+
+        const write = (vals, sep = " ") =>
+            root.setAttribute(attribute, vals.join(sep));
+
+        // funzione chiamabile: state("active") == add("active")
+        function api(...values) {
+            api.add(...values);
+            return api;
+        }
+
+        api.add = function (...values) {
+            const toAdd = values.flat().map(v => String(v).trim()).filter(Boolean);
+            const current = read();
+            for (const v of toAdd) if (!current.includes(v)) current.push(v);
+            write(current);
+            return api;
+        };
+
+        api.remove = function (...values) {
+            const toRemove = values.flat().map(v => String(v).trim()).filter(Boolean);
+            const current = read().filter(v => !toRemove.includes(v));
+            write(current);
+            return api;
+        };
+
+        api.toggle = function (value) {
+            const v = String(value).trim();
+            if (!v) return false;
+
+            const current = read();
+            if (current.includes(v)) {
+                write(current.filter(x => x !== v));
+                return false;
+            }
+            current.push(v);
+            write(current);
+            return true;
+        };
+
+        api.contains = function (value) {
+            const v = String(value).trim();
+            if (!v) return false;
+            return read().includes(v);
+        };
+
+        Object.defineProperty(api, "value", {
+            get() { return root.getAttribute(attribute); },
+            set(v) { root.setAttribute(attribute, v); }
+        });
+
+        return api;
+    }
+
+    //= OPTION
+    function createOption(attribute) {
+        if (!canAttr) return undefined;
+
+        function api() {
+            return api;
+        }
+
+        api.contains = function (key) {
+            const source = root.getAttribute(attribute) || "";
+            const safeKey = String(key).replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+            return new RegExp(`(?:^|\\s)${safeKey}(?:\\[[^\\]]*\\])?(?=\\s|$)`)
+                .test(source);
+        };
+
+        api.getValueBrackets = function (key) {
+            const source = root.getAttribute(attribute) || "";
+            const safeKey = String(key).replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+            const match = source.match(
+                new RegExp(`(?:^|\\s)${safeKey}\\[([^\\]]*)\\]`)
+            );
+
+            return match ? match[1] : undefined;
+        };
+
+        Object.defineProperty(api, "value", {
+            get() { return root.getAttribute(attribute); },
+            set(v) { root.setAttribute(attribute, v); }
+        });
+
+        return api;
+    }
+
+    //# RETURN 
+    const api = createBasePgs();
+    api.state = createState("pgs-state");
+    api.option = createOption("pgs-option");
+    api.modules = createOption("pgs-modules");
+    return api;
+}
+
+globalThis.pgs ??= pgs;
+
+

package/assets/javascript/base/_darkmode.js

@@ -0,0 +1,121 @@
+//# DARKMODE
+
+
+//= CHANGE COLOR SVG & LOTTIE
+//+ SEARCH COLOR 
+function searchColor(type = "svg") {
+    const ROOT = getComputedStyle(document.documentElement);
+    const colors = []
+    for (let I = 0; I < 20; I++) {
+        const color = ROOT.getPropertyValue('--' + type + '-color-' + I).toLocaleLowerCase().split("&");
+        if (!color[0] == "" && !color[1] == "") {
+            let lightDark = [color[0], color[1]]
+            colors.push(lightDark)
+        }
+    }
+    return colors;
+}
+const colors_svg_lottie = [searchColor("svg"), searchColor("lottie")];
+
+
+//+ change COLORS
+function darkmodeColorSVG() {
+    function changecolor(svgDoc, type = "svg") {
+        let isDarkMode = (document.documentElement.getAttribute("data-darkmode") === "true") ? false : true;
+
+        svgDoc.querySelectorAll('[fill], [stroke]').forEach(fillStroke => {
+
+            for (const colors of colors_svg_lottie) {
+                for (const color of colors) {
+                    let OLD = (color[0] || '').replace(/\s/g, '');
+                    let NEW = (color[1] || '').replace(/\s/g, '');
+
+                    ["fill", "stroke"].forEach(attr => {
+                        const current = fillStroke.getAttribute(attr);
+
+                        fillStroke.style.transition = "fill 0.5s ease, stroke 0.5s ease";
+
+                        if (!isDarkMode) {
+                            if (current == OLD) fillStroke.setAttribute(attr, NEW)
+                        } else {
+                            if (current == NEW) fillStroke.setAttribute(attr, OLD)
+                        }
+                    });
+                }
+            }
+        });
+    }
+
+    //== OBJECTS
+    const objects = document.querySelectorAll('object[type="image/svg+xml"]');
+    objects.forEach(obj => {
+
+        //=== ALL FILL / STROKE
+        obj.addEventListener("load", () => {
+            const svgDoc = obj.contentDocument;
+            if (svgDoc) changecolor(svgDoc, "svg")
+        });
+
+        //=== In caso l'object sia già caricato
+        if (obj.contentDocument) {
+            const event = new Event("load");
+            obj.dispatchEvent(event);
+        }
+    });
+
+    //== LOTTIE
+    const lottiePlayers = document.querySelectorAll('lottie-player');
+    lottiePlayers.forEach(lottiePlayer => {
+
+        //=== ALL FILL / STROKE
+        lottiePlayer.addEventListener("load", () => {
+            const svg = lottiePlayer.shadowRoot.querySelector('svg');
+            if (svg) changecolor(svg, "lottie")
+        });
+
+        //=== In caso lottie sia già caricato
+        if (lottiePlayer.shadowRoot) {
+            const event = new Event("load");
+            lottiePlayer.dispatchEvent(event);
+        }
+    });
+}
+
+
+
+//= BUTTON DARKMODE 
+//+ CHANGE ICON AND SVG 
+let toggleDarkmode = pgs(document).querySelectorAll("toggleDarkmode");
+if (localStorage.getItem("screenIsDarkMode") === "true") {
+    document.body.classList.add("darkmode");
+    document.querySelector(":root").setAttribute("data-darkmode", "true");
+    document.body.setAttribute("data-darkmode", "true");
+}
+
+function change(selector, isDarkMode) {
+    selector.forEach(button => {
+        const ICON = button.querySelector("i");
+        if (!ICON) return;
+        ICON.classList.toggle("fa-moon", !isDarkMode);
+        ICON.classList.toggle("fa-sun", isDarkMode);
+    });
+    darkmodeColorSVG();
+}
+
+toggleDarkmode.forEach(button => {
+
+    //== EXECUTE IMMEDIATELY
+    let isDarkMode = document.documentElement.getAttribute("data-darkmode") === "true";
+    change(toggleDarkmode, isDarkMode);
+
+    //== CLICK BUTTON 
+    button.addEventListener("click", () => {
+        let isDarkMode = (document.documentElement.getAttribute("data-darkmode") === "true") ? false : true;
+        localStorage.setItem("screenIsDarkMode", isDarkMode);
+
+        document.body.classList.toggle("darkmode", isDarkMode);
+        document.body.setAttribute("data-darkmode", isDarkMode);
+        document.querySelector(":root").setAttribute("data-darkmode", isDarkMode);
+        change(toggleDarkmode, isDarkMode);
+    });
+});

package/assets/javascript/base/_object.js

@@ -0,0 +1,42 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const objects = document.querySelectorAll('object[type="image/svg+xml"]');
+
+    objects.forEach(obj => {
+        function applyAspectRatio(svgDoc) {
+            if (!svgDoc) return;
+            const svg = svgDoc.querySelector("svg");
+            if (!svg) return;
+
+            const computedStyle = window.getComputedStyle(obj);
+            svg.setAttribute("preserveAspectRatio", computedStyle.objectFit === 'cover' ? "xMidYMid slice" : "xMidYMid meet");
+        }
+
+        function init() {
+            const svgDoc = obj.contentDocument;
+            if (!svgDoc) return;
+
+            const svg = svgDoc.querySelector('svg');
+            if (!svg) return;
+
+            applyAspectRatio(svgDoc);
+            if (obj.__objectResizeObserver) return;
+
+            let rafId = 0;
+            const resizeObserver = new ResizeObserver(() => {
+                if (rafId) return;
+                rafId = requestAnimationFrame(() => {
+                    rafId = 0;
+                    applyAspectRatio(svgDoc);
+                });
+            });
+
+            resizeObserver.observe(obj);
+            obj.__objectResizeObserver = resizeObserver;
+        }
+
+        if (obj.contentDocument && obj.contentDocument.querySelector('svg')) init();
+        else obj.addEventListener('load', init, { once: true });
+    });
+
+    document.body.classList.add("object-loaded");
+});

package/assets/javascript/components/_accordion.js

@@ -0,0 +1,77 @@
+//= ACCORDION 
+const allAccordion = pgs(document).querySelectorAll("accordion")
+
+allAccordion.forEach((accordion, index) => {
+
+    const BUTTON = pgs(accordion).querySelector("accordion-button");
+    const CONTENT = pgs(accordion).querySelector("accordion-content");
+
+    //== ID univoci per aria-controls / aria-labelledby
+    const ID = index + 1;
+    const btnId = `acc-btn-${ID}`;
+    const panelId = `acc-panel-${ID}`;
+
+    //== Stato iniziale
+    const isOpenInit = pgs(accordion).state.contains("open");
+
+    //== Accessibilità (setup una volta)
+    BUTTON.setAttribute("role", "button");
+    BUTTON.setAttribute("tabindex", "0");
+    BUTTON.setAttribute("id", btnId);
+    BUTTON.setAttribute("aria-controls", panelId);
+
+    CONTENT.setAttribute("id", panelId);
+    CONTENT.setAttribute("role", "region");
+    CONTENT.setAttribute("aria-labelledby", btnId);
+
+    //+ Accessibility (applica stato aperto/chiuso)
+    function accordionAccessibility(isOpen, button, content) {
+        const text = (button?.textContent || "").trim().replace(/\s+/g, " ");
+        button.setAttribute("aria-label", `${isOpen ? "Chiudi" : "Apri"} ${text || "sezione"}`);
+        button.setAttribute("aria-expanded", String(isOpen));
+        content.hidden = !isOpen;
+    }
+
+    //+ Chiudi tutti gli altri
+    function closeOltherAccordion() {
+        for (const otherLi of allAccordion) {
+            if (otherLi === accordion) continue;
+
+            const otherBtn = pgs(otherLi).querySelector("accordion-button");
+            const otherContent = pgs(otherLi).querySelector("accordion-content");
+            if (!otherBtn || !otherContent) continue;
+
+            pgs(otherLi).state().remove("open");
+            accordionAccessibility(false, otherBtn, otherContent);
+        }
+    }
+
+    //+ FN ACCORDION
+    function accordionFunction() {
+        const isOpen = pgs(accordion).state.contains("open");
+        const nowOpen = !isOpen;
+
+        pgs(accordion).state.toggle("open", nowOpen);
+        accordionAccessibility(nowOpen, BUTTON, CONTENT);
+
+        closeOltherAccordion();
+
+        //== scroll to view
+        if (nowOpen) setTimeout(() => accordion.scrollIntoView({ block: "nearest", inline: "nearest" }), 100);
+    }
+
+    // applica stato iniziale
+    accordionAccessibility(isOpenInit, BUTTON, CONTENT);
+
+    //- Eventi
+    BUTTON.addEventListener("click", accordionFunction);
+
+    //- Tastiera: Enter / Space
+    BUTTON.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            accordionFunction();
+        }
+    });
+
+});

package/assets/javascript/components/_dropdown.js

@@ -0,0 +1,107 @@
+// + dropdown (Popover API)
+export function pgs_dropdown() {
+    pgs(document).querySelectorAll("dropdown").forEach((DROPDOWN, index) => {
+        const BUTTON = pgs(DROPDOWN).querySelector("dropdown-button");
+        const CONTENT = pgs(DROPDOWN).querySelector("dropdown-content");
+
+        if (!BUTTON || !CONTENT) return;
+
+        // = INIT
+        if (DROPDOWN.getAttribute("data-initialize") === "true") return;
+        DROPDOWN.setAttribute("data-initialize", "true");
+
+        // == CSS dropdown-anchor
+        const ANCHOR_NAME = `--dropdown-anchor-${index}`;
+        DROPDOWN.style.setProperty("--dropdown-anchor", ANCHOR_NAME);
+
+        // == IDs + ACCESSIBILITY
+        if (!BUTTON.id) BUTTON.id = `dropdown-btn-${index}`;
+        if (!CONTENT.id) CONTENT.id = `dropdown-panel-${index}`;
+        BUTTON.setAttribute("type", "button");
+        BUTTON.setAttribute("aria-haspopup", "true");
+        BUTTON.setAttribute("aria-controls", CONTENT.id);
+        BUTTON.setAttribute("aria-expanded", "false");
+        CONTENT.setAttribute("aria-labelledby", BUTTON.id);
+
+        // == POPVER SETUP 
+        if (!CONTENT.hasAttribute("popover")) CONTENT.setAttribute("popover", "auto");
+        BUTTON.setAttribute("popovertarget", CONTENT.id);
+        BUTTON.setAttribute("popovertargetaction", "toggle");
+
+        //-( Safari / legacy fallback: popover is in the top layer, so fixed coords are viewport-based.
+        const HAS_ANCHOR_POSITIONING =
+            CSS.supports("anchor-name: --dropdown-anchor") &&
+            CSS.supports("position-anchor: --dropdown-anchor") &&
+            CSS.supports("position-area: bottom") &&
+            CSS.supports("top: anchor(bottom)");
+
+        const updatePopoverPosition = () => {
+            if (HAS_ANCHOR_POSITIONING) return;
+
+            const buttonRect = BUTTON.getBoundingClientRect();
+            const style = getComputedStyle(DROPDOWN);
+            const offset = parseFloat(style.getPropertyValue("--dropdown-offset")) || 10;
+            const padding = parseFloat(style.getPropertyValue("--dropdown-padding")) || 0;
+            const arrowSize = parseFloat(style.getPropertyValue("--dropdown-arrow-size")) || 12;
+            const viewportGap = 8;
+            const viewportWidth = window.innerWidth;
+            const maxWidth = viewportWidth - viewportGap * 2;
+            const contentStyle = getComputedStyle(CONTENT);
+            const cssMaxWidth = parseFloat(contentStyle.maxWidth);
+            const dropdownMaxWidth = Number.isFinite(cssMaxWidth) ? Math.min(cssMaxWidth, maxWidth) : maxWidth;
+            const contentWidth = Math.min(
+                Math.max(CONTENT.scrollWidth + padding * 2, buttonRect.width),
+                dropdownMaxWidth
+            );
+            const top = buttonRect.bottom + offset;
+            const centeredLeft = buttonRect.left + buttonRect.width / 2 - contentWidth / 2;
+            const left = Math.min(
+                Math.max(centeredLeft, viewportGap),
+                viewportWidth - contentWidth - viewportGap
+            );
+            const buttonCenter = buttonRect.left + buttonRect.width / 2;
+            const arrowLeft = Math.min(
+                Math.max(buttonCenter - left, padding + arrowSize),
+                contentWidth - padding - arrowSize
+            );
+
+            DROPDOWN.style.setProperty("--dropdown-fallback-top", `${top}px`);
+            DROPDOWN.style.setProperty("--dropdown-fallback-left", `${left}px`);
+            DROPDOWN.style.setProperty("--dropdown-arrow-left", `${arrowLeft}px`);
+        };
+
+        BUTTON.addEventListener("click", e => {
+            if (HAS_ANCHOR_POSITIONING) return;
+
+            e.preventDefault();
+            if (CONTENT.matches(":popover-open")) {
+                CONTENT.hidePopover();
+                return;
+            }
+
+            updatePopoverPosition();
+            CONTENT.showPopover();
+        });
+
+        // == sync ARIA + data-open quando apre/chiude
+        CONTENT.addEventListener("toggle", e => {
+            const open = CONTENT.matches(":popover-open");
+            BUTTON.setAttribute("aria-expanded", open ? "true" : "false");
+            pgs(DROPDOWN).state.toggle("open", open);
+            if (open) {
+                updatePopoverPosition();
+                CONTENT.querySelector('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])')?.focus();
+            }
+        });
+
+        window.addEventListener("resize", () => {
+            if (CONTENT.matches(":popover-open")) updatePopoverPosition();
+        });
+        window.addEventListener("scroll", () => {
+            if (CONTENT.matches(":popover-open")) updatePopoverPosition();
+        }, true);
+    });
+}
+
+// # INIT
+pgs_dropdown();

package/assets/javascript/components/_exeNotifications.js

@@ -0,0 +1,85 @@
+import { PGS_notification, PGS_toast } from "../functions/_notifications.js";
+
+function escapeHtml(value) {
+    return String(value ?? "");
+}
+
+function getDuration(notification) {
+    const rawDuration = notification.duration;
+    const duration = Number.parseInt(rawDuration, 10);
+
+    return Number.isNaN(duration) ? 5000 : duration;
+}
+
+function getNotificationApi(notification) {
+    const element = String(notification.element || "notification").trim();
+
+    return element === "toast" ? PGS_toast : PGS_notification;
+}
+
+function getNotificationType(notification, api) {
+    const type = String(notification.type || "info").trim();
+
+    return typeof api[type] === "function" ? type : "info";
+}
+
+function getNotificationData(root) {
+    try {
+        return JSON.parse(root.dataset.notification || "{}");
+    } catch (error) {
+        console.warn("PGS notification: dati non validi", error);
+        return {};
+    }
+}
+
+function getNotificationContent(title, content) {
+    const safeContent = escapeHtml(content);
+    const safeTitle = escapeHtml(title);
+
+    if (!safeTitle) return safeContent;
+    if (!safeContent) return `<span pgs="notification-element-title">${safeTitle}</span>`;
+
+    return `
+        <span pgs="notification-element-title">${safeTitle}</span>
+        <br>
+        <span pgs="notification-element-content">${safeContent}</span>
+    `;
+}
+
+export function PGS_md_notification(root) {
+    if (!root || root.dataset.initialize === "true") return;
+    root.dataset.initialize = "true";
+
+    const notification = getNotificationData(root);
+    const title = String(notification.title || "").trim();
+    const content = String(notification.message || "").trim();
+    if (!title && !content) {
+        root.remove();
+        return;
+    }
+
+    const link = notification.link || null;
+    const icon = notification.icon || undefined;
+    const duration = getDuration(notification);
+    const api = getNotificationApi(notification);
+    const type = getNotificationType(notification, api);
+    const formattedContent = getNotificationContent(title, content);
+
+    if (api === PGS_toast) {
+        api[type](formattedContent, duration, icon);
+    } else {
+        api[type](formattedContent, link, duration, icon);
+    }
+
+    root.remove();
+}
+
+function initMdNotifications() {
+    pgs(document).querySelectorAll("notificationTrigger").forEach(PGS_md_notification);
+}
+
+if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initMdNotifications);
+} else {
+    initMdNotifications();
+}