mypgs 1.5.1 → 2.0.0

package/templates/react/patterns/header.jsx

@@ -2,16 +2,22 @@ import { useEffect } from "react";
 
 export default function Header() {
     useEffect(() => {
-        if (localStorage.getItem("screenIsDarkMode") === "true") {
-            document.body.classList.add("darkmode");
-            document.querySelector(":root")?.setAttribute("data-darkmode", "true");
-            document.body.setAttribute("data-darkmode", "true");
-        }
-
-        if (window.innerWidth < 600 && window.pgs) {
-            window.pgs(document.querySelector("header")).state.add("mobileActive");
-            window.pgs(document.querySelector("[pgs~=header-element]")).state.add("mobileActive");
-        }
+		const addPgsState = (element, state) => {
+			if (!element) return;
+
+			const states = element.getAttribute("pgs-state")?.split(/\s+/) ?? [];
+			element.setAttribute("pgs-state", [...new Set([...states, state])].join(" "));
+		};
+
+		if (localStorage.getItem("screenIsDarkMode") === "true") {
+			addPgsState(document.documentElement, "darkmode");
+			addPgsState(document.body, "darkmode");
+		}
+
+		if (window.innerWidth < 600) {
+			addPgsState(document.querySelector("header"), "mobileActive");
+			addPgsState(document.querySelector("[pgs~=header-element]"), "mobileActive");
+		}
     }, []);
 
     return (

package/assets/scss/components/_searchbar.scss

@@ -1,70 +0,0 @@
-@use "../mixin/mixin" as *;
-
-//= SEARCH BAR
-[pgs~="searchbar"] {
-    position: relative;
-    flex: 1;
-    width: 100%;
-    overflow: hidden;
-    margin-inline: auto;
-    @include button_header();
-    padding: 0;
-    gap: 0;
-
-    //+ mobile 
-    @media (min-width: $mobile) {
-        min-width: 21.4rem;
-    }
-
-    button {
-        outline: none;
-        border: none;
-        background: none;
-        padding-left: var(--button-size);
-        aspect-ratio: 1;
-        height: 100%;
-        border-radius: var(--border-radius-input);
-        cursor: pointer;
-    }
-
-    input {
-        cursor: text !important;
-        border: 0;
-        padding: var(--button-size);
-        margin: 2px;
-        margin-left: 0;
-        font-family: var(--font);
-        font-weight: 600;
-        font-size: 1.6rem;
-        border-radius: var(--border-radius-input);
-        height: 100%;
-        width: 100%;
-        min-width: 21.4rem;
-        background-color: transparent;
-        color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
-        
-        &::placeholder {
-            color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
-            opacity: .6;
-        }
-
-        &:focus-visible {
-            outline: unset;
-        }
-    }
-
-    &:has(input:focus-visible){
-        outline: var(--focus-visible);
-    }
-
-    @at-root dialog #{&} {
-        margin-inline: auto;
-        max-width: calc(100% - var(--padding-page) * 2);
-        height: max-content;
-        background-color: var(--color-white);
-
-        input {
-            padding-block: 20px;
-        }
-    }
-}

package/templates/html/components/searchbar.html

@@ -1,29 +0,0 @@
-<form pgs="buttonNohover searchbar" autocomplete="off" action="" method="get">
-    <button type="submit" title="Cerca"><i class="fa-solid fa-search"></i></button>
-    <input type="search" name="s" placeholder="Cerca" value="">
-</form>
-
-<div pgs="modal searchbar-modal" pgs-option="containerPGS[header]">
-
-    <button type="button" pgs="modal-button buttonIcon" title="Cerca">
-        <i class="fa-solid fa-search"></i>
-    </button>
-
-    <dialog>
-        <div pgs="flexRow section searchbar-mobile">
-
-            <form pgs="buttonNohover searchbar" autocomplete="off" action="/" method="get">
-                <button type="submit" title="Cerca">
-                    <i class="fa-solid fa-search"></i>
-                </button>
-
-                <input type="search" name="s" placeholder="Cerca" value="">
-            </form>
-
-            <button type="button" pgs="modal-close buttonIcon">
-                <i class="fa-solid fa-close"></i>
-            </button>
-
-        </div>
-    </dialog>
-</div>

package/templates/html/demo.js

@@ -1,137 +0,0 @@
-
-if (localStorage.getItem("screenIsDarkMode") === "true") {
-    document.body.classList.add("darkmode");
-    document.querySelector(":root").setAttribute("data-darkmode", "true");
-    document.body.setAttribute("data-darkmode", "true");
-}
-
-
-const templateFiles = [
-    "components/summary.html",
-    "components/menu.html",
-    "components/tooltip.html",
-    "components/modal.html",
-    "components/stepTabs.html",
-    "components/accordion.html",
-    "components/badges.html",
-    "components/breadcumbs.html",
-    "components/button.html",
-    "components/card.html",
-    "components/dropdown.html",
-    "components/tooltip.html",
-    "components/form.html",
-    "components/logo.html",
-    "components/searchbar.html",
-    "components/slides.html",
-    "components/steps.html",
-    "components/table.html",
-    "components/notification.html",
-    "layout/body.html",
-    "layout/section.html",
-    "layout/flex.html",
-    "layout/grid.html",
-    "layout/pageShell.html",
-    "layout/footer.html",
-    "layout/header.html",
-    "patterns/cookieConsent.html",
-];
-
-function getTemplateTitle(path) {
-    return path.replace(".html", "").replace("/", " / ")
-}
-
-function renderSourceTemplate(section, html) {
-    const pre = document.createElement("pre");
-    const code = document.createElement("code");
-    code.textContent = html.trim();
-    pre.append(code);
-    section.append(pre);
-}
-
-function renderTemplate(section, path, html) {
-    const content = document.createElement("div");
-    content.setAttribute("pgs", "container flexColumnElements");
-    content.innerHTML = html;
-    section.append(content);
-}
-
-function renderLayout(root, path, html) {
-    const template = document.createElement("template");
-    template.innerHTML = html.trim();
-    root.append(template.content.cloneNode(true));
-}
-
-function renderTitle(section, path) {
-    const title = document.createElement("p");
-    title.classList.add("template-title");
-    title.innerHTML = "<strong>" + getTemplateTitle(path) + "</strong>";
-    section.append(title);
-}
-
-async function loadTemplate(path) {
-    const response = await fetch(path);
-    if (!response.ok) throw new Error(`${path}: ${response.status}`);
-    return response.text();
-}
-
-function loadPgsJavascript() {
-    const script = document.createElement("script");
-    script.src = "../../dist/javascript/index.js";
-    document.body.append(script);
-}
-
-async function bootDemo() {
-    const BEEFORE = document.getElementById("templates-demo-before");
-    const MAIN = document.getElementById("templates-demo-main");
-    const AFTER = document.getElementById("templates-demo-after");
-
-    for (const path of templateFiles) {
-        const isHeader = path === "layout/header.html";
-        const isfooter = path === "layout/footer.html";
-        const isBody = path === "layout/body.html";
-
-        if (isHeader || isfooter) {
-            try {
-                const html = await loadTemplate(path);
-                renderLayout(isHeader ? BEEFORE : AFTER, path, html);
-            } catch (error) {
-                const message = document.createElement("p");
-                message.textContent = `Template non caricato: ${error.message}`;
-                layoutRoot.append(message);
-            }
-            continue;
-        }
-
-        const section = document.createElement("section");
-        section.setAttribute("pgs", "section flexColumnElements");
-        section.dataset.template = path;
-        renderTitle(section, path);
-
-        if (isBody) {
-            const html = await loadTemplate(path);
-            renderSourceTemplate(section, html);
-            MAIN.append(section);
-            continue
-        }
-
-        try {
-            const html = await loadTemplate(path);
-            renderTemplate(section, path, html);
-        } catch (error) {
-            const message = document.createElement("p");
-            message.textContent = `Template non caricato: ${error.message}`;
-            section.append(message);
-        }
-
-        MAIN.append(section);
-
-        if (path == "layout/section.html" || path == "layout/pageShell.html") {
-            section.style.display = "contents";
-            Array.from(section.children).forEach(c => c.style.width = "100%");
-        }
-    }
-
-    loadPgsJavascript();
-}
-
-bootDemo();