1 files changed, 104 insertions, 0 deletions
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 = "[⏵]";
+  }
+}