studio-variable/index-main
4
0
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

deplace corps report to investigation-summary

Browse source
This commit is contained in:
Julie Blanc 2026-02-14 16:53:14 +01:00
parent 58ed1a3fb8
commit 06785d712c
8 changed files with 145 additions and 1096 deletions
Download patch file Download diff file Expand all files Collapse all files

135
assets/js/report.js
View file

@ -1,135 +0,0 @@
import { initSwipers } from './swipers.js';
export function report(responsiveSmall) {
if (document.body.dataset.template === 'report') {
// Initialiser tous les sliders de type before-after
initSliderBeforeAfter();
initHorizontalScroll();
// Ne fonctionne que pour les écrans plus grands que responsiveSmall
if (window.matchMedia(responsiveSmall).matches) {
// Sur mobile : initialiser les swipers normalement car initMediaDisplay ne sera pas actif
initSwipers();
return;
}
}
}
function initSliderBeforeAfter(container = document){
const slidersBeforeAfter = container.querySelectorAll('.slider-before-after');
slidersBeforeAfter.forEach(function (sliderContainer, index) {
const sliderInput = sliderContainer.querySelector('.slider');
if (sliderInput) {
sliderInput.addEventListener('input', (e) => {
console.log('slider value:', e.target.value);
sliderContainer.style.setProperty('--position', `${e.target.value}%`);
});
}
});
}
function initHorizontalScroll(){
const sections = document.querySelectorAll('.subsection-w-hscroll');
sections.forEach(function (section) {
const container = section.querySelector('.horizontal-scroll');
if (!container) return;
const wrapper = container.querySelector('.horizontal-scroll-wrapper');
if (!wrapper) return;
const slides = wrapper.querySelectorAll('.horizontal-scroll-slide');
// Calculer la distance totale à scroller horizontalement
function calculateScrollDistance() {
const totalSlidesWidth = Array.from(slides).reduce((acc, slide) => acc + slide.offsetWidth, 0);
const endMargin = window.innerWidth * 0.3; // 30vw de marge à la fin
return totalSlidesWidth - window.innerWidth + endMargin;
}
let scrollDistance = calculateScrollDistance();
// Créer un spacer invisible qui crée l'espace de scroll
// Hauteur = scrollDistance + hauteur du viewport pour maintenir le texte en dessous
const spacer = document.createElement('div');
spacer.className = 'horizontal-scroll-spacer';
spacer.style.height = `${scrollDistance + window.innerHeight}px`;
spacer.style.width = '100%';
spacer.style.pointerEvents = 'none';
// Insérer le spacer AVANT .horizontal-scroll
section.insertBefore(spacer, container);
// Calculer la position absolue du spacer une seule fois
function getSpacerTopPosition() {
let element = spacer;
let top = 0;
while (element) {
top += element.offsetTop;
element = element.offsetParent;
}
return top;
}
let spacerTopPosition = getSpacerTopPosition();
// Fonction de mise à jour du scroll horizontal
function updateHorizontalScroll() {
const scrollY = window.pageYOffset || document.documentElement.scrollTop;
// Début et fin du scroll basé sur le spacer
const scrollStart = spacerTopPosition;
const scrollEnd = spacerTopPosition + scrollDistance;
console.log('scrollY:', scrollY, 'scrollStart:', scrollStart, 'scrollEnd:', scrollEnd);
if (scrollY >= scrollStart && scrollY <= scrollEnd) {
// Phase de scroll horizontal : fixer le container
const progress = (scrollY - scrollStart) / scrollDistance;
const translateX = progress * scrollDistance;
console.log('Horizontal scroll active - progress:', progress);
wrapper.style.transform = `translateX(-${translateX}px)`;
container.style.position = 'fixed';
container.style.top = '0';
container.style.left = '0';
} else if (scrollY < scrollStart) {
// Avant le spacer : reset
console.log('Before spacer');
wrapper.style.transform = 'translateX(0)';
container.style.position = '';
container.style.top = '';
container.style.left = '';
} else {
// Après le spacer : garder le translate final et défixer
console.log('After spacer');
wrapper.style.transform = `translateX(-${scrollDistance}px)`;
container.style.position = '';
container.style.top = '';
container.style.left = '';
}
}
// Écouter le scroll
window.addEventListener('scroll', updateHorizontalScroll, { passive: true });
// Recalculer au resize
window.addEventListener('resize', function() {
scrollDistance = calculateScrollDistance();
spacer.style.height = `${scrollDistance + window.innerHeight}px`;
spacerTopPosition = getSpacerTopPosition();
updateHorizontalScroll();
});
// Initial call
updateHorizontalScroll();
});
}