.gitignore

@@ -2,3 +2,4 @@ public/
 node_modules/
 *.swp
 .awsclirc
+.idea

static/css/layout.css

@@ -119,6 +119,31 @@ footer {
 	margin-bottom: var(--med_margin)
 }
 
+.toggleButton {
+	position: fixed;
+	top: 1rem;
+	right: 1rem;
+	z-index: 999;
+}
+
+.toggleable {
+	padding-top: 1rem;
+	color: black;
+	cursor: pointer;
+}
+
+.img_top_toggleable {
+	display: none;
+	position: absolute;
+	top: 1rem;
+	right: 0;
+	z-index: 99;
+	background-color: var(--day-background);
+	color: darkgreen;
+	cursor: pointer;
+}
+
+
 /* MENU */
 nav#menu{
 	background-color: var(--day-background);
@@ -236,12 +261,16 @@ pre.center > a{
 
 /* THEME SOMBRE */
 @media (prefers-color-scheme: dark) {
-	div#container, nav#menu, body{
+	div#container, nav#menu, body, nav#play{
 		background-color: var(--night-background);
 	}
 	p, pre, ul, li, a, a:hover, h1, h2, footer{
 		color: var(--txt-night);
 	}
+	.img_top_toggleable, .toggleable {
+		color: var(--txt-night);
+		background-color: var(--night-background);
+	}
 	.highlight{
 		color: var(--night-highlight-color);
 		background-color: var(--night-highlight-bg);

static/script-bon.js

@@ -1,44 +1,166 @@
-// dictionary to keep track of frame count for each animation
-let frameCounts = {};
+// Loads the script once the document is ready
+document.addEventListener('DOMContentLoaded', function() {
+  setupPage();
+});
 
-function animate(id, delay) {
+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');
 
-  // get the container and frames for the amination
-  const container = document.getElementById(id);
-  const frames = container.children;
+  const illustrationAccueil = document.getElementById('illustration-accueil');
+  const rennes = document.getElementById('rennes');
+  const orsay = document.getElementById('orsay');
+  const parterre = document.getElementById('parterre');
 
-  // set up the frame counter
-  frameCounts[id] = 0;
-
-  // hide all frames except for the first
-  frames[0].style.display = "flex";
-  for (let i = 1; i < frames.length; i++) {
-    frames[i].style.display = "none";
+  // 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');
+    }
   }
 
-  // start the animation
-  const interval = setInterval(updateAnimation, delay, id, frames, frames.length);
+  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;
 
-function updateAnimation(id, frames, totalFrames) {
+    // 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";
+    }
 
-  // increment the frame counter for the given id
-  frameCounts[id] = (frameCounts[id] + 1) % totalFrames;
+    // Stock frames and delay in dictionaries
+    frames[id] = framesList;
+    delays[id] = delay;
 
-  // show the next frame
-  frames[frameCounts[id]].style.display = "flex";
+    // Update ARIA live attributes
+    setARIALiveAttributes(true);
 
-  // hide the previous frame
-  if (frameCounts[id] == 0) {
-    frames[totalFrames - 1].style.display = "none";
-  } else {
-    frames[frameCounts[id] - 1].style.display = "none";
+    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;
 
-animate("illustration-accueil", 500);
-animate("rennes", 1000);
-animate("orsay", 2000);
-animate("parterre", 1500);
+    // 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;
+      }
+  });
+}