mirror of
https://git.topisto.net/tibo/template.git
synced 2026-03-31 15:09:10 +00:00
Compare commits
8 Commits
72c551a82d
...
evo4532
| Author | SHA1 | Date | |
|---|---|---|---|
|
ef705874b1 | ||
|
|
0dbccd74de | ||
|
|
12df9f1274 | ||
|
|
69b9d98a7e | ||
|
|
3a562b6d26 | ||
|
|
3870cb21ee | ||
|
|
e5b744ca74 | ||
|
|
ddaccfed78 |
@@ -1,204 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@@ -1,112 +0,0 @@
|
|||||||
:root {
|
|
||||||
|
|
||||||
--dark-mode: 1;
|
|
||||||
|
|
||||||
--r-sombre: 0;
|
|
||||||
--g-sombre: 0;
|
|
||||||
--b-sombre: 0;
|
|
||||||
|
|
||||||
--r-clair: 245;
|
|
||||||
--g-clair: 245;
|
|
||||||
--b-clair: 240;
|
|
||||||
|
|
||||||
--rgb-sombre: var(--r-sombre), var(--g-sombre), var(--b-sombre);
|
|
||||||
--rgb-clair: var(--r-clair), var(--g-clair), var(--b-clair);
|
|
||||||
|
|
||||||
--couleur-sombre: rgb(var(--rgb-sombre));
|
|
||||||
--couleur-clair: rgb(var(--rgb-clair));
|
|
||||||
|
|
||||||
--couleur-texte: black;
|
|
||||||
--couleur-fond: var(--couleur-clair);
|
|
||||||
|
|
||||||
--marker-before-height: 5px;
|
|
||||||
--marker-after-height: 12px;
|
|
||||||
--section-min-height: 80px;
|
|
||||||
|
|
||||||
--section-header-min-height: 120px;
|
|
||||||
--section-synthese-min-height: 120px;
|
|
||||||
--section-principale-min-height: 800px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Fonte-Texte';
|
|
||||||
font-display: fallback;
|
|
||||||
/* Penser à bien héberger la font sur le même domaine que mon site */
|
|
||||||
src: url(../fonts/Fonte-Texte.woff2) format('woff2');
|
|
||||||
/* Réutiliser ici exactement la même liste unicode que ci-dessus */
|
|
||||||
unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2, U+C6-CB,
|
|
||||||
U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF,
|
|
||||||
U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019, U+201C-201D,
|
|
||||||
U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Fonte-Titre';
|
|
||||||
font-display: fallback;
|
|
||||||
/* Penser à bien héberger la font sur le même domaine que mon site */
|
|
||||||
src: url(../fonts/Fonte-Titre.woff2) format('woff2');
|
|
||||||
/* Réutiliser ici exactement la même liste unicode que ci-dessus */
|
|
||||||
unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2, U+C6-CB,
|
|
||||||
U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF,
|
|
||||||
U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019, U+201C-201D,
|
|
||||||
U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
font-family: Fonte-Texte, monospace;
|
|
||||||
width: 95%;
|
|
||||||
padding-left: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
margin: 0 auto;
|
|
||||||
background: var(--couleur-fond);
|
|
||||||
color: var(--couleur-texte);
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
min-height:1000px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.div_before_section {
|
|
||||||
color: var(--couleur-texte);
|
|
||||||
background-color: black;
|
|
||||||
height: var(--marker-before-height);
|
|
||||||
}
|
|
||||||
.div_section {
|
|
||||||
min-height: var(--section-min-height);
|
|
||||||
}
|
|
||||||
.div_after_section {
|
|
||||||
color: var(--couleur-texte);
|
|
||||||
background-color: red;
|
|
||||||
height: var(--marker-after-height);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
min-height: var(--section-header-min-height);
|
|
||||||
background-color: aqua;
|
|
||||||
}
|
|
||||||
.navbar {
|
|
||||||
background-color: yellow;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar_fixed {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
width: 70%;
|
|
||||||
}
|
|
||||||
.div_before_synthese_when_navbar_fixed {
|
|
||||||
height: var(--section-min-height);
|
|
||||||
}
|
|
||||||
|
|
||||||
.synthese {
|
|
||||||
background-color: pink;
|
|
||||||
min-height: var(--section-synthese-min-height);
|
|
||||||
}
|
|
||||||
.principale {
|
|
||||||
min-height: var(--section-principale-min-height);
|
|
||||||
}
|
|
||||||
.footer {
|
|
||||||
background-color: greenyellow;
|
|
||||||
}
|
|
||||||
|
|
||||||
@@ -1,56 +0,0 @@
|
|||||||
function logMsg(section, message){
|
|
||||||
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)
|
|
||||||
{
|
|
||||||
intersectionObserverRegistry[parametre] = valeur;
|
|
||||||
}
|
|
||||||
function getIntersectionObserverRegistry(parametre)
|
|
||||||
{
|
|
||||||
return intersectionObserverRegistry[parametre];
|
|
||||||
}
|
|
||||||
function entryVisiblity(_id, _visible) {
|
|
||||||
let entry=getIntersectionObserverRegistry(_id);
|
|
||||||
if (entry) return entry(_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,{
|
|
||||||
// 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)
|
|
||||||
{
|
|
||||||
let item = document.querySelector('#'+_id);
|
|
||||||
if ((item) && (intersectionObserver)) {
|
|
||||||
setIntersectionObserverRegistry(_id, _func);
|
|
||||||
intersectionObserver.observe(item);
|
|
||||||
logMsg('intersectionObserver', 'Add entry for '+ _id);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -8,22 +8,213 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta charset="utf-8">
|
<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">
|
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header></header>
|
<section id="header">HEADER</section>
|
||||||
|
|
||||||
<nav></nav>
|
|
||||||
|
|
||||||
<section id="synthese"></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>
|
</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');
|
||||||
|
|
||||||
|
function etatSectionLog(message) {
|
||||||
|
logMsg('etatSection', message);
|
||||||
|
}
|
||||||
|
|
||||||
|
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 currentEtatSection = 1;
|
||||||
|
let maxEtat = 4;
|
||||||
|
function etatSections(etat) {
|
||||||
|
if (currentEtatSection == etat) return;
|
||||||
|
currentEtatSection=etat;
|
||||||
|
etatSectionLog('Etat courant '+currentEtatSection);
|
||||||
|
switch (currentEtatSection) {
|
||||||
|
case 1 :
|
||||||
|
removeClassToElement('#div_navbar','navbar_fixed');
|
||||||
|
removeClassToElement('#div_before_synthese','div_before_synthese_when_navbar_fixed');
|
||||||
|
section_header.style.display = "block";
|
||||||
|
scrollToElement('#div_before_header');
|
||||||
|
break;
|
||||||
|
case 2 :
|
||||||
|
addClassToElement('#div_navbar','navbar_fixed');
|
||||||
|
addClassToElement('#div_before_synthese','div_before_synthese_when_navbar_fixed');
|
||||||
|
scrollToElement('#div_before_navbar');
|
||||||
|
section_synthese.style.display = "block";
|
||||||
|
break;
|
||||||
|
case 3 :
|
||||||
|
addClassToElement('#div_navbar','navbar_fixed');
|
||||||
|
addClassToElement('#div_before_synthese','div_before_synthese_when_navbar_fixed');
|
||||||
|
section_synthese.style.display = "none";
|
||||||
|
scrollToElement('#div_before_navbar');
|
||||||
|
break;
|
||||||
|
default :
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function changeEtatSectionUp() {
|
||||||
|
if (currentEtatSection != maxEtat)
|
||||||
|
etatSections(currentEtatSection+1);
|
||||||
|
}
|
||||||
|
function changeEtatSectionDown(){
|
||||||
|
if (currentEtatSection != 1)
|
||||||
|
etatSections(currentEtatSection-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
after_section_header.addEventListener("click", function() {
|
||||||
|
etatSectionLog('toggle section_header ');
|
||||||
|
if (currentEtatSection!=1) etatSections(1);
|
||||||
|
else etatSections(2);
|
||||||
|
});
|
||||||
|
after_section_synthese.addEventListener("click", function() {
|
||||||
|
etatSectionLog('toggle section_synthese ');
|
||||||
|
if (currentEtatSection!=2) etatSections(2);
|
||||||
|
else etatSections(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
function changeEtatSection(_visible) {
|
||||||
|
if (!_visible) changeEtatSectionUp();
|
||||||
|
if (_visible) changeEtatSectionDown();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function beforeSection(_visible) {
|
||||||
|
if (!_visible) changeEtatSectionUp();
|
||||||
|
}
|
||||||
|
function afterSection(_visible) {
|
||||||
|
if (_visible) changeEtatSectionDown();
|
||||||
|
}
|
||||||
|
function beforeNavbarVisibility(_visible) {
|
||||||
|
etatSectionLog('TRIGGER '+arguments.callee.name);
|
||||||
|
beforeSection(_visible);
|
||||||
|
}
|
||||||
|
function afterNavbarVisibility(_visible) {
|
||||||
|
etatSectionLog('TRIGGER '+arguments.callee.name);
|
||||||
|
afterSection(_visible);
|
||||||
|
}
|
||||||
|
function beforeHeaderVisibility(_visible) {
|
||||||
|
etatSectionLog('TRIGGER '+arguments.callee.name);
|
||||||
|
beforeSection(_visible);
|
||||||
|
}
|
||||||
|
function afterHeaderVisibility(_visible) {
|
||||||
|
etatSectionLog('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) {
|
||||||
|
changeEtatSectionUp();
|
||||||
|
} else {
|
||||||
|
changeEtatSectionDown();
|
||||||
|
}
|
||||||
|
|
||||||
|
yprev = Math.min(Math.max(y, 0), ymax);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('scroll', scrollThrottleCallback(scrollHandler, 1000));
|
||||||
|
*/
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
14
frontend/protos/log.js
Normal file
14
frontend/protos/log.js
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
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)
|
||||||
|
}
|
||||||
182
frontend/protos/scroll.js
Normal file
182
frontend/protos/scroll.js
Normal file
@@ -0,0 +1,182 @@
|
|||||||
|
const scrollThrottleCallback = (callback, timeout) => {
|
||||||
|
let wait = false;
|
||||||
|
return () => {
|
||||||
|
if (wait) return;
|
||||||
|
callback.call();
|
||||||
|
wait = true;
|
||||||
|
setTimeout(() => { wait = false; }, timeout);
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
function getAbsolutePosition(element) {
|
||||||
|
const rect = element.getBoundingClientRect();
|
||||||
|
|
||||||
|
return {
|
||||||
|
top: rect.top + window.scrollY, // Add vertical scroll
|
||||||
|
left: rect.left + window.scrollX, // Add horizontal scroll
|
||||||
|
bottom: rect.bottom + window.scrollY,
|
||||||
|
right: rect.right + window.scrollX
|
||||||
|
};
|
||||||
|
}
|
||||||
|
function getPositionRelativeToParent(element) {
|
||||||
|
const parent = element.parentElement;
|
||||||
|
const parentRect = parent.getBoundingClientRect();
|
||||||
|
const elementRect = element.getBoundingClientRect();
|
||||||
|
|
||||||
|
return {
|
||||||
|
top: elementRect.top - parentRect.top,
|
||||||
|
left: elementRect.left - parentRect.left,
|
||||||
|
bottom: elementRect.bottom - parentRect.top,
|
||||||
|
right: elementRect.right - parentRect.left
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function smoothScrollToElement(element, offset = 0) {
|
||||||
|
const elementPosition = getAbsolutePosition(element);
|
||||||
|
const targetScroll = elementPosition.top - offset;
|
||||||
|
|
||||||
|
// Smooth scroll with animation
|
||||||
|
window.scrollTo({
|
||||||
|
top: targetScroll,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Enhanced version with progress callback
|
||||||
|
function scrollToElementWithProgress(element, offset = 0, onProgress) {
|
||||||
|
const start = window.scrollY;
|
||||||
|
const elementPosition = getAbsolutePosition(element);
|
||||||
|
const target = elementPosition.top - offset;
|
||||||
|
const distance = target - start;
|
||||||
|
const duration = 1000; // ms
|
||||||
|
const startTime = performance.now();
|
||||||
|
|
||||||
|
function animate(currentTime) {
|
||||||
|
const elapsed = currentTime - startTime;
|
||||||
|
const progress = Math.min(elapsed / duration, 1);
|
||||||
|
|
||||||
|
// Easing function for smooth animation
|
||||||
|
const easeProgress = 1 - Math.pow(1 - progress, 3);
|
||||||
|
|
||||||
|
const currentPosition = start + (distance * easeProgress);
|
||||||
|
window.scrollTo(0, currentPosition);
|
||||||
|
|
||||||
|
if (onProgress) {
|
||||||
|
onProgress(progress);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (progress < 1) {
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
|
||||||
|
function scrollToElement(elementSelector) {
|
||||||
|
const element = document.querySelector(elementSelector);
|
||||||
|
if (element) {
|
||||||
|
const methode=1;
|
||||||
|
switch (methode) {
|
||||||
|
case 1 :
|
||||||
|
element.scrollIntoView();
|
||||||
|
break;
|
||||||
|
case 2 :
|
||||||
|
smoothScrollToElement(element);
|
||||||
|
break;
|
||||||
|
case 3 :
|
||||||
|
scrollToElementWithProgress(element, 0, (progress) => {
|
||||||
|
logMsg('htmlElement',`Scroll progress: ${Math.round(progress * 100)}%`);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
logMsg('htmlElement','scrollTo '+elementSelector);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getAbsolutePosition(element) {
|
||||||
|
const rect = element.getBoundingClientRect();
|
||||||
|
|
||||||
|
return {
|
||||||
|
top: rect.top + window.scrollY, // Add vertical scroll
|
||||||
|
left: rect.left + window.scrollX, // Add horizontal scroll
|
||||||
|
bottom: rect.bottom + window.scrollY,
|
||||||
|
right: rect.right + window.scrollX
|
||||||
|
};
|
||||||
|
}
|
||||||
|
function getPositionRelativeToParent(element) {
|
||||||
|
const parent = element.parentElement;
|
||||||
|
const parentRect = parent.getBoundingClientRect();
|
||||||
|
const elementRect = element.getBoundingClientRect();
|
||||||
|
|
||||||
|
return {
|
||||||
|
top: elementRect.top - parentRect.top,
|
||||||
|
left: elementRect.left - parentRect.left,
|
||||||
|
bottom: elementRect.bottom - parentRect.top,
|
||||||
|
right: elementRect.right - parentRect.left
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function smoothScrollToElement(element, offset = 0) {
|
||||||
|
const elementPosition = getAbsolutePosition(element);
|
||||||
|
const targetScroll = elementPosition.top - offset;
|
||||||
|
|
||||||
|
// Smooth scroll with animation
|
||||||
|
window.scrollTo({
|
||||||
|
top: targetScroll,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Enhanced version with progress callback
|
||||||
|
function scrollToElementWithProgress(element, offset = 0, onProgress) {
|
||||||
|
const start = window.scrollY;
|
||||||
|
const elementPosition = getAbsolutePosition(element);
|
||||||
|
const target = elementPosition.top - offset;
|
||||||
|
const distance = target - start;
|
||||||
|
const duration = 1000; // ms
|
||||||
|
const startTime = performance.now();
|
||||||
|
|
||||||
|
function animate(currentTime) {
|
||||||
|
const elapsed = currentTime - startTime;
|
||||||
|
const progress = Math.min(elapsed / duration, 1);
|
||||||
|
|
||||||
|
// Easing function for smooth animation
|
||||||
|
const easeProgress = 1 - Math.pow(1 - progress, 3);
|
||||||
|
|
||||||
|
const currentPosition = start + (distance * easeProgress);
|
||||||
|
window.scrollTo(0, currentPosition);
|
||||||
|
|
||||||
|
if (onProgress) {
|
||||||
|
onProgress(progress);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (progress < 1) {
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
|
||||||
|
function scrollToElement(elementSelector) {
|
||||||
|
const element = document.querySelector(elementSelector);
|
||||||
|
if (element) {
|
||||||
|
const methode=1;
|
||||||
|
switch (methode) {
|
||||||
|
case 1 :
|
||||||
|
element.scrollIntoView();
|
||||||
|
break;
|
||||||
|
case 2 :
|
||||||
|
smoothScrollToElement(element);
|
||||||
|
break;
|
||||||
|
case 3 :
|
||||||
|
scrollToElementWithProgress(element, 0, (progress) => {
|
||||||
|
logMsg('htmlElement',`Scroll progress: ${Math.round(progress * 100)}%`);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
logMsg('htmlElement','scrollTo '+elementSelector);
|
||||||
|
}
|
||||||
@@ -19,58 +19,101 @@
|
|||||||
--couleur-texte: black;
|
--couleur-texte: black;
|
||||||
--couleur-fond: var(--couleur-clair);
|
--couleur-fond: var(--couleur-clair);
|
||||||
|
|
||||||
--header-height: 400px;
|
--marker-before-height: 5px;
|
||||||
--nav-height: 80px;
|
--marker-after-height: 12px;
|
||||||
--synthese-min-height: 150px;
|
--section-min-height: 80px;
|
||||||
--principale-min-height: 1000px;
|
|
||||||
--footer-min-height: 80px;
|
--section-header-height: 120px;
|
||||||
|
--section-navbar-height: var(--section-min-height);
|
||||||
|
--section-synthese-height: 120px;
|
||||||
|
--section-principale-height: 400px;
|
||||||
|
--section-footer-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Fonte-Texte';
|
||||||
|
font-display: fallback;
|
||||||
|
/* Penser à bien héberger la font sur le même domaine que mon site */
|
||||||
|
src: url(../fonts/Fonte-Texte.woff2) format('woff2');
|
||||||
|
/* Réutiliser ici exactement la même liste unicode que ci-dessus */
|
||||||
|
unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2, U+C6-CB,
|
||||||
|
U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF,
|
||||||
|
U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019, U+201C-201D,
|
||||||
|
U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Fonte-Titre';
|
||||||
|
font-display: fallback;
|
||||||
|
/* Penser à bien héberger la font sur le même domaine que mon site */
|
||||||
|
src: url(../fonts/Fonte-Titre.woff2) format('woff2');
|
||||||
|
/* Réutiliser ici exactement la même liste unicode que ci-dessus */
|
||||||
|
unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2, U+C6-CB,
|
||||||
|
U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF,
|
||||||
|
U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019, U+201C-201D,
|
||||||
|
U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-family: monospace;
|
font-family: Fonte-Texte, monospace;
|
||||||
max-width: 95%;
|
width: 95%;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
background: var(--couleur-fond);
|
background: var(--couleur-fond);
|
||||||
|
color: var(--couleur-texte);
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
min-height:1000px;
|
min-height:1000px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
.div_before_section {
|
||||||
color: var(--couleur-texte);
|
color: var(--couleur-texte);
|
||||||
|
background-color: black;
|
||||||
|
height: var(--marker-before-height);
|
||||||
|
}
|
||||||
|
.div_section {
|
||||||
|
min-height: var(--section-min-height);
|
||||||
|
}
|
||||||
|
.div_after_section {
|
||||||
|
color: var(--couleur-texte);
|
||||||
|
background-color: red;
|
||||||
|
height: var(--marker-after-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
height: var(--section-header-height);
|
||||||
background-color: aqua;
|
background-color: aqua;
|
||||||
height: var(--header-height);
|
|
||||||
}
|
}
|
||||||
|
.navbar {
|
||||||
nav {
|
position: relative;
|
||||||
position: sticky;
|
height: var(--section-navbar-height);
|
||||||
top: 0px;
|
|
||||||
color: var(--couleur-texte);
|
|
||||||
background-color: yellow;
|
background-color: yellow;
|
||||||
height: var(--nav-height);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#synthese {
|
.navbar_fixed {
|
||||||
color: var(--couleur-texte);
|
position: fixed;
|
||||||
background-color: rgb(252, 130, 201);
|
top: 0;
|
||||||
min-height: var(--synthese-min-height);
|
width: 70%;
|
||||||
|
}
|
||||||
|
.div_before_synthese_when_navbar_fixed {
|
||||||
|
height: calc(var(--section-navbar-height) - var(--marker-after-height) - var(--marker-before-height));
|
||||||
}
|
}
|
||||||
|
|
||||||
#principale {
|
.synthese {
|
||||||
color: var(--couleur-texte);
|
background-color: pink;
|
||||||
background-color: rgb(63, 15, 177);
|
height: var(--section-synthese-height);
|
||||||
min-height: var(--principale-min-height);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
.principale {
|
||||||
position: sticky;
|
height: var(--section-principale-height);
|
||||||
bottom: 0px;
|
|
||||||
color: var(--couleur-texte);
|
|
||||||
background-color: rgb(9, 138, 15);
|
|
||||||
min-height: var(--footer-min-height);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
background-color: greenyellow;
|
||||||
|
height: var(--section-footer-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,3 +1,15 @@
|
|||||||
|
|
||||||
|
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();
|
const intersectionObserverRegistry = new Object();
|
||||||
function setIntersectionObserverRegistry(parametre, valeur)
|
function setIntersectionObserverRegistry(parametre, valeur)
|
||||||
{
|
{
|
||||||
@@ -10,16 +22,26 @@ function getIntersectionObserverRegistry(parametre)
|
|||||||
function entryVisiblity(_id, _visible) {
|
function entryVisiblity(_id, _visible) {
|
||||||
let entry=getIntersectionObserverRegistry(_id);
|
let entry=getIntersectionObserverRegistry(_id);
|
||||||
if (entry) return entry(_visible);
|
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.
|
// Create a function that will handle any intersection between some elements and the viewport.
|
||||||
const handleIntersectionObserverEntries = function (entries) {
|
const handleIntersectionObserverEntries = function (entries) {
|
||||||
entries.forEach(entry => {
|
entries.forEach(entry => {
|
||||||
|
intersectionObserverLog(entry.target.id+' ratio '+entry.intersectionRatio);
|
||||||
if (typeof entryVisiblity === 'function') entryVisiblity(entry.target.id, entry.isIntersecting);
|
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'
|
||||||
|
//rootMargin: '2px 0px'
|
||||||
|
});
|
||||||
|
|
||||||
function addIntersectionObserverEntry(_id, _func)
|
function addIntersectionObserverEntry(_id, _func)
|
||||||
{
|
{
|
||||||
@@ -27,55 +49,6 @@ function addIntersectionObserverEntry(_id, _func)
|
|||||||
if ((item) && (intersectionObserver)) {
|
if ((item) && (intersectionObserver)) {
|
||||||
setIntersectionObserverRegistry(_id, _func);
|
setIntersectionObserverRegistry(_id, _func);
|
||||||
intersectionObserver.observe(item);
|
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);
|
|
||||||
*/
|
|
||||||
|
|||||||
Reference in New Issue
Block a user