template/frontend/protos/back/zones.js

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);
    }
}