diff --git a/.gitignore b/.gitignore index 0e3d94f..a1c3f55 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ public/ node_modules/ *.swp .awsclirc +.idea diff --git a/static/css/layout.css b/static/css/layout.css index 6b754b3..0af453f 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; +} + +.toggleable { + padding-top: 1rem; + color: black; + cursor: pointer; +} + +.img_top_toggleable { + display: none; + position: absolute; + top: 1rem; + right: 0; + z-index: 99; + background-color: var(--day-background); + color: darkgreen; + cursor: pointer; +} + + /* MENU */ nav#menu{ background-color: var(--day-background); @@ -236,12 +261,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 9930a67..d6d432e 100644 --- a/static/index.html +++ b/static/index.html @@ -1,104 +1,120 @@ - - - - - + + + + + + - - - + + + - - - - - - + + + + + + - - - - - - + + + + + + - - - + + + - Deuxfleurs : fabriquons un internet convivial + Deuxfleurs : fabriquons un internet convivial - - - - + + + + - -
+ + +

💮💮 deuxfleurs

@@ -106,393 +122,393 @@
- -

Fabriquons un internet convivial ⤵

-
-

Avec nos propres infrastructures

-
- +
-
- - +
+ + diff --git a/static/script-bon.js b/static/script-bon.js index 5458968..4de3a0d 100644 --- a/static/script-bon.js +++ b/static/script-bon.js @@ -1,44 +1,166 @@ -// dictionary to keep track of frame count for each animation -let frameCounts = {}; +// Loads the script once the document is ready +document.addEventListener('DOMContentLoaded', function() { + setupPage(); +}); -function animate(id, delay) { +function setupPage() { + // Checks if the user didn't enable prefers-reduced-motion + let animationEnabled = window.matchMedia('(prefers-reduced-motion: no-preference)').matches; + // Boolean to keep track of current animation state + let currentAnimationState = true; + if (!animationEnabled) { + currentAnimationState = false; + } + console.log(currentAnimationState); + // Dictionary to keep track of animation intervals + let animationIntervals = {}; + // 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 = {}; + // Buttons for toggling + const toggleable = document.querySelector('.toggleable'); + const imgTopToggleable = document.querySelector('.img_top_toggleable'); - // get the container and frames for the amination - const container = document.getElementById(id); - const frames = container.children; + const illustrationAccueil = document.getElementById('illustration-accueil'); + const rennes = document.getElementById('rennes'); + const orsay = document.getElementById('orsay'); + const parterre = document.getElementById('parterre'); - // 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"; + // Update ARIA live attributes based on prefers-reduced-motion + function setARIALiveAttributes(isAnimated) { + if (isAnimated) { + illustrationAccueil.setAttribute('aria-live', 'off'); + rennes.setAttribute('aria-live', 'off'); + orsay.setAttribute('aria-live', 'off'); + parterre.setAttribute('aria-live', 'off'); + } else { + illustrationAccueil.setAttribute('aria-live', 'polite'); + rennes.setAttribute('aria-live', 'polite'); + orsay.setAttribute('aria-live', 'polite'); + parterre.setAttribute('aria-live', 'polite'); + } } - // start the animation - const interval = setInterval(updateAnimation, delay, id, frames, frames.length); + function animate(id, delay) { + // get the container and frames for the animation + const container = document.getElementById(id); + const framesList = container.children; -} + // set up the frame counter + frameCounts[id] = 0; -function updateAnimation(id, frames, totalFrames) { + // hide all frames except for the first + framesList[0].style.display = "flex"; + for (let i = 1; i < framesList.length; i++) { + framesList[i].style.display = "none"; + } - // increment the frame counter for the given id - frameCounts[id] = (frameCounts[id] + 1) % totalFrames; + // Stock frames and delay in dictionaries + frames[id] = framesList; + delays[id] = delay; - // show the next frame - frames[frameCounts[id]].style.display = "flex"; + // Update ARIA live attributes + setARIALiveAttributes(true); - // hide the previous frame - if (frameCounts[id] == 0) { - frames[totalFrames - 1].style.display = "none"; - } else { - frames[frameCounts[id] - 1].style.display = "none"; + animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length); } -} + function updateAnimation(id, framesList, totalFrames) { + // increment the frame counter for the given id + frameCounts[id] = (frameCounts[id] + 1) % totalFrames; -animate("illustration-accueil", 500); -animate("rennes", 1000); -animate("orsay", 2000); -animate("parterre", 1500); \ No newline at end of file + // show the next frame + framesList[frameCounts[id]].style.display = "flex"; + + // hide the previous frame + if (frameCounts[id] === 0) { + framesList[totalFrames - 1].style.display = "none"; + } else { + framesList[frameCounts[id] - 1].style.display = "none"; + } + } + console.log(currentAnimationState); + + // Start the animation if animation is enabled + if (currentAnimationState) { + animate("illustration-accueil", 500); + animate("rennes", 1000); + animate("orsay", 2000); + animate("parterre", 1500); + } + // Pause the animation if animation is disabled, initialization of the animation is necessary for the first time + else if(!currentAnimationState){ + animate("illustration-accueil", 500); + animate("rennes", 1000); + animate("orsay", 2000); + animate("parterre", 1500); + //Display the pause button at first + toggleable.style.display = 'none'; + imgTopToggleable.style.display = 'block'; + setARIALiveAttributes(false); + Object.keys(animationIntervals).forEach(id => { + clearInterval(animationIntervals[id]); + }); + } + + const toggleableElements = document.querySelectorAll('.toggleable, .img_top_toggleable'); + toggleableElements.forEach(function(element) { + element.addEventListener('click', function() { + toggleAnimation(); + }); + }); + + function toggleAnimation() { + // Play or pause the animations based on current state + if (currentAnimationState) { + // Pause the animations + toggleable.style.display = 'none'; + imgTopToggleable.style.display = 'block'; + setARIALiveAttributes(false); + Object.keys(animationIntervals).forEach(id => { + clearInterval(animationIntervals[id]); + }); + } else { + // Play the animations + toggleable.style.display = 'block'; + imgTopToggleable.style.display = 'none'; + setARIALiveAttributes(true); + Object.keys(animationIntervals).forEach(id => { + animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length); + }); + } + // Toggle animation state + currentAnimationState = !currentAnimationState; + } + + let lastScrollTop = 0; + let isCallbackRegistered = false; + + window.addEventListener("scroll", function() { + const toggleButton = document.querySelectorAll('.toggleButton'); + if (!isCallbackRegistered) { + window.requestAnimationFrame(function () { + let currentPosition = window.scrollY || document.documentElement.scrollTop; + + if (currentPosition > lastScrollTop) { + // Scroll down + toggleButton.forEach(button => { + button.style.display = "none"; + }); + } else { + // Scroll up + toggleButton.forEach(button => { + button.style.display = "block"; + }); + } + lastScrollTop = currentPosition <= 0 ? 0 : currentPosition; // For Mobile or negative scrolling + isCallbackRegistered = false; + }); + + isCallbackRegistered = true; + } + }); +}