Homogénéiser les IntersectionObserver

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);
-}
+  
if (footerObserver) 
footerObserver.observe(
section_
footer);
+}
 else myLog('No footer to observe');

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') headerIs
Visible(entry.isIntersecting);
+    if (typeof headerIsVisible === 'function') headerIs
Now
Visible(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');
 
 
 

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') synthesis
Top
IsNowVisible(entry);
-    
  
} else {
-      
  
myLog("The synthesis is invisible in the viewport");
-      
  
if (typeof synthesisTopIsNowInvisible === 'function') synthesis
Top
IsNowInvisible(entry);
-    
  
}
+    
if (entry.isIntersecting) {
+      
myLog("The synthesis is visible in the viewport");
+      
if (typeof synthesisTopIsNowVisible === 'function') synthesis
IsNowVisible(entry);
+    
} else {
+      
myLog("The synthesis is invisible in the viewport");
+      
if (typeof synthesisTopIsNowInvisible === 'function') synthesis
IsNowInvisible(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');