mypgs 1.1.5 → 1.3.2

package/assets/javascript/_imports.js

@@ -0,0 +1,25 @@
+import { pgs } from "./_pgs.js";
+
+import { PGS_accordion } from "./components/_accordion.js";
+import { PGS_dropdown } from "./components/_dropdown.js";
+import { PGS_menu } from "./components/_menu.js";
+import { PGS_modal } from "./components/_modals.js";
+import { PGS_notification } from "./components/_notifications.js";
+import { PGS_slides } from "./components/_slides.js";
+import { PGS_stepTabs } from "./components/_stepTabs.js";
+import { PGS_steps } from "./components/_steps.js";
+import { PGS_formValidate } from "./functions/_formValidate.js";
+import { PGS_scrollHorizontal } from "./functions/_scrollY.js";
+
+pgs.registerImport({
+    PGS_accordion,
+    PGS_dropdown,
+    PGS_menu,
+    PGS_modal,
+    PGS_notification,
+    PGS_slides,
+    PGS_stepTabs,
+    PGS_steps,
+    PGS_formValidate,
+    PGS_scrollHorizontal,
+});

package/assets/javascript/_pgs.js

@@ -224,6 +224,42 @@ export function pgs(root) {
     return api;
 }
 
-globalThis.pgs ??= pgs;
+const PGS_IMPORTS = {};
+
+function registerImportModule(name, module) {
+    const key = String(name || "").trim().replace(/^pgs[_-\s]*/i, "").toLowerCase();
 
+    if (!key) throw new TypeError("pgs.registerImport(...modules): ogni modulo deve avere name o PGS_name");
+
+    PGS_IMPORTS[key] = {
+        name,
+        module
+    };
+}
+
+pgs.registerImport = function (...modules) {
+    modules.flat().forEach(item => {
+        if (item && typeof item === "object" && !item.PGS_name && !item.name) {
+            Object.entries(item).forEach(([name, module]) => registerImportModule(name, module));
+            return;
+        }
 
+        registerImportModule(item?.PGS_name || item?.name, item);
+    });
+
+    return pgs;
+};
+
+pgs.import = function (...names) {
+    return names.flat().reduce((imports, name) => {
+        const key = String(name || "").trim().replace(/^pgs[_-\s]*/i, "").toLowerCase();
+        const item = PGS_IMPORTS[key];
+
+        if (!item) throw new Error(`pgs.import(): modulo "${name}" non registrato`);
+
+        imports[item.name] = item.module;
+        return imports;
+    }, {});
+};
+
+globalThis.pgs ??= pgs;

package/assets/javascript/components/_accordion.js

@@ -1,77 +1,116 @@
-//= 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);
+//= ACCORDION
+const API = new WeakMap();
+
+export function PGS_accordion_init(root = document) {
+    pgs(root).querySelectorAll("accordion").forEach((accordion, index) => {
+        if (API.has(accordion)) return;
+
+        const BUTTON = pgs(accordion).querySelector("accordion-button");
+        const CONTENT = pgs(accordion).querySelector("accordion-content");
+        if (!BUTTON || !CONTENT) return;
+
+        //== 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;
         }
-    }
 
-    //+ FN ACCORDION
-    function accordionFunction() {
-        const isOpen = pgs(accordion).state.contains("open");
-        const nowOpen = !isOpen;
+        //+ Chiudi tutti gli altri
+        function closeOltherAccordion() {
+            for (const otherLi of pgs(document).querySelectorAll("accordion")) {
+                if (otherLi === accordion) continue;
 
-        pgs(accordion).state.toggle("open", nowOpen);
-        accordionAccessibility(nowOpen, BUTTON, CONTENT);
+                const otherBtn = pgs(otherLi).querySelector("accordion-button");
+                const otherContent = pgs(otherLi).querySelector("accordion-content");
+                if (!otherBtn || !otherContent) continue;
 
-        closeOltherAccordion();
+                pgs(otherLi).state().remove("open");
+                accordionAccessibility(false, otherBtn, otherContent);
+            }
+        }
+
+        //+ FN ACCORDION
+        function accordionFunction() {
+            const isOpen = pgs(accordion).state.contains("open");
+            const nowOpen = !isOpen;
 
-        //== scroll to view
-        if (nowOpen) setTimeout(() => accordion.scrollIntoView({ block: "nearest", inline: "nearest" }), 100);
-    }
+            pgs(accordion).state.toggle("open", nowOpen);
+            accordionAccessibility(nowOpen, BUTTON, CONTENT);
 
-    // applica stato iniziale
-    accordionAccessibility(isOpenInit, BUTTON, CONTENT);
+            closeOltherAccordion();
+
+            //== scroll to view
+            if (nowOpen) setTimeout(() => accordion.scrollIntoView({ block: "nearest", inline: "nearest" }), 100);
+        }
 
-    //- Eventi
-    BUTTON.addEventListener("click", accordionFunction);
+        function open() {
+            if (!pgs(accordion).state.contains("open")) accordionFunction();
+        }
 
-    //- Tastiera: Enter / Space
-    BUTTON.addEventListener("keydown", (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            accordionFunction();
+        function close() {
+            if (pgs(accordion).state.contains("open")) accordionFunction();
         }
+
+        // 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();
+            }
+        });
+
+        API.set(accordion, {
+            element: accordion,
+            button: BUTTON,
+            content: CONTENT,
+            open,
+            close,
+            toggle: accordionFunction,
+            refresh: () => {
+                PGS_accordion_init(accordion.parentNode || document);
+                return API.get(accordion);
+            },
+            isOpen: () => pgs(accordion).state.contains("open"),
+        });
     });
+}
+
+//# INIT
+PGS_accordion_init();
+
+//# API
+export function PGS_accordion_api(selector) {
+    return API.get(selector);
+}
 
-});
+export const PGS_accordion = {
+    PGS_name: "PGS_accordion",
+    init: PGS_accordion_init,
+    api: PGS_accordion_api
+};

package/assets/javascript/components/_dropdown.js

@@ -1,6 +1,10 @@
 // + dropdown (Popover API)
-export function pgs_dropdown() {
-    pgs(document).querySelectorAll("dropdown").forEach((DROPDOWN, index) => {
+const API = new WeakMap();
+
+export function PGS_dropdown_init(root = document) {
+    pgs(root).querySelectorAll("dropdown").forEach((DROPDOWN, index) => {
+        if (API.has(DROPDOWN)) return;
+
         const BUTTON = pgs(DROPDOWN).querySelector("dropdown-button");
         const CONTENT = pgs(DROPDOWN).querySelector("dropdown-content");
 
@@ -101,8 +105,49 @@ export function pgs_dropdown() {
         window.addEventListener("scroll", () => {
             if (CONTENT.matches(":popover-open")) updatePopoverPosition();
         }, true);
+
+        function open() {
+            if (CONTENT.matches(":popover-open")) return;
+            updatePopoverPosition();
+            CONTENT.showPopover();
+        }
+
+        function close() {
+            if (!CONTENT.matches(":popover-open")) return;
+            CONTENT.hidePopover();
+        }
+
+        function toggle() {
+            CONTENT.matches(":popover-open") ? close() : open();
+        }
+
+        API.set(DROPDOWN, {
+            element: DROPDOWN,
+            button: BUTTON,
+            content: CONTENT,
+            open,
+            close,
+            toggle,
+            updatePosition: updatePopoverPosition,
+            refresh: () => {
+                PGS_dropdown_init(DROPDOWN.parentNode || document);
+                return API.get(DROPDOWN);
+            },
+            isOpen: () => CONTENT.matches(":popover-open"),
+        });
     });
 }
 
 // # INIT
-pgs_dropdown();
+PGS_dropdown_init();
+
+// # API
+export function PGS_dropdown_api(selector) {
+    return API.get(selector);
+}
+
+export const PGS_dropdown = {
+    PGS_name: "PGS_dropdown",
+    init: PGS_dropdown_init,
+    api: PGS_dropdown_api
+};

package/assets/javascript/components/_menu.js

@@ -1,13 +1,17 @@
-import { pgs_dropdown } from "./_dropdown";
+import { PGS_dropdown_init, PGS_dropdown_api } from "./_dropdown";
+
+const API = new WeakMap();
 
 //= DROP DOWN MENU
-export function PGS_menu() {
+export function PGS_menu_init(root = document) {
 
-    pgs(document).querySelectorAll('menu-horizontal').forEach(MENU => {
+    pgs(root).querySelectorAll('menu-horizontal').forEach(MENU => {
+        if (API.has(MENU)) return;
 
         MENU.querySelectorAll('nav > ul > li.menu-item-has-children').forEach(li => {
             if (li.querySelector("ul")) {
                 const ul = li.querySelector("ul");
+                if (pgs(li).querySelector("dropdown-button")) return;
 
                 const button = document.createElement("button");
                 button.className = "icon-down";
@@ -22,14 +26,28 @@ export function PGS_menu() {
                 pgs(ul).add("menu-vertical")
             }
         });
+
+        API.set(MENU, {
+            element: MENU,
+            type: "horizontal",
+            items: () => Array.from(MENU.querySelectorAll('nav > ul > li')),
+            submenus: () => Array.from(MENU.querySelectorAll('.menu-item-has-children > ul')),
+            dropdowns: () => Array.from(MENU.querySelectorAll('.menu-item-has-children')).map(PGS_dropdown_api).filter(Boolean),
+            refresh: () => {
+                PGS_menu_init(MENU.parentNode || document);
+                return API.get(MENU);
+            },
+        });
     });
 
-    pgs(document).querySelectorAll('menu-vertical').forEach(MENU => {
+    pgs(root).querySelectorAll('menu-vertical').forEach(MENU => {
+        if (API.has(MENU)) return;
 
         MENU.querySelectorAll('.menu-item-has-children').forEach((li, index) => {
             const ul = li.querySelector("ul");
 
             if (!ul) return
+            if (li.querySelector(":scope > button")) return;
 
             const button = document.createElement("button");
             button.className = "icon-down buttonIcon";
@@ -64,6 +82,42 @@ export function PGS_menu() {
             });
         });
 
+        function submenu(index) {
+            return MENU.querySelectorAll('.menu-item-has-children > ul')[index];
+        }
+
+        function setSubmenu(index, open) {
+            const ul = submenu(index);
+            const button = ul?.parentElement?.querySelector(":scope > button");
+            if (!ul || !button) return;
+
+            pgs(ul).state.toggle("open", open);
+            button.setAttribute("aria-expanded", String(open));
+            button.setAttribute("aria-label", open ? "Chiudi sottomenu" : "Apri sottomenu");
+        }
+
+        API.set(MENU, {
+            element: MENU,
+            type: "vertical",
+            items: () => Array.from(MENU.querySelectorAll(':scope > li')),
+            submenus: () => Array.from(MENU.querySelectorAll('.menu-item-has-children > ul')),
+            openSubmenu: (index) => setSubmenu(index, true),
+            closeSubmenu: (index) => setSubmenu(index, false),
+            toggleSubmenu: (index) => {
+                const ul = submenu(index);
+                if (!ul) return;
+                setSubmenu(index, !pgs(ul).state.contains("open"));
+            },
+            isSubmenuOpen: (index) => {
+                const ul = submenu(index);
+                return ul ? pgs(ul).state.contains("open") : false;
+            },
+            refresh: () => {
+                PGS_menu_init(MENU.parentNode || document);
+                return API.get(MENU);
+            },
+        });
+
         // pgs(document).querySelectorAll('menu-vertical').forEach(MENU => {
 
         //     MENU.querySelectorAll('.menu-item-has-children').forEach(li => {
@@ -85,8 +139,19 @@ export function PGS_menu() {
         //     });
         // });
     });
-    pgs_dropdown()
+    PGS_dropdown_init()
 }
 
 //# INIT PGS_menu
-PGS_menu()
+PGS_menu_init()
+
+//# API
+export function PGS_menu_api(selector) {
+    return API.get(selector);
+}
+
+export const PGS_menu = {
+    PGS_name: "PGS_menu",
+    init: PGS_menu_init,
+    api: PGS_menu_api
+};

package/assets/javascript/components/_modals.js

@@ -1,7 +1,9 @@
 //# MODAL
-PGS_modal()
-export function PGS_modal(selector = "modal") {
+const API = new WeakMap();
+
+export function PGS_modal_init(selector = "modal") {
     pgs(document).querySelectorAll(selector).forEach(MODAL => {
+        if (API.has(MODAL)) return;
 
         const BUTTON_OPEN = pgs(MODAL).querySelector("modal-button");        
         const DIALOG = MODAL.querySelector("dialog");
@@ -54,9 +56,14 @@ export function PGS_modal(selector = "modal") {
         //+ FN OPEN 
         function openModal(e) {
             e?.stopImmediatePropagation();
+            if (DIALOG.open) {
+                closeModal(e);
+                return;
+            }
+
             if (!DIALOG.open) document.querySelectorAll("dialog[open]").forEach((dlg) => dlg.close());
             statusModal(true);
-            DIALOG.open ? closeModal(e) : topLevel ? DIALOG.showModal() : DIALOG.show();
+            topLevel ? DIALOG.showModal() : DIALOG.show();
             // modalCustomEvents('modal:open', { event: e });
             MODAL.dispatchEvent(new CustomEvent('modal:open'));
             DIALOG.dispatchEvent(new CustomEvent('modal:open'));
@@ -72,6 +79,14 @@ export function PGS_modal(selector = "modal") {
             DIALOG.dispatchEvent(new CustomEvent('modal:close'));
         }
 
+        function forceOpen(e) {
+            if (!DIALOG.open) openModal(e);
+        }
+
+        function forceClose(e) {
+            if (DIALOG.open) closeModal(e);
+        }
+
         //+ fn OPEN ON HISTORY
         function openModalOnHistory() {
             const params = new URLSearchParams(window.location.search);
@@ -117,7 +132,34 @@ export function PGS_modal(selector = "modal") {
                 } catch (_) { }
             });
         }
+
+        API.set(MODAL, {
+            element: MODAL,
+            button: BUTTON_OPEN,
+            dialog: DIALOG,
+            closeButton: BUTTON_CLOSE,
+            open: forceOpen,
+            close: forceClose,
+            toggle: openModal,
+            refresh: () => {
+                PGS_modal_init(selector);
+                return API.get(MODAL);
+            },
+            isOpen: () => DIALOG.open,
+        });
     });
 }
 
 //# INIT PGS_modal
+PGS_modal_init()
+
+//# API
+export function PGS_modal_api(selector) {
+    return API.get(selector);
+}
+
+export const PGS_modal = {
+    PGS_name: "PGS_modal",
+    init: PGS_modal_init,
+    api: PGS_modal_api
+};

package/assets/javascript/components/_notifications.js

@@ -0,0 +1,163 @@
+//= PGS_notification
+const fn_notification = {
+    _escapeHtml(value) {
+        return String(value ?? "");
+    },
+
+    _getDuration(notification) {
+        const rawDuration = notification.duration;
+        const duration = Number.parseInt(rawDuration, 10);
+
+        return Number.isNaN(duration) ? 5000 : duration;
+    },
+
+    _getApi(notification) {
+        const element = String(notification.element || "notification").trim();
+
+        return element === "toast" ? PGS_notification.toast : PGS_notification.alert;
+    },
+
+    _getType(notification, api) {
+        const type = String(notification.type || "info").trim();
+
+        return typeof api[type] === "function" ? type : "info";
+    },
+
+    _getData(root) {
+        try {
+            return JSON.parse(root.dataset.notification || "{}");
+        } catch (error) {
+            console.warn("PGS notification: dati non validi", error);
+            return {};
+        }
+    },
+
+    _getContent(title, content) {
+        const safeContent = this._escapeHtml(content);
+        const safeTitle = this._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>
+        `;
+    },
+
+    initNotification(type, containerToken, icon, text, timeout, methodDelete = "replace", link = null) {
+        let containerNotification = pgs(document).querySelector(containerToken);
+
+        //== Create Container
+        if (!containerNotification) {
+            const newContainer = document.createElement("div");
+            pgs(newContainer).add(containerToken);
+            newContainer.setAttribute("aria-live", "polite");
+            newContainer.setAttribute("aria-relevant", "additions");
+            document.body.appendChild(newContainer);
+            containerNotification = newContainer;
+        }
+
+        //== Create Notification
+        const notification = document.createElement(link ? "a" : "div");
+        if (methodDelete == "replace") containerNotification.innerHTML = "";
+        if (link) notification.href = link;
+        if (timeout > 0) notification.style.setProperty("--notification-timeout", timeout + "ms");
+        pgs(notification).state.add(type);
+        pgs(notification).add("notification-element");
+        notification.setAttribute("role", type == "error" ? "alert" : "status")
+        notification.innerHTML = `${icon} <p>${text}</p>`;
+        containerNotification.appendChild(notification);
+
+
+        //+ Animation delete 
+        function deleteNotification() {
+            methodDelete == "stack" ? notification.style.translate = "120%" : notification.style.opacity = "0";
+            setTimeout(() => notification.remove(), 300);
+        }
+
+        //== Timeout delete
+        if (timeout > 0) setTimeout(() => { deleteNotification() }, timeout);
+
+        //== button delete
+        const btnDelete = document.createElement("button");
+        btnDelete.type = "button";
+        btnDelete.ariaLabel = "Rimuovi notifica";
+        btnDelete.innerHTML = '<i class="fa-solid fa-xmark"></i>';
+        btnDelete.setAttribute("pgs", "buttonClose");
+        notification.insertAdjacentElement("afterbegin", btnDelete);
+
+        //== event
+
+        btnDelete.addEventListener("click", function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            e.stopImmediatePropagation()
+            deleteNotification(e); // Esegue la tua funzione
+        });
+    },
+
+    deleteAll(containerToken) {
+        let containerNotification = pgs(document).querySelector(containerToken);
+        if (containerNotification) containerNotification.innerHTML = "";
+    },
+
+    trigger(root = document) {
+        pgs(root).querySelectorAll("notificationTrigger").forEach(element => {
+            if (!element || element.dataset.initialize === "true") return;
+
+            element.dataset.initialize = "true";
+
+            const notification = this._getData(element);
+            const title = String(notification.title || "").trim();
+            const content = String(notification.message || "").trim();
+
+            if (!title && !content) {
+                element.remove();
+                return;
+            }
+
+            const link = notification.link || null;
+            const icon = notification.icon || undefined;
+            const duration = this._getDuration(notification);
+            const api = this._getApi(notification);
+            const type = this._getType(notification, api);
+            const formattedContent = this._getContent(title, content);
+
+            if (api === PGS_notification.toast) api[type](formattedContent, duration, icon);
+            else api[type](formattedContent, link, duration, icon);
+
+            element.remove();
+        });
+    }
+};
+
+//# EXPORT 
+export function PGS_notificationTrigger_init(root = document) {
+    return fn_notification.trigger(root);
+}
+
+export const PGS_notification = {
+    PGS_name: "PGS_notification",
+    trigger: PGS_notificationTrigger_init,
+    alert: {
+        error: (text = "Errore", link = null, timeout = 0, icon = '<i class="fa-solid fa-octagon-xmark"></i>') => fn_notification.initNotification("error", "notification", icon, text, timeout, "stack", link),
+        success: (text = "Aggiornato", link = null, timeout = 0, icon = '<i class="fa-solid fa-check"></i>') => fn_notification.initNotification("success", "notification", icon, text, timeout, "stack", link),
+        info: (text = "Aggiornamento", link = null, timeout = 0, icon = '<i class="fa-solid fa-circle-info"></i>',) => fn_notification.initNotification("info", "notification", icon, text, timeout, "stack", link),
+        warning: (text = "Attenzione", link = null, timeout = 0, icon = '<i class="fa-solid fa-triangle-exclamation"></i>') => fn_notification.initNotification("warning", "notification", icon, text, timeout, "stack", link),
+        deleteAll: () => fn_notification.deleteAll("notification")
+    },
+    toast: {
+        error: (text = "Errore", timeout = 4000, icon = '<i class="fa-solid fa-octagon-xmark"></i>',) => fn_notification.initNotification("error", "toast", icon, text, timeout),
+        success: (text = "Aggiornato", timeout = 4000, icon = '<i class="fa-solid fa-check"></i>',) => fn_notification.initNotification("success", "toast", icon, text, timeout),
+        info: (text = "Aggiornamento", timeout = 0, icon = '<i class="fa-solid fa-circle-info"></i>',) => fn_notification.initNotification("info", "toast", icon, text, timeout),
+        warning: (text = "Attenzione", timeout = 4000, icon = '<i class="fa-solid fa-triangle-exclamation"></i>',) => fn_notification.initNotification("warning", "toast", icon, text, timeout),
+        deleteAll: () => fn_notification.deleteAll("toast")
+    }
+};
+
+
+//= EXECUTE 
+if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", () => PGS_notificationTrigger_init());
+else PGS_notificationTrigger_init();