From e5e9b9af7990cc7959088a4c891feff825fac267 Mon Sep 17 00:00:00 2001
From: Adrian Rosin <adrian.rosin.etu@univ-lille.fr>
Date: Mon, 19 Feb 2024 13:36:10 +0100
Subject: [PATCH] allowed users with reduced animations to resume animations
 #30

---
 static/script-bon.js | 31 ++++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/static/script-bon.js b/static/script-bon.js
index e680051..4de3a0d 100644
--- a/static/script-bon.js
+++ b/static/script-bon.js
@@ -6,8 +6,12 @@ document.addEventListener('DOMContentLoaded', function() {
 function setupPage() {
   // Checks if the user didn't enable prefers-reduced-motion
   let animationEnabled = window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
-  // Boolean to keep track of current animation state, starts at true because it is linked to the button which is only displayed when animationEnabled is true
+  // Boolean to keep track of current animation state
   let currentAnimationState = true;
+  if (!animationEnabled) {
+    currentAnimationState = false;
+  }
+  console.log(currentAnimationState);
   // Dictionary to keep track of animation intervals
   let animationIntervals = {};
   // Dictionary to keep track of delay count for each animation
@@ -78,13 +82,29 @@ function setupPage() {
       framesList[frameCounts[id] - 1].style.display = "none";
     }
   }
+  console.log(currentAnimationState);
+
   // Start the animation if animation is enabled
-  if (animationEnabled) {
+  if (currentAnimationState) {
     animate("illustration-accueil", 500);
     animate("rennes", 1000);
     animate("orsay", 2000);
     animate("parterre", 1500);
   }
+  // Pause the animation if animation is disabled, initialization of the animation is necessary for the first time
+  else if(!currentAnimationState){
+    animate("illustration-accueil", 500);
+    animate("rennes", 1000);
+    animate("orsay", 2000);
+    animate("parterre", 1500);
+    //Display the pause button at first
+    toggleable.style.display = 'none';
+    imgTopToggleable.style.display = 'block';
+    setARIALiveAttributes(false);
+    Object.keys(animationIntervals).forEach(id => {
+      clearInterval(animationIntervals[id]);
+    });
+  }
 
   const toggleableElements = document.querySelectorAll('.toggleable, .img_top_toggleable');
   toggleableElements.forEach(function(element) {
@@ -121,7 +141,6 @@ function setupPage() {
 
   window.addEventListener("scroll", function() {
     const toggleButton = document.querySelectorAll('.toggleButton');
-    if (animationEnabled) {
       if (!isCallbackRegistered) {
         window.requestAnimationFrame(function () {
           let currentPosition = window.scrollY || document.documentElement.scrollTop;
@@ -143,11 +162,5 @@ function setupPage() {
 
         isCallbackRegistered = true;
       }
-    }
-    else {
-      toggleButton.forEach(button => {
-        button.style.display = "none";
-      });
-    }
   });
 }