diff --git a/frontend/protos/back/index.html b/frontend/protos/back/index.html deleted file mode 100644 index 0cb5257..0000000 --- a/frontend/protos/back/index.html +++ /dev/null @@ -1,204 +0,0 @@ - - - - - template ZONES - - - - - - - - - - - - - - - - - -
SYNTHESE
- -
PRINCIPALE
- - - - - - - - - - - - \ No newline at end of file diff --git a/frontend/protos/back/zones.css b/frontend/protos/back/zones.css deleted file mode 100644 index fac6ec4..0000000 --- a/frontend/protos/back/zones.css +++ /dev/null @@ -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; -} - diff --git a/frontend/protos/back/zones.js b/frontend/protos/back/zones.js deleted file mode 100644 index 9fe1bf6..0000000 --- a/frontend/protos/back/zones.js +++ /dev/null @@ -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); - } -} diff --git a/frontend/protos/index.html b/frontend/protos/index.html index 4ea3450..13a6f1a 100644 --- a/frontend/protos/index.html +++ b/frontend/protos/index.html @@ -8,22 +8,212 @@ - + + + -
- - - -
+ -
+ + +
SYNTHESE
+ +
PRINCIPALE
- + + + + + + + + + \ No newline at end of file diff --git a/frontend/protos/zones.js b/frontend/protos/zones.js index 9104011..8d96957 100644 --- a/frontend/protos/zones.js +++ b/frontend/protos/zones.js @@ -1,3 +1,29 @@ +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) +} + +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) { @@ -10,16 +36,25 @@ function getIntersectionObserverRegistry(parametre) function entryVisiblity(_id, _visible) { let entry=getIntersectionObserverRegistry(_id); 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. 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); +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) { @@ -27,55 +62,6 @@ function addIntersectionObserverEntry(_id, _func) if ((item) && (intersectionObserver)) { setIntersectionObserverRegistry(_id, _func); 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); -*/