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