From 51970485f280f18d5e3b44724f19083bc60d27af Mon Sep 17 00:00:00 2001
From: Thibaud <tibo@topisto.net>
Date: Fri, 13 Sep 2024 18:02:31 +0200
Subject: [PATCH] =?UTF-8?q?Homog=C3=A9n=C3=A9iser=20les=20IntersectionObse?=
 =?UTF-8?q?rver?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scripts/UI/IntersectionObserver/footer.js | 14 +++++-----
 .../scripts/UI/IntersectionObserver/header.js | 15 ++++++-----
 .../UI/IntersectionObserver/synthesis.js      | 27 ++++++++++---------
 3 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/frontend/src/scripts/UI/IntersectionObserver/footer.js b/frontend/src/scripts/UI/IntersectionObserver/footer.js
index 934a261..87f2330 100644
--- a/frontend/src/scripts/UI/IntersectionObserver/footer.js
+++ b/frontend/src/scripts/UI/IntersectionObserver/footer.js
@@ -1,8 +1,7 @@
 // Create a function that will handle any intersection between some elements and the viewport.
 const handleFooterIntersection = function (entries) {
   // Loop through all the observed elements
-  for (let entry of entries) {
-      // Check if the element is intersecting the viewport
+  entries.forEach(entry => {      // Check if the element is intersecting the viewport
       if (entry.isIntersecting) {
         console.log("The footer is visible in the viewport");
         if (typeof footerIsNowVisible === 'function') footerIsNowVisible(entry);
@@ -10,10 +9,11 @@ const handleFooterIntersection = function (entries) {
         console.log("The footer is invisible in the viewport");
         if (typeof footerIsNowInvisible === 'function') footerIsNowInvisible(entry);
       }
-  }
+  });
 }
-const footer = document.querySelector("#footer");
-if (footer) {
+
+const section_footer = document.querySelector("#footer");
+if (section_footer) {
   const footerObserver = new IntersectionObserver(handleFooterIntersection);
-  footerObserver.observe(footer);
-}
\ No newline at end of file
+  if (footerObserver) footerObserver.observe(section_footer);
+} else myLog('No footer to observe');
\ No newline at end of file
diff --git a/frontend/src/scripts/UI/IntersectionObserver/header.js b/frontend/src/scripts/UI/IntersectionObserver/header.js
index 4e6ada9..b679147 100644
--- a/frontend/src/scripts/UI/IntersectionObserver/header.js
+++ b/frontend/src/scripts/UI/IntersectionObserver/header.js
@@ -1,12 +1,15 @@
-const headerObserver = new IntersectionObserver(entries => {
+// Create a function that will handle any intersection between some elements and the viewport.
+const handleHeaderIntersection = function (entries) {
   entries.forEach(entry => {
-    if (typeof headerIsVisible === 'function') headerIsVisible(entry.isIntersecting);
+    if (typeof headerIsVisible === 'function') headerIsNowVisible(entry.isIntersecting);
   });
-});
+}
 
-const header = document.querySelector("header");
-if (header) headerObserver.observe(header);
-else myLog('No header to observe');
+const section_header = document.querySelector("header");
+if (section_header) {
+  const headerObserver = new IntersectionObserver(handleSynthesisIntersection);
+  if (headerObserver) headerObserver.observe(section_header);
+} else myLog('No header to observe');
 
 
 
diff --git a/frontend/src/scripts/UI/IntersectionObserver/synthesis.js b/frontend/src/scripts/UI/IntersectionObserver/synthesis.js
index 6c4121c..a09c47b 100644
--- a/frontend/src/scripts/UI/IntersectionObserver/synthesis.js
+++ b/frontend/src/scripts/UI/IntersectionObserver/synthesis.js
@@ -1,17 +1,20 @@
-const synthesisTopObserver = new IntersectionObserver(entries => {
+// Create a function that will handle any intersection between some elements and the viewport.
+const handleSynthesisIntersection = function (entries) {
   entries.forEach(entry => {
     // Check if the element is intersecting the viewport
-      if (entry.isIntersecting) {
-        myLog("The synthesis is visible in the viewport");
-        if (typeof synthesisTopIsNowVisible === 'function') synthesisTopIsNowVisible(entry);
-      } else {
-        myLog("The synthesis is invisible in the viewport");
-        if (typeof synthesisTopIsNowInvisible === 'function') synthesisTopIsNowInvisible(entry);
-      }
+    if (entry.isIntersecting) {
+      myLog("The synthesis is visible in the viewport");
+      if (typeof synthesisTopIsNowVisible === 'function') synthesisIsNowVisible(entry);
+    } else {
+      myLog("The synthesis is invisible in the viewport");
+      if (typeof synthesisTopIsNowInvisible === 'function') synthesisIsNowInvisible(entry);
+    }
   });
-});
+}
 
-const synthesis_top = document.querySelector("#synthesis_top");
-if (synthesis_top) synthesisTopObserver.observe(synthesis_top);
-else myLog('No #synthesis_top to obseve');
+const section_synthesis = document.querySelector("#synthesis");
+if (section_synthesis) {
+    const synthesisObserver = new IntersectionObserver(handleSynthesisIntersection);
+    if (synthesisObserver) synthesisObserver.observe(section_synthesis);
+} else myLog('No #synthesis to observe');