bouton play/pause done. TODO: dark/light theme switcher

static/index.html

@@ -104,13 +104,14 @@
         <h1 id="deuxfleurs"><span role="img" aria-label="2 emojis fleur blanche">💮💮 </span>deuxfleurs</h1>
 
         <div id="toolbar" role="toolbar" aria-orientation="horizontal">
-          <a role="button" aria-label="Thème clair" href="#">[☀]</a><a class="hidden" role="button" aria-label="Thème sombre" href="#">[☼]</a><span role="separator"> · </span><a role="button" aria-label="Arrêter les animations" href="#">[⏸]</a><a class="hidden" aria-label="Activer les animations" href="#">[⏵]</a>
+          <!-- <a role="button" aria-label="Changer le thême">[☀]</a><a class="hidden" role="button" aria-label="Thème sombre" href="#">[☼]</a><span role="separator"> · </span><a role="button" id="bouton-play-pause" aria-label="Arrêter ou démarrer les animations" href="#">[⏸]</a> -->
+          <a role="button" id="bouton-play-pause" aria-label="Arrêter ou démarrer les animations" href="#">[⏸]</a>
         </div>
     </header>
 
     <main aria-label="contenu de la page web">
         <div id="jardin">
-          <div id="illustration-accueil" class="noscroll" role="img" aria-label="deux fleurs dessinées en ascii animées">
+          <div id="illustration-accueil" class="noscroll" role="img" aria-label="deux fleurs dessinées en ascii animées" aria-live="off">
         <!-- séquences de l'animation qui est lancée grâce à l'avant avant dernière ligne -->
           <pre class="center">
                                          '\ ; /'
@@ -499,7 +500,7 @@
       </div>
 
       <h2 id="infras"><span class="decoration" aria-hidden="true"></span>Avec nos propres infrastructures<span class="decoration" aria-hidden="true"></span></h2>
-      <div id="rennes" role="img" aria-label="illustration de trois serveurs informatiques rangés dans la bibliothèque d'un salon">
+      <div id="rennes" role="img" aria-label="illustration de trois serveurs informatiques rangés dans la bibliothèque d'un salon" aria-live="off">
       <!--diode qui clignote ?-->
         <pre class="center">/¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨\
 |                        ||             ||             ||                       |
@@ -652,7 +653,7 @@
 |                    \\                                                         |
 \_______________________________________________________________________________/</pre>
       </div>
-      <div id="orsay" role="img" aria-label="illustration de trois serveurs informatiques rangés sur l'étagère d'un bureau">
+      <div id="orsay" role="img" aria-label="illustration de trois serveurs informatiques rangés sur l'étagère d'un bureau" aria-live="off">
         <pre class="center">/¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨\
 |                                                                               |
 |                                                                               |
@@ -925,7 +926,7 @@
       </div>
     </main>
     <footer class="noscroll" aria-label="pied de page et liens vers CGU, mentions, sources et risques">
-      <div id="parterre" role="img" aria-label="image d'un parterre de fleurs qui fleurit">
+      <div id="parterre" role="img" aria-label="image d'un parterre de fleurs qui fleurit" aria-live="off">
         <pre class="center">
 
 
@@ -1401,6 +1402,6 @@ _ `  ^ ¨  ·  _ -  "             ` *     -     ; - _
     </footer>
   </div>
   <!-- script animations -->
-  <script src="script-bon.js"></script>
+  <script src="script-v2.js"></script>
 </body>
 </html>

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