mypgs 1.3.7 → 1.4.1

package/assets/javascript/_imports.js

@@ -8,6 +8,7 @@ import { PGS_notification } from "./components/_notifications.js";
 import { PGS_slides } from "./components/_slides.js";
 import { PGS_stepTabs } from "./components/_stepTabs.js";
 import { PGS_steps } from "./components/_steps.js";
+import { PGS_summary } from "./components/_summary.js";
 import { PGS_formValidate } from "./functions/_formValidate.js";
 import { PGS_scrollHorizontal } from "./functions/_scrollY.js";
 
@@ -20,7 +21,7 @@ pgs.registerModules({
     slides: PGS_slides,
     stepTabs: PGS_stepTabs,
     steps: PGS_steps,
+    summary: PGS_summary,
     formValidate: PGS_formValidate,
     scrollHorizontal: PGS_scrollHorizontal,
 });
-

package/assets/javascript/components/_summary.js

@@ -0,0 +1,105 @@
+//= SUMMARY
+const API = new WeakMap();
+let summaryId = 0;
+
+function nextSummaryId() {
+    summaryId += 1;
+    return summaryId;
+}
+
+function getLineHeight(element) {
+    const style = window.getComputedStyle(element);
+    const lineHeight = parseFloat(style.lineHeight);
+    if (Number.isFinite(lineHeight)) return lineHeight;
+
+    const fontSize = parseFloat(style.fontSize);
+    return Number.isFinite(fontSize) ? fontSize * 1.2 : 0;
+}
+
+function directPgsChild(element, token) {
+    return Array.from(element.children).find(child => pgs(child).contains(token));
+}
+
+export function PGS_summary_init(root = document) {
+    pgs(root).querySelectorAll("summary").forEach((summary) => {
+        if (API.has(summary)) return;
+
+        const content = directPgsChild(summary, "summary-content");
+        const button = directPgsChild(summary, "summary-button");
+        if (!content || !button) return;
+
+        const id = nextSummaryId();
+        const contentId = content.id || `summary-content-${id}`;
+        content.id = contentId;
+
+        button.type ||= "button";
+        button.setAttribute("aria-controls", content.id);
+
+        function isOpen() {
+            return pgs(summary).state.contains("open");
+        }
+
+        function getCollapsedHeight() {
+            return getLineHeight(content) * 3;
+        }
+
+        function isOverflowing() {
+            return content.scrollHeight > Math.ceil(getCollapsedHeight()) + 1;
+        }
+
+        function setExpanded(expanded) {
+            const overflow = isOverflowing();
+
+            pgs(summary).state.toggle("overflow", overflow);
+            pgs(summary).state.toggle("open", expanded && overflow);
+
+            button.hidden = !overflow;
+            button.setAttribute("aria-hidden", String(!overflow));
+            button.setAttribute("aria-expanded", String(expanded && overflow));
+            button.textContent = expanded && overflow ? "Mostra meno" : "Mostra di più";
+
+            const nextHeight = expanded && overflow ? content.scrollHeight : getCollapsedHeight();
+            content.style.setProperty("--summary-content-max-height", `${nextHeight}px`);
+        }
+
+        function refresh() {
+            const wasOpen = isOpen();
+            content.style.setProperty("--summary-content-max-height", "none");
+            setExpanded(wasOpen);
+        }
+
+        function toggle() {
+            setExpanded(!isOpen());
+        }
+
+        button.addEventListener("click", toggle);
+        window.addEventListener("resize", refresh, { passive: true });
+
+        refresh();
+        requestAnimationFrame(refresh);
+
+        API.set(summary, {
+            element: summary,
+            content,
+            button,
+            open: () => setExpanded(true),
+            close: () => setExpanded(false),
+            toggle,
+            refresh,
+            isOpen,
+        });
+    });
+}
+
+//# INIT
+PGS_summary_init();
+
+//# API
+export function PGS_summary_api(selector) {
+    return API.get(selector);
+}
+
+export const PGS_summary = {
+    init: PGS_summary_init,
+    api: PGS_summary_api
+};

package/assets/javascript/index.js

@@ -14,11 +14,14 @@ import "./components/_modals.js";
 import "./components/_slides.js"
 import "./components/_steps.js";
 import "./components/_stepTabs.js";
+import "./components/_summary.js";
 import "./components/_notifications.js";
 
 //= IMPORT REGISTRY
 import "./_imports.js";
 
+//= LAYOUT 
+import "./layout/_header.js";
+
 //= PATTERNS 
-import "./patterns/_header.js";
-import "./patterns/_cookieConsent.js";
+import "./patterns/_cookieConsent.js";

package/assets/javascript/{patterns → layout}/_header.js

@@ -3,11 +3,11 @@ const header = pgs(document).querySelector("header");
 
 //= HEADER
 function PGS_header(selectHeader = document) {
-    
+
     if (!header) return;
 
     const headerElements = pgs(header).querySelectorAll("header-element");
-    
+
     if (!headerElements.length) return;
 
     headerElements.forEach(selectHeader => {
@@ -87,12 +87,11 @@ function headerHeight() {
     if (!header) return;
     const wordPressBar = window.getComputedStyle(document.documentElement).marginTop ?? 0;
     const headerHeight = header.offsetHeight
-
-    const body = document.querySelector("body");
     const height = headerHeight + parseInt(wordPressBar);
     const scrollHeight = document.querySelector("header").getAttribute("data-header-scroll") === "true" ? 0 : height;
-    body.style.setProperty('--heightOfHeader', `${height}px`);
-    body.style.setProperty('--heightOfHeaderScroll', `${scrollHeight}px`);
+
+    document.documentElement.style.setProperty("--heightOfHeader", `${height}px`);
+    document.documentElement.style.setProperty("--heightOfHeaderScroll", `${scrollHeight}px`);
 }
 headerHeight()
 window.addEventListener("resize", headerHeight);

package/assets/javascript/pgs.d.ts

@@ -54,6 +54,7 @@ declare global {
     slides?: any;
     stepTabs?: any;
     steps?: any;
+    summary?: any;
     formValidate?: any;
     scrollHorizontal?: any;
     [moduleName: string]: any;
@@ -61,6 +62,12 @@ declare global {
 
   interface PgsBag extends PgsElementApi {}
 
+  namespace React {
+    interface HTMLAttributes<T> {
+      pgsHtml?: string;
+    }
+  }
+
   var pgs: PgsFunction;
 }
 

package/assets/scss/base/_variables.scss

@@ -19,7 +19,7 @@
     --text-shadow: 0px 0px 50px #000000;
     --backdrop: #0000003e;
     --blur: blur(20px);
-    --page-top: 20svh;
+    --page-top: calc(var(--heightOfHeaderScroll) + (var(--gap-elements)*2));
     --page-width: 1280px;
     --page-space: clamp(var(--padding-page), calc((100% - var(--section-width)) / 2 + var(--padding-page)), 100%);
     --gap-texts: 1.0rem;

package/assets/scss/components/_badges.scss

@@ -0,0 +1,93 @@
+@use "../mixin/mixin" as *;
+
+@mixin _badge() {
+    --badge-background: var(--color-box);
+    --badge-color: var(--color-black);
+    --badge-size: 1.25rem;
+    --badge-icon-size: 1.4rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--badge-size) / 2);
+    width: max-content;
+    max-width: 100%;
+    min-height: calc(var(--badge-size) * 2.2);
+    padding: calc(var(--badge-size) / 2) var(--badge-size);
+    border-radius: var(--border-radius-input);
+    background: var(--badge-background);
+    color: var(--badge-color);
+    font-size: var(--badge-size);
+    font-weight: 700;
+    line-height: 1;
+    text-decoration: none;
+    white-space: nowrap;
+    overflow-wrap: normal;
+
+    i {
+        color: var(--badge-color);
+        font-size: var(--badge-icon-size);
+        --fa-size: var(--badge-icon-size);
+        --fa-primary-color: var(--badge-color);
+        --fa-secondary-color: var(--badge-color);
+        --fa-secondary-opacity: 0.5;
+    }
+}
+
+[pgs~="badge"],
+[pgs~="badgePrimary"],
+[pgs~="badgeStrong"],
+[pgs~="badgeSuccess"],
+[pgs~="badgeWarning"],
+[pgs~="badgeError"],
+[pgs~="badgeInfo"],
+[pgs~="badgeNeutral"],
+[pgs~="badgeDot"] {
+    @include _badge();
+}
+
+[pgs~="badgePrimary"] {
+    --badge-background: var(--color-primary-soft);
+    --badge-color: var(--color-primary-strong);
+}
+
+[pgs~="badgeStrong"] {
+    --badge-background: var(--color-primary);
+    --badge-color: var(--color-whiteFixed);
+}
+
+[pgs~="badgeSuccess"] {
+    --badge-background: var(--color-success-background);
+    --badge-color: var(--color-success);
+}
+
+[pgs~="badgeWarning"] {
+    --badge-background: var(--color-warning-background);
+    --badge-color: var(--color-warning);
+}
+
+[pgs~="badgeError"] {
+    --badge-background: var(--color-error-background);
+    --badge-color: var(--color-error);
+}
+
+[pgs~="badgeInfo"] {
+    --badge-background: var(--color-linkBackgorud);
+    --badge-color: var(--color-link);
+}
+
+[pgs~="badgeNeutral"] {
+    --badge-background: var(--color-box-transparent);
+    --badge-color: var(--color-text);
+}
+
+[pgs~="badgeDot"] {
+    &::before {
+        content: "";
+        display: block;
+        inline-size: 0.65em;
+        block-size: 0.65em;
+        flex: 0 0 auto;
+        border-radius: 50%;
+        background: currentColor;
+    }
+}

package/assets/scss/components/_summary.scss

@@ -0,0 +1,56 @@
+@use "../mixin/mixin" as *;
+
+[pgs~="summary"] {
+    --summary-fade-size: 4rem;
+    --summary-fade-background: var(--color-background);
+    --summary-content-max-height: 5.7rem;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-texts);
+    isolation: isolate;
+
+    [pgs~="summary-content"] {
+        max-height: var(--summary-content-max-height, none);
+        overflow: hidden;
+        transition: max-height 300ms ease;
+    }
+
+    &[pgs-state~="overflow"]:not([pgs-state~="open"]) {
+        [pgs~="summary-content"] {
+            position: relative;
+
+            &::after {
+                content: "";
+                position: absolute;
+                inset: auto 0 0;
+                height: var(--summary-fade-size);
+                pointer-events: none;
+                background: linear-gradient(to bottom, transparent, var(--summary-fade-background));
+            }
+        }
+    }
+
+    &:has([pgs~="summary-button"][hidden]) {
+        [pgs~="summary-content"]{
+            max-height: unset;
+        }
+    }
+
+    [pgs~="summary-button"] {
+        padding: 5px;
+        cursor: pointer;
+        background-color: transparent;
+        border: unset;
+        margin-top: calc(var(--gap-texts) * -1);
+        z-index: 1;
+        color: var(--color-primary-strong);
+        font-family: var(--font);
+        font-weight: 600;
+        font-size: 1.6rem;
+
+        &[hidden] {
+            display: none !important;
+        }
+    }
+}

package/assets/scss/index.scss

@@ -23,6 +23,8 @@
     @include meta.load-css("layout/grid");
     @include meta.load-css("layout/pageShell");
     @include meta.load-css("layout/gap");
+    @include meta.load-css("layout/header");
+    @include meta.load-css("layout/footer");
 }
 
 /*
@@ -42,6 +44,8 @@
     @include meta.load-css("components/steps");
     @include meta.load-css("components/table");
     @include meta.load-css("components/stepTabs");
+    @include meta.load-css("components/summary");
+    @include meta.load-css("components/badges");
     @include meta.load-css("components/notification");
     @include meta.load-css("components/tooltip");
     @include meta.load-css("components/searchbar");
@@ -54,7 +58,5 @@
 |--------------------------------------------------------------------------
 */
 [pgs~=initP] {
-    @include meta.load-css("patterns/header");
-    @include meta.load-css("patterns/footer");
     @include meta.load-css("patterns/cookieConsent");
-}
+}

package/assets/scss/{patterns → layout}/_header.scss

@@ -110,8 +110,12 @@
 
         [pgs~="modal-dialog-content"] {
             nav {
-                padding: var(--padding-2);
-                border-radius: var(--padding-2);
+
+                // padding: var(--padding-2);
+                // border-radius: var(--padding-2);
+                a {
+                    --button-background: var(--modal-background);
+                }
             }
         }
 

package/assets/scss/layout/_pageShell.scss

@@ -1,5 +1,4 @@
 @use "../mixin/mixin" as *;
-
 //# pageShell
 $aside-size: 400px;
 $content-size: 500px;
@@ -9,16 +8,18 @@ $pageShell-test-gap: 4rem;
     position: relative;
     top: auto;
     max-height: none;
-    overflow: visible;
-    scrollbar-gutter: auto;
     width: 100%;
     min-width: 100%;
+
+    [pgs~="pageShell-aside"] {
+        scrollbar-gutter: auto;
+        overflow: visible;
+    }
 }
 
 [pgs~="pageShell"] {
     --pageShell-aside-sticky-top: 0;
-    --pageShell-asideLeft-width: #{$aside-size};
-    --pageShell-asideRight-width: #{$aside-size};
+    --pageShell-aside-width: #{$aside-size};
     --pageShell-content-width: 500px;
     --pageShell-gap: var(--gap-elements);
     display: flex;
@@ -29,7 +30,6 @@ $pageShell-test-gap: 4rem;
     justify-content: center;
     width: 100%;
     max-width: calc(var(--page-width) + (var(--padding-page) * 2));
-    padding-bottom: var(--page-top);
     padding-inline: var(--padding-page);
     container-type: inline-size;
 
@@ -40,10 +40,10 @@ $pageShell-test-gap: 4rem;
         width: min(100%, var(--page-width));
         max-width: var(--page-width);
         padding-top: var(--page-top);
+        padding-bottom: var(--gap-elements);
     }
 
-    [pgs~="pageShell-asideLeft"],
-    [pgs~="pageShell-asideRight"] {
+    [pgs~="pageShell-aside"] {
         @include flexColumn;
         align-items: flex-start;
         isolation: isolate;
@@ -56,6 +56,10 @@ $pageShell-test-gap: 4rem;
         scrollbar-gutter: stable;
         scrollbar-width: none;
         padding-top: var(--page-top);
+        padding-bottom: var(--gap-elements);
+        flex: 1 1 var(--pageShell-aside-width);
+        min-width: min(100%, var(--pageShell-aside-width));
+        max-width: var(--pageShell-aside-width);
 
         &::-webkit-scrollbar {
             display: none;
@@ -65,38 +69,63 @@ $pageShell-test-gap: 4rem;
             width: 100%;
         }
 
-        &:is([pgs~="pageShell-asideLeft"]) {
+        &:has(+ [pgs~="pageShell-content"]) {
             grid-area: asideLeft;
-            flex: 1 1 var(--pageShell-asideLeft-width);
-            min-width: min(100%, var(--pageShell-asideLeft-width));
-            max-width: var(--pageShell-asideLeft-width);
         }
 
-        &:is([pgs~="pageShell-asideRight"]) {
-            grid-area: asideRight;
-            flex: 1 1 var(--pageShell-asideRight-width);
-            min-width: min(100%, var(--pageShell-asideRight-width));
-            max-width: var(--pageShell-asideRight-width);
+        [pgs~="pageShell-aside-scroll"] {
+            @include flexColumn;
+            align-items: flex-start;
+            width: 100%;
+            overflow-y: auto;
+            overscroll-behavior: contain;
+            scrollbar-gutter: stable;
+            scrollbar-width: none;
+            padding-top: var(--page-top);
+            padding-bottom: calc(var(--gap-elements)*2);
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            >* {
+                width: 100%;
+            }
+        }
+
+        &:has([pgs~="pageShell-aside-scroll"]) {
+            padding-top: 0;
+            padding-bottom: 0;
+
+            &::after {
+                content: "";
+                position: absolute;
+                inset-inline: 0;
+                bottom: 0;
+                height: calc(var(--gap-elements)*2);
+                background: linear-gradient(0deg, var(--color-background) 25%, transparent);
+                pointer-events: none;
+                z-index: 1;
+            }
         }
     }
 
-    &:has(> [pgs~="pageShell-asideLeft"]) {
-        max-width: calc(var(--page-width) + var(--pageShell-asideLeft-width) + var(--pageShell-gap) + (var(--padding-page) * 2));
+    [pgs~="pageShell-content"]+[pgs~="pageShell-aside"] {
+        grid-area: asideRight;
     }
 
-    &:has(> [pgs~="pageShell-asideRight"]) {
-        max-width: calc(var(--page-width) + var(--pageShell-asideRight-width) + var(--pageShell-gap) + (var(--padding-page) * 2));
+    &:has(> [pgs~="pageShell-aside"]) {
+        max-width: calc(var(--page-width) + var(--pageShell-aside-width) + var(--pageShell-gap) + (var(--padding-page) * 2));
     }
 
-    &:has(> [pgs~="pageShell-asideLeft"]):has(> [pgs~="pageShell-asideRight"]) {
-        max-width: calc(var(--page-width) + var(--pageShell-asideLeft-width) + var(--pageShell-asideRight-width) + (var(--pageShell-gap) * 2) + (var(--padding-page) * 2));
+    &:has(> [pgs~="pageShell-aside"] ~ [pgs~="pageShell-aside"]) {
+        max-width: calc(var(--page-width) + (var(--pageShell-aside-width) * 2) + (var(--pageShell-gap) * 2) + (var(--padding-page) * 2));
     }
 
     //== RESPONSIVE ==//
-
-    &:has(> [pgs~="pageShell-asideLeft"]) {
+    &:has(> [pgs~="pageShell-aside"]) {
         @container (max-width: calc(#{$aside-size} + #{$content-size} + #{$pageShell-test-gap})) {
-            [pgs~="pageShell-asideLeft"] {
+            [pgs~="pageShell-aside"] {
                 @include pageShell-aside-flow;
             }
 
@@ -107,9 +136,9 @@ $pageShell-test-gap: 4rem;
         }
     }
 
-    &:has(> [pgs~="pageShell-asideRight"]) {
+    &:has(> [pgs~="pageShell-content"] + [pgs~="pageShell-aside"]) {
         @container (max-width: calc(#{$content-size} + #{$aside-size} + #{$pageShell-test-gap})) {
-            [pgs~="pageShell-asideRight"] {
+            [pgs~="pageShell-content"]+[pgs~="pageShell-aside"] {
                 @include pageShell-aside-flow;
                 padding-top: 0;
                 min-width: 100%;
@@ -117,32 +146,31 @@ $pageShell-test-gap: 4rem;
         }
     }
 
-    &:has(> [pgs~="pageShell-asideLeft"]):has(> [pgs~="pageShell-asideRight"]) {
+    &:has(> [pgs~="pageShell-aside"]):has(> [pgs~="pageShell-content"] + [pgs~="pageShell-aside"]) {
         @container (max-width: calc(#{$aside-size} + #{$content-size} + #{$aside-size} + (#{$pageShell-test-gap} * 2))) {
             display: grid;
-            grid-template-columns: var(--pageShell-asideLeft-width) minmax(0, var(--page-width));
+            grid-template-columns: var(--pageShell-aside-width) minmax(0, var(--page-width));
             grid-template-areas:
                 "asideLeft content"
                 "asideLeft asideRight";
             justify-content: center;
 
-            [pgs~="pageShell-asideRight"] {
+            [pgs~="pageShell-content"]+[pgs~="pageShell-aside"] {
                 @include pageShell-aside-flow;
                 padding-top: 0;
-                min-width: min(100%, var(--pageShell-asideRight-width));
+                min-width: min(100%, var(--pageShell-aside-width));
             }
         }
 
         @container (max-width: calc(#{$aside-size} + #{$content-size} + #{$pageShell-test-gap})) {
             display: flex;
 
-            [pgs~="pageShell-asideLeft"],
-            [pgs~="pageShell-asideRight"] {
+            [pgs~="pageShell-aside"] {
                 @include pageShell-aside-flow;
             }
 
             [pgs~="pageShell-content"],
-            [pgs~="pageShell-asideRight"] {
+            [pgs~="pageShell-content"]+[pgs~="pageShell-aside"] {
                 padding-top: 0;
                 min-width: 100%;
             }
@@ -153,15 +181,13 @@ $pageShell-test-gap: 4rem;
         padding-top: var(--page-top);
 
         [pgs~="pageShell-content"],
-        [pgs~="pageShell-asideLeft"],
-        [pgs~="pageShell-asideRight"] {
+        [pgs~="pageShell-aside"] {
             padding-top: 0;
             min-width: 100% !important;
         }
 
-        [pgs~="pageShell-asideLeft"],
-        [pgs~="pageShell-asideRight"] {
+        [pgs~="pageShell-aside"] {
             @include pageShell-aside-flow;
         }
     }
-}
+}