Deuxfleurs/site
20
2
Fork 6
Code Issues 4 Pull requests 7 Releases Wiki Activity

WIP: feat/PausePlayButton closes #16, #30 #34

Draft
adrian wants to merge 16 commits from adrian/site:feat/PausePlayButton into feat/a11y
pull from: adrian/site:feat/PausePlayButton
merge into: Deuxfleurs:feat/a11y
Conversation 1 Commits 16 Files changed 4 +125 -114
1 changed files with 125 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 013f315c50 - Show all commits

239
static/script-bon.js
View file

@ -1,138 +1,149 @@
async function setupPage() {
// Checks if the user enabled prefers-reduced-motion // Checks if the user enabled prefers-reduced-motion
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// Dictionary to keep track of animation intervals // Dictionary to keep track of animation intervals
let animationIntervals = {}; let animationIntervals = {};
// Dictionary to keep track of delay count for each animation // Dictionary to keep track of delay count for each animation
let delays = {}; let delays = {};
// Dictionary to keep track of frame for each animation // Dictionary to keep track of frame for each animation
let frames = {}; let frames = {};
// dictionary to keep track of frame count for each animation // dictionary to keep track of frame count for each animation
let frameCounts = {}; let frameCounts = {};
const illustrationAccueil = document.getElementById('illustration-accueil'); const illustrationAccueil = document.getElementById('illustration-accueil');
const rennes = document.getElementById('rennes'); const rennes = document.getElementById('rennes');
const orsay = document.getElementById('orsay'); const orsay = document.getElementById('orsay');
const parterre = document.getElementById('parterre'); const parterre = document.getElementById('parterre');
// Update ARIA live attributes based on prefers-reduced-motion // Update ARIA live attributes based on prefers-reduced-motion
function updateARIALiveAttributes() { function updateARIALiveAttributes() {
if (prefersReducedMotion) { if (prefersReducedMotion) {
illustrationAccueil.setAttribute('aria-live', 'off'); illustrationAccueil.setAttribute('aria-live', 'off');
rennes.setAttribute('aria-live', 'off'); rennes.setAttribute('aria-live', 'off');
orsay.setAttribute('aria-live', 'off'); orsay.setAttribute('aria-live', 'off');
parterre.setAttribute('aria-live', 'off'); parterre.setAttribute('aria-live', 'off');
} else { } else {
illustrationAccueil.setAttribute('aria-live', 'polite'); illustrationAccueil.setAttribute('aria-live', 'polite');
rennes.setAttribute('aria-live', 'polite'); rennes.setAttribute('aria-live', 'polite');
orsay.setAttribute('aria-live', 'polite'); orsay.setAttribute('aria-live', 'polite');
parterre.setAttribute('aria-live', 'polite'); parterre.setAttribute('aria-live', 'polite');
} }
}
function animate(id, delay) {
// get the container and frames for the amination
const container = document.getElementById(id);
const framesList = container.children;
// set up the frame counter
frameCounts[id] = 0;
// 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";
} }
// Stock frames and delay in dictionaries
frames[id] = framesList;
delays[id] = delay;
// Update ARIA live attributes function animate(id, delay) {
updateARIALiveAttributes();
// Start the animation if prefers-reduced-motion is not enabled // get the container and frames for the amination
if (!prefersReducedMotion) { const container = document.getElementById(id);
animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length); const framesList = container.children;
// set up the frame counter
frameCounts[id] = 0;
// 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";
}
// Stock frames and delay in dictionaries
frames[id] = framesList;
delays[id] = delay;
// Update ARIA live attributes
updateARIALiveAttributes();
// Start the animation if prefers-reduced-motion is not enabled
if (!prefersReducedMotion) {
animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length);
}
} }
}
function updateAnimation(id, framesList, totalFrames) { function updateAnimation(id, framesList, totalFrames) {
// increment the frame counter for the given id // increment the frame counter for the given id
frameCounts[id] = (frameCounts[id] + 1) % totalFrames; frameCounts[id] = (frameCounts[id] + 1) % totalFrames;
// show the next frame // show the next frame
framesList[frameCounts[id]].style.display = "flex"; framesList[frameCounts[id]].style.display = "flex";
// hide the previous frame // hide the previous frame
if (frameCounts[id] === 0) { if (frameCounts[id] === 0) {
framesList[totalFrames - 1].style.display = "none"; framesList[totalFrames - 1].style.display = "none";
} else { } else {
framesList[frameCounts[id] - 1].style.display = "none"; framesList[frameCounts[id] - 1].style.display = "none";
}
} }
}
animate("illustration-accueil", 500); animate("illustration-accueil", 500);
animate("rennes", 1000); animate("rennes", 1000);
animate("orsay", 2000); animate("orsay", 2000);
animate("parterre", 1500); animate("parterre", 1500);
document.addEventListener('DOMContentLoaded', function() { const toggleableElements = document.querySelectorAll('.toggleable, .img_top_toggleable');
const toggleableElements = document.querySelectorAll('.toggleable, .img_top_toggleable'); toggleableElements.forEach(function (element) {
toggleableElements.forEach(function(element) { element.addEventListener('click', function () {
element.addEventListener('click', function() { toggleAnimation();
toggleAnimation(); });
}); });
function toggleAnimation() {
const toggleable = document.querySelector('.toggleable');
const imgTopToggleable = document.querySelector('.img_top_toggleable');
// Play the animations
if (toggleable.style.display === 'none') {
illustrationAccueil.setAttribute('aria-live', 'polite');
rennes.setAttribute('aria-live', 'polite');
orsay.setAttribute('aria-live', 'polite');
parterre.setAttribute('aria-live', 'polite');
toggleable.style.display = 'block';
imgTopToggleable.style.display = 'none';
Object.keys(animationIntervals).forEach(id => {
animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length);
});
} else { // Pause the animations
illustrationAccueil.setAttribute('aria-live', 'off');
rennes.setAttribute('aria-live', 'off');
orsay.setAttribute('aria-live', 'off');
parterre.setAttribute('aria-live', 'off');
toggleable.style.display = 'none';
imgTopToggleable.style.display = 'block';
Object.keys(animationIntervals).forEach(id => {
clearInterval(animationIntervals[id]);
});
}
}
let lastScrollTop = 0;
let isScrolling = false;
window.addEventListener("scroll", function() {
if (!isScrolling) {
window.requestAnimationFrame(function() {
let currentPosition = window.scrollY || document.documentElement.scrollTop;
const toggleButton = document.querySelectorAll('.toggleButton');
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
isScrolling = false;
});
isScrolling = true;
}
}); });
});
function toggleAnimation() {
const toggleable = document.querySelector('.toggleable');
const imgTopToggleable = document.querySelector('.img_top_toggleable');
// Play the animations
if (toggleable.style.display === 'none') {
illustrationAccueil.setAttribute('aria-live', 'polite');
rennes.setAttribute('aria-live', 'polite');
orsay.setAttribute('aria-live', 'polite');
parterre.setAttribute('aria-live', 'polite');
toggleable.style.display = 'block';
imgTopToggleable.style.display = 'none';
Object.keys(animationIntervals).forEach(id => {
animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length);
});
} else { // Pause the animations
illustrationAccueil.setAttribute('aria-live', 'off');
rennes.setAttribute('aria-live', 'off');
orsay.setAttribute('aria-live', 'off');
parterre.setAttribute('aria-live', 'off');
toggleable.style.display = 'none';
imgTopToggleable.style.display = 'block';
Object.keys(animationIntervals).forEach(id => {
clearInterval(animationIntervals[id]);
});
}
} }
let lastScrollTop = 0; // Last position of the scroll // Loads the script once the document is ready
document.addEventListener('DOMContentLoaded', setupPage);
window.addEventListener("scroll", function() {
let currentPosition = window.pageYOffset || document.documentElement.scrollTop;
const toggleButton = document.querySelectorAll('.toggleButton');
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
}, false);