diff options
| -rw-r--r-- | static/index.html | 13 | ||||
| -rw-r--r-- | static/script-v2.js | 104 |
2 files changed, 111 insertions, 6 deletions
diff --git a/static/index.html b/static/index.html index 8bb9899..c8b2ad6 100644 --- a/static/index.html +++ b/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"> '\ ; /' @@ -494,7 +495,7 @@ <p>Fabriquons un internet convivial ⤵</p> </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">/¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨\ | || || || | @@ -647,7 +648,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">/¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨\ | | | | @@ -920,7 +921,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"> @@ -1396,6 +1397,6 @@ _ ` ^ ¨ · _ - " ` * - ; - _ </footer> </div> <!-- script animations --> - <script src="script-bon.js"></script> + <script src="script-v2.js"></script> </body> </html> diff --git a/static/script-v2.js b/static/script-v2.js new file mode 100644 index 0000000..a730cdb --- /dev/null +++ b/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 = "[⏵]"; + } +} |