index-main/assets/js/report.js

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();
  });
}