dbrun/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2026-01-30 16:31:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: support a11y disable blur

Browse Source
This commit is contained in:
ZhenShuo Leo
2025-07-21 16:09:50 +08:00
parent ec912c4a92
commit edbace7be0
9 changed files with 89 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
assets/js/background-blur.js
View File

@@ -1,10 +1,60 @@
(() => {
const script = document.currentScript;
const targetId = script?.getAttribute("data-target-id");
const scripts = document.querySelectorAll('script[data-target-id]');
const isA11yMode = () => {
return localStorage.getItem("a11yMode") === "true";
};
window.addEventListener("scroll", () => {
const scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
const backgroundBlur = document.getElementById(targetId);
backgroundBlur.style.opacity = scroll / 300;
const getScrollOpacity = (scrollDivisor) => {
const scrollY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
return scrollY / scrollDivisor;
};
const applyBlurState = (blurElement, scrollDivisor, targetId) => {
if (!blurElement) return;
const isMenuBlur = targetId === "menu-blur";
if (isA11yMode()) {
blurElement.setAttribute("aria-hidden", "true");
if (!isMenuBlur) {
blurElement.style.display = "none";
blurElement.style.opacity = "0";
} else {
blurElement.style.display = "";
blurElement.style.opacity = getScrollOpacity(scrollDivisor);
}
} else {
blurElement.style.display = "";
blurElement.style.opacity = getScrollOpacity(scrollDivisor);
blurElement.removeAttribute("aria-hidden");
}
};
scripts.forEach(script => {
const targetId = script.getAttribute("data-target-id");
const scrollDivisor = Number(script.getAttribute("data-scroll-divisor") || 300);
const blurElement = document.getElementById(targetId);
if (blurElement) {
blurElement.setAttribute("role", "presentation");
blurElement.setAttribute("tabindex", "-1");
applyBlurState(blurElement, scrollDivisor, targetId);
window.addEventListener("scroll", () => {
if (!isA11yMode() || targetId === "menu-blur") {
blurElement.style.opacity = getScrollOpacity(scrollDivisor);
}
});
}
});
window.toggleA11yMode = function() {
localStorage.setItem("a11yMode", String(!isA11yMode()));
scripts.forEach(script => {
const targetId = script.getAttribute("data-target-id");
const scrollDivisor = Number(script.getAttribute("data-scroll-divisor") || 300);
const blurElement = document.getElementById(targetId);
applyBlurState(blurElement, scrollDivisor, targetId);
});
};
})();