mypgs 1.0.0

package/assets/javascript/components/_menu.js

@@ -0,0 +1,92 @@
+import { pgs_dropdown } from "./_dropdown";
+
+//= DROP DOWN MENU
+export function PGS_menu() {
+
+    pgs(document).querySelectorAll('menu-horizontal').forEach(MENU => {
+
+        MENU.querySelectorAll('nav > ul > li.menu-item-has-children').forEach(li => {
+            if (li.querySelector("ul")) {
+                const ul = li.querySelector("ul");
+
+                const button = document.createElement("button");
+                button.className = "icon-down";
+                button.type = "button";
+                button.innerHTML = "<span>&#9207;</span>";
+                li.querySelector("a").insertAdjacentElement("afterend", button);
+
+                pgs(li).add("dropdown")
+                pgs(button).add("dropdown-button")
+                pgs(button).add("buttonNohover")
+                pgs(ul).add("dropdown-content")
+                pgs(ul).add("menu-vertical")
+            }
+        });
+    });
+
+    pgs(document).querySelectorAll('menu-vertical').forEach(MENU => {
+
+        MENU.querySelectorAll('.menu-item-has-children').forEach((li, index) => {
+            const ul = li.querySelector("ul");
+
+            if (!ul) return
+
+            const button = document.createElement("button");
+            button.className = "icon-down buttonIcon";
+            button.type = "button";
+
+            // ID unico per aria-controls
+            const submenuId = `vertical-submenu-${index}`;
+            ul.id = submenuId;
+
+            // Stato iniziale
+            pgs(button).add("buttonIcon")
+            button.setAttribute("aria-expanded", "false");
+            button.setAttribute("aria-controls", submenuId);
+            button.setAttribute("aria-label", "Apri sottomenu");
+            button.innerHTML = "<span aria-hidden='true'>&#9207;</span>";
+            li.querySelector("a").insertAdjacentElement("afterend", button);
+
+            function toggleMenu() {
+                // const isOpena = ul.classList.toggle("open");
+                const isOpen = pgs(ul).state.toggle("open");
+                button.setAttribute("aria-expanded", isOpen);
+                button.setAttribute("aria-label", isOpen ? "Chiudi sottomenu" : "Apri sottomenu");
+            };
+
+            // Click
+            button.addEventListener("click", toggleMenu);
+            button.addEventListener("keydown", (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    toggleMenu();
+                }
+            });
+        });
+
+        // pgs(document).querySelectorAll('menu-vertical').forEach(MENU => {
+
+        //     MENU.querySelectorAll('.menu-item-has-children').forEach(li => {
+        //         if (li.querySelector("ul")) {
+        //             const ul = li.querySelector("ul");
+
+        //             const button = document.createElement("button");
+        //             button.className = "icon-down";
+        //             button.type = "button";
+        //             button.innerHTML = "<span>&#9207;</span>";
+        //             li.querySelector("a").insertAdjacentElement("afterend", button);
+
+
+        //             pgs(button).add("buttonIcon")
+        //             button.addEventListener("click", () => {
+        //                 ul.classList.toggle("open")
+        //             })
+        //         }
+        //     });
+        // });
+    });
+    pgs_dropdown()
+}
+
+//# INIT PGS_menu
+PGS_menu()

package/assets/javascript/components/_modals.js

@@ -0,0 +1,123 @@
+//# MODAL
+PGS_modal()
+export function PGS_modal(selector = "modal") {
+    pgs(document).querySelectorAll(selector).forEach(MODAL => {
+
+        const BUTTON_OPEN = pgs(MODAL).querySelector("modal-button");        
+        const DIALOG = MODAL.querySelector("dialog");
+        if (!BUTTON_OPEN || !DIALOG) return;
+
+        //== SELECTOR
+        const DOMButtonClose = '<button pgs="buttonClose modal-close" type="button" tabindex="0" aria-label="Chiudi"><i class="fa-solid fa-close"></i></button>';
+        const modalContentHeader = pgs(MODAL)?.querySelector("modal-dialog-content-header")
+        
+        
+        //== OPTION ATTRIBUTES MODAL
+        const disableBackdropClose = pgs(MODAL).option.contains("disableBackdropClose")
+        const data_history = pgs(MODAL).option.contains("history");
+        const data_container = pgs(MODAL).option.getValueBrackets("containerID");
+        const data_containerPGS = pgs(MODAL).option.getValueBrackets("containerPGS");
+        
+        //== OPTION ATTRIBUTES DIALOG
+        const topLevel = pgs(DIALOG).option.contains("topLevel")
+
+        
+        //== BUTTON CLOSE
+        if (pgs(MODAL).querySelector("modal-close")) null
+        else if (modalContentHeader) modalContentHeader.insertAdjacentHTML("beforeend", DOMButtonClose)
+        else DIALOG.insertAdjacentHTML("beforeend", DOMButtonClose)
+        const BUTTON_CLOSE = pgs(MODAL).querySelector("modal-close")
+
+
+        //== SET
+        pgs(DIALOG).add("dialog modal-dialog");
+
+        //== BUTTON OPEN
+        BUTTON_OPEN.setAttribute("role", "button");
+        BUTTON_OPEN.setAttribute("aria-label", "apri modale");
+
+
+        //== POSITION
+        if(!topLevel){           
+            if (data_container) document.querySelector("#" + data_container)?.append(DIALOG);
+            else if (data_containerPGS) pgs(document).querySelector(data_containerPGS)?.append(DIALOG);
+            else document.body.append(DIALOG);
+        }
+
+
+        //+ FN STATUS 
+        function statusModal(status = true) {
+            BUTTON_OPEN?.setAttribute("aria-expanded", status);
+            DIALOG?.setAttribute("aria-expanded", status);
+        }
+
+        //+ FN OPEN 
+        function openModal(e) {
+            e?.stopImmediatePropagation();
+            if (!DIALOG.open) document.querySelectorAll("dialog[open]").forEach((dlg) => dlg.close());
+            statusModal(true);
+            DIALOG.open ? closeModal(e) : topLevel ? DIALOG.showModal() : DIALOG.show();
+            // modalCustomEvents('modal:open', { event: e });
+            MODAL.dispatchEvent(new CustomEvent('modal:open'));
+            DIALOG.dispatchEvent(new CustomEvent('modal:open'));
+        }
+
+        //+ FN CLOSE 
+        function closeModal(e) {
+            e?.stopImmediatePropagation()
+            statusModal(false);
+            DIALOG.close();
+            // modalCustomEvents('modal:close', { event: e });
+            MODAL.dispatchEvent(new CustomEvent('modal:close'));
+            DIALOG.dispatchEvent(new CustomEvent('modal:close'));
+        }
+
+        //+ fn OPEN ON HISTORY
+        function openModalOnHistory() {
+            const params = new URLSearchParams(window.location.search);
+            if (params.get('modal') !== BUTTON_OPEN.id) return;
+            document.getElementById(BUTTON_OPEN.id)?.scrollIntoView({ behavior: 'smooth' });
+            openModal();
+        }
+
+
+        //= OPEN 
+        BUTTON_OPEN.addEventListener("click", (e) => openModal(e));
+        BUTTON_OPEN.addEventListener("keypress", (e) => !DIALOG.open && (e.key === "Enter" || e.key === " ") && openModal(e));
+        
+        //= CLOSE 
+        DIALOG.addEventListener("close", () => statusModal(false));
+        DIALOG.addEventListener("click", e => { if (e.target == DIALOG && !disableBackdropClose) closeModal(e) });
+        BUTTON_CLOSE?.addEventListener("click", e => closeModal(e));
+        
+        //= UPDATE HISTORY
+        if (data_history && BUTTON_OPEN.id) {
+            setTimeout(openModalOnHistory, 1);
+
+            //== Aggiorna URL quando cambia l'attributo "open" del dialog
+            const obs = new MutationObserver(() => {
+                let isOpen = DIALOG.hasAttribute("open");
+                try {
+                    const url = new URL(window.location.href);
+                    const params = new URLSearchParams(url.search);
+                    isOpen ? params.set('modal', BUTTON_OPEN.id) : params.delete('modal');
+                    url.search = params.toString() ? `?${params.toString()}` : "";
+                    window.history.pushState({ modal: BUTTON_OPEN.id, open: isOpen }, "", url);
+                } catch (_) { }
+            });
+            obs.observe(DIALOG, { attributes: true, attributeFilter: ["open"] });
+
+            //== Gestisce back/forward del browser per aprire/chiudere il dialog coerentemente
+            window.addEventListener("popstate", () => {
+                try {
+                    const params = new URLSearchParams(window.location.search);
+                    const shouldOpen = params.get('modal') === BUTTON_OPEN.id;
+                    if (shouldOpen && !DIALOG.open) DIALOG.showModal();
+                    if (!shouldOpen && DIALOG.open) closeModal()
+                } catch (_) { }
+            });
+        }
+    });
+}
+
+//# INIT PGS_modal

package/assets/javascript/components/_slides.js

@@ -0,0 +1,183 @@
+import { PGS_scrollHorizontal } from "../functions/_scrollY"
+const API = new WeakMap();
+
+class PGS_Slides {
+    //- CONSTRUCTOR
+    constructor({ selector, viewRatio = 0.97, optionIntersectionObserver = {}, scrollOptions = {} } = {}) {
+        this.selector = selector;
+        this.viewRatio = viewRatio;
+
+        this.optionIntersectionObserver = {
+            threshold: Array.from({ length: 101 }, (_, i) => i / 100), // 0%,1%,2%...100%
+            rootMargin: "0px",
+            ...optionIntersectionObserver,
+        };
+
+        this.scrollOptions = {
+            behavior: "smooth",
+            inline: "center",
+            block: "nearest",
+            container: "nearest",
+            ...scrollOptions,
+        };
+
+        this.container = this.selector ? pgs(this.selector).querySelector("slides-container") : null;
+    }
+    
+    //+ CREATE BUTTON 
+    #createButtonsAndDots() {
+        const EL = this.selector
+
+        //== PULSANTI
+        if (!pgs(EL).querySelector('slides-prec') && !pgs(EL).querySelector('slides-next')) {
+            EL.insertAdjacentHTML("afterbegin", `<button pgs="slides-prec button" type="button" class="precButton" aria-label="slide precedente"> <span> <i class="fa-solid fa-arrow-left"></i></span></button>`);
+            EL.insertAdjacentHTML("beforeend", `<button pgs="slides-next button" type="button" class="nextButton" aria-label="prossima slide"> <span> <i class="fa-solid fa-arrow-right"></i></span></button>`);
+        }
+
+        //== DOTS
+        if (!pgs(EL).querySelector('slides-dots')) {
+            EL.insertAdjacentHTML("beforeend", `<div pgs="slides-dots" class="slides-dots"></div>`);
+
+            Array.from(this.container.children).forEach(() => {
+                pgs(EL).querySelector('slides-dots')
+                    .insertAdjacentHTML("beforeend", `<button type="button" class="slide-dot" aria-label="vai alla prossima slide"></button>`);
+            });
+        }
+    }
+
+    //+ PREV 
+    #previousSlide() {
+        const currents = this.container.querySelectorAll('.view');
+        let current;
+        
+
+        if (pgs(this.selector).option.contains('singleScroll')) current = currents[currents.length - 1];
+        else current = currents[0];
+
+        const prev = current?.previousElementSibling;
+
+        prev?.scrollIntoView(this.scrollOptions);
+        prev?.focus({ preventScroll: true });
+    }
+
+    //+ NEXT 
+    #nextSlide() {
+        const currents = this.container.querySelectorAll('.view');
+        let current;
+
+        
+        
+        if (pgs(this.selector).option.contains('singleScroll')) current = currents[0];
+        else current = currents[currents.length - 1];
+        
+        const next = current?.nextElementSibling;
+        console.log(current, next);
+
+        next?.scrollIntoView(this.scrollOptions);
+        next?.focus({ preventScroll: true });
+    }
+
+    //+ GO TO NUMBER SLIDE 
+    #goToNumberSlide(index) {
+        this.container.children[index].scrollIntoView(this.scrollOptions)
+    }
+
+    //+ CALLBACK
+    #callback(allLi, container, precButton, nextButton, dots) {
+        allLi.forEach(LI => {
+            const visiblePercent = 0.9 + LI.intersectionRatio * 0.1;
+            const isView = visiblePercent >= 0.98;
+
+            //== SCROLL ANIMATION
+            if (!pgs(LI.target).option.contains('notScrollAnimation')) {
+                LI.target.firstElementChild.style.setProperty('--visible-percent', `${visiblePercent}`);
+            };
+
+            //== VIEW & NOT-VIEW 
+            LI.target.classList.toggle("view", isView);
+            LI.target.classList.toggle("notView", !isView);
+
+            //== VIEW PREC e NEXT
+            const all = LI.target.parentNode.children;
+            const atStart = all[0].classList.contains("view");
+            const atEnd = all[all.length - 1].classList.contains("view");
+            nextButton.disabled = atEnd;
+            precButton.disabled = atStart;
+            nextButton.setAttribute('aria-disabled', String(atEnd));
+            precButton.setAttribute('aria-disabled', String(atStart));
+
+            //== ACTIVE DOT
+            const viewElements = Array.from(container.children).filter(el => el.classList.contains('view'));
+            dots.forEach((btn, i) => {
+                const isActive = viewElements.some(el => Array.from(container.children).indexOf(el) === i);
+                btn.classList.toggle('active', isActive);
+                btn.setAttribute('aria-current', isActive ? 'true' : 'false');
+            });
+        })
+    }
+
+    //= EXECUTE
+    execute() {
+        const slides = this.selector;
+        if (!this.container) return
+
+        //== elements
+        this.#createButtonsAndDots();
+        const precButton = pgs(slides).querySelector('slides-prec');
+        const nextButton = pgs(slides).querySelector('slides-next');
+        const dots = Array.from(pgs(slides).querySelector('slides-dots').children);
+
+        //== option
+        const notScrollWithMouse = pgs(slides).option.contains('notScrollWithMouse');
+
+        //== scroll
+        if (!notScrollWithMouse) PGS_scrollHorizontal(this.container, 5);
+
+        //==Listener: DOT, PREC, NEXT
+        dots.forEach((dot, index) => dot.addEventListener("click", e => this.#goToNumberSlide(index)));
+        precButton.addEventListener("click", e => this.#previousSlide(), { passive: true });
+        nextButton.addEventListener("click", e => this.#nextSlide(), { passive: true });
+
+        //== observer
+        const observer = new IntersectionObserver(
+            (allLi) => this.#callback(allLi, this.container, precButton, nextButton, dots),
+            { root: this.container, ...this.optionIntersectionObserver }
+        );
+        Array.from(this.container.children).forEach(allLi => observer.observe(allLi));
+
+
+        //- API
+        API.set(this.selector, {
+            element: this.selector,
+            container: this.container,
+            previous: () => this.#previousSlide(),
+            next: () => this.#nextSlide(),
+            goTo: (index) => this.#goToNumberSlide(index),
+            getCurrentIndexes: () => Array.from(this.container.children).map((el, i) => el.classList.contains("view") ? i : -1).filter(i => i !== -1),
+            getCurrentElements: () => Array.from(this.container.children).filter(el => el.classList.contains("view")),
+            getTotal: () => this.container.children.length,
+            isAtStart: () => this.container.children[0]?.classList.contains("view") || false,
+            isAtEnd: () => {
+                const children = this.container.children;
+                const last = children[children.length - 1];
+                return last?.classList.contains("view") || false;
+            },
+        });
+    }
+}
+PGS_slides_init();
+
+//# INIT 
+export function PGS_slides_init(root = document) {
+    pgs(root).querySelectorAll("slides").forEach(el => {
+        if (API.has(el)) return;
+
+        const instance = new PGS_Slides({ selector: el });
+        instance.execute();
+    });
+}
+
+//# API 
+export function PGS_slides_api(selector) {
+    return API.get(selector);
+}

package/assets/javascript/components/_steps.js

@@ -0,0 +1,27 @@
+
+export function PGS_ol() {
+    pgs(document).querySelectorAll("steps").forEach(steps => {
+
+        pgs(steps).querySelectorAll("steps-step").forEach((li, index) => {
+            
+            //= CIRCLE
+            let circleLi;
+            if (!pgs(li).querySelector("steps-step-circle")) {
+                circleLi = document.createElement("span");
+                pgs(circleLi).add("steps-step-circle")
+                circleLi.textContent = index + 1;
+                li.insertAdjacentElement("afterbegin", circleLi);
+            } else{
+                circleLi = pgs(li).querySelector("steps-step-circle");
+            }
+            
+            //= line
+            const line = document.createElement("span");
+            pgs(line).add("steps-step-line")
+            li.insertAdjacentElement("afterbegin", line);
+        });
+    });
+}
+
+//# INIT PGS_ol
+PGS_ol()

package/assets/javascript/components/_tabs.js

@@ -0,0 +1,134 @@
+const API = new WeakMap();
+PGS_tabs()
+
+export function PGS_tabs() {
+    pgs(document).querySelectorAll("tabs").forEach(tabsWizard => {
+
+        //= INIT
+        // if (tabsWizard.getAttribute("data-initialize") == "true") return;
+        // tabsWizard.setAttribute("data-initialize", "true");
+
+        //= SELECTOR
+        const prev = pgs(tabsWizard).querySelector("tabs-prev")
+        const next = pgs(tabsWizard).querySelector("tabs-next")
+        const restart = pgs(tabsWizard).querySelector("tabs-restart")
+        const dots = pgs(tabsWizard).querySelector("tabs-dots")
+        const tabsContainer = pgs(tabsWizard).querySelector("tabs-container");
+        const allTab = pgs(tabsContainer).querySelectorAll("tab");
+
+        //= SETTING
+        const total = allTab.length;
+        const defaultTabLocked = Array.from(allTab).filter(tab => tab.getAttribute("data-tab-locked") === "true")
+        let current = 0;
+        prev.disabled = true;
+
+        //- CREAZIONE DOTS
+        const tabDots = [];
+        if (dots) {
+            dots.innerHTML = "";
+
+            allTab.forEach((tab, index) => {
+
+                const iconClass = tab.getAttribute("data-tab-icon") || "fa-circle";
+
+                const dot = document.createElement("button");
+                dot.type = "button";
+                dot.className = "tab-dot";
+                dot.setAttribute("data-step", index);
+                dot.innerHTML = `<i class="fa-solid ${iconClass}"></i>`;
+
+                dot.addEventListener("click", () => {
+                    if (dot.classList.contains("is-completed")) {
+                        goTo(index, true);
+                    }
+                });
+
+                dots.appendChild(dot);
+                tabDots.push(dot);
+            });
+        }
+
+        //+ DOTS
+        function updateDots() {
+            tabDots.forEach((dot, i) => {
+                dot.classList.toggle("is-active", i === current);
+                dot.classList.toggle("is-completed", i < current);
+            });
+        }
+
+        //+ Step
+        function goTo(index) {
+            current = Math.min(Math.max(index, 0), total - 1);
+            const tab = allTab[current]
+
+            prev.disabled = (current === 0);
+            next.disabled = (current === total - 1 || tab.getAttribute("data-tab-locked") === "true");
+
+            allTab.forEach((tab, i) => tab.classList.toggle("is-active", i === current));
+            tab?.focus();
+            tabsWizard?.scrollIntoView({ behavior: "smooth", block: "start" });
+            updateDots();
+            tabsWizard.dispatchEvent(new CustomEvent('tabs:change', { detail: { current, total } }));
+        }
+
+        //+ restart
+        function restartTab() {
+            goTo(0);
+            defaultTabLocked.forEach(tab => tab.setAttribute("data-tab-locked", "true"));
+        }
+
+        //= INIT
+        goTo(0);
+
+        //= data-tab-locked
+        const observer = new MutationObserver(() => goTo(current));
+        allTab?.forEach(tabEl => observer.observe(tabEl, { attributes: true, attributeFilter: ["data-tab-locked"], }));
+
+
+        //= Click su Avanti/Indietro
+        prev?.addEventListener("click", e => goTo(current - 1));
+        next?.addEventListener("click", e => goTo(current + 1));
+        restart?.addEventListener("click", e => restartTab(), { capture: true });
+
+        //-(API) 
+        // tabsWizard.addEventListener("tabs:reset", () => restartTab());
+        API.set(tabsWizard, {
+            restart: restartTab,
+            goTo,
+            next: () => goTo(current + 1),
+            prev: () => goTo(current - 1),
+            toggleLock: (step, lock = true) => typeof step === "number" && allTab[step] && (allTab[step].setAttribute("data-tab-locked", lock.toString()), goTo(current)),
+            getCurrent: () => current,
+            getState: () => ({ current, total }),
+        });
+    });
+}
+
+export function PGS_tabs_api(selector) {
+    return API.get(selector);
+}
+
+
+/* 
+    / EXAMPLE
+    // vai allo step 2
+    w.dispatchEvent(new CustomEvent("tabs:go", { detail: { step: 2 } }));
+    
+    // next
+    w.dispatchEvent(new CustomEvent("tabs:next"));
+    
+    // prev
+    w.dispatchEvent(new CustomEvent("tabs:prev"));
+    
+    // reset a 0 senza relock
+    w.dispatchEvent(new CustomEvent("tabs:reset"));
+    
+    // lock step 3
+    w.dispatchEvent(new CustomEvent("tabs:toggle-lock", { detail: { step: 3, lock: true } }));
+    
+    // unlock step 3
+    w.dispatchEvent(new CustomEvent("tabs:toggle-lock", { detail: { step: 3, lock: false } }));
+    
+    // leggi stato
+    w.dispatchEvent(new CustomEvent("tabs:get", { detail: { reply: (state) => console.log(state) } }));
+*/