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> <body>
<nav role="none" aria-label="boutton activer/desactiver les animations" id="play"> <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"> <li role="none">
<pre class="toggleable" aria-hidden="true"> <pre class="toggleable" aria-hidden="true">
|‾‾‾‾‾‾‾‾‾| |‾‾‾‾‾‾‾‾‾|

43
static/script-bon.js
View file

@ -1,14 +1,15 @@
async function setupPage() { 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; 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 = {}; let animationIntervals = {};
// Dictionary to keep track of delay count for each animation // Dictionary to keep track of delay count for each animation
let delays = {}; let delays = {};
// Dictionary to keep track of frame for each animation // Dictionary to keep track of frame for each animation
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 = {};
const illustrationAccueil = document.getElementById('illustration-accueil'); const illustrationAccueil = document.getElementById('illustration-accueil');
@ -16,9 +17,9 @@ async function setupPage() {
const orsay = document.getElementById('orsay'); const orsay = document.getElementById('orsay');
const parterre = document.getElementById('parterre'); 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 setARIALiveAttributes(isAnimated) {
if (prefersReducedMotion) { if (isAnimated) {
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');
@ -52,12 +53,10 @@ async function setupPage() {
delays[id] = delay; delays[id] = delay;
// Update ARIA live attributes // Update ARIA live attributes
updateARIALiveAttributes(); setARIALiveAttributes(true);
// Start the animation if prefers-reduced-motion is not enabled // 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) { function updateAnimation(id, framesList, totalFrames) {
@ -76,17 +75,19 @@ async function setupPage() {
} }
} }
animate("illustration-accueil", 500); if (animationEnabled) {
animate("rennes", 1000); animate("illustration-accueil", 500);
animate("orsay", 2000); animate("rennes", 1000);
animate("parterre", 1500); animate("orsay", 2000);
animate("parterre", 1500);
}
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'); const toggleable = document.querySelector('.toggleable');