moving the chapter progression code to this band new component

resources/js/chapter-progression.js

@@ -0,0 +1,85 @@
+export default function observeChapterProgression() {
+  const hasChapterIndex = document.querySelector('.chapter_index__list');
+  if (!hasChapterIndex) return;
+
+  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) {
+    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';
+  }
+
+  let chapterLinks = document.querySelectorAll('.chapter_index__link');
+
+  chapterLinks.forEach((link) => {
+    link.addEventListener('click', (e) => {
+      handleLinkScrollToTarget(e);
+      handleChapterIndicatorPosition(e.target.offsetTop);
+    });
+  });
+
+  // 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) {
+          // 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');
+
+    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];
+
+    return allBlocks;
+  }
+
+  allBlocks = buildAllBlocksToObserve();
+
+  allBlocks.forEach((block) => {
+    chapterProgressionObserver.observe(block);
+  });
+}