Compare commits
2 commits
main
...
feat/heade
| Author | SHA1 | Date | |
|---|---|---|---|
| db9b798db7 | |||
| 743162a4b5 |
4 changed files with 158 additions and 36 deletions
|
|
@ -118,6 +118,25 @@ div#container {
|
||||||
header {
|
header {
|
||||||
grid-area: header-start / main-col-sep 1 / header-end / main-col-sep 12;
|
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 */
|
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 */
|
/* PIED DE PAGE */
|
||||||
|
|
@ -251,7 +270,7 @@ pre.center > a {
|
||||||
div#container, nav#menu, body {
|
div#container, nav#menu, body {
|
||||||
background-color: var(--night-background);
|
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);
|
color: var(--txt-night);
|
||||||
}
|
}
|
||||||
.highlight {
|
.highlight {
|
||||||
|
|
|
||||||
|
|
@ -107,11 +107,3 @@
|
||||||
<li><a href="https://bbb.paquerette.eu/b/dom-67q-irl-nfc">Réunion mensuelle du collectif CHATONS</a> en ligne, <span class="highlight">le 9 juillet 2024 à 20h00</span>.<br>Une fois par mois a lieu une réunion entre les membres du collectif <a href=https://www.chatons.org/>CHATONS</a>, à laquelle nous participons.</li>
|
<li><a href="https://bbb.paquerette.eu/b/dom-67q-irl-nfc">Réunion mensuelle du collectif CHATONS</a> en ligne, <span class="highlight">le 9 juillet 2024 à 20h00</span>.<br>Une fois par mois a lieu une réunion entre les membres du collectif <a href=https://www.chatons.org/>CHATONS</a>, à laquelle nous participons.</li>
|
||||||
<li><a href="https://libreto.sans-nuage.fr/campchatons2024/">Camp CHATONS</a> à Sévérac, <span class="highlight">du 11 au 15 juillet</span>.<br>Chaque année, les membres du collectif CHATONS se réunissent en présentiel pour aborder les grands sujets à son propos et partager des moments conviviaux. Vous y verrez Adrien.</li>
|
<li><a href="https://libreto.sans-nuage.fr/campchatons2024/">Camp CHATONS</a> à Sévérac, <span class="highlight">du 11 au 15 juillet</span>.<br>Chaque année, les membres du collectif CHATONS se réunissent en présentiel pour aborder les grands sujets à son propos et partager des moments conviviaux. Vous y verrez Adrien.</li>
|
||||||
<li><a href="#">Permanence associative autour du Libre</a> au Café Citoyen à Lille, <span class="highlight">le 30 juillet 2024 à 19h30</span>.<br>La permanence associative autour du Libre est une manifestation conviviale, ouverte à toutes et tous, organisée le dernier mardi de chaque mois, et regroupant les collectifs Chtinux, Raoull, Deuxfleurs, Mycélium, CLX et Cliss XXI.</li>
|
<li><a href="#">Permanence associative autour du Libre</a> au Café Citoyen à Lille, <span class="highlight">le 30 juillet 2024 à 19h30</span>.<br>La permanence associative autour du Libre est une manifestation conviviale, ouverte à toutes et tous, organisée le dernier mardi de chaque mois, et regroupant les collectifs Chtinux, Raoull, Deuxfleurs, Mycélium, CLX et Cliss XXI.</li>
|
||||||
|
|
||||||
<!-- Août 2024 -->
|
|
||||||
<li><a href="https://jitsi.deuxfleurs.fr/r%C3%A9union_mensuelle_deuxfleurs">Réunion mensuelle « au coin du feu »</a> en ligne, <span class="highlight">le 6 août 2024 à 19h00</span>.<br>Une fois par mois nous organisons une réunion en ligne informelle. C'est le bon moment pour venir faire un coucou si vous voulez parler à des gens de vive voix numérique.</li>
|
|
||||||
<!-- Septembre 2024 -->
|
|
||||||
<li><a href="https://jitsi.deuxfleurs.fr/r%C3%A9union_mensuelle_deuxfleurs">Réunion mensuelle « au coin du feu »</a> en ligne, <span class="highlight">le 3 septembre 2024 à 19h00</span>.<br>Une fois par mois nous organisons une réunion en ligne informelle. C'est le bon moment pour venir faire un coucou si vous voulez parler à des gens de vive voix numérique.</li>
|
|
||||||
<li><a href="https://www.agendadulibre.org/events/30486">Numérique libre à la Braderie de Lille</a> au village associatif du Café Citoyen, <span class="highlight">du 14 septembre 2024 à 10h au 15 à 18h</span>.<br>Le spot le plus cool durant la Braderie de Lille, c'est le Café Citoyen (ses spectacles qualitatifs y surpassent de loin les articles vendus trop chers par les brocanteurs que vous trouverez ailleurs). Le spot le plus cool au Café Citoyen, c'est son village associatif. Mais alors la cerise sur le gâteau, c'est sans doute le stand sur les libertés numériques tenu par les collectifs de Chtinux (Raoull, Deuxfleurs, Mycélium, CLX et Cliss XXI...). Venez dire bonjour, vous serez bien reçu⋅e !</li>
|
|
||||||
<li><a href="https://fete.humanite.fr/">Fête de l'Humanité</a> à la base 217 à Bretigny-sur-Orge, <span class="highlight">le 14 et 15 septembre 2024</span>.<br>Plus qu'un festival de musique, la fête de l'Humanité est un rendez-vous important des forces militantes sur un peu tous les sujets. Si vous souhaitez y rencontrer Vincent, n'hésitez pas à nous contacter par courriel auparavant pour que l'on s'organise et que l'on ne se rate pas.</li>
|
|
||||||
<li><a href="https://www.agendadulibre.org/events/30485">Permanence associative autour du Libre</a> au Café Citoyen à Lille, <span class="highlight">le 24 septembre 2024 à 19h30</span>.<br>La permanence associative autour du Libre est une manifestation conviviale, ouverte à toutes et tous, organisée le dernier mardi de chaque mois, et regroupant les collectifs de Chtinux (Raoull, Deuxfleurs, Mycélium, CLX, Cliss XXI...).</li>
|
|
||||||
|
|
|
||||||
|
|
@ -102,11 +102,16 @@
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<h1 id="deuxfleurs"><span role="img" aria-label="2 emojis fleur blanche">💮💮 </span>deuxfleurs</h1>
|
<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>
|
</header>
|
||||||
|
|
||||||
<main aria-label="contenu de la page web">
|
<main aria-label="contenu de la page web">
|
||||||
<div id="jardin">
|
<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 -->
|
<!-- séquences de l'animation qui est lancée grâce à l'avant avant dernière ligne -->
|
||||||
<pre class="center">
|
<pre class="center">
|
||||||
'\ ; /'
|
'\ ; /'
|
||||||
|
|
@ -490,7 +495,7 @@
|
||||||
<p>Fabriquons un internet convivial ⤵</p>
|
<p>Fabriquons un internet convivial ⤵</p>
|
||||||
</div>
|
</div>
|
||||||
<h2 id="infras"><span class="decoration" aria-hidden="true"></span>Avec nos propres infrastructures<span class="decoration" aria-hidden="true"></span></h2>
|
<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 ?-->
|
<!--diode qui clignote ?-->
|
||||||
<pre class="center">/¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨\
|
<pre class="center">/¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨\
|
||||||
| || || || |
|
| || || || |
|
||||||
|
|
@ -643,7 +648,7 @@
|
||||||
| \\ |
|
| \\ |
|
||||||
\_______________________________________________________________________________/</pre>
|
\_______________________________________________________________________________/</pre>
|
||||||
</div>
|
</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">/¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨\
|
<pre class="center">/¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨\
|
||||||
| |
|
| |
|
||||||
| |
|
| |
|
||||||
|
|
@ -864,12 +869,12 @@
|
||||||
<p lang="fr">Pour accéder à nos services ou simplement discuter avec nous, écrivez à <span class="highlight">coucou[@]deuxfleurs.fr</span>, rejoignez-nous sur le salon Matrix <span class="highlight">#deuxfleurs:deuxfleurs.fr</span> ou rencontrez-nous à : </p>
|
<p lang="fr">Pour accéder à nos services ou simplement discuter avec nous, écrivez à <span class="highlight">coucou[@]deuxfleurs.fr</span>, rejoignez-nous sur le salon Matrix <span class="highlight">#deuxfleurs:deuxfleurs.fr</span> ou rencontrez-nous à : </p>
|
||||||
<ul>
|
<ul>
|
||||||
<!-- L'historique des événements passés est sur evenements_passes.html -->
|
<!-- L'historique des événements passés est sur evenements_passes.html -->
|
||||||
<!-- Octobre 2024 -->
|
<!-- Août 2024 -->
|
||||||
<li><a href="https://jitsi.deuxfleurs.fr/r%C3%A9union_mensuelle_deuxfleurs">Réunion mensuelle « au coin du feu »</a> en ligne, <span class="highlight">le 1 octobre 2024 à 19h00</span>.<br>Une fois par mois nous organisons une réunion en ligne informelle. C'est le bon moment pour venir faire un coucou si vous voulez parler à des gens de vive voix numérique.</li>
|
<li><a href="https://jitsi.deuxfleurs.fr/r%C3%A9union_mensuelle_deuxfleurs">Réunion mensuelle « au coin du feu »</a> en ligne, <span class="highlight">le 6 août 2024 à 19h00</span>.<br>Une fois par mois nous organisons une réunion en ligne informelle. C'est le bon moment pour venir faire un coucou si vous voulez parler à des gens de vive voix numérique.</li>
|
||||||
<li><a href="https://forumdepartementaldessciences.fr/evenements/exposition-numerique-en-eaux-troubles/">Vernissage de l'exposition « Numérique en eaux troubles »</a>, au forum des sciences à Villeneuve-d'Ascq, <span class="highlight">le 11 octobre 2024 à 17h00</span>.<br>Inauguration de cette exposition abordant l'impact des divers aspects du numérique sur les ressources en eau. Parmis ses responsables scientifiques, vous y verrez Adrien.</li>
|
<!-- Septembre 2024 -->
|
||||||
<!-- Novembre 2024 -->
|
<li><a href="https://jitsi.deuxfleurs.fr/r%C3%A9union_mensuelle_deuxfleurs">Réunion mensuelle « au coin du feu »</a> en ligne, <span class="highlight">le 3 septembre 2024 à 19h00</span>.<br>Une fois par mois nous organisons une réunion en ligne informelle. C'est le bon moment pour venir faire un coucou si vous voulez parler à des gens de vive voix numérique.</li>
|
||||||
<li><a href="https://jitsi.deuxfleurs.fr/r%C3%A9union_mensuelle_deuxfleurs">Réunion mensuelle « au coin du feu »</a> en ligne, <span class="highlight">le 5 novembre 2024 à 19h00</span>.<br>Une fois par mois nous organisons une réunion en ligne informelle. C'est le bon moment pour venir faire un coucou si vous voulez parler à des gens de vive voix numérique.</li>
|
<li><a href="https://www.agendadulibre.org/events/30486">Numérique libre à la Braderie de Lille</a> au village associatif du Café Citoyen, <span class="highlight">du 14 septembre 2024 à 10h au 15 à 18h</span>.<br>Le spot le plus cool durant la Braderie de Lille, c'est le Café Citoyen (ses spectacles qualitatifs y surpassent de loin les articles vendus trop chers par les brocanteurs que vous trouverez ailleurs). Le spot le plus cool au Café Citoyen, c'est son village associatif. Mais alors la cerise sur le gâteau, c'est sans doute le stand sur les libertés numériques tenu par les collectifs de Chtinux (Raoull, Deuxfleurs, Mycélium, CLX et Cliss XXI...). Venez dire bonjour, vous serez bien reçu⋅e !</li>
|
||||||
<li><a href="https://capitoledulibre.org">Capitole du libre</a>, à l'ENSEEIHT à Toulouse, <span class="highlight">le 16 et 17 novembre 2024</span>.<br>Conférence annuelle dédiée au logiciel libre et à sa communauté, ouverte à tout public, et ceci gratuitement. N'hésitez pas à venir discuter avec Vincent.</li>
|
<li><a href="https://www.agendadulibre.org/events/30485">Permanence associative autour du Libre</a> au Café Citoyen à Lille, <span class="highlight">le 24 septembre 2024 à 19h30</span>.<br>La permanence associative autour du Libre est une manifestation conviviale, ouverte à toutes et tous, organisée le dernier mardi de chaque mois, et regroupant les collectifs de Chtinux (Raoull, Deuxfleurs, Mycélium, CLX, Cliss XXI...).</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="calendrier">
|
<div id="calendrier">
|
||||||
|
|
@ -879,42 +884,44 @@
|
||||||
-->
|
-->
|
||||||
<div id="mois_actuel" role="img" aria-label="calendrier de nos jours de permanence prévus pour ce mois-ci">
|
<div id="mois_actuel" role="img" aria-label="calendrier de nos jours de permanence prévus pour ce mois-ci">
|
||||||
<pre aria-hidden="true">.——————————————————————————————————————.
|
<pre aria-hidden="true">.——————————————————————————————————————.
|
||||||
| CALENDRIER OCTOBRE 2024 |
|
| CALENDRIER AOÛT 2024 |
|
||||||
|——————————————————————————————————————|
|
|——————————————————————————————————————|
|
||||||
| ———— ———— ———— ———— ———— ———— |
|
| ———— ———— ———— ———— |
|
||||||
| |<span class="highlight"> 01 </span>| 02 | 03 | 04 | 05 | 06 | |
|
| | 01 | 02 | 03 | 04 | |
|
||||||
| ———— ———— ———— ———— ———— ———— ———— |
|
| ———— ———— ———— ———— ———— ———— ———— |
|
||||||
| | 07 | 08 | 09 | 10 |<span class="highlight"> 11 </span>| 12 | 13 | |
|
| | 05 |<span class="highlight"> 06 </span>| 07 | 08 | 09 | 10 | 11 | |
|
||||||
| ———— ———— ———— ———— ———— ———— ———— |
|
| ———— ———— ———— ———— ———— ———— ———— |
|
||||||
| | 14 | 15 | 16 | 17 | 18 | 19 | 20 | |
|
| | 12 | 13 | 14 | 15 | 16 | 17 | 18 | |
|
||||||
| ———— ———— ———— ———— ———— ———— ———— |
|
| ———— ———— ———— ———— ———— ———— ———— |
|
||||||
| | 21 | 22 | 23 | 24 | 25 | 26 | 27 | |
|
| | 19 | 20 | 21 | 22 | 23 | 24 | 25 | |
|
||||||
| ———— ———— ———— ———— ———— ———— ———— |
|
| ———— ———— ———— ———— ———— ———— ———— |
|
||||||
| | 28 | 29 | 30 | 31 | |
|
| | 26 | 27 | 28 | 29 | 30 | 31 | |
|
||||||
| ———— ———— ———— ———— |
|
| ———— ———— ———— ———— ———— ———— |
|
||||||
|______________________________________|</pre>
|
|______________________________________|</pre>
|
||||||
</div>
|
</div>
|
||||||
<div id="mois_suivant" role="img" aria-label="calendrier de nos jours de permanence prévus pour le mois prochain">
|
<div id="mois_suivant" role="img" aria-label="calendrier de nos jours de permanence prévus pour le mois prochain">
|
||||||
<pre aria-hidden="true">.——————————————————————————————————————.
|
<pre aria-hidden="true">.——————————————————————————————————————.
|
||||||
| CALENDRIER NOVEMBRE 2024 |
|
| CALENDRIER SEPTEMBRE 2024 |
|
||||||
|——————————————————————————————————————|
|
|——————————————————————————————————————|
|
||||||
| ———— ———— ———— |
|
| ———— |
|
||||||
| | 01 | 02 | 03 | |
|
| | 01 | |
|
||||||
| ———— ———— ———— ———— ———— ———— ———— |
|
| ———— ———— ———— ———— ———— ———— ———— |
|
||||||
| | 04 |<span class="highlight"> 05 </span>| 06 | 07 | 08 | 09 | 10 | |
|
| | 02 |<span class="highlight"> 03 </span>| 04 | 05 | 06 | 07 | 08 | |
|
||||||
| ———— ———— ———— ———— ———— ———— ———— |
|
| ———— ———— ———— ———— ———— ———— ———— |
|
||||||
| | 11 | 12 | 13 | 14 | 15 |<span class="highlight"> 16 | 17 </span>| |
|
| | 09 | 10 | 11 | 12 | 13 |<span class="highlight"> 14 | 15 </span>| |
|
||||||
| ———— ———— ———— ———— ———— ———— ———— |
|
| ———— ———— ———— ———— ———— ———— ———— |
|
||||||
| | 18 | 19 | 20 | 21 | 22 | 23 | 24 | |
|
| | 16 | 17 | 18 | 19 | 20 | 21 | 22 | |
|
||||||
| ———— ———— ———— ———— ———— ———— ———— |
|
| ———— ———— ———— ———— ———— ———— ———— |
|
||||||
| | 25 | 26 | 27 | 28 | 29 | 30 | |
|
| | 23 |<span class="highlight"> 24 </span>| 25 | 26 | 27 | 28 | 29 | |
|
||||||
| ———— ———— ———— ———— ———— ———— |
|
| ———— ———— ———— ———— ———— ———— ———— |
|
||||||
|
| | 30 | |
|
||||||
|
| ———— |
|
||||||
|______________________________________|</pre>
|
|______________________________________|</pre>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<footer class="noscroll" aria-label="pied de page et liens vers CGU, mentions, sources et risques">
|
<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">
|
<pre class="center">
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1390,6 +1397,6 @@ _ ` ^ ¨ · _ - " ` * - ; - _
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
<!-- script animations -->
|
<!-- script animations -->
|
||||||
<script src="script-bon.js"></script>
|
<script src="script-v2.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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