bouton play/pause done. TODO: dark/light theme switcher
This commit is contained in:
parent
743162a4b5
commit
db9b798db7
2 changed files with 111 additions and 6 deletions
|
|
@ -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>
|
||||
|
|
|
|||
104
static/script-v2.js
Normal file
104
static/script-v2.js
Normal file
|
|
@ -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 = "[⏵]";
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue