handling scroll indicator position for page conseils

css/app.css

@@ -4444,6 +4444,8 @@ article > *:not(.entry-content, .chapter-header-block),
   height: 2rem;
   border-radius: 1rem;
   width: 3px;
+  /* transition: top 0.3s ease-out; */
+  transition: top 0.7s cubic-bezier(0, 0.75, 0.47, 0.99);
 }
 
 .conseils_wrapper .chapter_index a {

css/editor-style.css

@@ -127,10 +127,6 @@
   flex-grow: 1
 }
 
-.transform {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
-}
-
 .flex-col {
   flex-direction: column
 }

js/app.js

@@ -227,8 +227,8 @@
     let chapterIndex = document.querySelector(".chapter_index");
     let questionBlocks = document.querySelectorAll(".questions-container-block");
     function handleLinksBehavior() {
-      let chapterLinks = document.querySelectorAll(".chapter_index__link");
+      let chapterLinks2 = document.querySelectorAll(".chapter_index__link");
-      chapterLinks.forEach((link) => {
+      chapterLinks2.forEach((link) => {
         link.addEventListener("click", (e) => {
           e.preventDefault();
           let target = e.target.getAttribute("href");
@@ -240,10 +240,44 @@
         });
       });
     }
-    function handleChapterIndicatorPosition() {
+    function handleLinkScrollToTarget(e) {
-      let chapterIndicator = document.querySelector(".chapter_index__position-indicator");
+      e.preventDefault();
+      let target = e.target.getAttribute("href");
+      let targetBlock = document.querySelector(target);
+      targetBlock.scrollIntoView({
+        behavior: "smooth"
+      });
+      targetBlock.focus();
     }
-    handleLinksBehavior();
+    function handleChapterIndicatorPosition(targetPosition) {
+      let chapterIndicator = document.querySelector(".chapter_index__position-indicator");
+      chapterIndicator.style.top = targetPosition + "px";
+    }
+    let chapterLinks = document.querySelectorAll(".chapter_index__link");
+    chapterLinks.forEach((link) => {
+      link.addEventListener("click", (e) => {
+        handleLinkScrollToTarget(e);
+        handleChapterIndicatorPosition(e.target.offsetTop);
+      });
+    });
+    const io = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.intersectionRatio > 0) {
+          entry.target.classList.add("active");
+          const blockId = entry.target.getAttribute("id");
+          const relatedChapterLink = document.querySelector(`a[href="#${blockId}"]`);
+          handleChapterIndicatorPosition(relatedChapterLink.offsetTop);
+        } else {
+        }
+      });
+    });
+    const questionsContainerBlocks = document.querySelectorAll(".questions-container-block");
+    const vocabulaireSummaryBlock = document.querySelector(".homegrade-blocks-vocabulaire-summary");
+    const allBlocks = [...questionsContainerBlocks, vocabulaireSummaryBlock];
+    console.log(vocabulaireSummaryBlock);
+    allBlocks.forEach((el) => {
+      io.observe(el);
+    });
   }
 
   // resources/js/app.js

resources/css/pages/single-conseils.css

@@ -23,6 +23,8 @@
     &__position-indicator {
       @apply h-8 absolute top-0 -left-4 rounded-2xl;
       width: 3px;
+      /* transition: top 0.3s ease-out; */
+      transition: top 0.7s cubic-bezier(0, 0.75, 0.47, 0.99);
     }
 
     a {

resources/js/single-conseil.js

@@ -18,12 +18,51 @@ export default function singleConseil() {
       });
     });
   }
+  function handleLinkScrollToTarget(e) {
+    e.preventDefault();
+    let target = e.target.getAttribute('href');
+    let targetBlock = document.querySelector(target);
 
-  function handleChapterIndicatorPosition() {
+    targetBlock.scrollIntoView({
-    let chapterIndicator = document.querySelector('.chapter_index__position-indicator');
+      behavior: 'smooth',
+    });
+    targetBlock.focus();
   }
-  handleLinksBehavior();
+  function handleChapterIndicatorPosition(targetPosition) {
+    let chapterIndicator = document.querySelector('.chapter_index__position-indicator');
+    chapterIndicator.style.top = targetPosition + 'px';
+  }
+
+  let chapterLinks = document.querySelectorAll('.chapter_index__link');
+
+  chapterLinks.forEach((link) => {
+    link.addEventListener('click', (e) => {
+      handleLinkScrollToTarget(e);
+      handleChapterIndicatorPosition(e.target.offsetTop);
+    });
+  });
+
+  // Register IntersectionObserver
+  const io = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.intersectionRatio > 0) {
+        // Add 'active' class if observation target is inside viewport
+        entry.target.classList.add('active');
+        const blockId = entry.target.getAttribute('id');
+        const relatedChapterLink = document.querySelector(`a[href="#${blockId}"]`);
+        handleChapterIndicatorPosition(relatedChapterLink.offsetTop);
+      } else {
+        // Remove 'active' class otherwise
+        // entry.target.classList.remove('active');
+      }
+    });
+  });
+  const questionsContainerBlocks = document.querySelectorAll('.questions-container-block');
+  const vocabulaireSummaryBlock = document.querySelector('.homegrade-blocks-vocabulaire-summary');
+  const allBlocks = [...questionsContainerBlocks, vocabulaireSummaryBlock];
+
+  console.log(vocabulaireSummaryBlock);
+  allBlocks.forEach((el) => {
+    io.observe(el);
+  });
 }
-// console.log(chapterIndex);
-// console.log(questionBlocks);
-// console.log(chapterLinks);