202511232100

frontend/protos/back/zones.js

@@ -0,0 +1,56 @@
+function logMsg(section, message){
+    console.log(section, ' : ', message)
+}
+
+function intersectionObserverLog(message) {
+    logMsg('intersectionObserver', message);
+}
+function intersectionObserverLogVisibility(_id, _visible) {
+    if (_visible) {
+        intersectionObserverLog(_id + ' is Visible');
+    } else {
+        intersectionObserverLog(_id + ' is NOT Visible');
+    }
+}
+
+const intersectionObserverRegistry = new Object();
+function setIntersectionObserverRegistry(parametre, valeur)
+{
+  intersectionObserverRegistry[parametre] = valeur;
+}
+function getIntersectionObserverRegistry(parametre)
+{
+  return intersectionObserverRegistry[parametre];
+}
+function entryVisiblity(_id, _visible) {
+    let entry=getIntersectionObserverRegistry(_id);
+    if (entry) return entry(_visible);
+    return intersectionObserverLogVisibility(_id, _visible)
+}
+
+// Create a function that will handle any intersection between some elements and the viewport.
+const handleIntersectionObserverEntries = function (entries) {
+  entries.forEach(entry => {
+    intersectionObserverLog(entry.target.id+' ratio '+entry.intersectionRatio);
+    if (typeof entryVisiblity === 'function') entryVisiblity(entry.target.id, entry.isIntersecting);
+  });
+}
+const intersectionObserver = new IntersectionObserver(handleIntersectionObserverEntries,{
+		// Dès qu'il y a ne serait-ce qu'un pixel au dessus de la ligne rouge
+		// => donc threshold = 1
+		threshold: 0,
+		// On met la hauteur en pixel entre la fin de l'image et la ligne rouge
+		// C'est négatif parce qu'on entre à l'intérieur de l'image. Si le nombre
+		// était positif, alors la ligne rouge se retrouverait sous l'image
+		rootMargin: '-1px 0px'
+	});
+
+function addIntersectionObserverEntry(_id, _func)
+{
+    let item = document.querySelector('#'+_id);
+    if ((item) && (intersectionObserver)) {
+        setIntersectionObserverRegistry(_id, _func);
+        intersectionObserver.observe(item);
+        logMsg('intersectionObserver', 'Add entry for '+ _id);
+    }
+}