panel/btn mobile & scripts

assets/js/banner-sticky-desktop.js

@@ -4,19 +4,14 @@ export function bannerStickyDesktop(responsiveSmall) {
     if (isInitialized) return;
 
     let body = document.body;
-    if (!body || body.dataset.template !== 'investigation-summary') return;
+    let panel = body.querySelector(".panel-left");
+
+    if (!panel) return;
 
-    let bannerPage = body.querySelector("#banner--page");
-    let sectionDl = document.querySelector("#section__dl");
     let footer = document.querySelector("#site-footer");
 
-    if (!bannerPage || !sectionDl || !footer) return;
-
     // Stocker la hauteur initiale du banner
-    const bannerInitialHeight = bannerPage.offsetHeight;
-
-    // Stocker la position initiale du footer (calculée une seule fois au chargement)
-    let footerInitialTop = footer.offsetTop;
+    const bannerInitialHeight = panel.offsetHeight;
 
     function checkScroll() {
         const screenWidth = window.innerWidth;
@@ -24,33 +19,35 @@ export function bannerStickyDesktop(responsiveSmall) {
         // Vérifier que l'écran est plus grand que responsiveSmall
         if (screenWidth <= responsiveSmall) {
             // Réinitialiser le transform si on est en dessous de responsiveSmall
-            bannerPage.style.transform = '';
+            panel.style.transform = '';
             return;
         }
 
         // Calculer la position du bas de la fenêtre
         const windowBottom = window.scrollY + window.innerHeight;
 
-        // Calculer de combien on dépasse le haut du footer (position initiale)
-        const overlap = windowBottom - footerInitialTop;
+        // Calculer dynamiquement la position du footer à chaque scroll
+        // Utiliser getBoundingClientRect() + scrollY pour une valeur toujours à jour
+        const footerTop = footer.getBoundingClientRect().top + window.scrollY;
+
+        // Calculer de combien on dépasse le haut du footer
+        const overlap = windowBottom - footerTop;
 
         if (overlap > 0) {
             // Le bas de la fenêtre a atteint le haut du footer
             // Déplacer le banner vers le haut du nombre de pixels de dépassement
             const translateValue = Math.min(overlap, bannerInitialHeight);
-            bannerPage.style.transform = `translateY(-${translateValue}px)`;
+            panel.style.transform = `translateY(-${translateValue}px)`;
         } else {
             // Réinitialiser la position si on n'a pas encore atteint le footer
-            bannerPage.style.transform = 'translateY(0)';
+            panel.style.transform = 'translateY(0)';
         }
     }
 
     window.addEventListener('scroll', checkScroll);
     window.addEventListener('resize', () => {
-        // Recalculer la position du footer lors du resize
         if (window.innerWidth > responsiveSmall) {
-            bannerPage.style.transform = '';
-            footerInitialTop = footer.offsetTop;
+            panel.style.transform = '';
         }
         checkScroll();
     });

assets/js/banner-sticky-mobile.js

@@ -1,50 +0,0 @@
-let isInitialized = false;
-
-export function bannerStickyMobile(responsiveSmall) {
-    if (isInitialized) return;
-
-    let body = document.body;
-    if (!body || body.dataset.template !== 'investigation-summary') return;
-
-    let bannerPage = body.querySelector("#banner--page");
-    let sectionDl = document.querySelector("#section__dl");
-    let footer = document.querySelector("#site-footer");
-
-    if (!bannerPage || !sectionDl || !footer) return;
-
-    function checkScroll() {
-        const screenWidth = window.innerWidth;
-
-        // Vérifier que l'écran est plus petit que responsiveSmall
-        if (screenWidth >= responsiveSmall) {
-            bannerPage.classList.remove('is-visible');
-            bannerPage.style.transform = 'translateY(0)';
-            return;
-        }
-
-        const sectionTop = sectionDl.getBoundingClientRect().top;
-        const footerTop = footer.getBoundingClientRect().top;
-        const windowHeight = window.innerHeight;
-
-        // Activer le banner quand #section__dl arrive en bas de l'écran
-        if (sectionTop <= windowHeight) {
-            bannerPage.classList.add('is-visible');
-
-            // Pousser le banner vers le haut si le footer arrive en bas de l'écran
-            if (footerTop < windowHeight) {
-                const pushUp = windowHeight - footerTop;
-                bannerPage.style.transform = `translateY(-${pushUp}px)`;
-            } else {
-                bannerPage.style.transform = 'translateY(0)';
-            }
-        } else {
-            bannerPage.classList.remove('is-visible');
-            bannerPage.style.transform = 'translateY(0)';
-        }
-    }
-
-    window.addEventListener('scroll', checkScroll);
-    checkScroll();
-
-    isInitialized = true;
-}

assets/js/btn-group-mobile.js

@@ -0,0 +1,35 @@
+let isInitialized = false;
+
+export function btnGroupMobile() {
+    if (isInitialized) return;
+    const btnGroup = document.querySelector(".btn--group__mobile");
+    let footer = document.querySelector("#site-footer");
+
+    if (!btnGroup) return;
+
+    function checkScroll() {
+
+        const windowHeight = window.innerHeight;
+        const scrollY = window.scrollY;
+        const footerTop = footer.getBoundingClientRect().top;
+
+        if (scrollY > windowHeight * 0.6) {
+            btnGroup.classList.add('is-visible');
+
+            if (footerTop < windowHeight) {
+                   btnGroup.classList.remove('is-visible');
+            }
+        } else {
+            btnGroup.classList.remove('is-visible');
+        }
+    }
+
+    window.addEventListener('scroll', checkScroll);
+    checkScroll();
+
+    isInitialized = true;
+
+
+}
+
+

assets/js/dropdown.js

@@ -1,6 +1,14 @@
-export function initDropdowns() {
+export function initDropdowns(responsiveSmall) {
   const dropdowns = document.querySelectorAll('.dropdown');
 
+  function updateBodyOverflow(isOpen) {
+    if (isOpen && window.innerWidth < responsiveSmall) {
+      document.body.classList.add('is-hidden');
+    } else {
+      document.body.classList.remove('is-hidden');
+    }
+  }
+
   dropdowns.forEach(dropdown => {
     const trigger = dropdown.querySelector('.dropdown__trigger');
     const content = dropdown.querySelector('.dropdown__content');
@@ -44,6 +52,9 @@ export function initDropdowns() {
       // Toggle le dropdown actuel
       dropdown.classList.toggle('is-open');
       trigger.classList.toggle('is-selected');
+
+      // Gère l'overflow du body sur mobile
+      updateBodyOverflow(dropdown.classList.contains('is-open'));
     });
   });
 
@@ -57,6 +68,7 @@ export function initDropdowns() {
       dropdown.classList.remove('is-open', 'dropdown--align-right');
       dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
     });
+    updateBodyOverflow(false);
   });
 
   // Ferme au press Escape
@@ -66,6 +78,7 @@ export function initDropdowns() {
         dropdown.classList.remove('is-open', 'dropdown--align-right');
         dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
       });
+      updateBodyOverflow(false);
     }
   });
 }

assets/js/header.js

@@ -4,7 +4,7 @@ export function headerToggle() {
 
   if (!header || !buttonToggle) return;
   buttonToggle.addEventListener("click", () => {
-    document.body.classList.toggle("menu-open");
+    const isOpen = document.body.classList.toggle("menu-open");
   });
 }
 

assets/js/panel.js

@@ -1,19 +1,60 @@
-export function panelToggle() {
+export function panelToggle(responsiveSmall) {
     const toggleBtn = document.querySelector('#toggle-panel');
+    const toggleBtnMobile = document.querySelector('#toggle-panel__mobile');
+    const main = document.querySelector('main');
+    const closeBtn = document.querySelector('.panel-left .panel__header');
+
+    function openPanel() {
+        main.classList.add('panel-open');
+        const screenWidth = window.innerWidth;
+        if (screenWidth <= responsiveSmall) {
+            console.log("small screen");
+            document.body.style.overflowY = 'hidden';
+        }
+
+    }
+
+    function closePanel() {
+        main.classList.remove('panel-open');
+        main.classList.add('panel-close');
+        document.body.style.overflowY = '';
+    }
 
     if (toggleBtn) {
-        const main = document.querySelector('main');
-        const closeBtn = document.querySelector('.panel-left .panel__header');
-
-        toggleBtn.addEventListener('click', () => {
-            main.classList.add('panel-open');
+        toggleBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            openPanel();
         });
+    }
 
-        if (closeBtn) {
-            closeBtn.addEventListener('click', () => {
+    if (toggleBtnMobile) {
+        toggleBtnMobile.addEventListener('click', (e) => {
+            e.stopPropagation();
+            openPanel();
+        });
+    }
+
+    if (closeBtn) {
+        closeBtn.addEventListener('click', closePanel);
+    }
+}
+
+
+export function tocMobile(responsiveSmall) {
+    const toc = document.querySelector('#toc');
+    const main = document.querySelector('main');
+
+    if (!toc) return;
+
+    const tocLinks = toc.querySelectorAll('a');
+
+    tocLinks.forEach(link => {
+        link.addEventListener('click', () => {
+            if (window.innerWidth <= responsiveSmall) {
                 main.classList.remove('panel-open');
                 main.classList.add('panel-close');
-            });
-        }
-    }
+                document.body.style.overflowY = '';
+            }
+        });
+    });
 }

assets/js/script.js

@@ -1,7 +1,7 @@
 import { headerToggle, headerScrollVisibility } from './header.js';
 import { copyLink } from './share.js';
-import { panelToggle } from './panel.js';
-import { bannerStickyMobile } from './banner-sticky-mobile.js';
+import { panelToggle, tocMobile } from './panel.js';
+import { btnGroupMobile } from './btn-group-mobile.js';
 import { bannerStickyDesktop } from './banner-sticky-desktop.js';
 import { themeToggle } from './themeToggle.js';
 import { initHeroSlider } from './hero-slider.js';
@@ -14,12 +14,14 @@ const responsiveSmall = 768;
 window.onload = async function () {
   console.log("SCRIPT LOADED");
   headerToggle();
-  panelToggle();
-  copyLink();
+  panelToggle(responsiveSmall);
   themeToggle();
-  bannerStickyMobile(responsiveSmall);
+
+  tocMobile(responsiveSmall);
+  copyLink();
+  btnGroupMobile(responsiveSmall)
   bannerStickyDesktop(responsiveSmall);
   initHeroSlider();
   playVideo();
-  initDropdowns();
+  initDropdowns(responsiveSmall);
 }