banner script

assets/js/banner-sticky-desktop.js

@@ -0,0 +1,61 @@
+let isInitialized = false;
+
+export function bannerStickyDesktop(responsiveSmall) {
+    if (isInitialized) return;
+
+    let main = document.querySelector("main");
+    if (!main || !main.classList.contains("page-enquete")) return;
+
+    let bannerPage = main.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;
+
+    function checkScroll() {
+        const screenWidth = window.innerWidth;
+
+        // 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 = '';
+            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;
+
+        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)`;
+        } else {
+            // Réinitialiser la position si on n'a pas encore atteint le footer
+            bannerPage.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;
+        }
+        checkScroll();
+    });
+
+    checkScroll();
+
+    isInitialized = true;
+}

assets/js/banner-sticky-mobile.js

@@ -1,6 +1,6 @@
 let isInitialized = false;
 
-export function btnSticky(responsiveSmall) {
+export function bannerStickyMobile(responsiveSmall) {
     if (isInitialized) return;
 
     let main = document.querySelector("main");

assets/js/script.js

@@ -1,6 +1,8 @@
 import { headerToggle, headerScrollVisibility } from './header.js';
 import { copyLink } from './share.js';
-import { btnSticky } from './mobile-sticky.js';
+import { bannerStickyMobile } from './banner-sticky-mobile.js';
+import { bannerStickyDesktop } from './banner-sticky-desktop.js';
+import { themeToggle } from './themeToggle.js';
 
 const responsiveMedium = 1080;
 const responsiveSmall = 768;
@@ -10,5 +12,7 @@ window.onload = async function () {
   headerToggle();
   headerScrollVisibility();
   copyLink();
-  btnSticky(responsiveSmall);
+  themeToggle();
+  bannerStickyMobile(responsiveSmall);
+  bannerStickyDesktop(responsiveSmall);
 }

assets/js/themeToggle.js

@@ -0,0 +1,26 @@
+export function themeToggle() {
+    const button = document.querySelector('#theme-toggle');
+    const root = document.documentElement;
+  
+    if (!button) return;
+  
+    // Appliquer le thème sauvegardé (si présent)
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme === 'light') {
+      root.setAttribute('data-theme', 'light');
+    }
+  
+    button.addEventListener('click', () => {
+      const isLight = root.getAttribute('data-theme') === 'light';
+      const nextTheme = isLight ? 'dark' : 'light';
+  
+      root.setAttribute('data-theme', nextTheme);
+      localStorage.setItem('theme', nextTheme);
+  
+      button.setAttribute(
+        'aria-label',
+        nextTheme === 'light' ? 'Activer le mode sombre' : 'Activer le mode clair'
+      );
+    });
+  }
+