site/static/script-v2.js

// 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 = "[⏵]";
  }
}