202512010737

frontend/protos/index.html

@@ -92,6 +92,10 @@
   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');
@@ -110,13 +114,13 @@
   // ----
   // ---- La page est une machine à états
   // ----
-  let currentEtat = 1;
+  let currentEtatSection = 1;
   let maxEtat = 4;
   function etatSections(etat) {
-    //if (currentEtat == etat) return;
-    currentEtat=etat;
-    logMsg('etatSection','Etat courant '+currentEtat);
-    switch (etat) {
+    if (currentEtatSection == etat) return;
+    currentEtatSection=etat;
+    etatSectionLog('Etat courant '+currentEtatSection);
+    switch (currentEtatSection) {
       case 1 :
         scrollToElement('#div_before_header');
         section_header.style.display = "block";
@@ -139,47 +143,53 @@
         break;
     }
   }
-  function changeEtatUp() {
-    if (++currentEtat > maxEtat) currentEtat = maxEtat;
-    etatSections(currentEtat);
+  function changeEtatSectionUp() {
+    if (currentEtatSection != maxEtat)
+      etatSections(currentEtatSection+1);
   }
-  function changeEtatDown(){
-    if (--currentEtat < 1) currentEtat = 1;
-    etatSections(currentEtat);
+  function changeEtatSectionDown(){
+    if (currentEtatSection != 1)
+      etatSections(currentEtatSection-1);
   }
 
   after_section_header.addEventListener("click", function() {
-    logMsg('etatSection','toggle section_header ');
-    if (currentEtat!=1) etatSections(1);
+    etatSectionLog('toggle section_header ');
+    if (currentEtatSection!=1) etatSections(1);
     else etatSections(2);
   });
   after_section_synthese.addEventListener("click", function() {
-    logMsg('etatSection','toggle section_synthese ');
-    if (currentEtat==3) changeEtatDown();
-    else changeEtatUp();
+    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) changeEtatUp();
+    if (!_visible) changeSectionEtatUp();
   }
   function afterSection(_visible) {
-    if (_visible) changeEtatDown();
+    if (_visible) changeEtatSectionDown();
   }
   function beforeNavbarVisibility(_visible) {
-    intersectionObserverLog('TRIGGER '+arguments.callee.name);
-    beforeSection(_visible)
+    etatSectionLog('TRIGGER '+arguments.callee.name);
+    beforeSection(_visible);
   }
   function afterNavbarVisibility(_visible) {
-    intersectionObserverLog('TRIGGER '+arguments.callee.name);
-    afterSection(_visible)
+    etatSectionLog('TRIGGER '+arguments.callee.name);
+    afterSection(_visible);
   }
   function beforeHeaderVisibility(_visible) {
-    intersectionObserverLog('TRIGGER '+arguments.callee.name);
-    beforeSection(_visible)
+    etatSectionLog('TRIGGER '+arguments.callee.name);
+    beforeSection(_visible);
   }
   function afterHeaderVisibility(_visible) {
-    intersectionObserverLog('TRIGGER '+arguments.callee.name);
-    afterSection(_visible)
+    etatSectionLog('TRIGGER '+arguments.callee.name);
+    afterSection(_visible);
   }
 
   addIntersectionObserverEntry("div_before_header", beforeHeaderVisibility);

frontend/protos/styles.css

@@ -89,6 +89,7 @@ body {
     background-color: aqua;
 }
 .navbar {
+    position: relative;
     height: var(--section-navbar-height);
     background-color: yellow;
 }