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

WIP: feat/PausePlayButton closes #16, #30 #34

Draft
adrian wants to merge 16 commits from adrian/site:feat/PausePlayButton into feat/a11y
pull from: adrian/site:feat/PausePlayButton
merge into: Deuxfleurs:feat/a11y
Conversation 1 Commits 16 Files changed 4 +23 -22
2 changed files with 23 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit d30acf4e37 - Show all commits

2
static/index.html
View file

@ -47,7 +47,7 @@
<body>
<nav role="none" aria-label="boutton activer/desactiver les animations" id="play">
<ul aria-label="boutton activer/desactiver les animations" role="toolbar" class="toggleButton">
<ul aria-label="bouton activer/desactiver les animations" role="toolbar" class="toggleButton">
<li role="none">
<pre class="toggleable" aria-hidden="true">
|‾‾‾‾‾‾‾‾‾|

43
static/script-bon.js
View file

@ -1,14 +1,15 @@
async function setupPage() {
// Checks if the user enabled prefers-reduced-motion
// Checks if the user enabled prefers-reduced-motion
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// Dictionary to keep track of animation intervals
let animationEnabled = prefersReducedMotion;
// Dictionary to keep track of animation intervals
let animationIntervals = {};
// Dictionary to keep track of delay count for each animation
// Dictionary to keep track of delay count for each animation
let delays = {};
// Dictionary to keep track of frame for each animation
// Dictionary to keep track of frame for each animation
let frames = {};
// dictionary to keep track of frame count for each animation
// dictionary to keep track of frame count for each animation
let frameCounts = {};
const illustrationAccueil = document.getElementById('illustration-accueil');
@ -16,9 +17,9 @@ async function setupPage() {
const orsay = document.getElementById('orsay');
const parterre = document.getElementById('parterre');
// Update ARIA live attributes based on prefers-reduced-motion
function updateARIALiveAttributes() {
if (prefersReducedMotion) {
// Update ARIA live attributes based on prefers-reduced-motion
function setARIALiveAttributes(isAnimated) {
if (isAnimated) {
illustrationAccueil.setAttribute('aria-live', 'off');
rennes.setAttribute('aria-live', 'off');
orsay.setAttribute('aria-live', 'off');
@ -52,12 +53,10 @@ async function setupPage() {
delays[id] = delay;
// Update ARIA live attributes
updateARIALiveAttributes();
setARIALiveAttributes(true);
// Start the animation if prefers-reduced-motion is not enabled
if (!prefersReducedMotion) {
animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length);
}
animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length);
}
function updateAnimation(id, framesList, totalFrames) {
@ -76,17 +75,19 @@ async function setupPage() {
}
}
animate("illustration-accueil", 500);
animate("rennes", 1000);
animate("orsay", 2000);
animate("parterre", 1500);
if (animationEnabled) {
animate("illustration-accueil", 500);
animate("rennes", 1000);
animate("orsay", 2000);
animate("parterre", 1500);
}
const toggleableElements = document.querySelectorAll('.toggleable, .img_top_toggleable');
toggleableElements.forEach(function (element) {
element.addEventListener('click', function () {
toggleAnimation();
});
const toggleableElements = document.querySelectorAll('.toggleable, .img_top_toggleable');
toggleableElements.forEach(function (element) {
element.addEventListener('click', function () {
toggleAnimation();
});
});
function toggleAnimation() {
const toggleable = document.querySelector('.toggleable');