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"; - }); - } }); }