mypgs 1.0.0

package/assets/javascript/patterns/_cookieConsent.js

@@ -0,0 +1,209 @@
+const STORAGE_KEY = 'pgs_cookie_preferences_v1';
+const focusableSelectors = 'a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+//+ 
+function safeJsonParse(value) {
+    try {
+        return value ? JSON.parse(value) : null;
+    } catch (error) {
+        console.warn('PGS cookie consent: impossibile leggere le preferenze', error);
+        return null;
+    }
+}
+
+//+ 
+function readPreferences() {
+    try {
+        return safeJsonParse(localStorage.getItem(STORAGE_KEY));
+    } catch (error) {
+        return null;
+    }
+}
+
+//+ 
+function savePreferences(prefs) {
+    try {
+        localStorage.setItem(
+            STORAGE_KEY,
+            JSON.stringify({ ...prefs, updatedAt: new Date().toISOString() })
+        );
+    } catch (error) {
+        console.warn('PGS cookie consent: impossibile salvare le preferenze', error);
+    }
+}
+
+//+ 
+function bootstrapGtag() {
+    window.dataLayer = window.dataLayer || [];
+    window.gtag = window.gtag || function gtag() {
+        window.dataLayer.push(arguments);
+    };
+}
+
+//+ 
+function loadGoogleAnalytics(measurementId) {
+    if (!measurementId || window.__PGS_gaLoaded) return;
+    window.__PGS_gaLoaded = true;
+
+    const script = document.createElement('script');
+    script.async = true;
+    script.src = `https://www.googletagmanager.com/gtag/js?id=${measurementId}`;
+    document.head.appendChild(script);
+
+    window.gtag('js', new Date());
+    window.gtag('config', measurementId, {
+        anonymize_ip: true,
+        allow_google_signals: false,
+    });
+}
+
+//+ 
+function applyAnalyticsConsent({ allowAnalytics, measurementId }) {
+    bootstrapGtag();
+    if (allowAnalytics) {
+        window.gtag('consent', 'update', { analytics_storage: 'granted' });
+        loadGoogleAnalytics(measurementId);
+    } else {
+        window.gtag('consent', 'update', { analytics_storage: 'denied' });
+    }
+}
+
+//+
+function setPgsFlag(element, token, enabled) {
+    if (!(element instanceof HTMLElement) || !token) return;
+    const current = (element.getAttribute('pgs') || '').split(/\s+/).filter(Boolean);
+    const next = enabled ? [...new Set([...current, token])] : current.filter((item) => item !== token);
+    if (next.length > 0) {
+        element.setAttribute('pgs', next.join(' '));
+    } else {
+        element.removeAttribute('pgs');
+    }
+}
+
+//+
+function assignCookieRuntimeAttributes({ root, analyticsToggle, acceptAllButton, rejectButton, openButtons }) {
+    root.dataset.cookieComponent = 'consent';
+    analyticsToggle?.setAttribute('data-cookie-toggle', 'analytics');
+    acceptAllButton?.setAttribute('data-cookie-action', 'accept');
+    rejectButton?.setAttribute('data-cookie-action', 'reject');
+
+    root.querySelector('[pgs~="cookieConsent-featureEssential"]')?.setAttribute('data-cookie-feature', 'essential');
+    root.querySelector('[pgs~="cookieConsent-featureAnalytics"]')?.setAttribute('data-cookie-feature', 'analytics');
+
+    openButtons.forEach((button) => {
+        button.setAttribute('data-cookie-action', 'open');
+    });
+}
+
+//= CookieConsent
+document.addEventListener('DOMContentLoaded', function () {
+    const root = pgs(document).querySelector('cookieConsent');
+    if (!root) return;
+
+    const analyticsToggle = root.querySelector('[pgs~="cookieConsent-toggleAnalytics"]');
+    const acceptAllButton = root.querySelector('[pgs~="cookieConsent-actionAccept"]');
+    const rejectButton = root.querySelector('[pgs~="cookieConsent-actionReject"]');
+    const openButtons = document.querySelectorAll('[pgs~="cookieConsent-actionOpen"]');
+    const measurementId = (root.dataset.gaId || '').trim();
+    const prefersGa = measurementId.length > 0;
+    let lastFocusedElement = null;
+
+    assignCookieRuntimeAttributes({ root, analyticsToggle, acceptAllButton, rejectButton, openButtons });
+
+    if (analyticsToggle) {
+        analyticsToggle.disabled = !prefersGa;
+        if (!prefersGa) {
+            analyticsToggle.checked = false;
+            setPgsFlag(root, 'cookieConsent-gaUnavailable', true);
+        } else {
+            setPgsFlag(root, 'cookieConsent-gaUnavailable', false);
+        }
+    }
+
+    bootstrapGtag();
+    window.gtag('consent', 'default', { analytics_storage: 'denied' });
+
+    function setBannerVisibility(show) {
+        root.hidden = !show;
+        root.setAttribute('aria-hidden', String(!show));
+        document.body.classList.toggle('cookieConsent-open', show);
+        if (show) {
+            lastFocusedElement = document.activeElement;
+            setTimeout(() => {
+                root.focus();
+            }, 0);
+        } else if (lastFocusedElement instanceof HTMLElement) {
+            lastFocusedElement.focus({ preventScroll: true });
+        }
+    }
+
+    function closeBanner() {
+        setBannerVisibility(false);
+    }
+
+    function openBanner() {
+        setBannerVisibility(true);
+    }
+
+    function persistAndApply(allowAnalytics) {
+        savePreferences({ analytics: allowAnalytics });
+        setPgsFlag(root, 'cookieConsent-accepted', !!allowAnalytics);
+        setPgsFlag(root, 'cookieConsent-declined', !allowAnalytics);
+        applyAnalyticsConsent({ allowAnalytics: !!allowAnalytics, measurementId });
+    }
+
+    acceptAllButton?.addEventListener('click', () => {
+        if (analyticsToggle && prefersGa) analyticsToggle.checked = true;
+        persistAndApply(!!prefersGa);
+        closeBanner();
+    });
+
+    rejectButton?.addEventListener('click', () => {
+        const allowAnalytics = analyticsToggle ? analyticsToggle.checked && prefersGa : false;
+        if (!allowAnalytics && analyticsToggle) analyticsToggle.checked = false;
+        persistAndApply(allowAnalytics);
+        closeBanner();
+    });
+
+    analyticsToggle?.addEventListener('change', (event) => {
+        if (!prefersGa && event.target instanceof HTMLInputElement) {
+            event.target.checked = false;
+        }
+    });
+
+    root.addEventListener('keydown', (event) => {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            closeBanner();
+        } else if (event.key === 'Tab') {
+            const focusables = root.querySelectorAll(focusableSelectors);
+            if (focusables.length === 0) return;
+            const first = focusables[0];
+            const last = focusables[focusables.length - 1];
+            if (!event.shiftKey && document.activeElement === last) {
+                event.preventDefault();
+                first.focus();
+            }
+            if (event.shiftKey && document.activeElement === first) {
+                event.preventDefault();
+                last.focus();
+            }
+        }
+    });
+
+    openButtons.forEach((button) => {
+        button.addEventListener('click', (event) => {
+            event.preventDefault();
+            openBanner();
+        });
+    });
+
+    const savedPrefs = readPreferences();
+    if (savedPrefs && typeof savedPrefs.analytics === 'boolean') {
+        if (analyticsToggle) analyticsToggle.checked = !!savedPrefs.analytics && prefersGa;
+        persistAndApply(savedPrefs.analytics && prefersGa);
+        closeBanner();
+    } else {
+        setBannerVisibility(true);
+    }
+});

package/assets/javascript/patterns/_header.js

@@ -0,0 +1,134 @@
+//# HEADER
+const header = pgs(document).querySelector("header");
+const headerElements = pgs(header).querySelectorAll("header-element");
+headerElements.forEach(element => PGS_header(element));
+
+//= HEADER
+export function PGS_header(selectHeader) {
+
+    //= INIT
+    if (selectHeader.getAttribute("data-initialize") == "true") return;
+    selectHeader.setAttribute("data-initialize", "true");
+
+    //= ACTIVE MOBILE 
+    let menuAttivate = false;
+    let childsWidthSAVE;
+
+    function mobileActive(headerElement) {
+
+        //=== header
+        let style = window.getComputedStyle(headerElement);
+        let padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+        let gap = parseFloat(style.gap);
+        let headerElementWidth = parseInt(headerElement.offsetWidth - padding);
+        let childsWidth;
+
+        if (menuAttivate) {
+            childsWidth = childsWidthSAVE;
+        } else {
+            let childs = [];
+
+            // Esclude l'area mobile dedicata e l'hamburger, poi misura i figli sempre visibili su desktop.
+            Array.from(headerElement.children)
+                .filter(el => !pgs(el).contains("header-element-onlyMobile"))
+                .forEach(child => {
+                    if (pgs(child).contains("header-element-hamburger")) return;
+                    childs.push(...child.children);
+                });
+
+            gap = Math.round(gap * (childs.length - 1));
+            let childsReduce = childs.reduce((totalWidth, child) => totalWidth + child.offsetWidth, 0) - 2;
+
+            childsWidth = childsReduce + gap;
+        }
+
+        //===set data
+        if (window.innerWidth < 600) {
+            header.setAttribute("data-header-mobileActive", "true");
+            selectHeader.setAttribute("data-header-mobileActive", "true");
+        } else if (headerElementWidth < childsWidth) {
+            header.setAttribute("data-header-mobileActive", "true");
+            headerElement.setAttribute("data-header-mobileActive", "true");
+            menuAttivate = true;
+            childsWidthSAVE = childsWidth;
+        } else {
+            header.setAttribute("data-header-mobileActive", "false");
+            headerElement.setAttribute("data-header-mobileActive", "false");
+        }
+    }
+
+    //== observer (throttled to avoid ResizeObserver loop warnings)
+    let resizeRafId = 0;
+    const scheduleMobileActive = () => {
+        if (resizeRafId) return;
+        resizeRafId = requestAnimationFrame(() => {
+            resizeRafId = 0;
+            mobileActive(selectHeader);
+        });
+    };
+
+    let observer = new ResizeObserver(scheduleMobileActive);
+    observer.observe(selectHeader);
+    scheduleMobileActive();
+
+}
+
+
+
+
+//= HEADER HEIGHT
+const body = document.querySelector("body");
+function headerHeight() {
+    const headerElements = document.querySelectorAll("header > [data-initialize=true]");
+    const wordPressBar = window.getComputedStyle(document.documentElement).marginTop ?? 0;
+
+    const totalHeight = Array.from(headerElements)
+        .map(el => el.offsetHeight)
+        .reduce((sum, h) => sum + h);
+
+    const height = totalHeight + parseInt(wordPressBar);
+
+    body.style.setProperty('--heightOfHeader', `${height}px`);
+    const scrollHeight = document.querySelector("header").getAttribute("data-header-scroll") === "true" ? 0 : height;
+    body.style.setProperty('--heightOfHeaderScroll', `${scrollHeight}px`);
+
+}
+headerHeight()
+window.addEventListener("resize", headerHeight);
+window.addEventListener("scroll", headerHeight);
+
+
+//= SCROLL
+// Nasconde l'header quando si scorre verso il basso e lo mostra quando si scorre verso l'alto su dispositivi con larghezza fino a 900px.
+let lastScrollY = window.scrollY;
+window.addEventListener("scroll", () => {
+    let currentScrollY = window.scrollY;
+
+    if (window.innerHeight <= 900) {
+        if (currentScrollY >= 80) {
+            if (currentScrollY > lastScrollY) {
+                header.style.transform = "translateY(-100%)";
+                header.setAttribute("data-header-scroll", true)
+            } else {
+                header.style.transform = "translateY(0px)";
+                header.setAttribute("data-header-scroll", false)
+            }
+        } else {
+            header.style.transform = "translateY(0)"; // Mostra sempre l'header se il scroll è inferiore a 80px
+            header.setAttribute("data-header-scroll", false)
+        }
+    }
+    lastScrollY = currentScrollY;
+
+});
+
+// Ripristina la posizione dell'header quando si esce dalla modalità mobile
+window.addEventListener("resize", () => {
+    if (window.innerWidth > 768) header.style.transform = "translateY(0)";
+});
+
+// MOBILE ACTIVE
+if (window.innerWidth < 600) {
+    document.querySelector("header").setAttribute("data-header-mobileActive", "true");
+    document.querySelector("[pgs~=header-element]").setAttribute("data-header-mobileActive", "true");
+}

package/assets/javascript/pgs.d.ts

@@ -0,0 +1,23 @@
+declare global {
+  interface PgsBag {
+    add: (...values: string[]) => void;
+    remove: (...values: string[]) => void;
+    toggle: (value: string) => boolean;
+    contains: (value: string) => boolean;
+    value: string;
+    querySelector: (value: string | string[]) => Element | null;
+    querySelectorAll: (value: string | string[]) => NodeListOf<Element>;
+  }
+
+  interface Element {
+    pgs: PgsBag;
+  }
+
+  interface Document {
+    pgs: {
+      querySelector: (value: string | string[]) => Element | null;
+      querySelectorAll: (value: string | string[]) => NodeListOf<Element>;
+    };
+  }
+}
+export {};

package/assets/scss/base/_body.scss

@@ -0,0 +1,151 @@
+//== BASE
+[pgs~="bodyBase"] {
+    background-color: var(--color-background);
+    position: relative;
+
+    section {
+        container-type: inline-size;
+        width: 100%;
+    }
+
+    aside {
+        container-type: inline-size;
+        width: 100%;
+    }
+
+    ul {
+        list-style: none;
+        color: var(--color-black);
+    }
+
+    hr {
+        margin: var(--gap-texts);
+        border-style: solid;
+        border-color: var(--color-primary-soft);
+    }
+
+    ::selection {
+        background: var(--color-secondary);
+        color: var(--color-whiteFixed);
+    }
+
+    :focus-visible {
+        outline: 0px solid;
+    }
+
+    @media (hover: hover) and (pointer: none) {
+        :focus-visible {
+            outline: var(--focus-visible);
+        }
+    }
+}
+
+//== IMG
+[pgs~="bodyImg"] {
+    i {
+        line-height: 1.2 !important;
+        font-size: var(--fa-size);
+        transition: color 300ms;
+
+        &::before,
+        &::after {
+            transition: color 300ms;
+        }
+    }
+
+    img,
+    object,
+    lottie-player {
+        width: 100%;
+        height: auto;
+        overflow: hidden;
+        -webkit-user-drag: none;
+        user-drag: none;
+        pointer-events: none;
+        color-scheme: light;
+        transition: opacity 200ms;
+
+        @at-root body #{&} {
+            width: 100%;
+            height: auto;
+        }
+    }
+
+    svg {
+        fill: currentColor;
+    }
+
+    body:not(.object-loaded) :is(object[type="image/svg+xml"], lottie-player) {
+        opacity: 0;
+    }
+
+    picture {
+        display: block;
+        height: 100%;
+    }
+}
+
+//== TEXT
+[pgs~="bodyText"] {
+    letter-spacing: 0.4px;
+    color: var(--color-black);
+    font-family: var(--font);
+    font-weight: 500;
+    font-size: 1.6rem;
+    font-optical-sizing: auto;
+    font-style: normal;
+
+    span {
+        overflow-wrap: anywhere;
+    }
+
+    p {
+        color: var(--color-text);
+        line-height: 1.5;
+        overflow-wrap: anywhere;
+
+        a {
+            color: var(--color-link);
+            text-decoration: underline;
+        }
+    }
+
+    a {
+        text-decoration: none;
+        overflow-wrap: anywhere;
+
+        &:hover {
+            color: color-mix(in srgb, var(--color-link) 100%, var(--color-whiteFixed) 50%);
+            text-decoration: underline;
+        }
+
+        img,
+        object,
+        lottie-player {
+            vertical-align: bottom;
+        }
+    }
+}
+
+//== heading
+[pgs~="bodyHeading"] {
+    h1 {
+        @include h1();
+    }
+
+    h2 {
+        @include h2();
+    }
+
+    h3 {
+        @include h3();
+    }
+
+    h4 {
+        @include h4();
+    }
+
+    h5 {
+        @include h5();
+    }
+}

package/assets/scss/base/_color.scss

@@ -0,0 +1,56 @@
+//= COLOR
+//== LIGHTMODE & DARKMODE
+:root {
+    color-scheme: light;
+
+    &[data-darkmode=true] {
+        color-scheme: dark;
+    }
+}
+
+// == Primary colors
+:root {
+    --color-primary: #5c7d6f;
+    --color-secondary: #3d5f4f;
+    --color-tertiary: #8fb082;
+    --color-quaternary: #10201c;
+}
+
+// == Base colors
+:root {
+    --color-white: light-dark(#FFFFFF, #000000);
+    --color-black: light-dark(#000000, #FFFFFF);
+    --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-linkBackgorud: light-dark(#a0dbff, #002a44);
+    --color-background: light-dark(#ffffff, #080808);
+    --color-whiteFixed: #FFFFFF;
+    --color-blackFixed: #000000;
+    --color-link: #009EFF;
+    --color-error: #ff6161;
+    --color-warning: #ffa900;
+    --color-success: #4ab94a;
+    --color-gray: #a4a4a4;
+    --color-icon-primary: var(--color-primary);
+    --color-icon-sceondary: var(--color-primary-soft);
+    --menu-dropdown-background: var(--color-box);
+    @include color-strongAndDark();
+    @include color-softAndLight();
+    @include color-status-background();
+}
+
+// :root {
+//     //== SVG
+//     // --svg-color-1: var(--color-primary) & var(--color-primary);
+//     // --svg-color-2: var(--color-secondary) & var(--color-secondary);
+//     // --svg-color-3: var(--color-tertiary) & var(--color-tertiary);
+//     // --svg-color-4: var(--color-quaternary) & var(--color-quaternary);
+// }

package/assets/scss/base/_general.scss

@@ -0,0 +1,58 @@
+//# GENERAL
+[pgs~=card],
+[pgs~=cardImg] {
+    @include card();
+
+    [pgs~=card-img] {
+        @include card-insideImg();
+    }
+}
+
+[pgs~=boxtext] {
+    @include boxtext();
+}
+
+[pgs~=darkmode] {
+    color-scheme: dark;
+}
+
+[pgs~=lightmode] {
+    color-scheme: light;
+}
+
+[pgs~=imgCover] {
+    object-fit: cover;
+}
+
+[pgs~=imgContain] {
+    object-fit: contain;
+}
+
+[pgs~=borderRadius] {
+    border-radius: var(--border-radius);
+}
+
+[pgs~=borderRadiusInput] {
+    border-radius: var(--border-radius-input);
+}
+
+[pgs~=borderRadiusExternal] {
+    border-radius: var(--border-radius-external);
+}
+
+[pgs~=blur] {
+    backdrop-filter: var(--blur);
+}
+
+[pgs~=appearanceNone] {
+    all: unset;
+    appearance: none;
+}
+
+[pgs~=pointer] {
+    cursor: pointer;
+}
+
+[pgs~=hidden] {
+    display: none !important;
+}

package/assets/scss/base/_heading.scss

@@ -0,0 +1,20 @@
+//# HEADING
+[pgs~=h1] {
+    @include h1();
+}
+
+[pgs~=h2] {
+    @include h2();
+}
+
+[pgs~=h3] {
+    @include h3();
+}
+
+[pgs~=h4] {
+    @include h4();
+}
+
+[pgs~=h5] {
+    @include h5();
+}

package/assets/scss/base/_html.scss

@@ -0,0 +1,4 @@
+[pgs~="htmlBase"] {
+    scroll-behavior: smooth;
+    font-size: 62.5%;
+}

package/assets/scss/base/_reset.scss

@@ -0,0 +1,15 @@
+//= Reset properties 
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    scroll-margin-top: calc(var(--heightOfHeader) + 5vh);
+}
+
+:root {
+    interpolate-size: allow-keywords;
+}
+
+@view-transition {
+    navigation: auto;
+}