Thibaud
1 month ago
6 changed files with 386 additions and 61 deletions
Unified View
Diff Options
-
+204 -0frontend/protos/back/index.html
-
+44 -47frontend/protos/back/zones.css
-
+56 -0frontend/protos/back/zones.js
-
+4 -13frontend/protos/index.html
-
+76 -0frontend/protos/styles.css
-
+2 -1frontend/protos/zones.js
+ 204
- 0
frontend/protos/back/index.html
View File
| @ -0,0 +1,204 @@ | |||||
| <!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> | |||||
frontend/protos/zones.css → frontend/protos/back/zones.css
View File
| @ -19,8 +19,13 @@ | |||||
| --couleur-texte: black; | --couleur-texte: black; | ||||
| --couleur-fond: var(--couleur-clair); | --couleur-fond: var(--couleur-clair); | ||||
| --header-height: 400px; | |||||
| --nav-height: 80px; | |||||
| --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-face { | ||||
| @ -48,68 +53,60 @@ | |||||
| } | } | ||||
| html { | html { | ||||
| scroll-behavior: smooth; | |||||
| font-family: Fonte-Texte, monospace; | |||||
| max-width: 95%; | |||||
| padding-left: 0; | |||||
| padding-right: 0; | |||||
| margin: 0 auto; | |||||
| background: var(--couleur-fond); | |||||
| 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 { | body { | ||||
| padding: 0; | |||||
| margin: 0; | |||||
| height:100%; | |||||
| padding: 0; | |||||
| margin: 0; | |||||
| min-height:1000px; | |||||
| } | } | ||||
| #before_header { | |||||
| .div_before_section { | |||||
| color: var(--couleur-texte); | color: var(--couleur-texte); | ||||
| background-color: black; | background-color: black; | ||||
| height: 5px; | |||||
| height: var(--marker-before-height); | |||||
| } | } | ||||
| header { | |||||
| position: sticky; | |||||
| color: var(--couleur-texte); | |||||
| background-color: aqua; | |||||
| height: var(--header-height); | |||||
| .div_section { | |||||
| min-height: var(--section-min-height); | |||||
| } | } | ||||
| #after_header { | |||||
| .div_after_section { | |||||
| color: var(--couleur-texte); | color: var(--couleur-texte); | ||||
| background-color: black; | |||||
| height: 1px; | |||||
| background-color: red; | |||||
| height: var(--marker-after-height); | |||||
| } | } | ||||
| #before_nav { | |||||
| color: var(--couleur-texte); | |||||
| background-color: red; | |||||
| height: 5px; | |||||
| .header { | |||||
| min-height: var(--section-header-min-height); | |||||
| background-color: aqua; | |||||
| } | } | ||||
| nav { | |||||
| color: var(--couleur-texte); | |||||
| .navbar { | |||||
| background-color: yellow; | background-color: yellow; | ||||
| height: var(--nav-height); | |||||
| } | |||||
| #after_nav { | |||||
| color: var(--couleur-texte); | |||||
| background-color: red; | |||||
| height: 5px; | |||||
| } | } | ||||
| #synthese { | |||||
| color: var(--couleur-texte); | |||||
| background-color: rgb(252, 130, 201); | |||||
| min-height: 80px; | |||||
| .navbar_fixed { | |||||
| position: fixed; | |||||
| top: 0; | |||||
| width: 70%; | |||||
| } | } | ||||
| #principale { | |||||
| color: var(--couleur-texte); | |||||
| background-color: rgb(63, 15, 177); | |||||
| min-height: 1000px; | |||||
| .div_before_synthese_when_navbar_fixed { | |||||
| height: var(--section-min-height); | |||||
| } | } | ||||
| footer { | |||||
| color: var(--couleur-texte); | |||||
| background-color: rgb(9, 138, 15); | |||||
| min-height: 80px; | |||||
| .synthese { | |||||
| background-color: pink; | |||||
| min-height: var(--section-synthese-min-height); | |||||
| } | |||||
| .principale { | |||||
| min-height: var(--section-principale-min-height); | |||||
| } | } | ||||
| .footer { | |||||
| background-color: greenyellow; | |||||
| } | |||||
+ 56
- 0
frontend/protos/back/zones.js
View File
| @ -0,0 +1,56 @@ | |||||
| 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); | |||||
| } | |||||
| } | |||||
+ 4
- 13
frontend/protos/index.html
View File
| @ -8,23 +8,16 @@ | |||||
| <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="zones.css"> | |||||
| <link rel="stylesheet" type="text/css" href="styles.css"> | |||||
| </head> | </head> | ||||
| <body> | <body> | ||||
| <section id="before_header"></section> | |||||
| <header></header> | <header></header> | ||||
| <section id="after_header"></section> | |||||
| <section id="before_nav"></section> | |||||
| <nav> | |||||
| </nav> | |||||
| <section id="after_nav"></section> | |||||
| <nav></nav> | |||||
| <section id="synthese"></section> | <section id="synthese"></section> | ||||
| <section id="principale"></section> | <section id="principale"></section> | ||||
| @ -33,6 +26,4 @@ | |||||
| </body> | </body> | ||||
| <script src="zones.js"></script> | |||||
| </html> | </html> | ||||
+ 76
- 0
frontend/protos/styles.css
View File
| @ -0,0 +1,76 @@ | |||||
| :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); | |||||
| --header-height: 400px; | |||||
| --nav-height: 80px; | |||||
| --synthese-min-height: 150px; | |||||
| --principale-min-height: 1000px; | |||||
| --footer-min-height: 80px; | |||||
| } | |||||
| html { | |||||
| font-family: monospace; | |||||
| max-width: 95%; | |||||
| padding-left: 0; | |||||
| padding-right: 0; | |||||
| margin: 0 auto; | |||||
| background: var(--couleur-fond); | |||||
| } | |||||
| body { | |||||
| padding: 0; | |||||
| margin: 0; | |||||
| min-height:1000px; | |||||
| } | |||||
| header { | |||||
| color: var(--couleur-texte); | |||||
| background-color: aqua; | |||||
| height: var(--header-height); | |||||
| } | |||||
| nav { | |||||
| position: sticky; | |||||
| top: 0px; | |||||
| color: var(--couleur-texte); | |||||
| background-color: yellow; | |||||
| height: var(--nav-height); | |||||
| } | |||||
| #synthese { | |||||
| color: var(--couleur-texte); | |||||
| background-color: rgb(252, 130, 201); | |||||
| min-height: var(--synthese-min-height); | |||||
| } | |||||
| #principale { | |||||
| color: var(--couleur-texte); | |||||
| background-color: rgb(63, 15, 177); | |||||
| min-height: var(--principale-min-height); | |||||
| } | |||||
| footer { | |||||
| position: sticky; | |||||
| bottom: 0px; | |||||
| color: var(--couleur-texte); | |||||
| background-color: rgb(9, 138, 15); | |||||
| min-height: var(--footer-min-height); | |||||
| } | |||||
+ 2
- 1
frontend/protos/zones.js
View File
| @ -38,7 +38,6 @@ function consoleLog(_id, _visible) { | |||||
| } | } | ||||
| } | } | ||||
| function scrollToElement(elementSelector) { | function scrollToElement(elementSelector) { | ||||
| let element = document.querySelector(elementSelector); | let element = document.querySelector(elementSelector); | ||||
| if (element) element.scrollIntoView({ behavior: 'smooth' }); | if (element) element.scrollIntoView({ behavior: 'smooth' }); | ||||
| @ -74,7 +73,9 @@ function beforeNavVisibility(_visible) { | |||||
| } | } | ||||
| } | } | ||||
| /* | |||||
| addIntersectionObserverEntry("before_header", beforeHeaderVisibility); | addIntersectionObserverEntry("before_header", beforeHeaderVisibility); | ||||
| addIntersectionObserverEntry("after_header", afterHeaderVisibility); | addIntersectionObserverEntry("after_header", afterHeaderVisibility); | ||||
| addIntersectionObserverEntry("before_nav", beforeNavVisibility); | addIntersectionObserverEntry("before_nav", beforeNavVisibility); | ||||
| */ | |||||