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

allowed users with reduced animations to resume animations #30

Browse source
This commit is contained in:
Adrian Rosin 2024-02-19 13:36:10 +01:00
parent 489e7b9e4f
commit e5e9b9af79
1 changed files with 22 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
static/script-bon.js
View file

@ -6,8 +6,12 @@ document.addEventListener('DOMContentLoaded', function() {
function setupPage() { function setupPage() {
// Checks if the user didn't enable prefers-reduced-motion // Checks if the user didn't enable prefers-reduced-motion
let animationEnabled = window.matchMedia('(prefers-reduced-motion: no-preference)').matches; let animationEnabled = window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
// Boolean to keep track of current animation state, starts at true because it is linked to the button which is only displayed when animationEnabled is true // Boolean to keep track of current animation state
let currentAnimationState = true; let currentAnimationState = true;
if (!animationEnabled) {
currentAnimationState = false;
}
console.log(currentAnimationState);
// Dictionary to keep track of animation intervals // 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
@ -78,13 +82,29 @@ function setupPage() {
framesList[frameCounts[id] - 1].style.display = "none"; framesList[frameCounts[id] - 1].style.display = "none";
} }
} }
console.log(currentAnimationState);
// Start the animation if animation is enabled // Start the animation if animation is enabled
if (animationEnabled) { if (currentAnimationState) {
animate("illustration-accueil", 500); animate("illustration-accueil", 500);
animate("rennes", 1000); animate("rennes", 1000);
animate("orsay", 2000); animate("orsay", 2000);
animate("parterre", 1500); animate("parterre", 1500);
} }
// Pause the animation if animation is disabled, initialization of the animation is necessary for the first time
else if(!currentAnimationState){
animate("illustration-accueil", 500);
animate("rennes", 1000);
animate("orsay", 2000);
animate("parterre", 1500);
//Display the pause button at first
toggleable.style.display = 'none';
imgTopToggleable.style.display = 'block';
setARIALiveAttributes(false);
Object.keys(animationIntervals).forEach(id => {
clearInterval(animationIntervals[id]);
});
}
const toggleableElements = document.querySelectorAll('.toggleable, .img_top_toggleable'); const toggleableElements = document.querySelectorAll('.toggleable, .img_top_toggleable');
toggleableElements.forEach(function(element) { toggleableElements.forEach(function(element) {
@ -121,7 +141,6 @@ function setupPage() {
window.addEventListener("scroll", function() { window.addEventListener("scroll", function() {
const toggleButton = document.querySelectorAll('.toggleButton'); const toggleButton = document.querySelectorAll('.toggleButton');
if (animationEnabled) {
if (!isCallbackRegistered) { if (!isCallbackRegistered) {
window.requestAnimationFrame(function () { window.requestAnimationFrame(function () {
let currentPosition = window.scrollY || document.documentElement.scrollTop; let currentPosition = window.scrollY || document.documentElement.scrollTop;
@ -143,11 +162,5 @@ function setupPage() {
isCallbackRegistered = true; isCallbackRegistered = true;
} }
}
else {
toggleButton.forEach(button => {
button.style.display = "none";
});
}
}); });
} }