From 8cbf873df096672fbd03f0973a306223ea045eb4 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Wed, 14 May 2025 16:51:14 +0200
Subject: [PATCH] FIX debugging handling of custom titles & adding a debug
 function to preview intersection observer rootMargins

---
 resources/js/chapter-progression.js | 42 ++++++++++++++++++++++++++---
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/resources/js/chapter-progression.js b/resources/js/chapter-progression.js
index 1874580..224fc5c 100644
--- a/resources/js/chapter-progression.js
+++ b/resources/js/chapter-progression.js
@@ -2,6 +2,25 @@ 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');
@@ -14,6 +33,9 @@ export default function observeChapterProgression() {
     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');
@@ -21,12 +43,24 @@ export default function observeChapterProgression() {
     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.offsetTop);
+      handleChapterIndicatorPosition(e.target);
+      handleSetLinkActive(e.target);
     });
   });
 
@@ -39,8 +73,10 @@ export default function observeChapterProgression() {
         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 {
@@ -62,7 +98,7 @@ export default function observeChapterProgression() {
     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);
@@ -73,7 +109,7 @@ export default function observeChapterProgression() {
       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;
   }