112 lines
No EOL
4.1 KiB
JavaScript
112 lines
No EOL
4.1 KiB
JavaScript
|
|
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 wrapper = section.querySelector('.horizontal-scroll-wrapper');
|
|
if (!wrapper) return;
|
|
|
|
// Calculer la largeur totale du contenu horizontal
|
|
const slides = wrapper.querySelectorAll('.horizontal-scroll-slide');
|
|
const totalSlidesWidth = Array.from(slides).reduce((acc, slide) => acc + slide.offsetWidth, 0);
|
|
const endMargin = window.innerWidth * 0.3; // 30vw de marge à la fin
|
|
const scrollableWidth = totalSlidesWidth - window.innerWidth + endMargin;
|
|
|
|
// Définir la hauteur de la section pour créer l'espace de scroll virtuel
|
|
// La hauteur = viewport + largeur scrollable (pour un ratio 1:1 entre scroll Y et X)
|
|
const sectionHeight = window.innerHeight + scrollableWidth;
|
|
section.style.height = `${sectionHeight}px`;
|
|
|
|
// Fonction de mise à jour du scroll horizontal
|
|
function updateHorizontalScroll() {
|
|
const rect = section.getBoundingClientRect();
|
|
const stickyContainer = section.querySelector('.horizontal-scroll');
|
|
|
|
// Quand le haut de la section atteint le haut du viewport
|
|
if (rect.top <= 0 && rect.bottom >= window.innerHeight) {
|
|
// Calculer la progression (0 à 1)
|
|
const progress = Math.abs(rect.top) / scrollableWidth;
|
|
const clampedProgress = Math.max(0, Math.min(1, progress));
|
|
|
|
// Appliquer le scroll horizontal
|
|
const translateX = clampedProgress * scrollableWidth;
|
|
wrapper.style.transform = `translateX(-${translateX}px)`;
|
|
|
|
// Fixer le conteneur
|
|
if (stickyContainer) {
|
|
stickyContainer.style.position = 'fixed';
|
|
stickyContainer.style.top = '0';
|
|
stickyContainer.style.left = '0';
|
|
stickyContainer.style.width = '100vw';
|
|
}
|
|
} else if (rect.top > 0) {
|
|
// Avant la section : reset
|
|
wrapper.style.transform = 'translateX(0)';
|
|
if (stickyContainer) {
|
|
stickyContainer.style.position = 'relative';
|
|
}
|
|
} else {
|
|
// Après la section : garder à la fin
|
|
wrapper.style.transform = `translateX(-${scrollableWidth}px)`;
|
|
if (stickyContainer) {
|
|
stickyContainer.style.position = 'absolute';
|
|
stickyContainer.style.top = 'auto';
|
|
stickyContainer.style.bottom = '0';
|
|
stickyContainer.style.left = '0';
|
|
stickyContainer.style.width = '100vw';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Écouter le scroll
|
|
window.addEventListener('scroll', updateHorizontalScroll, { passive: true });
|
|
|
|
// Recalculer au resize
|
|
window.addEventListener('resize', function() {
|
|
const newTotalWidth = Array.from(slides).reduce((acc, slide) => acc + slide.offsetWidth, 0);
|
|
const newEndMargin = window.innerWidth * 0.3;
|
|
const newScrollableWidth = newTotalWidth - window.innerWidth + newEndMargin;
|
|
const newSectionHeight = window.innerHeight + newScrollableWidth;
|
|
section.style.height = `${newSectionHeight}px`;
|
|
});
|
|
|
|
// Initial call
|
|
updateHorizontalScroll();
|
|
});
|
|
} |