52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
|
function setBackgroundBlur(
|
||
|
|
targetId,
|
||
|
|
scrollDivisor = 300,
|
||
|
|
disableBlur = false,
|
||
|
|
isMenuBlur = false,
|
||
|
|
) {
|
||
|
|
if (!targetId) {
|
||
|
|
console.error('data-blur-id is null');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const blurElement = document.getElementById(targetId);
|
||
|
|
if (!blurElement) return;
|
||
|
|
if (disableBlur) {
|
||
|
|
blurElement.setAttribute('aria-hidden', 'true');
|
||
|
|
if (!isMenuBlur) {
|
||
|
|
blurElement.style.display = 'none';
|
||
|
|
blurElement.style.opacity = '0';
|
||
|
|
} else {
|
||
|
|
blurElement.style.display = '';
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
blurElement.style.display = '';
|
||
|
|
blurElement.removeAttribute('aria-hidden');
|
||
|
|
}
|
||
|
|
const updateBlur = () => {
|
||
|
|
if (!disableBlur || isMenuBlur) {
|
||
|
|
const scroll =
|
||
|
|
window.pageYOffset ||
|
||
|
|
document.documentElement.scrollTop ||
|
||
|
|
document.body.scrollTop ||
|
||
|
|
0;
|
||
|
|
blurElement.style.opacity = scroll / scrollDivisor;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
blurElement.setAttribute('role', 'presentation');
|
||
|
|
blurElement.setAttribute('tabindex', '-1');
|
||
|
|
window.addEventListener('scroll', updateBlur);
|
||
|
|
updateBlur();
|
||
|
|
}
|
||
|
|
|
||
|
|
document.querySelectorAll('script[data-blur-id]').forEach((script) => {
|
||
|
|
const targetId = script.getAttribute('data-blur-id');
|
||
|
|
const scrollDivisor = Number(
|
||
|
|
script.getAttribute('data-scroll-divisor') || 300,
|
||
|
|
);
|
||
|
|
console.log('burring ', targetId);
|
||
|
|
const isMenuBlur = targetId === 'menu-blur';
|
||
|
|
const settings = JSON.parse(localStorage.getItem('a11ySettings') || '{}');
|
||
|
|
const disableBlur = settings.disableBlur || false;
|
||
|
|
setBackgroundBlur(targetId, scrollDivisor, disableBlur, isMenuBlur);
|
||
|
|
});
|