mypgs 1.5.1 → 2.0.0

package/assets/javascript/functions/_formValidate.js

@@ -1,40 +1,43 @@
+import { pgs } from "../_pgs.js";
 import { PGS_notification } from "../components/_notifications.js";
 
 
 export class PGS_formValidate {
-    constructor({ form } = {}) {
+    #message = {};
+    #insideValidatedCallback = false;
+
+    constructor(form, options = {}) {
+        if (!options || typeof options !== "object" || Array.isArray(options)) {
+            throw new TypeError("options must be an object");
+        }
+
         this.container = form;
         this._rules = [];
-        // pgs(this.container).add("formError"); 
+        this.message = {
+            fieldError: "Please complete this field.",
+            fieldsError: "Please complete all required fields.",
+            success: "Submitted successfully."
+        };
+
+        if (options.message !== undefined) this.message = options.message;
+        this.container?.setAttribute("novalidate", "");
     }
 
-    //+ 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_notification.toast.error(message);
-        else if (i == 0) PGS_notification.toast.error("Compila tutti i campi!");
+    get message() {
+        return { ...this.#message };
     }
 
-    //+ REMOVE
-    removeError(field) {
-        field.setAttribute("data-form-field-status", "");
-    }
+    set message(value) {
+        if (!value || typeof value !== "object" || Array.isArray(value)) {
+            throw new TypeError("message must be an object");
+        }
 
-    #removeErrorOnClick(allFields) {
-        allFields.forEach(element => {
-            element.addEventListener("click", e => this.removeError(element))
-        });
+        this.#message = { ...this.#message, ...value };
     }
 
-    // + --------------------------
-    // + Helpers                   
-    // + --------------------------
-    help = {
-        // supporta sia required nativo, sia data-required="true"
+    // - Helpers
+    #help = {
+        // supporta sia required nativo
         isRequired(field) {
             if (!field) return false;
 
@@ -77,26 +80,26 @@ export class PGS_formValidate {
             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;
+            // valida solo se required
+            if (!this.#help.isRequired(input)) return false;
 
-            return this.help.isEmptyTextLike(input);
+            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);
+            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);
+            if (!this.#help.isRequired(sel)) return false;
+            return this.#help.isEmptySelect(sel);
         });
 
         //== RADIO 
@@ -104,8 +107,8 @@ export class PGS_formValidate {
         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 (!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);
@@ -126,9 +129,9 @@ export class PGS_formValidate {
         const requiredCheckboxSingles = [];
         const requiredCheckboxGroups = new Map(); // name -> [elements]
         for (const c of checkboxes) {
-            if (!this.help.isRequired(c)) continue;
+            if (!this.#help.isRequired(c)) continue;
 
-            const name = this.help.getGroupName(c);
+            const name = this.#help.getGroupName(c);
             if (!name) {
                 // checkbox senza name: trattala come singola required
                 if (!c.checked) requiredCheckboxSingles.push(c);
@@ -151,7 +154,7 @@ export class PGS_formValidate {
         // 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;
+            if (!this.#help.isRequired(f)) return false;
             return !(f.files && f.files.length > 0);
         });
 
@@ -167,12 +170,37 @@ export class PGS_formValidate {
             ruleInvalidFields
         ];
 
-        return invalidFields.flat();
+        return [...new Set(invalidFields.flat())];
+    }
+
+    //+ ADD
+    addFieldError(field, i = 0, total = 1) {
+        pgs(field).option.add("error");
+        if (i === 0) field.scrollIntoView();
+
+        if (i !== 0) return;
+
+        if (total > 1) {
+            PGS_notification.toast.error(this.message.fieldsError);
+            return;
+        }
+
+        const message = pgs(field).option.getValueBrackets("message");
+        PGS_notification.toast.error(message || this.message.fieldError);
+    }
+
+    //+ REMOVE
+    removeFieldError(field) {
+        pgs(field).option.remove("error");
+    }
+
+    // + SUCCESS
+    success(text = this.message.success) {
+        if (this.#insideValidatedCallback || this.validate() === true) PGS_notification.toast.success(text)
     }
 
-    // + -------------------------
-    // + VALIDATE                 
-    // + -------------------------
+
+    // + VALIDATE
     validate() {
         const invalid = this.#inputValue(this.container);
         const allFields = this.container.querySelectorAll("input, textarea, select")
@@ -183,34 +211,50 @@ export class PGS_formValidate {
 
         //== 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); }
+        for (const el of allFields) { if (!invalid.includes(el)) this.removeFieldError(el); }
 
         //== aggiungo errori dove serve
-        invalid.forEach((el, i) => this.addError(el, i))
+        invalid.forEach((el, i) => this.addFieldError(el, i, invalid.length))
 
         //== rimuove l'errore al click
-        this.#removeErrorOnClick(allFields)
+        allFields.forEach(element => element.addEventListener("click", e => this.removeFieldError(element)));
 
         //== status form
         if (invalid.length) {
-            this.container.setAttribute("data-form-status", "error");
+            pgs(this.container).option.remove("success").add("error");
             return false;
         } else {
-            this.container.setAttribute("data-form-status", "success");
+            pgs(this.container).option.remove("error").add("success");
             return true;
         }
     }
 
-    ifSuccess(text = "Inviato con successo") {
-        if (this.validate() == true) PGS_notification.toast.success(text)
+    // + EVENT VALIDATOR
+    validator(callback, eventName = "submit") {
+        if (typeof callback !== "function") throw new TypeError("callback must be a function");
+        if (typeof eventName !== "string" || !eventName.trim()) throw new TypeError("eventName must be a non-empty string");
+
+        this.container.addEventListener(eventName, event => {
+            event.preventDefault();
+            if (!this.validate()) return;
+
+            this.#insideValidatedCallback = true;
+
+            try {
+                this.success();
+                callback(event);
+            } finally {
+                this.#insideValidatedCallback = false;
+            }
+        });
+
+        return this;
     }
 
-    // + -------------------------
-    // + ADD RULE                 
-    // + -------------------------
-    addNewRule(container) {
-        if (typeof container !== "function") throw new Error("Rule must be a function");
-        this._rules.push(container);
+    // + ADD RULE
+    addNewRule(rule) {
+        if (typeof rule !== "function") throw new Error("Rule must be a function");
+        this._rules.push(rule);
         return this;
     }
 }

package/assets/javascript/functions/_scrollY.js

@@ -1,4 +1,4 @@
-export function PGS_scrollHorizontal(querySelector, dataSpeed) {
+export function PGS_scrollHorizontal(element, speed) {
     // Se hai più contenitori, selezionali tutti:
     // Semplice "singleton" per stimare se la sorgente è trackpad
     const TrackpadDetector = (() => {
@@ -40,10 +40,7 @@ export function PGS_scrollHorizontal(querySelector, dataSpeed) {
 
     //= Scorrimento orizzontale con rotella (evita il trackpad)
     
-    let el = querySelector
-    el.addEventListener('wheel', (e) => {
-        const speed = dataSpeed;
-
+    const onWheel = (e) => {
         //== lascia lo scroll naturale del trackpad
         if (TrackpadDetector.update(e)) return;
 
@@ -54,11 +51,11 @@ export function PGS_scrollHorizontal(querySelector, dataSpeed) {
         //== 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;
+        else if (e.deltaMode === 2) delta *= element.clientHeight;
 
         //== Verifica se il contenitore può ancora scrollare orizzontalmente
-        const atStart = el.scrollLeft <= 0;
-        const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1;
+        const atStart = element.scrollLeft <= 0;
+        const atEnd = element.scrollLeft + element.clientWidth >= element.scrollWidth - 1;
         const scrollingRight = delta > 0;
         const scrollingLeft = delta < 0;
         const canScrollHoriz =
@@ -72,6 +69,9 @@ export function PGS_scrollHorizontal(querySelector, dataSpeed) {
         e.preventDefault();
 
         //== rotella giù => destra
-        el.scrollLeft += delta * speed;
-    }, { passive: false });
+        element.scrollLeft += delta * speed;
+    };
+
+    element.addEventListener('wheel', onWheel, { passive: false });
+    return () => element.removeEventListener('wheel', onWheel);
 }

package/assets/javascript/index.js

@@ -4,6 +4,7 @@ export { pgs } from "./_pgs.js";
 
 //= BASE
 import "./base/_darkmode.js";
+import "./base/_svg.js";
 import "./base/_object.js";
 
 //= CN 
@@ -11,6 +12,7 @@ import "./components/_accordion.js";
 import "./components/_dropdown.js";
 import "./components/_menu.js"
 import "./components/_modals.js";
+import "./components/_search.js";
 import "./components/_slides.js"
 import "./components/_steps.js";
 import "./components/_stepTabs.js";

package/assets/javascript/layout/_header.js

@@ -8,7 +8,10 @@ function PGS_header(selectHeader = document) {
 
     const headerElements = pgs(header).querySelectorAll("header-element");
 
+    if (!headerElements.length) console.log('For the header to work correctly, insert "header-element" under "header"');
     if (!headerElements.length) return;
+    
+    
 
     headerElements.forEach(selectHeader => {
 
@@ -93,9 +96,32 @@ function headerHeight() {
     document.documentElement.style.setProperty("--heightOfHeader", `${height}px`);
     document.documentElement.style.setProperty("--heightOfHeaderScroll", `${scrollHeight}px`);
 }
-headerHeight()
-window.addEventListener("resize", headerHeight);
-window.addEventListener("scroll", headerHeight);
+
+// Il modulo può essere caricato nel footer: rimanda il primo calcolo al frame
+// successivo, quando il browser ha già composto l'header, senza aspettare il
+// caricamento completo della pagina.
+let headerHeightRafId = 0;
+function scheduleHeaderHeight() {
+    if (headerHeightRafId) return;
+
+    headerHeightRafId = requestAnimationFrame(() => {
+        headerHeightRafId = 0;
+        headerHeight();
+    });
+}
+
+if (header) {
+    const headerHeightObserver = new ResizeObserver(scheduleHeaderHeight);
+    headerHeightObserver.observe(header);
+
+    // Un font web può modificare la larghezza del menu e quindi l'altezza
+    // dell'header, anche dopo il primo frame.
+    document.fonts?.ready?.then(scheduleHeaderHeight);
+}
+
+scheduleHeaderHeight();
+window.addEventListener("resize", scheduleHeaderHeight);
+window.addEventListener("scroll", scheduleHeaderHeight, { passive: true });
 
 
 
@@ -125,7 +151,3 @@ window.addEventListener("scroll", () => {
 
 });
 
-
-
-
-

package/assets/scss/base/_color.scss

@@ -5,7 +5,7 @@
 :root {
     color-scheme: light;
 
-    &[data-darkmode=true] {
+    &[pgs-state~=darkmode] {
         color-scheme: dark;
     }
 
@@ -21,10 +21,10 @@
     --color-white-transparent: color-mix(in srgb, var(--color-white) 50%, transparent 100%);
     --color-black-transparent: color-mix(in srgb, var(--color-black) 50%, transparent 100%);
     --color-text: light-dark(#4a4a4a, #e3e3e3);
-    --color-box: light-dark(#F8F8F8, #3A3A3A);
-    --color-boxDark: light-dark(#3A3A3A, #F8F8F8);
-    --color-box-transparent: light-dark(color-mix(in srgb, #eeeeee 50%, transparent 50%), color-mix(in srgb, #3A3A3A 50%, transparent 50%));
-    --color-boxDark-transparent: light-dark(color-mix(in srgb, #3A3A3A 50%, transparent 50%), color-mix(in srgb, #eeeeee 50%, transparent 50%));
+    --color-box: light-dark(#F8F8F8, #222121);
+    --color-boxDark: light-dark(#222121, #F8F8F8);
+    --color-box-transparent: light-dark(color-mix(in srgb, #eeeeee 50%, transparent 50%), color-mix(in srgb, #222121 50%, transparent 50%));
+    --color-boxDark-transparent: light-dark(color-mix(in srgb, #222121 50%, transparent 50%), color-mix(in srgb, #eeeeee 50%, transparent 50%));
     --color-linkBackgorud: light-dark(#a0dbff, #002a44);
     --color-background: light-dark(#ffffff, #080808);
     --color-whiteFixed: #FFFFFF;

package/assets/scss/base/_html.scss

@@ -5,14 +5,14 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    scroll-margin-top: calc(var(--heightOfHeader) + 5vh);
+    scroll-margin-top: var(--page-topScroll);
 
     // Reset properties 
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
-        scroll-margin-top: calc(var(--heightOfHeader) + 5vh);
+        scroll-margin-top: var(--page-topScroll);
     }
 
     &:root,

package/assets/scss/base/_variables.scss

@@ -19,7 +19,8 @@
     --text-shadow: 0px 0px 50px #000000;
     --backdrop: #0000003e;
     --blur: blur(20px);
-    --page-top: calc(var(--heightOfHeaderScroll) + (var(--gap-elements)*2));
+    --page-top: calc(var(--heightOfHeader) + var(--heightOfHeader));
+    --page-topScroll: calc(var(--heightOfHeaderScroll) + var(--heightOfHeader));
     --page-width: 1280px;
     --page-space: clamp(var(--padding-page), calc((100% - var(--section-width)) / 2 + var(--padding-page)), 100%);
     --gap-texts: 1.0rem;
@@ -32,7 +33,8 @@
     --fa-size: inherit;
     --focus-visible: 3px solid var(--color-link);
     
-    --heightOfHeader: 13.3rem; ///preload fittizio
+    --heightOfHeader: 6.8rem; ///preload fittizio
+    --heightOfHeaderScroll: 6.8rem; ///preload fittizio
 
     //- mobile 
     @media (max-width: $mobile) {

package/assets/scss/components/_dropdown.scss

@@ -3,6 +3,7 @@
     --dropdown-background: var(--color-box);
     --dropdown-color: var(--color-black);
     --dropdown-border: var(--border-complete);
+    --dropdown-borderRadius: var(--dropdown-padding);
     --dropdown-padding: 1rem;
     --dropdown-inline-size: max-content;
     --dropdown-max-inline-size: min(400px, calc(100vw - 16px));
@@ -28,7 +29,7 @@
         overflow: auto;
         padding: var(--dropdown-padding);
         border: var(--dropdown-border);
-        border-radius: calc(var(--border-radius-input) + var(--dropdown-padding));
+        border-radius:  var(--dropdown-borderRadius);
         background: var(--dropdown-background);
         color: var(--dropdown-color);
     }

package/assets/scss/components/_form.scss

@@ -50,6 +50,6 @@
     @include form();
 }
 
-[pgs~=formError] {
-    @include formError();
+[pgs~=formValidate] {
+    @include formValidate();
 }

package/assets/scss/components/_logo.scss

@@ -8,12 +8,12 @@
     --logo-finter: invert(1) hue-rotate(180deg) brightness(1.5);
 
     //== DARKMODE
-    @at-root [data-darkmode=true] [pgs~="logo-darkmode"] [pgs~="logo-image"] {
+    @at-root [pgs-state~=darkmode] #{&}[pgs-option~="logoDarkmode"] [pgs~="logo-image"] {
         filter: var(--logo-finter);
     }
     
     //== FIXED DARKMODE
-    &[pgs~="logo-darkmodeFixed"][pgs~="logo-darkmode"] [pgs~="logo-image"] {
+    &[pgs-option~="logoDarkmodeFixed"] [pgs~="logo-image"] {
         filter: var(--logo-finter);
     }
     

package/assets/scss/components/_menu.scss

@@ -10,10 +10,6 @@
         row-gap: 1.0rem;
         flex-wrap: nowrap;
 
-        ul {
-            display: none;
-        }
-
         //== Content
         >li {
             >a {
@@ -30,6 +26,20 @@
             li {
                 width: -webkit-fill-available;
             }
+
+            &[pgs-state~=open]>ul {
+                display: flex;
+            }
+        }
+
+        //== submenu
+        ul {
+            display: none;
+            flex-direction: column;
+            gap: var(--gap-texts);
+            --dropdown-borderRadius: calc(var(--border-radius-input) + var(--dropdown-padding));
+            --dropdown-background: var(--color-box-transparent);
+            --dropdown-display: flex;
         }
     }
 
@@ -45,8 +55,12 @@
         cursor: pointer;
         translate: -15px;
 
-        &[aria-expanded="true"] span {
-            rotate: 180deg;
+        &[aria-expanded="true"] {
+            --button-background: var(--color-primary);
+
+            span {
+                rotate: 180deg;
+            }
         }
 
         span {
@@ -67,25 +81,9 @@
 
             //=== Sub menu
             >li:has(ul) {
-                --dropdown-display: flex;
                 display: flex;
                 gap: 0.2rem;
                 flex-wrap: nowrap;
-
-                >a {
-                    border-radius: var(--border-radius-input);
-                    // box-shadow: var(--box-shadow);
-                }
-
-                ul {
-                    li a {
-                        min-width: 100% !important;
-                    }
-                }
-
-                &[pgs-state~=open]>ul {
-                    display: flex;
-                }
             }
         }
     }
@@ -112,13 +110,8 @@
                 align-items: center;
                 position: relative;
 
-                >a {
-                    max-width: calc(100% - var(--gap-texts) - 40px);
-                }
-
                 >ul {
                     flex-basis: 100%;
-                    // --dropdown-maxwidth: 100%;
                 }
 
                 &:not([pgs-state~=open]) ul {

package/assets/scss/components/_modals.scss

@@ -79,7 +79,7 @@ dialog[pgs~="modal-dialog"] {
         &:has([pgs~="modal-dialog-content-scroll"]) {
             max-height: calc(90svh - var(--heightOfHeader));
             overflow: hidden;
-            
+
             [pgs~="modal-dialog-content-scroll"] {
                 padding-top: calc(var(--padding) / 2);
                 overflow: auto;
@@ -101,6 +101,16 @@ dialog[pgs~="modal-dialog"] {
     }
 
     //#OPTION
+    //== topLevel
+    &[pgs-option~="topLevel"] {
+        align-items: center;
+        padding-inline: 1rem;
+
+        [pgs~="modal-dialog-content"] {
+            width: min(600px, 100%);
+        }
+    }
+
     //== LEFT
     &[pgs-option~="left"] {
         [pgs~="modal-dialog-content"] {

package/assets/scss/components/_notification.scss

@@ -3,34 +3,7 @@
 //= NOTIFICATION GROUP / TRIGGER
 [pgs~="notificationTrigger"] {}
 
-//= NOTIFICATION STYLE
-@mixin notification($position: center) {
-    @if ($position ==center) {
-        inset-inline: 0;
-        top: calc(var(--heightOfHeader) + 10px);
-
-        @at-root body:has(header[data-header-scroll="true"]) #{&} {
-            top: 10px;
-        }
-    }
-
-    @else if($position ==right) {
-        top: calc(var(--heightOfHeader) + 10px);
-        right: 10px;
-
-        @at-root body:has(header[data-header-scroll="true"]) #{&} {
-            top: 0;
-        }
-    }
-
-    @else if($position ==bottom) {
-        bottom: 10px;
-        right: 10px;
-    }
-}
-
-[pgs~="notification"],
-[pgs~="toast"] {
+[pgs~="notification"] {
     display: flex;
     flex-direction: column;
     gap: var(--gap-texts);
@@ -183,10 +156,30 @@
     }
 }
 
-[pgs~="notification"] {
+//= NOTIFICATION STYLE
+@mixin notification($position: center) {
+    $size: 1.0rem;
+
+    @if ($position ==center) {
+        inset-inline: 0;
+        top: calc(var(--heightOfHeaderScroll) + $size);
+    }
+
+    @else if($position ==right) {
+        top: calc(var(--heightOfHeaderScroll) + $size);
+        right: $size;
+    }
+
+    @else if($position ==bottom) {
+        inset-inline: 0;
+        bottom: $size;
+    }
+}
+
+[pgs~="notification"]:not([pgs-option~="toast"]) {
     @include notification(right);
 }
 
-[pgs~="toast"] {
+[pgs~="notification"][pgs-option~="toast"] {
     @include notification(center);
 }