static/script-bon.js

@@ -1,8 +1,11 @@
-async function setupPage() {
+// Loads the script once the document is ready
+document.addEventListener('DOMContentLoaded', function() {
+  setupPage();
+});
 
-  // Checks if the user enabled prefers-reduced-motion
-  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-  let animationEnabled = prefersReducedMotion;
+function setupPage() {
+  // Checks if the user didn't enable prefers-reduced-motion
+  let animationEnabled = window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
   // Dictionary to keep track of animation intervals
   let animationIntervals = {};
   // Dictionary to keep track of delay count for each animation
@@ -11,6 +14,9 @@ async function setupPage() {
   let frames = {};
   // dictionary to keep track of frame count for each animation
   let frameCounts = {};
+  // Buttons for toggling
+  const toggleable = document.querySelector('.toggleable');
+  const imgTopToggleable = document.querySelector('.img_top_toggleable');
 
   const illustrationAccueil = document.getElementById('illustration-accueil');
   const rennes = document.getElementById('rennes');
@@ -32,10 +38,8 @@ async function setupPage() {
     }
   }
 
-
   function animate(id, delay) {
-
-    // get the container and frames for the amination
+    // get the container and frames for the animation
     const container = document.getElementById(id);
     const framesList = container.children;
 
@@ -55,12 +59,10 @@ async function setupPage() {
     // Update ARIA live attributes
     setARIALiveAttributes(true);
 
-    // Start the animation if prefers-reduced-motion is not enabled
     animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length);
   }
 
   function updateAnimation(id, framesList, totalFrames) {
-
     // increment the frame counter for the given id
     frameCounts[id] = (frameCounts[id] + 1) % totalFrames;
 
@@ -74,7 +76,7 @@ async function setupPage() {
       framesList[frameCounts[id] - 1].style.display = "none";
     }
   }
-
+  // Start the animation if animation is enabled
   if (animationEnabled) {
     animate("illustration-accueil", 500);
     animate("rennes", 1000);
@@ -83,37 +85,33 @@ async function setupPage() {
   }
 
   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() {
-    const toggleable = document.querySelector('.toggleable');
-    const imgTopToggleable = document.querySelector('.img_top_toggleable');
-    // Play the animations
-    if (toggleable.style.display === 'none') {
-      illustrationAccueil.setAttribute('aria-live', 'polite');
-      rennes.setAttribute('aria-live', 'polite');
-      orsay.setAttribute('aria-live', 'polite');
-      parterre.setAttribute('aria-live', 'polite');
-      toggleable.style.display = 'block';
-      imgTopToggleable.style.display = 'none';
-      Object.keys(animationIntervals).forEach(id => {
-        animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length);
-      });
-    } else {  // Pause the animations
-      illustrationAccueil.setAttribute('aria-live', 'off');
-      rennes.setAttribute('aria-live', 'off');
-      orsay.setAttribute('aria-live', 'off');
-      parterre.setAttribute('aria-live', 'off');
+    // Play or pause the animations based on current state
+    if (animationEnabled) {
+      // Pause the animations
       toggleable.style.display = 'none';
       imgTopToggleable.style.display = 'block';
+      setARIALiveAttributes(false);
       Object.keys(animationIntervals).forEach(id => {
         clearInterval(animationIntervals[id]);
       });
+    } else {
+      // Play the animations
+      toggleable.style.display = 'block';
+      imgTopToggleable.style.display = 'none';
+      setARIALiveAttributes(true);
+      Object.keys(animationIntervals).forEach(id => {
+        animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length);
+      });
     }
+    // Toggle animation state
+    animationEnabled = !animationEnabled;
   }
 
   let lastScrollTop = 0;
@@ -144,6 +142,3 @@ async function setupPage() {
     }
   });
 }
-
-// Loads the script once the document is ready
-document.addEventListener('DOMContentLoaded', setupPage);