mypgs 1.0.0

package/assets/javascript/functions/_formValidate.js

@@ -0,0 +1,217 @@
+import { PGS_toast } from "../functions/_notifications.js";
+
+
+export class PGS_formValidate {
+    constructor({ form } = {}) {
+        this.container = form;
+        this._rules = [];
+        // pgs(this.container).add("formError"); 
+    }
+
+    //+ ADD
+    addError(field, i) {
+        field.setAttribute("data-form-field-status", "error");
+        if (i == 0) field.scrollIntoView();
+
+        let message = field.getAttribute("data-form-field-message");
+
+        if (i == 0 && message) PGS_toast.error(message);
+        else if (i == 0) PGS_toast.error("Compila tutti i campi!");
+    }
+
+    //+ REMOVE
+    removeError(field) {
+        field.setAttribute("data-form-field-status", "");
+    }
+
+    #removeErrorOnClick(allFields) {
+        allFields.forEach(element => {
+            element.addEventListener("click", e => this.removeError(element))
+        });
+    }
+
+    // + --------------------------
+    // + Helpers                   
+    // + --------------------------
+    help = {
+        // supporta sia required nativo, sia data-required="true"
+        isRequired(field) {
+            if (!field) return false;
+
+            const required = field.required === true || field?.dataset?.required === "true" || field?.getAttribute('aria-required') == "true";
+            return required && !field.hidden; // solo attributo/proprietà "hidden"
+        },
+        // input (non speciali), textarea
+        isEmptyTextLike(field) { return !String(field?.value ?? "").trim(); },
+        // select: vuoto se value == "" o null
+        isEmptySelect(field) { return !String(field?.value ?? "").trim(); },
+        // recupera name in modo sicuro
+        getGroupName(field) { return field?.name || field?.getAttribute?.("name") || ""; }
+    };
+
+
+    // + --------------------------
+    // + input + altri elementi.   
+    // + --------------------------
+    #inputValue(container) {
+
+        //++ add rule
+        const ruleInvalidFields = [];
+        for (const rule of this._rules) {
+            const res = rule(container);
+
+            // la rule può tornare:
+            // • null/undefined => ok
+            // • un elemento => invalido
+            // • un array di elementi => invalidi
+            if (!res) continue;
+
+            if (Array.isArray(res)) ruleInvalidFields.push(...res);
+            else ruleInvalidFields.push(res);
+        }
+
+        //== INPUT 
+        // "testuali" (esclude hidden/disabled/checkbox/radio/file come nel tuo snippet)
+        const textInputs = Array.from(container.querySelectorAll("input")).filter((input) => {
+            if (input.disabled) return false;
+            if (input.type === "hidden") return false;
+            if (input.type === "checkbox" || input.type === "radio" || input.type === "file") return false;
+
+            // valida solo se required (o data-required="true")
+            if (!this.help.isRequired(input)) return false;
+
+            return this.help.isEmptyTextLike(input);
+        });
+
+        //== TEXTAREA 
+        // required vuote
+        const textareas = Array.from(container.querySelectorAll("textarea")).filter((ta) => {
+            if (ta.disabled) return false;
+            if (!this.help.isRequired(ta)) return false;
+            return this.help.isEmptyTextLike(ta);
+        });
+
+        //== SELECT 
+        // required vuoti
+        const selects = Array.from(container.querySelectorAll("select")).filter((sel) => {
+            if (sel.disabled) return false;
+            if (!this.help.isRequired(sel)) return false;
+            return this.help.isEmptySelect(sel);
+        });
+
+        //== RADIO 
+        // required: se in un gruppo required non ce n'è uno checked => errore sul "primo" radio del gruppo
+        const radios = Array.from(container.querySelectorAll('input[type="radio"]')).filter((r) => !r.disabled);
+        const requiredRadioGroups = new Map(); // name -> [elements]
+        for (const r of radios) {
+            if (!this.help.isRequired(r)) continue;
+            const name = this.help.getGroupName(r);
+            if (!name) continue;
+            if (!requiredRadioGroups.has(name)) requiredRadioGroups.set(name, []);
+            requiredRadioGroups.get(name).push(r);
+        }
+        const radioGroupErrors = [];
+        for (const [name, group] of requiredRadioGroups.entries()) {
+            const anyChecked = group.some((r) => r.checked);
+            if (!anyChecked) {
+                // scegli dove mettere l'errore: tipicamente sul primo radio del gruppo
+                radioGroupErrors.push(group[0]);
+            }
+        }
+
+        //== CHECKBOX 
+        // required: può essere singola checkbox required (checked obbligatorio)
+        // oppure gruppo di checkbox (stesso name) con almeno una selezionata
+        const checkboxes = Array.from(container.querySelectorAll('input[type="checkbox"]')).filter((c) => !c.disabled);
+        const requiredCheckboxSingles = [];
+        const requiredCheckboxGroups = new Map(); // name -> [elements]
+        for (const c of checkboxes) {
+            if (!this.help.isRequired(c)) continue;
+
+            const name = this.help.getGroupName(c);
+            if (!name) {
+                // checkbox senza name: trattala come singola required
+                if (!c.checked) requiredCheckboxSingles.push(c);
+                continue;
+            }
+
+            // se vuoi trattare come gruppo, raggruppa per name
+            if (!requiredCheckboxGroups.has(name)) requiredCheckboxGroups.set(name, []);
+            requiredCheckboxGroups.get(name).push(c);
+        }
+        const checkboxGroupErrors = [];
+        for (const [name, group] of requiredCheckboxGroups.entries()) {
+            // se è un gruppo (>=2) richiedi almeno una spuntata
+            // se è 1 sola, si comporta come singola
+            const anyChecked = group.some((c) => c.checked);
+            if (!anyChecked) checkboxGroupErrors.push(group[0]);
+        }
+
+        //== FILE 
+        // required: se vuoi includerlo
+        const fileInputs = Array.from(container.querySelectorAll('input[type="file"]')).filter((f) => {
+            if (f.disabled) return false;
+            if (!this.help.isRequired(f)) return false;
+            return !(f.files && f.files.length > 0);
+        });
+
+        //== risultato finale: tutti i campi da marcare come errore
+        const invalidFields = [
+            textInputs,
+            textareas,
+            selects,
+            radioGroupErrors,
+            requiredCheckboxSingles,
+            checkboxGroupErrors,
+            fileInputs,
+            ruleInvalidFields
+        ];
+
+        return invalidFields.flat();
+    }
+
+    // + -------------------------
+    // + VALIDATE                 
+    // + -------------------------
+    validate() {
+        const invalid = this.#inputValue(this.container);
+        const allFields = this.container.querySelectorAll("input, textarea, select")
+
+        //== pulizia/aggiornamento errori: 
+        // prima rimuovo errori dai campi "non più invalidi"
+        Array.from(allFields).filter((el) => !el.disabled);
+
+        //== per radio/checkbox in gruppo: 
+        // rimuovi l'errore solo sull'elemento che lo ospita (qui: se presente)
+        for (const el of allFields) { if (!invalid.includes(el)) this.removeError(el); }
+
+        //== aggiungo errori dove serve
+        invalid.forEach((el, i) => this.addError(el, i))
+
+        //== rimuove l'errore al click
+        this.#removeErrorOnClick(allFields)
+
+        //== status form
+        if (invalid.length) {
+            this.container.setAttribute("data-form-status", "error");
+            return false;
+        } else {
+            this.container.setAttribute("data-form-status", "success");
+            return true;
+        }
+    }
+
+    ifSuccess(text = "Inviato con successo") {
+        if (this.validate() == true) PGS_toast.success(text)
+    }
+
+    // + -------------------------
+    // + ADD RULE                 
+    // + -------------------------
+    addNewRule(container) {
+        if (typeof container !== "function") throw new Error("Rule must be a function");
+        this._rules.push(container);
+        return this;
+    }
+}
+

package/assets/javascript/functions/_notifications.js

@@ -0,0 +1,74 @@
+//# PGS_notification
+function 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
+    });
+}
+
+function deleteALl(containerToken) {
+    let containerNotification = pgs(document).querySelector(containerToken);
+    if (containerNotification) containerNotification.innerHTML = "";
+}
+
+
+
+export let PGS_notification = {
+    error: (text = "Errore", link = null, timeout = 0, icon = '<i class="fa-solid fa-octagon-xmark"></i>') => initNotification("error", "notification", icon, text, timeout, "stack", link),
+    success: (text = "Aggiornato", link = null, timeout = 0, icon = '<i class="fa-solid fa-check"></i>') => initNotification("success", "notification", icon, text, timeout, "stack", link),
+    info: (text = "Aggiornamento", link = null, timeout = 0, icon = '<i class="fa-solid fa-circle-info"></i>',) => initNotification("info", "notification", icon, text, timeout, "stack", link),
+    warning: (text = "Attenzione", link = null, timeout = 0, icon = '<i class="fa-solid fa-triangle-exclamation"></i>') => initNotification("warning", "notification", icon, text, timeout, "stack", link),
+    deleteAllNotification: () => deleteALl("notification")
+}
+
+export let PGS_toast = {
+    error: (text = "Errore", timeout = 4000, icon = '<i class="fa-solid fa-octagon-xmark"></i>',) => initNotification("error", "toast", icon, text, timeout),
+    success: (text = "Aggiornato", timeout = 4000, icon = '<i class="fa-solid fa-check"></i>',) => initNotification("success", "toast", icon, text, timeout),
+    info: (text = "Aggiornamento", timeout = 0, icon = '<i class="fa-solid fa-circle-info"></i>',) => initNotification("info", "toast", icon, text, timeout),
+    warning: (text = "Attenzione", timeout = 4000, icon = '<i class="fa-solid fa-triangle-exclamation"></i>',) => initNotification("warning", "toast", icon, text, timeout),
+    deleteTost: () => deleteALl("toast")
+}

package/assets/javascript/functions/_scrollY.js

@@ -0,0 +1,77 @@
+export function PGS_scrollHorizontal(querySelector, dataSpeed) {
+    // Se hai più contenitori, selezionali tutti:
+    // Semplice "singleton" per stimare se la sorgente è trackpad
+    const TrackpadDetector = (() => {
+        let lastTs = 0;
+        let smallAndFast = 0;
+        let samples = 0;
+        let isTrackpad = false;
+
+        function update(e) {
+            const now = performance.now();
+            const dt = now - lastTs;
+
+            // Porta delta in px (0: px, 1: linee, 2: pagine)
+            let dy = Math.abs(e.deltaY);
+            if (e.deltaMode === 1) dy *= 16;
+            else if (e.deltaMode === 2) dy *= e.currentTarget?.clientHeight || 800;
+
+            // Heuristica: eventi piccoli e ravvicinati → prob. trackpad
+            const small = dy < 30;          // soglia prudente
+            const fast = dt < 35;          // alta frequenza
+            if (small && fast) smallAndFast++;
+
+            samples++;
+            if (samples >= 6) {             // aggiorna il giudizio ogni N eventi
+                isTrackpad = smallAndFast >= 3;
+                smallAndFast = 0;
+                samples = 0;
+            }
+
+            lastTs = now;
+            return isTrackpad;
+        }
+
+        return {
+            update,
+            get value() { return isTrackpad; }
+        };
+    })();
+
+    //= Scorrimento orizzontale con rotella (evita il trackpad)
+    
+    let el = querySelector
+    el.addEventListener('wheel', (e) => {
+        const speed = dataSpeed;
+
+        //== lascia lo scroll naturale del trackpad
+        if (TrackpadDetector.update(e)) return;
+
+        //== Evita interferenze con zoom o scroll orizzontale nativo
+        if (e.ctrlKey) return;
+        if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;
+
+        //== Converti delta in px per lo shift orizzontale
+        let delta = e.deltaY;
+        if (e.deltaMode === 1) delta *= 16;
+        else if (e.deltaMode === 2) delta *= el.clientHeight;
+
+        //== Verifica se il contenitore può ancora scrollare orizzontalmente
+        const atStart = el.scrollLeft <= 0;
+        const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1;
+        const scrollingRight = delta > 0;
+        const scrollingLeft = delta < 0;
+        const canScrollHoriz =
+            (scrollingRight && !atEnd) ||
+            (scrollingLeft && !atStart);
+
+        // Se non può più scrollare in quella direzione, lascia che la pagina gestisca lo scroll verticale
+        if (!canScrollHoriz) return;
+
+        //== Previeni il default solo quando facciamo noi lo scroll orizzontale
+        e.preventDefault();
+
+        //== rotella giù => destra
+        el.scrollLeft += delta * speed;
+    }, { passive: false });
+}

package/assets/javascript/functions/_sendForm.js

@@ -0,0 +1,100 @@
+import { PGS_toast } from "../functions/_notifications.js";
+export async function PGS_sendForm(
+    append = {
+        formAppend: [
+            { name: "", value: "" }
+        ],
+        wpnonce: {
+            name: "",
+            value: ""
+        },
+        action: ""
+    },
+    tost = {
+        succesText: "Inviato con succeso",
+        errorGenericText: "Si è verificato un errore",
+        infoText: "Invio in corso..."
+    }, log = true) {
+
+    PGS_toast.info(tost.infoText, -1)
+
+    //== FORM DATA
+    const formData = new FormData();
+
+    //=== Mandatory data 
+    formData.append(append.wpnonce.name, append.wpnonce.value);
+    formData.append('action', append.action);
+
+    //=== append esempio
+    append.formAppend.forEach(item => formData.append(item.name, item.value));
+
+    let status
+
+    try {
+        const response = await fetch('/wp-admin/admin-ajax.php', {
+            method: 'POST',
+            body: formData
+        });
+
+        if (!response.ok) {
+            PGS_toast.error(`Errore: ${response.status}`)
+            status = { success: false, data: [], response: response };
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+            status = result;
+            PGS_toast.success(tost.succesText)
+
+        } else {
+            status = result;
+            PGS_toast.error(result.data ? result.data.message : 'Errore sconosciuto')
+            console.error(result);
+        }
+
+    } catch (error) {
+        status = status ? status : { success: false, data: []};
+        PGS_toast.error(`Si è verificato un errore nella richiesta.`)
+        console.error('Errore:', error);
+    }
+
+    if (log) console.log("Status:", status);
+    if (log) console.log("formData:", Array.from(formData.entries()));
+    return status;
+}
+
+/*
+let documentForm = document.querySelector("#formExample");
+if (documentForm) {
+    documentForm.addEventListener("submit", function (e) {
+        e.preventDefault();
+
+        let appendMandatory = {
+            formAppend: [
+                {
+                    name: "",
+                    value: ""
+                },
+                {
+                    name: "",
+                    value: ""
+                },
+            ],
+            wpnonce: {
+                name: "testName",
+                value: "testValue"
+            },
+            action: "test_submit_form"
+        };
+        let tost = {
+            succesText: "inviato ottimo",
+            errorGenericText: "errore invio",
+            infoText: "Invio in corso...",
+
+        }
+
+        sendBooking(appendMandatory, tost)
+    })
+} */

package/assets/javascript/index.js

@@ -0,0 +1,20 @@
+//= PGS
+import "./_pgs.js";
+
+//= BASE
+import "./base/_darkmode.js";
+import "./base/_object.js";
+
+//= CN 
+import "./components/_accordion.js";
+import "./components/_dropdown.js";
+import "./components/_exeNotifications.js";
+import "./components/_menu.js"
+import "./components/_modals.js";
+import "./components/_slides.js"
+import "./components/_steps.js";
+import "./components/_tabs.js";
+
+//= patterns 
+import "./patterns/_header.js";
+import "./patterns/_cookieConsent.js";