From 7b8f5b875199604bb4c824a79172be2033c71347 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Thu, 12 Oct 2023 12:03:42 +0200
Subject: [PATCH] refining focused and focus point operating behaviour

---
 resources/css/blocks/focused-schema.css | 12 +++--
 resources/js/schema-bullet-points.js    | 61 +++++++++++++++++--------
 2 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/resources/css/blocks/focused-schema.css b/resources/css/blocks/focused-schema.css
index 94072c2..c9508d1 100644
--- a/resources/css/blocks/focused-schema.css
+++ b/resources/css/blocks/focused-schema.css
@@ -5,10 +5,14 @@
     }
   }
 
-  .focus-point-popup-container__title {
-    @apply text-black font-bold;
+  /* TOOLTIP */
+  .homegrade-blocks-focus-point-bullet__tooltip-container {
+    .tooltip-title {
+      @apply !text-black font-bold;
+    }
   }
-  .focus-point-popup-container {
-    z-index: 9999;
+  /* CAPTION */
+  .focus-point-title {
+    @apply text-black font-bold mr-2;
   }
 }
diff --git a/resources/js/schema-bullet-points.js b/resources/js/schema-bullet-points.js
index 86736d7..537499d 100644
--- a/resources/js/schema-bullet-points.js
+++ b/resources/js/schema-bullet-points.js
@@ -2,30 +2,53 @@ export default function SchemaBulletPointsInit() {
   const focusBulletPoints = document.querySelectorAll('.homegrade-blocks-focus-point-bullet');
   if (!focusBulletPoints) return;
 
-  focusBulletPoints.forEach((focusPoint) => {
-    const focusPointsContainer = focusPoint.parentElement;
+  function initBullet(focusPoint) {
+    const focusTitle = focusPoint.getAttribute('data-focus-bullet-title');
 
-    focusPoint.addEventListener('mouseover', (event) => {
-      const aleradyHoveredFocusPoint = document.querySelector('[data-hovered]');
-      console.log(aleradyHoveredFocusPoint);
+    const focusPointPopupContainer = document.createElement('div');
+    focusPointPopupContainer.className = 'homegrade-blocks-focus-point-bullet__tooltip-container';
 
-      const focusTitle = focusPoint.getAttribute('data-focus-bullet-title');
+    const focusPointPopupTitle = document.createElement('h4');
+    focusPointPopupTitle.textContent = focusTitle;
+    focusPointPopupTitle.className = 'tooltip-title';
 
-      const focusPointPopupContainer = document.createElement('div');
-      focusPointPopupContainer.className = 'focus-point-popup-container';
+    focusPointPopupContainer.appendChild(focusPointPopupTitle);
+    focusPoint.appendChild(focusPointPopupContainer);
+    focusPoint.setAttribute('data-hovered', '');
+    // focusPoint.style.zIndex = 1;
+    // focusPointPopupContainer.style.zIndex = 99;
 
-      const focusPointPopupTitle = document.createElement('h4');
-      focusPointPopupTitle.textContent = focusTitle;
-      focusPointPopupTitle.className = 'focus-point-popup-container__title';
+  }
+  function handleVisibility(focusPoint) {
+    // console.log(focusPoint);
+  }
+  // Register IntersectionObserver
+  const bulletsObserver = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+      // Check aspect ratio to be sure the element is visible
+      const aspect = entry.intersectionRatio > 0;
 
-      focusPointPopupContainer.appendChild(focusPointPopupTitle);
-      focusPoint.appendChild(focusPointPopupContainer);
-      focusPoint.setAttribute('data-hovered', '');
-    });
-
-    focusPoint.addEventListener('mouseout', function () {
-      const focusPointPopupContainer = focusPoint.querySelector('.focus-point-popup-container');
-      focusPointPopupContainer.remove();
+      if (entry.isIntersecting) {
+        console.log(entry.target);
+        console.log(entry.intersectionRatio);
+        // 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');
+      }
     });
   });
+
+  focusBulletPoints.forEach((focusPoint) => {
+    const focusPointsContainer = focusPoint.parentElement;
+    initBullet(focusPoint);
+    const focusPointTooltipContainer = focusPoint.querySelector(
+      '.homegrade-blocks-focus-point-bullet__tooltip-container'
+    );
+    // bulletsObserver.observe(focusPointTooltipContainer);
+  });
 }