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

1
assets/icons/a11y.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm161.5-86.1c-12.2-5.2-26.3 .4-31.5 12.6s.4 26.3 12.6 31.5l11.9 5.1c17.3 7.4 35.2 12.9 53.6 16.3l0 50.1c0 4.3-.7 8.6-2.1 12.6l-28.7 86.1c-4.2 12.6 2.6 26.2 15.2 30.4s26.2-2.6 30.4-15.2l24.4-73.2c1.3-3.8 4.8-6.4 8.8-6.4s7.6 2.6 8.8 6.4l24.4 73.2c4.2 12.6 17.8 19.4 30.4 15.2s19.4-17.8 15.2-30.4l-28.7-86.1c-1.4-4.1-2.1-8.3-2.1-12.6l0-50.1c18.4-3.5 36.3-8.9 53.6-16.3l11.9-5.1c12.2-5.2 17.8-19.3 12.6-31.5s-19.3-17.8-31.5-12.6L338.7 175c-26.1 11.2-54.2 17-82.7 17s-56.5-5.8-82.7-17l-11.9-5.1zM256 160a40 40 0 1 0 0-80 40 40 0 1 0 0 80z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 680 B

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);
});
};
})();