Deuxfleurs/site
20
2
Fork 6
Code Issues 4 Pull requests 7 Releases Wiki Activity

state triggering animations or not instead of checking the style of the buttons, ensuring code isn't call when prefers-reduced-motion is enabled #30

Browse source
This commit is contained in:
Adrian Rosin 2024-02-19 09:37:05 +01:00
parent d30acf4e37
commit 47a8f70c00
1 changed files with 28 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
static/script-bon.js
View file

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