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

not displaying button when prefers-reduced-motion is set to reduce #30

Browse source
This commit is contained in:
Adrian Rosin 2024-02-19 09:48:41 +01:00
parent 47a8f70c00
commit 489e7b9e4f
1 changed files with 30 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
static/script-bon.js
View file

@ -6,6 +6,8 @@ document.addEventListener('DOMContentLoaded', function() {
function setupPage() { function setupPage() {
// Checks if the user didn't enable prefers-reduced-motion // Checks if the user didn't enable prefers-reduced-motion
let animationEnabled = window.matchMedia('(prefers-reduced-motion: no-preference)').matches; let animationEnabled = window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
// Boolean to keep track of current animation state, starts at true because it is linked to the button which is only displayed when animationEnabled is true
let currentAnimationState = true;
// 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
@ -93,7 +95,7 @@ function setupPage() {
function toggleAnimation() { function toggleAnimation() {
// Play or pause the animations based on current state // Play or pause the animations based on current state
if (animationEnabled) { if (currentAnimationState) {
// Pause the animations // Pause the animations
toggleable.style.display = 'none'; toggleable.style.display = 'none';
imgTopToggleable.style.display = 'block'; imgTopToggleable.style.display = 'block';
@ -111,17 +113,18 @@ function setupPage() {
}); });
} }
// Toggle animation state // Toggle animation state
animationEnabled = !animationEnabled; currentAnimationState = !currentAnimationState;
} }
let lastScrollTop = 0; let lastScrollTop = 0;
let isCallbackRegistered = false; let isCallbackRegistered = false;
window.addEventListener("scroll", function() { window.addEventListener("scroll", function() {
if (!isCallbackRegistered) {
window.requestAnimationFrame(function() {
let currentPosition = window.scrollY || document.documentElement.scrollTop;
const toggleButton = document.querySelectorAll('.toggleButton'); const toggleButton = document.querySelectorAll('.toggleButton');
if (animationEnabled) {
if (!isCallbackRegistered) {
window.requestAnimationFrame(function () {
let currentPosition = window.scrollY || document.documentElement.scrollTop;
if (currentPosition > lastScrollTop) { if (currentPosition > lastScrollTop) {
// Scroll down // Scroll down
@ -140,5 +143,11 @@ function setupPage() {
isCallbackRegistered = true; isCallbackRegistered = true;
} }
}
else {
toggleButton.forEach(button => {
button.style.display = "none";
});
}
}); });
} }