From d30acf4e370392634a6b270dd00b7bbeeb75cb0a Mon Sep 17 00:00:00 2001
From: ADRN <adrien@luxeylab.net>
Date: Thu, 15 Feb 2024 15:33:38 +0100
Subject: [PATCH] =?UTF-8?q?WIP=20:=20quelques=20corrections,=20et=20un=20d?=
 =?UTF-8?q?=C3=A9but=20de=20bool=C3=A9en=20'animationEnabled'=20qui=20doit?=
 =?UTF-8?q?=20d=C3=A9terminer=20si=20l'on=20anime=20ou=20pas=20la=20page,?=
 =?UTF-8?q?=20en=20s'y=20prenant=20au=20plus=20t=C3=B4t=20:=20pas=20de=20c?=
 =?UTF-8?q?ode=20appel=C3=A9=20si=20pas=20d'animation=20demand=C3=A9e,=20e?=
 =?UTF-8?q?t=20arr=C3=AAt=20auto=20de=20l'animation=20si=20on=20toggle=20l?=
 =?UTF-8?q?e=20bool=C3=A9en?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/index.html    |  2 +-
 static/script-bon.js | 43 ++++++++++++++++++++++---------------------
 2 files changed, 23 insertions(+), 22 deletions(-)
diff --git a/static/index.html b/static/index.html
index 9c1a0b5..d6d432e 100644
--- a/static/index.html
+++ b/static/index.html
@@ -47,7 +47,7 @@
 <body>
 
 <nav role="none" aria-label="boutton activer/desactiver les animations" id="play">
-    <ul aria-label="boutton activer/desactiver les animations" role="toolbar" class="toggleButton">
+    <ul aria-label="bouton activer/desactiver les animations" role="toolbar" class="toggleButton">
         <li role="none">
         <pre class="toggleable" aria-hidden="true">
   |‾‾‾‾‾‾‾‾‾|
diff --git a/static/script-bon.js b/static/script-bon.js
index 5d09dd1..ebad4d8 100644
--- a/static/script-bon.js
+++ b/static/script-bon.js
@@ -1,14 +1,15 @@
 async function setupPage() {
 
-// Checks if the user enabled prefers-reduced-motion
+  // Checks if the user enabled prefers-reduced-motion
   const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-// Dictionary to keep track of animation intervals
+  let animationEnabled = prefersReducedMotion;
+  // Dictionary to keep track of animation intervals
   let animationIntervals = {};
-// Dictionary to keep track of delay count for each animation
+  // Dictionary to keep track of delay count for each animation
   let delays = {};
-// Dictionary to keep track of frame for each animation
+  // Dictionary to keep track of frame for each animation
   let frames = {};
-// dictionary to keep track of frame count for each animation
+  // dictionary to keep track of frame count for each animation
   let frameCounts = {};
 
   const illustrationAccueil = document.getElementById('illustration-accueil');
@@ -16,9 +17,9 @@ async function setupPage() {
   const orsay = document.getElementById('orsay');
   const parterre = document.getElementById('parterre');
 
-// Update ARIA live attributes based on prefers-reduced-motion
-  function updateARIALiveAttributes() {
-    if (prefersReducedMotion) {
+  // Update ARIA live attributes based on prefers-reduced-motion
+  function setARIALiveAttributes(isAnimated) {
+    if (isAnimated) {
       illustrationAccueil.setAttribute('aria-live', 'off');
       rennes.setAttribute('aria-live', 'off');
       orsay.setAttribute('aria-live', 'off');
@@ -52,12 +53,10 @@ async function setupPage() {
     delays[id] = delay;
 
     // Update ARIA live attributes
-    updateARIALiveAttributes();
+    setARIALiveAttributes(true);
 
     // Start the animation if prefers-reduced-motion is not enabled
-    if (!prefersReducedMotion) {
-      animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length);
-    }
+    animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length);
   }
 
   function updateAnimation(id, framesList, totalFrames) {
@@ -76,17 +75,19 @@ async function setupPage() {
     }
   }
 
-  animate("illustration-accueil", 500);
-  animate("rennes", 1000);
-  animate("orsay", 2000);
-  animate("parterre", 1500);
+  if (animationEnabled) {
+    animate("illustration-accueil", 500);
+    animate("rennes", 1000);
+    animate("orsay", 2000);
+    animate("parterre", 1500);
+  }
 
-    const toggleableElements = document.querySelectorAll('.toggleable, .img_top_toggleable');
-    toggleableElements.forEach(function (element) {
-      element.addEventListener('click', function () {
-        toggleAnimation();
-      });
+  const toggleableElements = document.querySelectorAll('.toggleable, .img_top_toggleable');
+  toggleableElements.forEach(function (element) {
+    element.addEventListener('click', function () {
+      toggleAnimation();
     });
+  });
 
   function toggleAnimation() {
     const toggleable = document.querySelector('.toggleable');
