tibo/template
1
0
Fork 0
mirror of https://git.topisto.net/tibo/template.git synced 2026-03-31 17:19:10 +00:00
Code Issues Releases Wiki Activity

202511260751

Browse Source
This commit is contained in:
Thibaud
2025-11-26 07:51:18 +01:00
parent ddaccfed78
commit e5b744ca74
5 changed files with 236 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/protos/zones.js
View File

@@ -1,3 +1,29 @@
const logMsgActivesSections = new Set();
function logMsgAddActiveSection(sectionName) {
logMsgActivesSections.add(sectionName);
}
function logMsgRemoveActiveSection(sectionName) {
logMsgActivesSections.delete(sectionName);
}
function logMsg(section, message){
if (logMsgActivesSections.has(section))
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)
{
@@ -10,16 +36,25 @@ function getIntersectionObserverRegistry(parametre)
function entryVisiblity(_id, _visible) {
let entry=getIntersectionObserverRegistry(_id);
if (entry) return entry(_visible);
return consoleLog(_id, _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);
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)
{
@@ -27,55 +62,6 @@ function addIntersectionObserverEntry(_id, _func)
if ((item) && (intersectionObserver)) {
setIntersectionObserverRegistry(_id, _func);
intersectionObserver.observe(item);
logMsg('intersectionObserver', 'Add entry for '+ _id);
}
}
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);
*/