mirror of
https://git.topisto.net/tibo/template.git
synced 2026-03-31 17:19:10 +00:00
202512010737
This commit is contained in:
@@ -92,6 +92,10 @@
|
|||||||
addClassToElement('#div_principale','principale');
|
addClassToElement('#div_principale','principale');
|
||||||
addClassToElement('#div_footer','footer');
|
addClassToElement('#div_footer','footer');
|
||||||
|
|
||||||
|
function etatSectionLog(message) {
|
||||||
|
logMsg('etatSection', message);
|
||||||
|
}
|
||||||
|
|
||||||
const section_header=document.querySelector('#div_header');
|
const section_header=document.querySelector('#div_header');
|
||||||
const section_navbar=document.querySelector('#div_navbar');
|
const section_navbar=document.querySelector('#div_navbar');
|
||||||
const section_synthese=document.querySelector('#div_synthese');
|
const section_synthese=document.querySelector('#div_synthese');
|
||||||
@@ -110,13 +114,13 @@
|
|||||||
// ----
|
// ----
|
||||||
// ---- La page est une machine à états
|
// ---- La page est une machine à états
|
||||||
// ----
|
// ----
|
||||||
let currentEtat = 1;
|
let currentEtatSection = 1;
|
||||||
let maxEtat = 4;
|
let maxEtat = 4;
|
||||||
function etatSections(etat) {
|
function etatSections(etat) {
|
||||||
//if (currentEtat == etat) return;
|
if (currentEtatSection == etat) return;
|
||||||
currentEtat=etat;
|
currentEtatSection=etat;
|
||||||
logMsg('etatSection','Etat courant '+currentEtat);
|
etatSectionLog('Etat courant '+currentEtatSection);
|
||||||
switch (etat) {
|
switch (currentEtatSection) {
|
||||||
case 1 :
|
case 1 :
|
||||||
scrollToElement('#div_before_header');
|
scrollToElement('#div_before_header');
|
||||||
section_header.style.display = "block";
|
section_header.style.display = "block";
|
||||||
@@ -139,47 +143,53 @@
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function changeEtatUp() {
|
function changeEtatSectionUp() {
|
||||||
if (++currentEtat > maxEtat) currentEtat = maxEtat;
|
if (currentEtatSection != maxEtat)
|
||||||
etatSections(currentEtat);
|
etatSections(currentEtatSection+1);
|
||||||
}
|
}
|
||||||
function changeEtatDown(){
|
function changeEtatSectionDown(){
|
||||||
if (--currentEtat < 1) currentEtat = 1;
|
if (currentEtatSection != 1)
|
||||||
etatSections(currentEtat);
|
etatSections(currentEtatSection-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
after_section_header.addEventListener("click", function() {
|
after_section_header.addEventListener("click", function() {
|
||||||
logMsg('etatSection','toggle section_header ');
|
etatSectionLog('toggle section_header ');
|
||||||
if (currentEtat!=1) etatSections(1);
|
if (currentEtatSection!=1) etatSections(1);
|
||||||
else etatSections(2);
|
else etatSections(2);
|
||||||
});
|
});
|
||||||
after_section_synthese.addEventListener("click", function() {
|
after_section_synthese.addEventListener("click", function() {
|
||||||
logMsg('etatSection','toggle section_synthese ');
|
etatSectionLog('toggle section_synthese ');
|
||||||
if (currentEtat==3) changeEtatDown();
|
if (currentEtatSection!=2) etatSections(2);
|
||||||
else changeEtatUp();
|
else etatSections(2);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function changeEtatSection(_visible) {
|
||||||
|
if (!_visible) changeEtatSectionUp();
|
||||||
|
if (_visible) changeEtatSectionDown();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
function beforeSection(_visible) {
|
function beforeSection(_visible) {
|
||||||
if (!_visible) changeEtatUp();
|
if (!_visible) changeSectionEtatUp();
|
||||||
}
|
}
|
||||||
function afterSection(_visible) {
|
function afterSection(_visible) {
|
||||||
if (_visible) changeEtatDown();
|
if (_visible) changeEtatSectionDown();
|
||||||
}
|
}
|
||||||
function beforeNavbarVisibility(_visible) {
|
function beforeNavbarVisibility(_visible) {
|
||||||
intersectionObserverLog('TRIGGER '+arguments.callee.name);
|
etatSectionLog('TRIGGER '+arguments.callee.name);
|
||||||
beforeSection(_visible)
|
beforeSection(_visible);
|
||||||
}
|
}
|
||||||
function afterNavbarVisibility(_visible) {
|
function afterNavbarVisibility(_visible) {
|
||||||
intersectionObserverLog('TRIGGER '+arguments.callee.name);
|
etatSectionLog('TRIGGER '+arguments.callee.name);
|
||||||
afterSection(_visible)
|
afterSection(_visible);
|
||||||
}
|
}
|
||||||
function beforeHeaderVisibility(_visible) {
|
function beforeHeaderVisibility(_visible) {
|
||||||
intersectionObserverLog('TRIGGER '+arguments.callee.name);
|
etatSectionLog('TRIGGER '+arguments.callee.name);
|
||||||
beforeSection(_visible)
|
beforeSection(_visible);
|
||||||
}
|
}
|
||||||
function afterHeaderVisibility(_visible) {
|
function afterHeaderVisibility(_visible) {
|
||||||
intersectionObserverLog('TRIGGER '+arguments.callee.name);
|
etatSectionLog('TRIGGER '+arguments.callee.name);
|
||||||
afterSection(_visible)
|
afterSection(_visible);
|
||||||
}
|
}
|
||||||
|
|
||||||
addIntersectionObserverEntry("div_before_header", beforeHeaderVisibility);
|
addIntersectionObserverEntry("div_before_header", beforeHeaderVisibility);
|
||||||
|
|||||||
@@ -89,6 +89,7 @@ body {
|
|||||||
background-color: aqua;
|
background-color: aqua;
|
||||||
}
|
}
|
||||||
.navbar {
|
.navbar {
|
||||||
|
position: relative;
|
||||||
height: var(--section-navbar-height);
|
height: var(--section-navbar-height);
|
||||||
background-color: yellow;
|
background-color: yellow;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user