From a396d36509ff2575cfdf26ca7a36a67780334bc3 Mon Sep 17 00:00:00 2001 From: Adrian Rosin Date: Tue, 30 Jan 2024 11:04:34 +0100 Subject: [PATCH] WIP pause the animation via button --- static/css/layout.css | 45 +- static/index.html | 1131 +++++++++++++++++++++-------------------- static/script-bon.js | 81 ++- 3 files changed, 686 insertions(+), 571 deletions(-) diff --git a/static/css/layout.css b/static/css/layout.css index 6b754b3..0094ac1 100644 --- a/static/css/layout.css +++ b/static/css/layout.css @@ -119,6 +119,31 @@ footer { margin-bottom: var(--med_margin) } +.toggleButton { + position: fixed; + top: 1rem; + right: 1rem; + z-index: 999; /* Assure que le bouton est au-dessus du contenu */ +} + +.toggleable { + padding-top: 1rem; + color: black; + cursor: pointer; +} + +.img_top_toggleable { + display: none; + position: absolute; + top: 1rem; + right: 0; /* Position en haut à droite */ + z-index: 99; + background-color: var(--day-background); + color: darkgreen; + cursor: pointer; +} + + /* MENU */ nav#menu{ background-color: var(--day-background); @@ -130,6 +155,20 @@ nav#menu{ right: 1rem; } +/*.sr-only { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + -webkit-clip-path: inset(50%) !important; + clip-path: inset(50%) !important; + height: 1px !important; + margin: -1px !important; + overflow: hidden !important; + padding: 0 !important; + position: absolute !important; + width: 1px !important; + white-space: nowrap !important; +}*/ + .icone > pre{ padding-top: 1rem; color: black; @@ -236,12 +275,16 @@ pre.center > a{ /* THEME SOMBRE */ @media (prefers-color-scheme: dark) { - div#container, nav#menu, body{ + div#container, nav#menu, body, nav#play{ background-color: var(--night-background); } p, pre, ul, li, a, a:hover, h1, h2, footer{ color: var(--txt-night); } + .img_top_toggleable, .toggleable { + color: var(--txt-night); + background-color: var(--night-background); + } .highlight{ color: var(--night-highlight-color); background-color: var(--night-highlight-bg); diff --git a/static/index.html b/static/index.html index 72474fd..2f10ee3 100644 --- a/static/index.html +++ b/static/index.html @@ -7,98 +7,113 @@ --> - - - - - + + + + + - - - + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - + + + - Deuxfleurs : fabriquons un internet convivial + Deuxfleurs : fabriquons un internet convivial - - - - + + + + - -
+

💮💮 deuxfleurs

@@ -106,9 +121,10 @@
- -

Fabriquons un internet convivial ⤵

-
-

Avec nos propres infrastructures

-
- +
-
- - +
+ + diff --git a/static/script-bon.js b/static/script-bon.js index 5458968..8f416b0 100644 --- a/static/script-bon.js +++ b/static/script-bon.js @@ -1,44 +1,99 @@ +// State of the animation +let animationPaused = false; +// Dictionary to keep track of animation intervals +let animationIntervals = {}; + +document.getElementById('toggleAnimation').addEventListener('click', function() { + const button = document.getElementById('toggleAnimation'); + + if (animationPaused) { + button.textContent = 'Pause'; + animationPaused = false; + // Play the animation + Object.keys(animationIntervals).forEach(id => { + animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length); + }); + } else { + button.textContent = 'Play'; + animationPaused = true; + // Pause the animation + Object.keys(animationIntervals).forEach(id => { + clearInterval(animationIntervals[id]); + }); + } +}); + +// Dictionary to keep track of delay count for each animation +let delays = {}; +// Dictionary to keep track of frame for each animation +let frames = {}; // dictionary to keep track of frame count for each animation let frameCounts = {}; + function animate(id, delay) { // get the container and frames for the amination const container = document.getElementById(id); - const frames = container.children; + const framesList = container.children; // set up the frame counter frameCounts[id] = 0; // hide all frames except for the first - frames[0].style.display = "flex"; - for (let i = 1; i < frames.length; i++) { - frames[i].style.display = "none"; + framesList[0].style.display = "flex"; + for (let i = 1; i < framesList.length; i++) { + framesList[i].style.display = "none"; } - // start the animation - const interval = setInterval(updateAnimation, delay, id, frames, frames.length); + // Stock frames and delay in dictionaries + frames[id] = framesList; + delays[id] = delay; + // start the animation + animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length); } -function updateAnimation(id, frames, totalFrames) { +function updateAnimation(id, framesList, totalFrames) { // increment the frame counter for the given id frameCounts[id] = (frameCounts[id] + 1) % totalFrames; // show the next frame - frames[frameCounts[id]].style.display = "flex"; + framesList[frameCounts[id]].style.display = "flex"; // hide the previous frame - if (frameCounts[id] == 0) { - frames[totalFrames - 1].style.display = "none"; + if (frameCounts[id] === 0) { + framesList[totalFrames - 1].style.display = "none"; } else { - frames[frameCounts[id] - 1].style.display = "none"; + framesList[frameCounts[id] - 1].style.display = "none"; } - } animate("illustration-accueil", 500); animate("rennes", 1000); animate("orsay", 2000); -animate("parterre", 1500); \ No newline at end of file +animate("parterre", 1500); + +document.addEventListener('DOMContentLoaded', function() { + const toggleableElements = document.querySelectorAll('.toggleable, .img_top_toggleable'); + toggleableElements.forEach(function(element) { + element.addEventListener('click', function() { + toggleAnimation(); + }); + }); +}); + +function toggleAnimation() { + const toggleable = document.querySelector('.toggleable'); + const imgTopToggleable = document.querySelector('.img_top_toggleable'); + + if (toggleable.style.display === 'none') { + toggleable.style.display = 'block'; + imgTopToggleable.style.display = 'none'; + } else { + toggleable.style.display = 'none'; + imgTopToggleable.style.display = 'block'; + } +} +