gcch/haiku-atelier-2024
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ref(accueil) optimise le script du storytelling

Browse source
This commit is contained in:
gcch 2024-11-04 18:58:01 +01:00
commit 93eb97e446
7 changed files with 34 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css
View file

@ -17,7 +17,7 @@
#page-accueil .storytelling__conteneur { #page-accueil .storytelling__conteneur {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
min-height: calc(var(--hauteur-conteneur) * 10); min-height: calc(var(--hauteur-conteneur) * 13);
padding: 0 var(--espace-xl); padding: 0 var(--espace-xl);
} }
#page-accueil .storytelling__image { #page-accueil .storytelling__image {

2
web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-accueil.scss"],"names":[],"mappings":"AAEA;EAEE;EAGA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"page-accueil.css"} {"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-accueil.scss"],"names":[],"mappings":"AAEA;EAEE;EAGA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"page-accueil.css"}

2
web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.min.css vendored
View file

@ -1 +1 @@
#page-accueil{--hauteur-conteneur:var(--contenu-page-hauteur-minimale-sans-categories);--page-marges-bloc-debut:var(--en-tete-hauteur);min-height:var(--hauteur-conteneur);max-height:var(--hauteur-conteneur);margin-top:var(--page-marges-bloc-debut);flex-flow:column;display:flex;overflow:hidden}#page-accueil .storytelling{min-height:inherit;max-height:inherit;place-items:center;overflow-y:scroll}#page-accueil .storytelling__conteneur{min-height:calc(var(--hauteur-conteneur)*10);padding:0 var(--espace-xl);flex-flow:column;display:flex}#page-accueil .storytelling__image{min-height:var(--hauteur-conteneur);max-height:var(--hauteur-conteneur);align-content:center;width:100%;position:sticky;top:0}#page-accueil .storytelling__image[data-cache]{display:none}#page-accueil .storytelling__image picture{max-height:inherit}#page-accueil .storytelling__image img{max-height:inherit;object-fit:contain;background:0 0;margin:auto;scale:.9} #page-accueil{--hauteur-conteneur:var(--contenu-page-hauteur-minimale-sans-categories);--page-marges-bloc-debut:var(--en-tete-hauteur);min-height:var(--hauteur-conteneur);max-height:var(--hauteur-conteneur);margin-top:var(--page-marges-bloc-debut);flex-flow:column;display:flex;overflow:hidden}#page-accueil .storytelling{min-height:inherit;max-height:inherit;place-items:center;overflow-y:scroll}#page-accueil .storytelling__conteneur{min-height:calc(var(--hauteur-conteneur)*13);padding:0 var(--espace-xl);flex-flow:column;display:flex}#page-accueil .storytelling__image{min-height:var(--hauteur-conteneur);max-height:var(--hauteur-conteneur);align-content:center;width:100%;position:sticky;top:0}#page-accueil .storytelling__image[data-cache]{display:none}#page-accueil .storytelling__image picture{max-height:inherit}#page-accueil .storytelling__image img{max-height:inherit;object-fit:contain;background:0 0;margin:auto;scale:.9}

2
web/app/themes/haiku-atelier-2024/assets/js/.vite/manifest.json
View file

@ -402,7 +402,7 @@
"_pipe.CtTFdEz3.js", "_pipe.CtTFdEz3.js",
"_Either.DDEPhGsy.js" "_Either.DDEPhGsy.js"
], ],
"integrity": "sha512-oqVl/WxNMuxu9rIE+lrfbw5vZoMCA+tOnPOgkDkBwjAqqBO3S11TdHpxYCgBHWn5hmbIGNipPvUk/qN5G3nZSw==" "integrity": "sha512-Eu4iFbfzKvbs/PP1jVu/uE7swN4jhI4nrSxc1Erzfe16imOovVL/yxWg0ZqZ46aLIWll8euOEr0YQ9cZaLeDeQ=="
}, },
"web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-boutique.ts": { "web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-boutique.ts": {
"file": "scripts-page-boutique.js", "file": "scripts-page-boutique.js",

2
web/app/themes/haiku-atelier-2024/assets/js/scripts-page-accueil.js
View file

@ -1 +1 @@
import{a as T,b as g,c as L,d as I}from"./dom.js";import{e as u}from"./nombres.js";import{a as l,b as p}from"./utils.js";import"./dom2.js";import"./erreurs.js";import"./exports.BOrjxC8q.js";import"./pipe.CtTFdEz3.js";import"./Either.DDEPhGsy.js";const R=()=>{const s=l(T),r=l(".storytelling__conteneur"),n=p(g),o=n.at(0)?.getBoundingClientRect().height??0;let i=0;const E=(t,e)=>{t.toggleAttribute(L,e),t.toggleAttribute(I,e)};r.style.minHeight=`${String(o*n.length)}px`,r.style.maxHeight=`${String(o*n.length)}px`;const m=()=>{i=s.scrollTop,console.time(),n.forEach((t,e)=>{const c=o*(e-1),a=o*e;u(i,c,a)?E(t,!1):E(t,!0)}),console.timeEnd()};s.addEventListener("scroll",()=>m())};document.addEventListener("DOMContentLoaded",()=>{R()}); import{a as T,b as u,c as L,d as I}from"./dom.js";import{e as R}from"./nombres.js";import{a as m,b as p}from"./utils.js";import"./dom2.js";import"./erreurs.js";import"./exports.BOrjxC8q.js";import"./pipe.CtTFdEz3.js";import"./Either.DDEPhGsy.js";const S=()=>{const i=m(T),s=m(".storytelling__conteneur"),e=p(u);let t=e.at(0)?.getBoundingClientRect().height??0,r=0;const E=(o,n)=>{o.toggleAttribute(L,n),o.toggleAttribute(I,n)},l=()=>{t=e.at(0)?.getBoundingClientRect().height??0,s.style.minHeight=`${String(t*e.length+61)}px`,s.style.maxHeight=`${String(t*e.length+61)}px`},a=()=>{r=i.scrollTop,e.forEach((o,n)=>{const c=t*n,g=t*(n+1);E(o,!R(r,c,g))})};new ResizeObserver(()=>{l(),a()}).observe(i),i.addEventListener("scroll",()=>a())};document.addEventListener("DOMContentLoaded",()=>{S()});

3
web/app/themes/haiku-atelier-2024/src/sass/pages/page-accueil.scss
View file

@ -15,7 +15,6 @@
margin-top: var(--page-marges-bloc-debut); margin-top: var(--page-marges-bloc-debut);
.storytelling { .storytelling {
// scrollbar-width: thin;
overflow-y: scroll; overflow-y: scroll;
place-items: center; place-items: center;
min-height: inherit; min-height: inherit;
@ -24,7 +23,7 @@
&__conteneur { &__conteneur {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
min-height: calc(var(--hauteur-conteneur) * 10); min-height: calc(var(--hauteur-conteneur) * 13);
padding: 0 var(--espace-xl); padding: 0 var(--espace-xl);
} }

43
web/app/themes/haiku-atelier-2024/src/scripts/scripts-page-accueil.ts
View file

@ -10,45 +10,58 @@ import { estEntreDeuxNombres } from "./lib/nombres.ts";
import { recupereElementDansDocumentOuLeve, recupereElementsDansDocumentOuLeve } from "./lib/utils.ts"; import { recupereElementDansDocumentOuLeve, recupereElementsDansDocumentOuLeve } from "./lib/utils.ts";
const initialiseScrollStorytelling = (): void => { const initialiseScrollStorytelling = (): void => {
/** Le Conteneur des images du storytelling. */ /** Le bloc contenant le storytelling. */
const STORYTELLING = recupereElementDansDocumentOuLeve<HTMLElement>(SELECTEUR_CONTENEUR_STORYTELLING); const STORYTELLING = recupereElementDansDocumentOuLeve<HTMLElement>(SELECTEUR_CONTENEUR_STORYTELLING);
/** Le conteneur des images du storytelling. */
const CONTENEUR_STORYTELLING = recupereElementDansDocumentOuLeve<HTMLElement>(".storytelling__conteneur"); const CONTENEUR_STORYTELLING = recupereElementDansDocumentOuLeve<HTMLElement>(".storytelling__conteneur");
/** Les Images du storytelling. */ /** Les images du storytelling. */
const IMAGES_STORYTELLING = recupereElementsDansDocumentOuLeve<HTMLDivElement>(SELECTEUR_IMAGES_STORYTELLING); const IMAGES_STORYTELLING = recupereElementsDansDocumentOuLeve<HTMLDivElement>(SELECTEUR_IMAGES_STORYTELLING);
/** Hauteur d'image */ /** La hauteur d'une image du storytelling. */
const HAUTEUR_IMAGE = IMAGES_STORYTELLING.at(0)?.getBoundingClientRect().height ?? 0;
// Variables mutables let hauteurImage = IMAGES_STORYTELLING.at(0)?.getBoundingClientRect().height ?? 0;
/** La position du défilement (en pixels) du Conteneur des images du storytelling. */ /** La position du défilement (en pixels) du Conteneur des images du storytelling. */
let positionDefilementConteneur = 0; let positionDefilementConteneur = 0;
/**
* TODO
* @param image
* @param visible
*/
const changeVisibiliteImage = (image: HTMLDivElement, visible: boolean) => { const changeVisibiliteImage = (image: HTMLDivElement, visible: boolean) => {
image.toggleAttribute(ATTRIBUT_CACHE, visible); image.toggleAttribute(ATTRIBUT_CACHE, visible);
image.toggleAttribute(ATTRIBUT_ARIA_HIDDEN, visible); image.toggleAttribute(ATTRIBUT_ARIA_HIDDEN, visible);
}; };
CONTENEUR_STORYTELLING.style.minHeight = `${String(HAUTEUR_IMAGE * IMAGES_STORYTELLING.length)}px`; /**
CONTENEUR_STORYTELLING.style.maxHeight = `${String(HAUTEUR_IMAGE * IMAGES_STORYTELLING.length)}px`; * TODO
*/
const majDimensions = (): void => {
hauteurImage = IMAGES_STORYTELLING.at(0)?.getBoundingClientRect().height ?? 0;
CONTENEUR_STORYTELLING.style.minHeight = `${String(hauteurImage * IMAGES_STORYTELLING.length + 61)}px`;
CONTENEUR_STORYTELLING.style.maxHeight = `${String(hauteurImage * IMAGES_STORYTELLING.length + 61)}px`;
};
/**
* TODO
*/
const majImages = (): void => { const majImages = (): void => {
// Met à jour la position du défilement dans le Conteneur // Met à jour la position du défilement dans le Conteneur
positionDefilementConteneur = STORYTELLING.scrollTop; positionDefilementConteneur = STORYTELLING.scrollTop;
console.time();
// Met à jour l'attribut de visibilité des images en fonction du défilement // Met à jour l'attribut de visibilité des images en fonction du défilement
IMAGES_STORYTELLING.forEach((image: HTMLDivElement, index: number): void => { IMAGES_STORYTELLING.forEach((image: HTMLDivElement, index: number): void => {
const debutYImage = HAUTEUR_IMAGE * (index - 1); const debutYImage = hauteurImage * index;
const finYImage = HAUTEUR_IMAGE * index; const finYImage = hauteurImage * (index + 1);
estEntreDeuxNombres(positionDefilementConteneur, debutYImage, finYImage) changeVisibiliteImage(image, !estEntreDeuxNombres(positionDefilementConteneur, debutYImage, finYImage));
? changeVisibiliteImage(image, false)
: changeVisibiliteImage(image, true);
}); });
console.timeEnd();
}; };
// Initialise l'Observateur de Redimensionnement (ResizeObserver) // Initialise l'Observateur de Redimensionnement (ResizeObserver)
// new ResizeObserver((): void => majImages()).observe(STORYTELLING); new ResizeObserver((): void => {
majDimensions();
majImages();
}).observe(STORYTELLING);
// Initialise la mise à jour des images au défilement sur le Conteneur // Initialise la mise à jour des images au défilement sur le Conteneur
STORYTELLING.addEventListener("scroll", (): void => majImages()); STORYTELLING.addEventListener("scroll", (): void => majImages());
}; };