tibo/template
1
0
Fork 0
mirror of https://git.topisto.net/tibo/template.git synced 2026-03-31 19:29: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

206
frontend/protos/index.html
View File

@@ -8,22 +8,212 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="preload" as="font" type="../font/woff2" href="fonts/Fonte-Texte.woff2" crossorigin />
<link rel="preload" as="font" type="../font/woff2" href="fonts/Fonte-Titre.woff2" crossorigin />
<link rel="stylesheet" type="text/css" href="zones.css">
</head>
<body>
<header></header>
<nav></nav>
<section id="synthese"></section>
<section id="header">HEADER</section>
<section id="principale"></section>
<section id="navbar">NAVBAR</section>
<footer></footer>
<section id="synthese">SYNTHESE</section>
<section id="principale">PRINCIPALE</section>
<section id="footer">FOOTER</section>
</body>
<template id="zone">
<div id="div_before_zone"></div>
<div id="div_zone">zone</div>
<div id="div_after_zone"></div>
</template>
<script src="zones.js"></script>
<script>
logMsgAddActiveSection('intersectionObserver');
logMsgAddActiveSection('HtmlElement');
</script>
<script>
const scrollThrottleCallback = (callback, timeout) => {
let wait = false;
return () => {
if (wait) return;
callback.call();
wait = true;
setTimeout(() => { wait = false; }, timeout);
};
};
function addClassToElement(id,className){
const element=document.querySelector(id);
if (element) element.classList.add(className);
}
function removeClassToElement(id,className){
const element=document.querySelector(id);
if (element) element.classList.remove(className);
}
function initZoneElements(zone) {
const element=document.querySelector('#div_'+zone);
if (element) {
element.innerHTML=zone;
addClassToElement('#div_before_'+zone,'div_before_section');
addClassToElement('#div_'+zone,'div_section');
addClassToElement('#div_after_'+zone,'div_after_section');
}
}
function initZone(zone) {
const sectionZone = document.querySelector('#'+zone);
if (sectionZone) {
const template = document.querySelector('#zone');
if (template) {
const contenu = document.importNode(template.content, true);
if (contenu) {
sectionZone.innerHTML='';
contenu.childNodes.forEach((element) => {if (element.id) element.id=element.id.replace('zone',zone)});
sectionZone.appendChild(contenu);
initZoneElements(zone);
}
}
}
}
initZone('header');
initZone('navbar');
initZone('synthese');
initZone('principale');
initZone('footer');
addClassToElement('#div_header','header');
addClassToElement('#div_navbar','navbar');
addClassToElement('#div_synthese','synthese');
addClassToElement('#div_principale','principale');
addClassToElement('#div_footer','footer');
const section_navbar=document.querySelector('#div_navbar');
const section_synthese=document.querySelector('#div_synthese');
const after_section_synthese=document.querySelector('#div_after_synthese');
function scrollToElement(elementSelector) {
const element = document.querySelector(elementSelector);
if (element) {
element.scrollIntoView();
logMsg('HtmlElement','scrollTo '+elementSelector);
}
}
function etatSections(etat) {
switch (etat) {
case 1 :
scrollToElement('#div_before_header');
section_header.style.display = "block";
section_synthese.style.display = "block";
removeClassToElement('#div_navbar','navbar_fixed');
removeClassToElement('#div_before_synthese','div_before_synthese_when_navbar_fixed');
break;
case 2 :
scrollToElement('#div_before_navbar');
section_synthese.style.display = "block";
addClassToElement('#div_navbar','navbar_fixed');
addClassToElement('#div_before_synthese','div_before_synthese_when_navbar_fixed');
break;
case 3 :
scrollToElement('#div_before_navbar');
section_synthese.style.display = "none";
addClassToElement('#div_navbar','navbar_fixed');
addClassToElement('#div_before_synthese','div_before_synthese_when_navbar_fixed');
break;
}
}
let currentEtat=1;
function changeEtatUp() {
if (++currentEtat > 3) currentEtat = 3;
etatSections(currentEtat);
}
function changeEtatDown(){
if (--currentEtat > 3) currentEtat = 1;
etatSections(currentEtat);
}
after_section_synthese.addEventListener("click", function() {
if (section_synthese.style.display === "block") {
section_synthese.style.display = "none";
} else {
section_synthese.style.display = "block";
}
});
function beforeHeaderVisibility(_visible) {
intersectionObserverLog('TRIGGER '+arguments.callee.name);
if (!_visible) {
changeEtatUp();
}
}
function afterHeaderVisibility(_visible) {
intersectionObserverLog('TRIGGER '+arguments.callee.name);
if (_visible) {
changeEtatDown();
}
}
addIntersectionObserverEntry("div_before_header", beforeHeaderVisibility);
addIntersectionObserverEntry("div_after_header", afterHeaderVisibility);
function beforeNavbarVisibility(_visible) {
intersectionObserverLog('TRIGGER '+arguments.callee.name);
if (!_visible) {
changeEtatUp();
}
}
function afterNavbarVisibility(_visible) {
intersectionObserverLog('TRIGGER '+arguments.callee.name);
if (_visible) {
changeEtatDown();
}
}
addIntersectionObserverEntry("div_before_navbar", beforeNavbarVisibility);
//addIntersectionObserverEntry("div_after_navbar", afterNavbarVisibility);
let yprev = window.pageYOffset;
const scrollHandler = () => {
const y = window.pageYOffset;
const ymax = document.documentElement.scrollHeight - window.innerHeight;
if (y > yprev) {
if (section_header.style.display !== "none") {
section_header.style.display="none";
} else {
if (section_synthese.style.display !== "none") {
section_synthese.style.display="none";
}
}
} else {
if (y < yprev) {
if (section_synthese.style.display !== "block") {
section_synthese.style.display="block";
} else {
if (section_header.style.display !== "block") {
section_header.style.display="block";
}
}
}
}
yprev = Math.min(Math.max(y, 0), ymax);
};
// window.addEventListener('scroll', throttleCallback(scrollHandler, 250));
</script>
</html>