mypgs 1.1.5 → 1.3.3

package/assets/javascript/_pgs.js

@@ -220,10 +220,61 @@ export function pgs(root) {
     const api = createBasePgs();
     api.state = createState("pgs-state");
     api.option = createOption("pgs-option");
-    api.modules = createOption("pgs-modules");
     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.registerModules = function (modules = {}) {
+    Object.entries(modules).forEach(([name, module]) => {
+        const key = String(name || "").trim();
+        if (!key) return;
+
+        const hasOwn = Object.prototype.hasOwnProperty.call(pgs, key);
+        if (hasOwn && pgs[key] !== module) {
+            throw new Error(`pgs.registerModules(): "${key}" e' gia' definito su pgs`);
+        }
+
+        pgs[key] = module;
+    });
+
+    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,125 @@
-//= 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();
+let accordionId = 0;
+
+function nextAccordionId() {
+    accordionId += 1;
+    return accordionId;
+}
+
+function directPgsChild(element, token) {
+    return Array.from(element.children).find(child => pgs(child).contains(token));
+}
+
+export function PGS_accordion_init(root = document) {
+    pgs(root).querySelectorAll("accordion").forEach((accordion) => {
+        if (API.has(accordion)) return;
+
+        const BUTTON = directPgsChild(accordion, "accordion-button");
+        const CONTENT = directPgsChild(accordion, "accordion-content");
+        if (!BUTTON || !CONTENT) return;
+
+        //== ID univoci per aria-controls / aria-labelledby
+        const ID = nextAccordionId();
+        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");
+        if (!BUTTON.id) BUTTON.setAttribute("id", btnId);
+
+        if (!CONTENT.id) CONTENT.setAttribute("id", panelId);
+        BUTTON.setAttribute("aria-controls", CONTENT.id);
+        CONTENT.setAttribute("role", "region");
+        CONTENT.setAttribute("aria-labelledby", BUTTON.id);
+
+        //+ 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 = {
+    init: PGS_accordion_init,
+    api: PGS_accordion_api
+};

package/assets/javascript/components/_dropdown.js

@@ -1,108 +1,209 @@
-// + 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 USE_FALLBACK_POSITIONING = pgs(DROPDOWN).contains("tooltip") || !HAS_ANCHOR_POSITIONING;
-
-        const updatePopoverPosition = () => {
-            if (!USE_FALLBACK_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`);
-        };
+// + dropdown
+const API = new WeakMap();
+const OPEN_DROPDOWNS = new Set();
+const VIEWPORT_GAP = 8;
+let dropdownId = 0;
 
-        BUTTON.addEventListener("click", e => {
-            if (!USE_FALLBACK_POSITIONING) return;
+function nextDropdownId() {
+    dropdownId += 1;
+    return dropdownId;
+}
 
-            e.preventDefault();
-            if (CONTENT.matches(":popover-open")) {
-                CONTENT.hidePopover();
-                return;
-            }
+function isDropdownContent(element) {
+    return element instanceof Element && pgs(element).contains("dropdown-content");
+}
 
-            updatePopoverPosition();
-            CONTENT.showPopover();
-        });
+function getDropdownTrigger(dropdown, content) {
+    const children = Array.from(dropdown.children).filter(child => child !== content);
+    const dropdownButton = children.find(child => pgs(child).contains("dropdown-button"));
 
-        // == 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();
-            }
-        });
+    return dropdownButton || children.find(child => !isDropdownContent(child)) || dropdown;
+}
+
+function getDropdownContent(dropdown) {
+    return Array.from(dropdown.children).find(isDropdownContent) || pgs(dropdown).querySelector("dropdown-content");
+}
+
+function getDropdowns(root) {
+    const dropdowns = root instanceof Element && pgs(root).contains("dropdown") ? [root] : [];
+    dropdowns.push(...pgs(root).querySelectorAll("dropdown"));
+    return dropdowns;
+}
+
+function getposition(dropdown) {
+    const option = pgs(dropdown).option;
+    const optionValue = option.getValueBrackets("position");
+    const raw = (optionValue || "bottom center").trim().toLowerCase();
+    const parts = raw.split(/\s+/).filter(Boolean);
+    const side = parts.find(part => ["top", "right", "bottom", "left"].includes(part)) || "bottom";
+    const align = parts.find(part => ["top", "right", "bottom", "left", "center"].includes(part) && part !== side) || "center";
+
+    return { side, align };
+}
+
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+
+function updateposition(dropdown) {
+    const data = API.get(dropdown);
+    if (!data || !data.isOpen()) return;
+
+    const { trigger, content } = data;
+    const { side, align } = getposition(dropdown);
+    const triggerRect = trigger.getBoundingClientRect();
+    const contentRect = content.getBoundingClientRect();
+    const viewportWidth = document.documentElement.clientWidth;
+    const maxLeft = Math.max(VIEWPORT_GAP, viewportWidth - contentRect.width - VIEWPORT_GAP);
+    let left = triggerRect.left + (triggerRect.width - contentRect.width) / 2;
+    let top = triggerRect.bottom + VIEWPORT_GAP;
+
+    if (side === "top" || side === "bottom") {
+        top = side === "top"
+            ? triggerRect.top - contentRect.height - VIEWPORT_GAP
+            : triggerRect.bottom + VIEWPORT_GAP;
+
+        if (align === "left") left = triggerRect.left;
+        if (align === "right") left = triggerRect.right - contentRect.width;
+    }
+
+    if (side === "left" || side === "right") {
+        left = side === "left"
+            ? triggerRect.left - contentRect.width - VIEWPORT_GAP
+            : triggerRect.right + VIEWPORT_GAP;
+        top = triggerRect.top + (triggerRect.height - contentRect.height) / 2;
+
+        if (align === "top") top = triggerRect.top;
+        if (align === "bottom") top = triggerRect.bottom - contentRect.height;
+    }
+
+    if (side === "left" && left < VIEWPORT_GAP) {
+        left = triggerRect.right + VIEWPORT_GAP;
+    }
+
+    if (side === "right" && left + contentRect.width > viewportWidth - VIEWPORT_GAP) {
+        left = triggerRect.left - contentRect.width - VIEWPORT_GAP;
+    }
+
+    left = clamp(left, VIEWPORT_GAP, maxLeft);
+
+    content.style.setProperty("--dropdown-left", `${Math.round(left)}px`);
+    content.style.setProperty("--dropdown-top", `${Math.round(top)}px`);
+}
+
+function updateOpenDropdowns() {
+    OPEN_DROPDOWNS.forEach(updateposition);
+}
+
+function closeDropdown(dropdown) {
+    const data = API.get(dropdown);
+    if (!data || !data.isOpen()) return;
 
-        window.addEventListener("resize", () => {
-            if (CONTENT.matches(":popover-open")) updatePopoverPosition();
+    pgs(dropdown).state.remove("open");
+    data.trigger.setAttribute("aria-expanded", "false");
+    OPEN_DROPDOWNS.delete(dropdown);
+}
+
+function openDropdown(dropdown) {
+    const data = API.get(dropdown);
+    if (!data || data.isOpen()) return;
+
+    OPEN_DROPDOWNS.forEach(item => {
+        if (item !== dropdown) closeDropdown(item);
+    });
+
+    pgs(dropdown).state.add("open");
+    data.trigger.setAttribute("aria-expanded", "true");
+    OPEN_DROPDOWNS.add(dropdown);
+    updateposition(dropdown);
+}
+
+function toggleDropdown(dropdown) {
+    const data = API.get(dropdown);
+    if (!data) return;
+
+    if (data.isOpen()) closeDropdown(dropdown);
+    else openDropdown(dropdown);
+}
+
+function isInsideAnyDropdown(target) {
+    return Array.from(OPEN_DROPDOWNS).some(dropdown => dropdown.contains(target));
+}
+
+function PGS_dropdown_init(root = document) {
+    getDropdowns(root).forEach((DROPDOWN) => {
+        if (API.has(DROPDOWN)) return;
+
+        const CONTENT = getDropdownContent(DROPDOWN);
+        if (!CONTENT) return;
+
+        const TRIGGER = getDropdownTrigger(DROPDOWN, CONTENT);
+        const id = nextDropdownId();
+
+        if (!TRIGGER.id) TRIGGER.id = `dropdown-btn-${id}`;
+        if (!CONTENT.id) CONTENT.id = `dropdown-panel-${id}`;
+
+        if (TRIGGER.matches("button") && !TRIGGER.hasAttribute("type")) {
+            TRIGGER.setAttribute("type", "button");
+        }
+
+        TRIGGER.setAttribute("aria-haspopup", "true");
+        TRIGGER.setAttribute("aria-controls", CONTENT.id);
+        TRIGGER.setAttribute("aria-expanded", String(pgs(DROPDOWN).state.contains("open")));
+        CONTENT.setAttribute("aria-labelledby", TRIGGER.id);
+
+        const data = {
+            element: DROPDOWN,
+            trigger: TRIGGER,
+            content: CONTENT,
+            open: () => openDropdown(DROPDOWN),
+            close: () => closeDropdown(DROPDOWN),
+            toggle: () => toggleDropdown(DROPDOWN),
+            refresh: () => {
+                PGS_dropdown_init(DROPDOWN.parentNode || document);
+                updateposition(DROPDOWN);
+                return API.get(DROPDOWN);
+            },
+            isOpen: () => pgs(DROPDOWN).state.contains("open")
+        };
+
+        TRIGGER.addEventListener("click", (event) => {
+            if (isDropdownContent(event.target)) return;
+            event.preventDefault();
+            event.stopPropagation();
+            toggleDropdown(DROPDOWN);
         });
-        window.addEventListener("scroll", () => {
-            if (CONTENT.matches(":popover-open")) updatePopoverPosition();
-        }, true);
+
+        CONTENT.addEventListener("click", event => event.stopPropagation());
+        API.set(DROPDOWN, data);
+
+        if (data.isOpen()) OPEN_DROPDOWNS.add(DROPDOWN);
+        updateposition(DROPDOWN);
     });
 }
 
+document.addEventListener("click", (event) => {
+    if (isInsideAnyDropdown(event.target)) return;
+    OPEN_DROPDOWNS.forEach(closeDropdown);
+});
+
+document.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape") return;
+    OPEN_DROPDOWNS.forEach(closeDropdown);
+});
+
+window.addEventListener("resize", updateOpenDropdowns);
+window.addEventListener("scroll", updateOpenDropdowns, true);
+
 // # INIT
-pgs_dropdown();
+PGS_dropdown_init();
+
+// # API
+function PGS_dropdown_api(selector) {
+    return API.get(selector);
+}
+
+export const PGS_dropdown = {
+    init: PGS_dropdown_init,
+    api: PGS_dropdown_api
+};