mypgs 1.5.0 → 1.6.0

package/assets/javascript/layout/_header.js

@@ -93,9 +93,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 +148,3 @@ window.addEventListener("scroll", () => {
 
 });
 
-
-
-
-

package/assets/scss/base/_color.scss

@@ -5,33 +5,26 @@
 :root {
     color-scheme: light;
 
-    &[data-darkmode=true] {
+    &[pgs-state~=darkmode] {
         color-scheme: dark;
     }
-}
 
-// == Primary colors
-:root {
+    // == Primary colors
     --color-primary: #5c7d6f;
     --color-secondary: #3d5f4f;
     --color-tertiary: #8fb082;
     --color-quaternary: #10201c;
-}
-
-// == Base colors
-:root {
+    
+    // == Base colors
     --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-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/_general.scss

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

package/assets/scss/base/_heading.scss

@@ -1,24 +1,22 @@
 @use "../mixin/mixin" as *;
 
 //# HEADING
-[pgs~=initP] {
-    [pgs~=h1] {
-        @include h1();
-    }
+[pgs~=h1] {
+    @include h1();
+}
 
-    [pgs~=h2] {
-        @include h2();
-    }
+[pgs~=h2] {
+    @include h2();
+}
 
-    [pgs~=h3] {
-        @include h3();
-    }
+[pgs~=h3] {
+    @include h3();
+}
 
-    [pgs~=h4] {
-        @include h4();
-    }
+[pgs~=h4] {
+    @include h4();
+}
 
-    [pgs~=h5] {
-        @include h5();
-    }
+[pgs~=h5] {
+    @include h5();
 }

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(--gap-elements)*2));
+    --page-topScroll: 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;
@@ -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/_card.scss

@@ -0,0 +1,10 @@
+@use "../mixin/mixin" as *;
+
+[pgs~=card],
+[pgs~=cardImg] {
+    @include card();
+
+    [pgs~=card-img] {
+        @include card-insideImg();
+    }
+}

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/_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/_search.scss

@@ -0,0 +1,134 @@
+@use "../mixin/mixin" as *;
+
+[pgs~="search"] {
+    --search-suggestions-background: var(--color-box);
+    --search-suggestions-color: var(--color-text);
+    --search-suggestions-border: var(--border-complete);
+    --search-suggestions-borderRadius: var(--border-radius-input);
+    --search-suggestions-box-shadow: var(--box-shadow);
+    --search-suggestions-gap: 0;
+    --search-suggestions-max-height: 32rem;
+    --search-suggestions-offset: .5rem;
+    --search-suggestions-padding: .5rem;
+    --search-suggestions-item-padding: 1rem;
+    --search-suggestions-item-selected-background: var(--color-primary);
+    --search-suggestions-item-selected-color: var(--color-whiteFixed);
+    position: relative;
+    @include flexRow(nowrap);
+    flex: 1;
+    width: 100%;
+    overflow: visible;
+    margin-inline: auto;
+    padding: 0;
+    @include button_header();
+
+    @media (min-width: $mobile) {
+        min-width: 21.4rem;
+    }
+
+    button {
+        height: 100%;
+        padding-left: var(--button-size);
+        border: none;
+        border-radius: var(--border-radius-input);
+        outline: none;
+        background: none;
+        cursor: pointer;
+    }
+
+    input {
+        width: 100%;
+        min-width: 21.4rem;
+        height: 100%;
+        padding: var(--button-size);
+        padding-left: 0;
+        margin: 2px;
+        margin-left: 0;
+        border: 0;
+        border-radius: var(--border-radius-input);
+        background-color: transparent;
+        color: contrast-color(color-mix(in srgb, var(--button-background) 77%, black));
+        font-family: var(--font);
+        font-size: 1.6rem;
+        font-weight: 600;
+        cursor: text !important;
+
+        &::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);
+    }
+
+    &:not([pgs-state~="open"])>[pgs~="search-suggestions"] {
+        display: none;
+    }
+
+    &[pgs-state~="open"]>[pgs~="search-suggestions"] {
+        display: flex;
+    }
+
+    >[pgs~="search-suggestions"] {
+        position: absolute;
+        inset: calc(100% + var(--search-suggestions-offset)) 0 auto;
+        z-index: 1000;
+        flex-direction: column;
+        gap: var(--search-suggestions-gap);
+        max-height: var(--search-suggestions-max-height);
+        overflow-y: auto;
+        padding: var(--search-suggestions-padding);
+        margin: 0;
+        list-style: none;
+        border: var(--search-suggestions-border);
+        border-radius: calc(var(--search-suggestions-borderRadius) + var(--search-suggestions-padding));
+        background: var(--search-suggestions-background);
+        color: var(--search-suggestions-color);
+        box-shadow: var(--search-suggestions-box-shadow);
+
+        [pgs~="search-suggestions-item"] {
+            padding: var(--search-suggestions-item-padding);
+            border-radius: var(--search-suggestions-borderRadius);
+            cursor: pointer;
+            flex-wrap: nowrap;
+
+            &[aria-selected="true"],
+            &:hover {
+                background: var(--search-suggestions-item-selected-background);
+                color: var(--search-suggestions-item-selected-color);
+            }
+
+            &[aria-disabled="true"] {
+                cursor: not-allowed;
+                opacity: .5;
+            }
+        }
+
+        &:has([pgs~="search-suggestions-item"]:hover) [pgs~="search-suggestions-item"][aria-selected="true"] {
+            background: var(--search-suggestions-background);
+            color: var(--search-suggestions-color);
+
+            &:hover {
+                background: var(--search-suggestions-item-selected-background);
+                color: var(--search-suggestions-item-selected-color);
+            }
+        }
+    }
+
+    @at-root dialog #{&} {
+        max-width: calc(100% - var(--padding-page) * 2);
+        height: max-content;
+        margin-inline: auto;
+        background-color: var(--color-white);
+
+        input {
+            padding-block: 20px;
+        }
+    }
+}

package/assets/scss/index.scss

@@ -9,8 +9,11 @@
 @include meta.load-css("base/color");
 @include meta.load-css("base/html");
 @include meta.load-css("base/body");
-@include meta.load-css("base/heading");
-@include meta.load-css("base/general");
+
+[pgs~=initP] {
+    @include meta.load-css("base/heading");
+    @include meta.load-css("base/general");
+}
 
 /*
 |--------------------------------------------------------------------------
@@ -33,6 +36,7 @@
 |--------------------------------------------------------------------------
 */
 [pgs~=initP] {
+    @include meta.load-css("components/card");
     @include meta.load-css("components/button");
     @include meta.load-css("components/form");
     @include meta.load-css("components/menu");
@@ -48,7 +52,7 @@
     @include meta.load-css("components/badges");
     @include meta.load-css("components/notification");
     @include meta.load-css("components/tooltip");
-    @include meta.load-css("components/searchbar");
+    @include meta.load-css("components/search");
     @include meta.load-css("components/logo");
 }
 
@@ -59,4 +63,4 @@
 */
 [pgs~=initP] {
     @include meta.load-css("patterns/cookieConsent");
-}
+}

package/assets/scss/layout/_header.scss

@@ -154,4 +154,4 @@
             padding-inline: var(--header-padding-block);
         }
     }
-}
+}

package/assets/scss/layout/_pageShell.scss

@@ -49,6 +49,7 @@ $pageShell-test-gap: 4rem;
         isolation: isolate;
         position: sticky;
         top: var(--pageShell-aside-sticky-top);
+        transition: top 0.3s ease;
         width: 100%;
         max-height: 100svh;
         overflow-y: auto;