diff --git a/static/script-bon.js b/static/script-bon.js index ebad4d8..0b054c9 100644 --- a/static/script-bon.js +++ b/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);