mypgs 1.5.1 → 2.0.0

package/assets/javascript/components/_search.js

@@ -0,0 +1,391 @@
+const API = new WeakMap();
+const OPEN_SEARCHES = new Set();
+let searchId = 0;
+
+const DEFAULT_OPTIONS = {
+    minLength: 2,
+    debounce: 200,
+    limit: 6,
+    submitOnSelect: false,
+    searchOnFocus: true,
+    source: null,
+    onSelect: null,
+};
+
+function nextSearchId() {
+    searchId += 1;
+    return searchId;
+}
+
+function getSearches(root) {
+    const searches = root instanceof Element && pgs(root).contains("search") ? [root] : [];
+    searches.push(...pgs(root).querySelectorAll("search"));
+    return searches;
+}
+
+function directPgsChild(element, token) {
+    return Array.from(element.children).find(child => pgs(child).contains(token));
+}
+
+function normalizeItem(item) {
+    if (typeof item === "string" || typeof item === "number") {
+        const value = String(item).trim();
+        return value ? { label: value, value, disabled: false, data: item } : null;
+    }
+
+    if (!item || typeof item !== "object") return null;
+
+    const label = String(item.label ?? item.value ?? "").trim();
+    if (!label) return null;
+
+    return {
+        label,
+        value: String(item.value ?? label),
+        disabled: Boolean(item.disabled),
+        data: Object.prototype.hasOwnProperty.call(item, "data") ? item.data : item,
+    };
+}
+
+function normalizeOptions(current, options = {}) {
+    const next = { ...current, ...options };
+    next.minLength = Math.max(0, Number.parseInt(next.minLength, 10) || 0);
+    next.debounce = Math.max(0, Number.parseInt(next.debounce, 10) || 0);
+    next.limit = Math.max(1, Number.parseInt(next.limit, 10) || DEFAULT_OPTIONS.limit);
+    next.submitOnSelect = Boolean(next.submitOnSelect);
+    next.searchOnFocus = Boolean(next.searchOnFocus);
+    next.source = typeof next.source === "function" || Array.isArray(next.source) ? next.source : null;
+    next.onSelect = typeof next.onSelect === "function" ? next.onSelect : null;
+    return next;
+}
+
+function closeSearch(search) {
+    const data = API.get(search);
+    if (!data) return;
+
+    pgs(search).state.remove("open");
+    data.input.setAttribute("aria-expanded", "false");
+    data.input.removeAttribute("aria-activedescendant");
+    data.list.setAttribute("aria-hidden", "true");
+    data.setActiveIndex(-1);
+    OPEN_SEARCHES.delete(search);
+}
+
+function openSearch(search) {
+    const data = API.get(search);
+    if (!data || data.items().length === 0) return;
+
+    pgs(search).state.add("open");
+    data.input.setAttribute("aria-expanded", "true");
+    data.list.setAttribute("aria-hidden", "false");
+    OPEN_SEARCHES.add(search);
+}
+
+function PGS_search_init(root = document) {
+    getSearches(root).forEach(search => {
+        if (API.has(search)) return;
+
+        const input = search.querySelector('input[type="search"]');
+        const list = directPgsChild(search, "search-suggestions");
+        if (!input || !list) return;
+
+        const id = nextSearchId();
+        if (!input.id) input.id = `search-input-${id}`;
+        if (!list.id) list.id = `search-suggestions-${id}`;
+
+        input.setAttribute("role", "combobox");
+        input.setAttribute("aria-autocomplete", "list");
+        input.setAttribute("aria-haspopup", "listbox");
+        input.setAttribute("aria-controls", list.id);
+        input.setAttribute("aria-expanded", "false");
+        input.setAttribute("autocomplete", "off");
+        list.setAttribute("role", "listbox");
+        list.setAttribute("aria-labelledby", input.id);
+        list.setAttribute("aria-hidden", "true");
+
+
+        let options = { ...DEFAULT_OPTIONS };
+        let items = [];
+        let activeIndex = -1;
+        let timer = null;
+        let controller = null;
+        let requestNumber = 0;
+
+        function setLoading(loading) {
+            pgs(search).state.toggle("loading", loading);
+            input.setAttribute("aria-busy", String(loading));
+        }
+
+        function setActiveIndex(index) {
+            activeIndex = index;
+            const elements = Array.from(list.querySelectorAll('[pgs~="search-suggestions-item"]'));
+
+            elements.forEach((element, itemIndex) => {
+                const selected = itemIndex === activeIndex;
+                element.setAttribute("aria-selected", String(selected));
+                pgs(element).state.toggle("selected", selected);
+            });
+
+            const active = elements[activeIndex];
+            if (active) {
+                input.setAttribute("aria-activedescendant", active.id);
+                active.scrollIntoView({ block: "nearest" });
+            } else {
+                input.removeAttribute("aria-activedescendant");
+            }
+        }
+
+        function moveActive(step) {
+            if (!items.length) return;
+
+            let next = activeIndex;
+            for (let checked = 0; checked < items.length; checked += 1) {
+                next = (next + step + items.length) % items.length;
+                if (!items[next].disabled) {
+                    setActiveIndex(next);
+                    return;
+                }
+            }
+        }
+
+        function clear() {
+            items = [];
+            activeIndex = -1;
+            list.replaceChildren();
+            closeSearch(search);
+        }
+
+        function cancel() {
+            if (timer !== null) window.clearTimeout(timer);
+            timer = null;
+            if (controller) controller.abort();
+            controller = null;
+            requestNumber += 1;
+            setLoading(false);
+        }
+
+        function render(nextItems) {
+            items = Array.from(nextItems || [])
+                .map(normalizeItem)
+                .filter(Boolean)
+                .slice(0, options.limit);
+
+            const fragment = document.createDocumentFragment();
+            items.forEach((item, index) => {
+                const option = document.createElement("li");
+                pgs(option).add("search-suggestions-item");
+                pgs(option).add("flexRow");
+                option.id = `${list.id}-option-${index}`;
+                option.dataset.index = String(index);
+                option.setAttribute("role", "option");
+                option.setAttribute("aria-selected", "false");
+                option.setAttribute("aria-disabled", String(item.disabled));
+                option.innerHTML = '<i class="fa-solid fa-magnifying-glass"></i>' +  item.label;
+                fragment.append(option);
+
+            });
+
+            activeIndex = -1;
+            list.replaceChildren(fragment);
+            pgs(search).state.remove("error");
+
+            if (items.length) openSearch(search);
+            else closeSearch(search);
+
+            return items;
+        }
+
+        async function resolveSource(query, signal) {
+            if (Array.isArray(options.source)) {
+                const normalizedQuery = query.toLocaleLowerCase();
+                return options.source.filter(item => {
+                    const normalized = normalizeItem(item);
+                    return normalized && normalized.label.toLocaleLowerCase().includes(normalizedQuery);
+                });
+            }
+
+            if (typeof options.source !== "function") return [];
+            return await options.source({
+                query,
+                signal,
+                limit: options.limit,
+                element: search,
+                input,
+            });
+        }
+
+        async function runSearch(query = input.value) {
+            cancel();
+            clear();
+
+            const normalizedQuery = String(query ?? "").trim();
+            if (normalizedQuery.length < options.minLength || !options.source) return [];
+
+            const currentRequest = requestNumber;
+            controller = new AbortController();
+            const currentController = controller;
+            setLoading(true);
+
+            try {
+                const result = await resolveSource(normalizedQuery, currentController.signal);
+                if (currentRequest !== requestNumber || currentController.signal.aborted) return [];
+                return render(result);
+            } catch (error) {
+                if (error?.name === "AbortError") return [];
+                if (currentRequest !== requestNumber) return [];
+
+                clear();
+                pgs(search).state.add("error");
+                search.dispatchEvent(new CustomEvent("pgs:search:error", {
+                    bubbles: true,
+                    detail: { error, query: normalizedQuery },
+                }));
+                return [];
+            } finally {
+                if (controller === currentController) controller = null;
+                if (currentRequest === requestNumber) setLoading(false);
+            }
+        }
+
+        function schedule() {
+            cancel();
+            clear();
+            pgs(search).state.remove("error");
+
+            if (input.value.trim().length < options.minLength || !options.source) return;
+            timer = window.setTimeout(() => {
+                timer = null;
+                runSearch(input.value);
+            }, options.debounce);
+        }
+
+        function select(index = activeIndex, submit = options.submitOnSelect) {
+            const item = items[index];
+            if (!item || item.disabled) return null;
+
+            input.value = item.value;
+            cancel();
+            clear();
+
+            const detail = { item, index, value: item.value, input, element: search };
+            search.dispatchEvent(new CustomEvent("pgs:search:select", { bubbles: true, detail }));
+            options.onSelect?.(detail);
+
+            input.focus();
+            if (submit && typeof search.requestSubmit === "function") search.requestSubmit();
+            return item;
+        }
+
+        function configure(nextOptions = {}) {
+            options = normalizeOptions(options, nextOptions);
+            return api;
+        }
+
+        function onInput() {
+            schedule();
+        }
+
+        function onFocus() {
+            if (items.length) openSearch(search);
+            else if (options.searchOnFocus) schedule();
+        }
+
+        function onKeydown(event) {
+            if (event.key === "ArrowDown") {
+                if (!pgs(search).state.contains("open")) schedule();
+                if (items.length) {
+                    event.preventDefault();
+                    moveActive(1);
+                }
+                return;
+            }
+
+            if (event.key === "ArrowUp" && items.length) {
+                event.preventDefault();
+                moveActive(-1);
+                return;
+            }
+
+            if (event.key === "Enter" && activeIndex >= 0) {
+                event.preventDefault();
+                select(activeIndex);
+                return;
+            }
+
+            if (event.key === "Escape") {
+                event.preventDefault();
+                cancel();
+                closeSearch(search);
+                return;
+            }
+
+            if (event.key === "Tab") closeSearch(search);
+        }
+
+        function onListPointerDown(event) {
+            const option = event.target.closest('[pgs~="search-suggestions-item"]');
+            if (!option || !list.contains(option)) return;
+            event.preventDefault();
+            select(Number.parseInt(option.dataset.index, 10));
+        }
+
+        function onSubmit() {
+            cancel();
+            closeSearch(search);
+        }
+
+        function destroy() {
+            cancel();
+            clear();
+            input.removeEventListener("input", onInput);
+            input.removeEventListener("focus", onFocus);
+            input.removeEventListener("keydown", onKeydown);
+            list.removeEventListener("pointerdown", onListPointerDown);
+            search.removeEventListener("submit", onSubmit);
+            API.delete(search);
+        }
+
+        const api = {
+            element: search,
+            input,
+            list,
+            configure,
+            setSource: source => configure({ source }),
+            search: runSearch,
+            open: () => openSearch(search),
+            close: () => closeSearch(search),
+            clear,
+            cancel,
+            select,
+            refresh: () => runSearch(input.value),
+            destroy,
+            items: () => [...items],
+            isOpen: () => pgs(search).state.contains("open"),
+            isLoading: () => pgs(search).state.contains("loading"),
+            setActiveIndex,
+        };
+
+        input.addEventListener("input", onInput);
+        input.addEventListener("focus", onFocus);
+        input.addEventListener("keydown", onKeydown);
+        list.addEventListener("pointerdown", onListPointerDown);
+        search.addEventListener("submit", onSubmit);
+        API.set(search, api);
+    });
+}
+
+document.addEventListener("pointerdown", event => {
+    OPEN_SEARCHES.forEach(search => {
+        if (!search.contains(event.target)) closeSearch(search);
+    });
+});
+
+PGS_search_init();
+
+function PGS_search_api(selector) {
+    return API.get(selector);
+}
+
+export const PGS_search = {
+    init: PGS_search_init,
+    api: PGS_search_api,
+};

package/assets/javascript/components/_slides.js

@@ -1,10 +1,16 @@
-import { PGS_scrollHorizontal } from "../functions/_scrollY"
+import { PGS_scrollHorizontal } from "../functions/_scrollY.js";
 const API = new WeakMap();
 
+function getSlides(root) {
+    const slides = root instanceof Element && pgs(root).contains("slides") ? [root] : [];
+    slides.push(...pgs(root).querySelectorAll("slides"));
+    return slides;
+}
+
 class PGS_Slides {
     //- CONSTRUCTOR
-    constructor({ selector, viewRatio = 0.97, optionIntersectionObserver = {}, scrollOptions = {} } = {}) {
-        this.selector = selector;
+    constructor({ element, viewRatio = 0.97, optionIntersectionObserver = {}, scrollOptions = {} } = {}) {
+        this.element = element;
         this.viewRatio = viewRatio;
 
         this.optionIntersectionObserver = {
@@ -21,28 +27,36 @@ class PGS_Slides {
             ...scrollOptions,
         };
 
-        this.container = this.selector ? pgs(this.selector).querySelector("slides-container") : null;
+        this.container = this.element ? pgs(this.element).querySelector("slides-container") : null;
     }
     
     //+ CREATE BUTTON 
     #createButtonsAndDots() {
-        const EL = this.selector
+        const EL = this.element;
 
         //== PULSANTI
-        if (!pgs(EL).querySelector('slides-prec') && !pgs(EL).querySelector('slides-next')) {
+        if (!pgs(EL).querySelector('slides-prec')) {
             EL.insertAdjacentHTML("afterbegin", `<button pgs="slides-prec buttonIcon" type="button" class="precButton" aria-label="slide precedente"> <span> <i class="fa-solid fa-arrow-left"></i></span></button>`);
+        }
+        if (!pgs(EL).querySelector('slides-next')) {
             EL.insertAdjacentHTML("beforeend", `<button pgs="slides-next buttonIcon" 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>`);
-            });
+        const dotsContainer = pgs(EL).querySelector('slides-dots');
+        while (dotsContainer.children.length < this.container.children.length) {
+            dotsContainer.insertAdjacentHTML("beforeend", `<button type="button" class="slide-dot"></button>`);
+        }
+        while (dotsContainer.children.length > this.container.children.length) {
+            dotsContainer.lastElementChild.remove();
         }
+        Array.from(dotsContainer.children).forEach((dot, index) => {
+            dot.setAttribute("aria-label", `vai alla slide ${index + 1}`);
+        });
     }
 
     //+ PREV 
@@ -51,7 +65,7 @@ class PGS_Slides {
         let current;
         
 
-        if (pgs(this.selector).option.contains('singleScroll')) current = currents[currents.length - 1];
+        if (pgs(this.element).option.contains('singleScroll')) current = currents[currents.length - 1];
         else current = currents[0];
 
         const prev = current?.previousElementSibling;
@@ -67,19 +81,17 @@ class PGS_Slides {
 
         
         
-        if (pgs(this.selector).option.contains('singleScroll')) current = currents[0];
+        if (pgs(this.element).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)
+        this.container.children[index]?.scrollIntoView(this.scrollOptions);
     }
 
     //+ CALLBACK
@@ -118,8 +130,10 @@ class PGS_Slides {
 
     //= EXECUTE
     execute() {
-        const slides = this.selector;
-        if (!this.container) return
+        const slides = this.element;
+        if (!this.container) return;
+        const eventController = new AbortController();
+        const { signal } = eventController;
 
         //== elements
         this.#createButtonsAndDots();
@@ -131,12 +145,14 @@ class PGS_Slides {
         const notScrollWithMouse = pgs(slides).option.contains('notScrollWithMouse');
 
         //== scroll
-        if (!notScrollWithMouse) PGS_scrollHorizontal(this.container, 5);
+        const removeHorizontalScroll = notScrollWithMouse
+            ? null
+            : 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 });
+        dots.forEach((dot, index) => dot.addEventListener("click", () => this.#goToNumberSlide(index), { signal }));
+        precButton.addEventListener("click", () => this.#previousSlide(), { passive: true, signal });
+        nextButton.addEventListener("click", () => this.#nextSlide(), { passive: true, signal });
 
         //== observer
         const observer = new IntersectionObserver(
@@ -146,9 +162,18 @@ class PGS_Slides {
         Array.from(this.container.children).forEach(allLi => observer.observe(allLi));
 
 
+        let api;
+        const destroy = () => {
+            if (API.get(this.element) !== api) return;
+            eventController.abort();
+            observer.disconnect();
+            removeHorizontalScroll?.();
+            API.delete(this.element);
+        };
+
         //- API
-        API.set(this.selector, {
-            element: this.selector,
+        api = {
+            element: this.element,
             container: this.container,
             previous: () => this.#previousSlide(),
             next: () => this.#nextSlide(),
@@ -163,19 +188,28 @@ class PGS_Slides {
                 return last?.classList.contains("view") || false;
             },
             refresh: () => {
-                PGS_slides_init(this.selector.parentNode || document);
-                return API.get(this.selector);
+                if (API.get(this.element) !== api) return API.get(this.element);
+                destroy();
+                const instance = new PGS_Slides({
+                    element: this.element,
+                    viewRatio: this.viewRatio,
+                    optionIntersectionObserver: this.optionIntersectionObserver,
+                    scrollOptions: this.scrollOptions,
+                });
+                instance.execute();
+                return API.get(this.element);
             },
-        });
+        };
+        API.set(this.element, api);
     }
 }
 
 //# INIT 
-export function PGS_slides_init(root = document) {
-    pgs(root).querySelectorAll("slides").forEach(el => {
-        if (API.has(el)) return;
+function PGS_slides_init(root = document) {
+    getSlides(root).forEach(element => {
+        if (API.has(element)) return;
 
-        const instance = new PGS_Slides({ selector: el });
+        const instance = new PGS_Slides({ element });
         instance.execute();
     });
 }
@@ -183,8 +217,8 @@ export function PGS_slides_init(root = document) {
 PGS_slides_init();
 
 //# API 
-export function PGS_slides_api(selector) {
-    return API.get(selector);
+function PGS_slides_api(element) {
+    return API.get(element);
 }
 
 export const PGS_slides = {

package/assets/javascript/components/_stepTabs.js

@@ -1,6 +1,6 @@
 const API = new WeakMap();
 
-export function PGS_stepTabs_init(root = document) {
+function PGS_stepTabs_init(root = document) {
     pgs(root).querySelectorAll("stepTabs").forEach(tabsWizard => {
         if (tabsWizard.dataset.stepTabsInitialized === "true") return;
         tabsWizard.dataset.stepTabsInitialized = "true";
@@ -32,7 +32,7 @@ export function PGS_stepTabs_init(root = document) {
                 const dot = document.createElement("button");
                 dot.type = "button";
                 pgs(dot).add("stepTabs-dots-dot");
-                dot.setAttribute("data-step", index);
+                pgs(dot).option.setValueBrackets("step", index);
                 dot.innerHTML = `<i class="fa-solid ${iconClass}"></i>`;
 
                 dot.addEventListener("click", () => {
@@ -97,7 +97,7 @@ export function PGS_stepTabs_init(root = document) {
         //= INIT
         goTo(0, false);
 
-        //= data-tab-locked
+        //= tab-locked
         const observer = new MutationObserver(() => {
             if (isRendering) return;
             updateControls();
@@ -135,7 +135,7 @@ export function PGS_stepTabs_init(root = document) {
 
 PGS_stepTabs_init()
 
-export function PGS_stepTabs_api(selector) {
+function PGS_stepTabs_api(selector) {
     return API.get(selector);
 }
 

package/assets/javascript/components/_steps.js

@@ -1,6 +1,6 @@
 const API = new WeakMap();
 
-export function PGS_steps_init(root = document) {
+function PGS_steps_init(root = document) {
     pgs(root).querySelectorAll("steps").forEach(steps => {
         if (API.has(steps)) return;
 
@@ -43,7 +43,7 @@ export function PGS_steps_init(root = document) {
 PGS_steps_init()
 
 //# API
-export function PGS_steps_api(selector) {
+function PGS_steps_api(selector) {
     return API.get(selector);
 }
 

package/assets/javascript/components/_summary.js

@@ -20,7 +20,7 @@ function directPgsChild(element, token) {
     return Array.from(element.children).find(child => pgs(child).contains(token));
 }
 
-export function PGS_summary_init(root = document) {
+function PGS_summary_init(root = document) {
     pgs(root).querySelectorAll("summary").forEach((summary) => {
         if (API.has(summary)) return;
 
@@ -95,7 +95,7 @@ export function PGS_summary_init(root = document) {
 PGS_summary_init();
 
 //# API
-export function PGS_summary_api(selector) {
+function PGS_summary_api(selector) {
     return API.get(selector);
 }