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

static/css/home.css

@@ -28,6 +28,11 @@ div#jardin p {
   justify-content: center;
 }
 
+nav#sommaire {
+  text-align: center;
+  margin-top: var(--med_margin);
+}
+
 h2#infras {
   background-color: var(--infras);
   grid-area: title-start 1 / col-sep 1 / title-end 1 / col-sep 12;
@@ -390,6 +395,7 @@ div#blog {
     grid-area: row-start / col-sep 1 / jardin-end / col-sep 11;
   }
 
+
   nav#menu {
     position: fixed;
     width: 100%;
@@ -532,7 +538,7 @@ div#blog {
     font-size: 0.85rem;
   }
 
-  #liens {
+  nav#liens {
     text-align: center;
     margin-bottom: 12rem;
   }

static/css/layout.css

@@ -118,6 +118,25 @@ div#container {
 header {
   grid-area: header-start / main-col-sep 1 / header-end / main-col-sep 12;
   z-index: 1; /* Pour le mettre au dessus de l'illustration jardin et que l'on puisse sélectionner son contenu */
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+}
+
+/* -> boutons thème et pause */
+#toolbar {
+  margin-right: var(--big_margin);
+}
+#toolbar > a {
+  text-decoration: none;
+}
+
+#toolbar > a:hover, #toolbar > a:active {
+  text-decoration: underline;
+}
+
+#toolbar .hidden {
+  display: none;
 }
 
 /* PIED DE PAGE */
@@ -251,7 +270,7 @@ pre.center > a {
   div#container, nav#menu, body {
     background-color: var(--night-background);
   }
-  p, pre, ul, li, a, a:hover, h1, h2, footer {
+  p, pre, ul, li, a, a:hover, h1, h2, header, footer, nav {
     color: var(--txt-night);
   }
   .highlight {

static/index.html

@@ -102,11 +102,16 @@
 
     <header>
         <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="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">
                                          '\ ; /'
@@ -488,9 +493,14 @@
                                                     </pre>
         </div>
         <p>Fabriquons un internet convivial ⤵</p>
+
+        <nav id="sommaire" aria-label="sommaire">
+          <a href="#infras">Infrastructures</a><span role="separator"> · </span><a href="#outils">Services</a><span role="separator"> · </span><a href="#valeurs">Valeurs</a><span role="separator"> · </span><a href="#connaissance">Faisons connaissance</a>
+        </nav>
       </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">/¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨\
 |                        ||             ||             ||                       |
@@ -643,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">/¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨\
 |                                                                               |
 |                                                                               |
@@ -916,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">
 
 
@@ -1386,12 +1396,12 @@ _ `  ^ ¨  ·  _ -  "             ` *     -     ; - _
 
                                                                                                                                                                  </pre>
       </div>
-      <div id="liens">
+      <nav id="liens" aria-label="liens de pied de page">
         <a href="https://guide.deuxfleurs.fr/vie_associative/cgu/">CGU</a><span role="separator"> · </span><a href="https://guide.deuxfleurs.fr/vie_associative/gestion-des-risques/">Gestion des risques</a><span role="separator"> · </span><a href="https://guide.deuxfleurs.fr/vie_associative/mentions-legales">Mentions légales</a><span role="separator"> · </span><a href="https://guide.deuxfleurs.fr/operations/sources">Sources</a><span role="separator"> · </span><a href="https://guide.deuxfleurs.fr/vie_associative/nous-rejoindre/">Nous rejoindre</a>
-      </div>
+      </nav>
     </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 = "[⏵]";
+  }
+}