From db9b798db75a2e8ebf9b5c6b6e0efb7439c6a93e Mon Sep 17 00:00:00 2001 From: ADRN Date: Fri, 30 Aug 2024 17:03:26 +0200 Subject: bouton play/pause done. TODO: dark/light theme switcher --- static/index.html | 13 ++++--- static/script-v2.js | 104 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 111 insertions(+), 6 deletions(-) create mode 100644 static/script-v2.js diff --git a/static/index.html b/static/index.html index 8bb9899..c8b2ad6 100644 --- a/static/index.html +++ b/static/index.html @@ -104,13 +104,14 @@

💮💮 deuxfleurs

-
- + diff --git a/static/script-v2.js b/static/script-v2.js new file mode 100644 index 0000000..a730cdb --- /dev/null +++ b/static/script-v2.js @@ -0,0 +1,104 @@ +// 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 = "[⏵]"; + } +} -- cgit v1.2.3