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

feat: changed aria live attribute also if the prefers reduced motion is set to off and if the user clicks on the button to play/pause animations #30

Browse source
This commit is contained in:
Adrian Rosin 2024-02-02 11:03:55 +01:00
parent 7c1b44bd29
commit 14cfee2aee
1 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
static/script-bon.js
View file

@ -1,4 +1,4 @@
// Checks if the user enabled or not prefers-reduced-motion // Checks if the user enabled prefers-reduced-motion
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// Dictionary to keep track of animation intervals // Dictionary to keep track of animation intervals
@ -10,19 +10,18 @@ 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 = {};
const illustrationAccueil = document.getElementById('illustration-accueil');
const rennes = document.getElementById('rennes');
const orsay = document.getElementById('orsay');
const parterre = document.getElementById('parterre');
// Update ARIA live attributes based on prefers-reduced-motion // Update ARIA live attributes based on prefers-reduced-motion
function updateARIALiveAttributes() { function updateARIALiveAttributes() {
const illustrationAccueil = document.getElementById('illustration-accueil');
const rennes = document.getElementById('rennes');
const orsay = document.getElementById('orsay');
const parterre = document.getElementById('parterre');
if (prefersReducedMotion) { if (prefersReducedMotion) {
illustrationAccueil.setAttribute('aria-live', 'off'); illustrationAccueil.setAttribute('aria-live', 'off');
rennes.setAttribute('aria-live', 'off'); rennes.setAttribute('aria-live', 'off');
orsay.setAttribute('aria-live', 'off'); orsay.setAttribute('aria-live', 'off');
parterre.setAttribute('aria-live', 'off'); parterre.setAttribute('aria-live', 'off');
} else { } else {
illustrationAccueil.setAttribute('aria-live', 'polite'); illustrationAccueil.setAttribute('aria-live', 'polite');
rennes.setAttribute('aria-live', 'polite'); rennes.setAttribute('aria-live', 'polite');
@ -95,12 +94,20 @@ function toggleAnimation() {
const imgTopToggleable = document.querySelector('.img_top_toggleable'); const imgTopToggleable = document.querySelector('.img_top_toggleable');
// Play the animations // Play the animations
if (toggleable.style.display === 'none') { 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'; toggleable.style.display = 'block';
imgTopToggleable.style.display = 'none'; imgTopToggleable.style.display = 'none';
Object.keys(animationIntervals).forEach(id => { Object.keys(animationIntervals).forEach(id => {
animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length); animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length);
}); });
} else { // Pause the animations } 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';
Object.keys(animationIntervals).forEach(id => { Object.keys(animationIntervals).forEach(id => {