mirror of
https://git.topisto.net/tibo/template.git
synced 2026-03-31 15:09:10 +00:00
204 lines
5.9 KiB
HTML
204 lines
5.9 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="zones.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="zones.js"></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_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_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;
|
|
}
|
|
}
|
|
|
|
after_section_synthese.addEventListener("click", function() {
|
|
if (section_synthese.style.display === "block") {
|
|
etatSections(3);
|
|
} else {
|
|
etatSections(2);
|
|
}
|
|
});
|
|
|
|
function beforeHeaderVisibility(_visible) {
|
|
intersectionObserverLog('TRIGGER '+arguments.callee.name);
|
|
if (!_visible) {
|
|
etatSections(2);
|
|
}
|
|
}
|
|
function afterHeaderVisibility(_visible) {
|
|
intersectionObserverLog('TRIGGER '+arguments.callee.name);
|
|
if (_visible) {
|
|
etatSections(1);
|
|
}
|
|
}
|
|
|
|
addIntersectionObserverEntry("div_before_header", beforeHeaderVisibility);
|
|
addIntersectionObserverEntry("div_after_header", afterHeaderVisibility);
|
|
|
|
function beforeNavbarVisibility(_visible) {
|
|
intersectionObserverLog('TRIGGER '+arguments.callee.name);
|
|
if (!_visible) {
|
|
etatSections(3);
|
|
}
|
|
}
|
|
function afterNavbarVisibility(_visible) {
|
|
intersectionObserverLog('TRIGGER '+arguments.callee.name);
|
|
if (_visible) {
|
|
etatSections(3);
|
|
}
|
|
}
|
|
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);
|
|
};
|
|
|
|
const throttleCallback = (callback, timeout) => {
|
|
let wait = false;
|
|
return () => {
|
|
if (wait) return;
|
|
callback.call();
|
|
wait = true;
|
|
setTimeout(() => { wait = false; }, timeout);
|
|
};
|
|
};
|
|
|
|
// window.addEventListener('scroll', throttleCallback(scrollHandler, 250));
|
|
|
|
</script>
|
|
|
|
</html> |