butubb/blowfish
1
0
Fork 0
mirror of https://gitee.com/butubb8/blowfish.git synced 2025-12-05 14:17:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: hide image in a11y mode

Browse Source
This commit is contained in:
ZhenShuo Leo
2025-07-21 16:33:47 +08:00
parent edbace7be0
commit dc778836f1
4 changed files with 73 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,7 +10,7 @@
return scrollY / scrollDivisor;
};
const applyBlurState = (blurElement, scrollDivisor, targetId) => {
const applyBlurState = (blurElement, scrollDivisor, targetId, imageElement, imageUrl) => {
if (!blurElement) return;
const isMenuBlur = targetId === "menu-blur";
@@ -23,22 +23,38 @@
blurElement.style.display = "";
blurElement.style.opacity = getScrollOpacity(scrollDivisor);
}
// Hide image in a11y mode
if (imageElement) {
imageElement.style.display = "none";
}
} else {
blurElement.style.display = "";
blurElement.style.opacity = getScrollOpacity(scrollDivisor);
blurElement.removeAttribute("aria-hidden");
// Show image in normal mode
if (imageElement) {
imageElement.style.display = "";
// Re-apply image source if it was removed
if (imageUrl && !imageElement.getAttribute('src')) {
imageElement.setAttribute('src', imageUrl);
}
}
}
};
scripts.forEach(script => {
const targetId = script.getAttribute("data-target-id");
const scrollDivisor = Number(script.getAttribute("data-scroll-divisor") || 300);
const imageId = script.getAttribute("data-image-id");
const imageUrl = script.getAttribute("data-image-url"); // Get image URL from data attribute
const blurElement = document.getElementById(targetId);
const imageElement = imageId ? document.getElementById(imageId) : null;
if (blurElement) {
blurElement.setAttribute("role", "presentation");
blurElement.setAttribute("tabindex", "-1");
applyBlurState(blurElement, scrollDivisor, targetId);
applyBlurState(blurElement, scrollDivisor, targetId, imageElement, imageUrl);
window.addEventListener("scroll", () => {
if (!isA11yMode() || targetId === "menu-blur") {
@@ -53,8 +69,12 @@
scripts.forEach(script => {
const targetId = script.getAttribute("data-target-id");
const scrollDivisor = Number(script.getAttribute("data-scroll-divisor") || 300);
const imageId = script.getAttribute("data-image-id");
const imageUrl = script.getAttribute("data-image-url"); // Get image URL from data attribute
const blurElement = document.getElementById(targetId);
applyBlurState(blurElement, scrollDivisor, targetId);
const imageElement = imageId ? document.getElementById(imageId) : null;
applyBlurState(blurElement, scrollDivisor, targetId, imageElement, imageUrl);
});
};
})();