site/static/script-bon.js

// Loads the script once the document is ready
document.addEventListener('DOMContentLoaded', function() {
  setupPage();
});

function setupPage() {
  // Checks if the user didn't enable prefers-reduced-motion
  let animationEnabled = window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
  // Boolean to keep track of current animation state
  let currentAnimationState = true;
  if (!animationEnabled) {
    currentAnimationState = false;
  }
  console.log(currentAnimationState);
  // Dictionary to keep track of animation intervals
  let animationIntervals = {};
  // Dictionary to keep track of delay count for each animation
  let delays = {};
  // Dictionary to keep track of frame for each animation
  let frames = {};
  // dictionary to keep track of frame count for each animation
  let frameCounts = {};
  // Buttons for toggling
  const toggleable = document.querySelector('.toggleable');
  const imgTopToggleable = document.querySelector('.img_top_toggleable');

  const illustrationAccueil = document.getElementById('illustration-accueil');
  const rennes = document.getElementById('rennes');
  const orsay = document.getElementById('orsay');
  const parterre = document.getElementById('parterre');

  // Update ARIA live attributes based on prefers-reduced-motion
  function setARIALiveAttributes(isAnimated) {
    if (isAnimated) {
      illustrationAccueil.setAttribute('aria-live', 'off');
      rennes.setAttribute('aria-live', 'off');
      orsay.setAttribute('aria-live', 'off');
      parterre.setAttribute('aria-live', 'off');
    } else {
      illustrationAccueil.setAttribute('aria-live', 'polite');
      rennes.setAttribute('aria-live', 'polite');
      orsay.setAttribute('aria-live', 'polite');
      parterre.setAttribute('aria-live', 'polite');
    }
  }

  function animate(id, delay) {
    // get the container and frames for the animation
    const container = document.getElementById(id);
    const framesList = container.children;

    // set up the frame counter
    frameCounts[id] = 0;

    // hide all frames except for the first
    framesList[0].style.display = "flex";
    for (let i = 1; i < framesList.length; i++) {
      framesList[i].style.display = "none";
    }

    // Stock frames and delay in dictionaries
    frames[id] = framesList;
    delays[id] = delay;

    // Update ARIA live attributes
    setARIALiveAttributes(true);

    animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length);
  }

  function updateAnimation(id, framesList, totalFrames) {
    // increment the frame counter for the given id
    frameCounts[id] = (frameCounts[id] + 1) % totalFrames;

    // show the next frame
    framesList[frameCounts[id]].style.display = "flex";

    // hide the previous frame
    if (frameCounts[id] === 0) {
      framesList[totalFrames - 1].style.display = "none";
    } else {
      framesList[frameCounts[id] - 1].style.display = "none";
    }
  }
  console.log(currentAnimationState);

  // Start the animation if animation is enabled
  if (currentAnimationState) {
    animate("illustration-accueil", 500);
    animate("rennes", 1000);
    animate("orsay", 2000);
    animate("parterre", 1500);
  }
  // Pause the animation if animation is disabled, initialization of the animation is necessary for the first time
  else if(!currentAnimationState){
    animate("illustration-accueil", 500);
    animate("rennes", 1000);
    animate("orsay", 2000);
    animate("parterre", 1500);
    //Display the pause button at first
    toggleable.style.display = 'none';
    imgTopToggleable.style.display = 'block';
    setARIALiveAttributes(false);
    Object.keys(animationIntervals).forEach(id => {
      clearInterval(animationIntervals[id]);
    });
  }

  const toggleableElements = document.querySelectorAll('.toggleable, .img_top_toggleable');
  toggleableElements.forEach(function(element) {
    element.addEventListener('click', function() {
      toggleAnimation();
    });
  });

  function toggleAnimation() {
    // Play or pause the animations based on current state
    if (currentAnimationState) {
      // Pause the animations
      toggleable.style.display = 'none';
      imgTopToggleable.style.display = 'block';
      setARIALiveAttributes(false);
      Object.keys(animationIntervals).forEach(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
    currentAnimationState = !currentAnimationState;
  }

  let lastScrollTop = 0;
  let isCallbackRegistered = false;

  window.addEventListener("scroll", function() {
    const toggleButton = document.querySelectorAll('.toggleButton');
      if (!isCallbackRegistered) {
        window.requestAnimationFrame(function () {
          let currentPosition = window.scrollY || document.documentElement.scrollTop;

          if (currentPosition > lastScrollTop) {
            // Scroll down
            toggleButton.forEach(button => {
              button.style.display = "none";
            });
          } else {
            // Scroll up
            toggleButton.forEach(button => {
              button.style.display = "block";
            });
          }
          lastScrollTop = currentPosition <= 0 ? 0 : currentPosition; // For Mobile or negative scrolling
          isCallbackRegistered = false;
        });

        isCallbackRegistered = true;
      }
  });
}