homegrade_theme_production/resources/js/chapter-progression.js

export default function observeChapterProgression() {
  const hasChapterIndex = document.querySelector('.chapter_index__list');
  if (!hasChapterIndex) return;

  // Debug function to visualize rootMargin
  // function createDebugOverlay() {
  //   const overlay = document.createElement('div');
  //   overlay.style.position = 'fixed';
  //   overlay.style.top = '10%';
  //   overlay.style.bottom = '70%';
  //   overlay.style.left = '0';
  //   overlay.style.right = '0';
  //   overlay.style.border = '2px solid red';
  //   overlay.style.pointerEvents = 'none';
  //   overlay.style.zIndex = '9999';
  //   overlay.style.opacity = '0.3';
  //   overlay.style.backgroundColor = 'rgba(255, 0, 0, 0.1)';
  //   document.body.appendChild(overlay);
  // }

  // Uncomment the line below to see the detection zone
  // createDebugOverlay();

  function handleLinkScrollToTarget(e) {
    e.preventDefault();
    let target = e.target.getAttribute('href');
    let targetBlock = document.querySelector(target);

    targetBlock.setAttribute('tabindex', '-1');
    targetBlock.scrollIntoView({
      behavior: 'smooth',
    });
    targetBlock.focus({ preventScroll: true });
  }
  function handleChapterIndicatorPosition(targetLink) {
    // console.log('targetLink', targetLink);
    // console.log('targetLink.offsetTop', targetLink.offsetTop);
    // console.log('targetLink.offsetHeight', targetLink.offsetHeight);
    const targetPosition = targetLink.offsetTop;
    const targetHeight = targetLink.offsetHeight;
    let chapterIndicator = document.querySelector('.chapter_index__position-indicator');
    chapterIndicator.style.top = targetPosition + 'px';
    chapterIndicator.style.height = targetHeight + 'px';
  }

  function handleSetLinkActive(targetLink) {
    // console.log('####################');
    // console.log(targetLink);
    const allLinks = document.querySelectorAll('.chapter_index__link');
    allLinks.forEach((link) => {
      link.classList.remove('active');
    });

    // targetLink.classList.add('active');
  }

  let chapterLinks = document.querySelectorAll('.chapter_index__link');

  chapterLinks.forEach((link) => {
    link.addEventListener('click', (e) => {
      handleLinkScrollToTarget(e);
      handleChapterIndicatorPosition(e.target);
      handleSetLinkActive(e.target);
    });
  });

  // CHAPTER IntersectionObserver
  const chapterProgressionObserver = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        const blockId = entry.target.getAttribute('id');
        const relatedChapterLink = document.querySelector(`a[href="#${blockId}"]`);
        relatedChapterLink.classList.remove('active');

        if (entry.isIntersecting) {
          console.log('entry.isIntersecting', entry.isIntersecting);
          // Add 'active' class if observation target is inside viewport
          handleChapterIndicatorPosition(relatedChapterLink);

          entry.target.classList.add('active');
          relatedChapterLink.classList.add('active');
        } else {
          // Remove 'active' class otherwise
          // entry.target.classList.remove('active');
        }
      });
    },
    {
      rootMargin: '-10% 0px -70% 0px',
    }
  );

  function buildAllBlocksToObserve() {
    const postsContainerBlocks = document.querySelectorAll('.post-content-container');
    const questionsContainerBlocks = document.querySelectorAll('.questions-container-block');
    const chapitresThematiques = document.querySelectorAll('.homegrade-blocks-chapitre-thematique');
    const vocabulaireSummaryBlock = document.querySelector('.homegrade-blocks-vocabulaire-summary');
    const plusLoinBlock = document.querySelector('#aller-plus-loin');
    const helpHomegradeBlock = document.querySelector('#homegrade-vous-aide');
    const partnersOtherServices = document.querySelector('#partenaires-autres-services');
    const customTitles = document.querySelectorAll('.homegrade-blocks-custom-heading[id]');
    let allBlocks = [];

    if (vocabulaireSummaryBlock) allBlocks.push(vocabulaireSummaryBlock);
    if (plusLoinBlock) allBlocks.push(plusLoinBlock);
    if (helpHomegradeBlock) allBlocks.push(helpHomegradeBlock);
    if (partnersOtherServices) allBlocks.push(partnersOtherServices);
    if (questionsContainerBlocks.length > 0)
      allBlocks = [...allBlocks, ...questionsContainerBlocks];
    if (postsContainerBlocks.length > 0) allBlocks = [...allBlocks, ...postsContainerBlocks];
    if (chapitresThematiques.length > 0) allBlocks = [...allBlocks, ...chapitresThematiques];
    if (customTitles.length > 0) allBlocks = [...allBlocks, ...customTitles];
    return allBlocks;
  }

  allBlocks = buildAllBlocksToObserve();

  allBlocks.forEach((block) => {
    chapterProgressionObserver.observe(block);
  });
}