104 lines
3.2 KiB
JavaScript
104 lines
3.2 KiB
JavaScript
// Deuxfleurs website script
|
|
// Author: Deuxfleurs association
|
|
// License: CC-BY-SA
|
|
// Version: 2.0
|
|
// Date: 2024
|
|
|
|
// Dictionary containing the animated frames' ID as key, and animation delay as value
|
|
const animationDelay = {
|
|
'illustration-accueil': 500,
|
|
'rennes': 1000,
|
|
'orsay': 2000,
|
|
'parterre': 1500
|
|
};
|
|
|
|
// Dictionary to keep track of frame count for each animation
|
|
let animationFrame = {};
|
|
// Dictionary to keep track of the animation callbacks in order to stop them
|
|
let animationCallback = {};
|
|
|
|
// Animations toggle switch (will be initialised in setupPage)
|
|
let isAnimated = false;
|
|
|
|
|
|
// Load the script once the document is ready
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
setupPage();
|
|
});
|
|
|
|
function setupPage() {
|
|
// Check if the user configured that they prefer reduced motion
|
|
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion)").matches;
|
|
// Set the animation toggle switch value to the user's configured prefers-reduced-motion
|
|
isAnimated = prefersReducedMotion;
|
|
|
|
// Play/pause button setup, such that it starts/stops the animations ...
|
|
document.getElementById("bouton-play-pause").addEventListener("click", pauseButtonClickedCallback);
|
|
// ... and has a content reflecting the animation state
|
|
setPauseButtonContent();
|
|
|
|
// Initialise the animations by looping through animationDelay keys
|
|
Object.keys(animationDelay).forEach((id) => initAnimation(id));
|
|
}
|
|
|
|
function initAnimation(id) {
|
|
// Initialise this ID's animationCallback value to null
|
|
animationCallback[id] = null;
|
|
// Start by displaying the 0th frame
|
|
animationFrame[id] = 0;
|
|
|
|
// Start the animation if authorised
|
|
if (isAnimated) {
|
|
startAnimation(id);
|
|
}
|
|
}
|
|
|
|
function startAnimation(id) {
|
|
// console.log(`Starting animation of frame '${id}' with delay of ${animationDelay[id]}ms.`);
|
|
const container = document.getElementById(id);
|
|
|
|
// Periodically calls updateAnimation with a certain `delay` and function parameters
|
|
// We store the callback identifier in animationCallback to be able to stop it
|
|
animationCallback[id] = setInterval(
|
|
updateAnimation,
|
|
animationDelay[id],
|
|
id, container.children, container.children.length
|
|
);
|
|
}
|
|
|
|
function updateAnimation(id, frames, nFrames) {
|
|
// Hide the current frame
|
|
frames[animationFrame[id]].style.display = "none";
|
|
// Increment the frame counter for the given id
|
|
animationFrame[id] = (animationFrame[id] + 1) % nFrames;
|
|
// Show the next frame
|
|
frames[animationFrame[id]].style.display = "flex";
|
|
}
|
|
|
|
function pauseButtonClickedCallback() {
|
|
// console.log('Play/pause button clicked');
|
|
// Toggle the isAnimated switch
|
|
isAnimated = !isAnimated;
|
|
|
|
// Update the animation status for each animated block
|
|
Object.keys(animationDelay).forEach((id) => {
|
|
if (isAnimated) {
|
|
// If animations were just authorised, start it
|
|
startAnimation(id);
|
|
} else {
|
|
// Else, stop it by calling clearInterval on the existing callback
|
|
clearInterval(animationCallback[id]);
|
|
}
|
|
});
|
|
|
|
setPauseButtonContent();
|
|
}
|
|
|
|
function setPauseButtonContent() {
|
|
// Set the button content corresponding to the animation state
|
|
if (isAnimated) {
|
|
document.getElementById("bouton-play-pause").innerHTML = "[⏸]";
|
|
} else {
|
|
document.getElementById("bouton-play-pause").innerHTML = "[⏵]";
|
|
}
|
|
}
|