From 013f315c50d60b441c8ec114949c04114f966318 Mon Sep 17 00:00:00 2001 From: Adrian Rosin Date: Wed, 7 Feb 2024 09:52:32 +0100 Subject: [PATCH] improved performance of the script for the loading of it and the scroll event listener --- static/script-bon.js | 239 ++++++++++++++++++++++--------------------- 1 file changed, 125 insertions(+), 114 deletions(-) diff --git a/static/script-bon.js b/static/script-bon.js index d4da35f..87cf859 100644 --- a/static/script-bon.js +++ b/static/script-bon.js @@ -1,138 +1,149 @@ +async function setupPage() { + // 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 -let animationIntervals = {}; + let animationIntervals = {}; // Dictionary to keep track of delay count for each animation -let delays = {}; + let delays = {}; // Dictionary to keep track of frame for each animation -let frames = {}; + let frames = {}; // dictionary to keep track of frame count for each animation -let frameCounts = {}; + let frameCounts = {}; -const illustrationAccueil = document.getElementById('illustration-accueil'); -const rennes = document.getElementById('rennes'); -const orsay = document.getElementById('orsay'); -const parterre = document.getElementById('parterre'); + const illustrationAccueil = document.getElementById('illustration-accueil'); + const rennes = document.getElementById('rennes'); + const orsay = document.getElementById('orsay'); + const parterre = document.getElementById('parterre'); // Update ARIA live attributes based on prefers-reduced-motion -function updateARIALiveAttributes() { - if (prefersReducedMotion) { - 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'); - } -} - - -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"; + function updateARIALiveAttributes() { + if (prefersReducedMotion) { + 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'); + } } - // Stock frames and delay in dictionaries - frames[id] = framesList; - delays[id] = delay; - // Update ARIA live attributes - updateARIALiveAttributes(); + function animate(id, delay) { - // Start the animation if prefers-reduced-motion is not enabled - if (!prefersReducedMotion) { - animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length); + // 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 + 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 - frameCounts[id] = (frameCounts[id] + 1) % totalFrames; + // increment the frame counter for the given id + frameCounts[id] = (frameCounts[id] + 1) % totalFrames; - // show the next frame - framesList[frameCounts[id]].style.display = "flex"; + // 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"; + // hide the previous frame + if (frameCounts[id] === 0) { + framesList[totalFrames - 1].style.display = "none"; + } else { + framesList[frameCounts[id] - 1].style.display = "none"; + } } -} -animate("illustration-accueil", 500); -animate("rennes", 1000); -animate("orsay", 2000); -animate("parterre", 1500); + animate("illustration-accueil", 500); + animate("rennes", 1000); + animate("orsay", 2000); + animate("parterre", 1500); -document.addEventListener('DOMContentLoaded', function() { - const toggleableElements = document.querySelectorAll('.toggleable, .img_top_toggleable'); - toggleableElements.forEach(function(element) { - element.addEventListener('click', function() { - toggleAnimation(); + 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'); + // 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 - -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); - +// Loads the script once the document is ready +document.addEventListener('DOMContentLoaded', setupPage);