static/script-bon.js

@@ -1,22 +1,23 @@
+async function setupPage() {
+
 // Checks if the user enabled prefers-reduced-motion
-const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-
+  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 // Dictionary to keep track of animation intervals
-let animationIntervals = {};
+  let animationIntervals = {};
 // Dictionary to keep track of delay count for each animation
-let delays = {};
+  let delays = {};
 // Dictionary to keep track of frame for each animation
-let frames = {};
+  let frames = {};
 // dictionary to keep track of frame count for each animation
-let frameCounts = {};
+  let frameCounts = {};
 
-const illustrationAccueil = document.getElementById('illustration-accueil');
-const rennes = document.getElementById('rennes');
-const orsay = document.getElementById('orsay');
-const parterre = document.getElementById('parterre');
+  const illustrationAccueil = document.getElementById('illustration-accueil');
+  const rennes = document.getElementById('rennes');
+  const orsay = document.getElementById('orsay');
+  const parterre = document.getElementById('parterre');
 
 // Update ARIA live attributes based on prefers-reduced-motion
-function updateARIALiveAttributes() {
+  function updateARIALiveAttributes() {
     if (prefersReducedMotion) {
       illustrationAccueil.setAttribute('aria-live', 'off');
       rennes.setAttribute('aria-live', 'off');
@@ -28,10 +29,10 @@ function updateARIALiveAttributes() {
       orsay.setAttribute('aria-live', 'polite');
       parterre.setAttribute('aria-live', 'polite');
     }
-}
+  }
 
 
-function animate(id, delay) {
+  function animate(id, delay) {
 
     // get the container and frames for the amination
     const container = document.getElementById(id);
@@ -57,9 +58,9 @@ function animate(id, delay) {
     if (!prefersReducedMotion) {
       animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length);
     }
-}
+  }
 
-function updateAnimation(id, framesList, totalFrames) {
+  function updateAnimation(id, framesList, totalFrames) {
 
     // increment the frame counter for the given id
     frameCounts[id] = (frameCounts[id] + 1) % totalFrames;
@@ -73,23 +74,21 @@ function updateAnimation(id, framesList, totalFrames) {
     } else {
       framesList[frameCounts[id] - 1].style.display = "none";
     }
-}
+  }
 
-animate("illustration-accueil", 500);
-animate("rennes", 1000);
-animate("orsay", 2000);
-animate("parterre", 1500);
+  animate("illustration-accueil", 500);
+  animate("rennes", 1000);
+  animate("orsay", 2000);
+  animate("parterre", 1500);
 
-document.addEventListener('DOMContentLoaded', function() {
     const toggleableElements = document.querySelectorAll('.toggleable, .img_top_toggleable');
-  toggleableElements.forEach(function(element) {
-    element.addEventListener('click', function() {
+    toggleableElements.forEach(function (element) {
+      element.addEventListener('click', function () {
         toggleAnimation();
       });
     });
-});
 
-function toggleAnimation() {
+  function toggleAnimation() {
     const toggleable = document.querySelector('.toggleable');
     const imgTopToggleable = document.querySelector('.img_top_toggleable');
     // Play the animations
@@ -114,12 +113,15 @@ function toggleAnimation() {
         clearInterval(animationIntervals[id]);
       });
     }
-}
+  }
 
-let lastScrollTop = 0; // Last position of the scroll
+  let lastScrollTop = 0;
+  let isScrolling = false;
 
-window.addEventListener("scroll", function() {
-  let currentPosition = window.pageYOffset || document.documentElement.scrollTop;
+  window.addEventListener("scroll", function() {
+    if (!isScrolling) {
+      window.requestAnimationFrame(function() {
+        let currentPosition = window.scrollY || document.documentElement.scrollTop;
         const toggleButton = document.querySelectorAll('.toggleButton');
 
         if (currentPosition > lastScrollTop) {
@@ -133,6 +135,15 @@ window.addEventListener("scroll", function() {
             button.style.display = "block";
           });
         }
-  lastScrollTop = currentPosition <= 0 ? 0 : currentPosition; // For Mobile or negative scrolling
-}, false);
 
+        lastScrollTop = currentPosition <= 0 ? 0 : currentPosition; // For Mobile or negative scrolling
+        isScrolling = false;
+      });
+
+      isScrolling = true;
+    }
+  });
+}
+
+// Loads the script once the document is ready
+document.addEventListener('DOMContentLoaded', setupPage);