template/frontend/protos/zones.js

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 consoleLog(_id, _visible)
}

// Create a function that will handle any intersection between some elements and the viewport.
const handleIntersectionObserverEntries = function (entries) {
  entries.forEach(entry => {
    if (typeof entryVisiblity === 'function') entryVisiblity(entry.target.id, entry.isIntersecting);
  });
}
const intersectionObserver = new IntersectionObserver(handleIntersectionObserverEntries);

function addIntersectionObserverEntry(_id, _func)
{
    let item = document.querySelector('#'+_id);
    if ((item) && (intersectionObserver)) {
        setIntersectionObserverRegistry(_id, _func);
        intersectionObserver.observe(item);
    }
}

function consoleLog(_id, _visible) {
    if (_visible) {
        console.log(_id + ' is Visible');
    } else {
        console.log(_id + ' is NOT Visible');
    }
}

function scrollToElement(elementSelector) {
    let element = document.querySelector(elementSelector);
    if (element) element.scrollIntoView({ behavior: 'smooth' });
}

function beforeHeaderVisibility(_visible) {
    console.log('TRIGGER beforeHeaderVisibility');
    if (_visible) {
        console.log('HEADER is Visible');
    } else {
        console.log('HEADER is NOT Visible');
        scrollToElement('#before_nav');
    }
}
function afterHeaderVisibility(_visible) {
    console.log('TRIGGER afterHeaderVisibility');
    if (_visible) {
        scrollToElement('#before_header');
    } else {
        console.log('HEADER is NOT Visible');
    }
}

function beforeNavVisibility(_visible) {
    console.log('TRIGGER beforeNavVisibility');
    let synthese=document.querySelector('#synthese');
    if (synthese) {
        if (_visible) {
            synthese.style.display="block";
        } else {
            synthese.style.display="none";
        }
    }
}

/*
addIntersectionObserverEntry("before_header", beforeHeaderVisibility);
addIntersectionObserverEntry("after_header", afterHeaderVisibility);

addIntersectionObserverEntry("before_nav", beforeNavVisibility);
*/