Deuxfleurs
/
site
21
2
Fork 5
Code Issues 9 Pull Requests 6 Releases Wiki Activity

WIP : quelques corrections, et un début de booléen 'animationEnabled' qui doit déterminer si l'on anime ou pas la page, en s'y prenant au plus tôt : pas de code appelé si pas d'animation demandée, et arrêt auto de l'animation si on toggle le booléen

This commit is contained in:
ADRN 2024-02-15 15:33:38 +01:00
parent 63176f8e97
commit d30acf4e37
2 changed files with 23 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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');