site/static/script-bon.js

async function setupPage() {

// Checks if the user enabled prefers-reduced-motion
  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// 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 = {};

  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 updateARIALiveAttributes() {
    if (prefersReducedMotion) {
      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 amination
    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
    updateARIALiveAttributes();

    // Start the animation if prefers-reduced-motion is not enabled
    if (!prefersReducedMotion) {
      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";
    }
  }

  animate("illustration-accueil", 500);
  animate("rennes", 1000);
  animate("orsay", 2000);
  animate("parterre", 1500);

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

  function toggleAnimation() {
    const toggleable = document.querySelector('.toggleable');
    const imgTopToggleable = document.querySelector('.img_top_toggleable');
    // Play the animations
    if (toggleable.style.display === 'none') {
      illustrationAccueil.setAttribute('aria-live', 'polite');
      rennes.setAttribute('aria-live', 'polite');
      orsay.setAttribute('aria-live', 'polite');
      parterre.setAttribute('aria-live', 'polite');
      toggleable.style.display = 'block';
      imgTopToggleable.style.display = 'none';
      Object.keys(animationIntervals).forEach(id => {
        animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length);
      });
    } else {  // Pause the animations
      illustrationAccueil.setAttribute('aria-live', 'off');
      rennes.setAttribute('aria-live', 'off');
      orsay.setAttribute('aria-live', 'off');
      parterre.setAttribute('aria-live', 'off');
      toggleable.style.display = 'none';
      imgTopToggleable.style.display = 'block';
      Object.keys(animationIntervals).forEach(id => {
        clearInterval(animationIntervals[id]);
      });
    }
  }

  let lastScrollTop = 0;
  let isCallbackRegistered = false;

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

        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;
    }
  });
}

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