1 changed files with 28 additions and 33 deletions
|
@ -1,8 +1,11 @@
|
||||||
async function setupPage() {
|
// Loads the script once the document is ready
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
setupPage();
|
||||||
|
});
|
||||||
|
|
||||||
// Checks if the user enabled prefers-reduced-motion
|
function setupPage() {
|
||||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
// Checks if the user didn't enable prefers-reduced-motion
|
||||||
let animationEnabled = prefersReducedMotion;
|
let animationEnabled = window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
|
||||||
// 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
|
||||||
|
@ -11,6 +14,9 @@ async function setupPage() {
|
||||||
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 = {};
|
||||||
|
// Buttons for toggling
|
||||||
|
const toggleable = document.querySelector('.toggleable');
|
||||||
|
const imgTopToggleable = document.querySelector('.img_top_toggleable');
|
||||||
|
|
||||||
const illustrationAccueil = document.getElementById('illustration-accueil');
|
const illustrationAccueil = document.getElementById('illustration-accueil');
|
||||||
const rennes = document.getElementById('rennes');
|
const rennes = document.getElementById('rennes');
|
||||||
|
@ -32,10 +38,8 @@ async function setupPage() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function animate(id, delay) {
|
function animate(id, delay) {
|
||||||
|
// get the container and frames for the animation
|
||||||
// get the container and frames for the amination
|
|
||||||
const container = document.getElementById(id);
|
const container = document.getElementById(id);
|
||||||
const framesList = container.children;
|
const framesList = container.children;
|
||||||
|
|
||||||
|
@ -55,12 +59,10 @@ async function setupPage() {
|
||||||
// Update ARIA live attributes
|
// Update ARIA live attributes
|
||||||
setARIALiveAttributes(true);
|
setARIALiveAttributes(true);
|
||||||
|
|
||||||
// Start the animation if prefers-reduced-motion is not enabled
|
|
||||||
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) {
|
||||||
|
|
||||||
// increment the frame counter for the given id
|
// increment the frame counter for the given id
|
||||||
frameCounts[id] = (frameCounts[id] + 1) % totalFrames;
|
frameCounts[id] = (frameCounts[id] + 1) % totalFrames;
|
||||||
|
|
||||||
|
@ -74,7 +76,7 @@ async function setupPage() {
|
||||||
framesList[frameCounts[id] - 1].style.display = "none";
|
framesList[frameCounts[id] - 1].style.display = "none";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// Start the animation if animation is enabled
|
||||||
if (animationEnabled) {
|
if (animationEnabled) {
|
||||||
animate("illustration-accueil", 500);
|
animate("illustration-accueil", 500);
|
||||||
animate("rennes", 1000);
|
animate("rennes", 1000);
|
||||||
|
@ -83,37 +85,33 @@ async function setupPage() {
|
||||||
}
|
}
|
||||||
|
|
||||||
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');
|
// Play or pause the animations based on current state
|
||||||
const imgTopToggleable = document.querySelector('.img_top_toggleable');
|
if (animationEnabled) {
|
||||||
// Play the animations
|
// Pause the animations
|
||||||
if (toggleable.style.display === 'none') {
|
|
||||||
illustrationAccueil.setAttribute('aria-live', 'polite');
|
|
||||||
rennes.setAttribute('aria-live', 'polite');
|
|
||||||
orsay.setAttribute('aria-live', 'polite');
|
|
||||||
parterre.setAttribute('aria-live', 'polite');
|
|
||||||
toggleable.style.display = 'block';
|
|
||||||
imgTopToggleable.style.display = 'none';
|
|
||||||
Object.keys(animationIntervals).forEach(id => {
|
|
||||||
animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length);
|
|
||||||
});
|
|
||||||
} else { // Pause the animations
|
|
||||||
illustrationAccueil.setAttribute('aria-live', 'off');
|
|
||||||
rennes.setAttribute('aria-live', 'off');
|
|
||||||
orsay.setAttribute('aria-live', 'off');
|
|
||||||
parterre.setAttribute('aria-live', 'off');
|
|
||||||
toggleable.style.display = 'none';
|
toggleable.style.display = 'none';
|
||||||
imgTopToggleable.style.display = 'block';
|
imgTopToggleable.style.display = 'block';
|
||||||
|
setARIALiveAttributes(false);
|
||||||
Object.keys(animationIntervals).forEach(id => {
|
Object.keys(animationIntervals).forEach(id => {
|
||||||
clearInterval(animationIntervals[id]);
|
clearInterval(animationIntervals[id]);
|
||||||
});
|
});
|
||||||
|
} else {
|
||||||
|
// Play the animations
|
||||||
|
toggleable.style.display = 'block';
|
||||||
|
imgTopToggleable.style.display = 'none';
|
||||||
|
setARIALiveAttributes(true);
|
||||||
|
Object.keys(animationIntervals).forEach(id => {
|
||||||
|
animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
// Toggle animation state
|
||||||
|
animationEnabled = !animationEnabled;
|
||||||
}
|
}
|
||||||
|
|
||||||
let lastScrollTop = 0;
|
let lastScrollTop = 0;
|
||||||
|
@ -144,6 +142,3 @@ async function setupPage() {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Loads the script once the document is ready
|
|
||||||
document.addEventListener('DOMContentLoaded', setupPage);
|
|
||||||
|
|
Loading…
Reference in a new issue