mirror of
https://git.topisto.net/tibo/template.git
synced 2026-03-31 15:09:10 +00:00
222 lines
6.7 KiB
HTML
222 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
|
|
<head>
|
|
<title>template ZONES</title>
|
|
|
|
<meta name="description" content="PROTO">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta charset="utf-8">
|
|
|
|
<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="styles.css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<section id="header">HEADER</section>
|
|
|
|
<section id="navbar">NAVBAR</section>
|
|
|
|
<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="log.js"></script>
|
|
<script src="scroll.js"></script>
|
|
<script src="zones.js"></script>
|
|
|
|
<script>
|
|
logMsgAddActiveSection('intersectionObserver');
|
|
logMsgAddActiveSection('htmlElement');
|
|
logMsgAddActiveSection('etatSection');
|
|
</script>
|
|
|
|
<script>
|
|
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_header=document.querySelector('#div_header');
|
|
const section_navbar=document.querySelector('#div_navbar');
|
|
const section_synthese=document.querySelector('#div_synthese');
|
|
|
|
const after_section_header=document.querySelector('#div_after_header');
|
|
const after_section_synthese=document.querySelector('#div_after_synthese');
|
|
|
|
function toggleElement(element) {
|
|
if (element.style.display === "block") {
|
|
element.style.display = "none";
|
|
} else {
|
|
element.style.display = "block";
|
|
}
|
|
}
|
|
|
|
// ----
|
|
// ---- La page est une machine à états
|
|
// ----
|
|
let currentEtat = 1;
|
|
let maxEtat = 4;
|
|
function etatSections(etat) {
|
|
//if (currentEtat == etat) return;
|
|
currentEtat=etat;
|
|
logMsg('etatSection','Etat courant '+currentEtat);
|
|
switch (etat) {
|
|
case 1 :
|
|
scrollToElement('#div_before_header');
|
|
section_header.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;
|
|
default :
|
|
break;
|
|
}
|
|
}
|
|
function changeEtatUp() {
|
|
if (++currentEtat > maxEtat) currentEtat = maxEtat;
|
|
etatSections(currentEtat);
|
|
}
|
|
function changeEtatDown(){
|
|
if (--currentEtat < 1) currentEtat = 1;
|
|
etatSections(currentEtat);
|
|
}
|
|
|
|
after_section_header.addEventListener("click", function() {
|
|
logMsg('etatSection','toggle section_header ');
|
|
if (currentEtat!=1) etatSections(1);
|
|
else etatSections(2);
|
|
});
|
|
after_section_synthese.addEventListener("click", function() {
|
|
logMsg('etatSection','toggle section_synthese ');
|
|
if (currentEtat==3) changeEtatDown();
|
|
else changeEtatUp();
|
|
});
|
|
|
|
function beforeSection(_visible) {
|
|
if (!_visible) changeEtatUp();
|
|
}
|
|
function afterSection(_visible) {
|
|
if (_visible) changeEtatDown();
|
|
}
|
|
function beforeNavbarVisibility(_visible) {
|
|
intersectionObserverLog('TRIGGER '+arguments.callee.name);
|
|
beforeSection(_visible)
|
|
}
|
|
function afterNavbarVisibility(_visible) {
|
|
intersectionObserverLog('TRIGGER '+arguments.callee.name);
|
|
afterSection(_visible)
|
|
}
|
|
function beforeHeaderVisibility(_visible) {
|
|
intersectionObserverLog('TRIGGER '+arguments.callee.name);
|
|
beforeSection(_visible)
|
|
}
|
|
function afterHeaderVisibility(_visible) {
|
|
intersectionObserverLog('TRIGGER '+arguments.callee.name);
|
|
afterSection(_visible)
|
|
}
|
|
|
|
addIntersectionObserverEntry("div_before_header", beforeHeaderVisibility);
|
|
addIntersectionObserverEntry("div_after_header", afterHeaderVisibility);
|
|
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> |