Deuxfleurs/site
20
2
Fork 6
Code Issues 4 Pull requests 7 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

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