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

25
layouts/partials/hero/background.html
View File

@@ -35,17 +35,16 @@
<div id="hero" class="h-[150px] md:h-[200px]"></div>
{{ end }}
{{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg")}}
{{ with . }}
<div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
style="background-image:url({{ .RelPermalink }});">
<div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom">
{{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg")}}
{{ with . }}
<img id="background-image" src="{{ .RelPermalink }}" alt="Background Image" class="absolute inset-0 w-full h-full object-cover">
{{ end }}
{{ else }}
{{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
<img id="background-image" src="{{ .RelPermalink }}" alt="Background Image" class="absolute inset-0 w-full h-full object-cover">
{{ end }}
{{ end }}
{{ else }}
{{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
<div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
style="background-image:url({{ .RelPermalink }});">
{{ end }}
{{ end }}
<div class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
</div>
@@ -57,6 +56,10 @@
<div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>
{{ $backgroundBlur := resources.Get "js/background-blur.js" }}
{{ $backgroundBlur = $backgroundBlur | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}
<script type="text/javascript" src="{{ $backgroundBlur.RelPermalink }}" integrity="{{ $backgroundBlur.Data.Integrity }}" data-target-id="background-blur"></script>
<script type="text/javascript" src="{{ $backgroundBlur.RelPermalink }}" integrity="{{ $backgroundBlur.Data.Integrity }}"
data-target-id="background-blur"
data-image-id="background-image"
data-image-url="{{ .RelPermalink }}"
></script>
{{ end }}
{{- end -}}

49
layouts/partials/hero/thumbAndBackground.html
View File

@@ -58,30 +58,29 @@
{{- with $background -}}
{{ if or $disableImageOptimization (strings.HasSuffix . ".svg") }}
{{ with . }}
<div
class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
style="background-image:url({{ .RelPermalink }});">
<div
class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
<div
class="absolute inset-0 opacity-30 dark:opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal"></div>
</div>
<div class="single_hero_background nozoom fixed inset-x-0 top-0 h-[800px]">
{{ if or $disableImageOptimization (strings.HasSuffix . ".svg") }}
{{ with . }}
<img
id="background-image-main"
src="{{ .RelPermalink }}"
alt="Background Image"
class="absolute inset-0 h-full w-full object-cover">
{{ end }}
{{ else }}
{{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
<img
id="background-image-main"
src="{{ .RelPermalink }}"
alt="Background Image"
class="absolute inset-0 h-full w-full object-cover">
{{ end }}
{{ end }}
{{ else }}
{{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
<div
class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
style="background-image:url({{ .RelPermalink }});">
<div
class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
<div
class="absolute inset-0 opacity-30 dark:opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal"></div>
</div>
{{ end }}
{{ end }}
<div
class="from-neutral absolute inset-0 bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div>
<div
class="from-neutral to-neutral absolute inset-0 bg-gradient-to-t opacity-30 mix-blend-normal dark:from-neutral-800 dark:to-neutral-800 dark:opacity-60"></div>
</div>
{{- end -}}
{{ if $shouldBlur | default false }}
@@ -94,5 +93,7 @@
type="text/javascript"
src="{{ $backgroundBlur.RelPermalink }}"
integrity="{{ $backgroundBlur.Data.Integrity }}"
data-target-id="background-blur"></script>
data-target-id="background-blur"
data-image-id="background-image-main"
{{ with $background }}data-image-url="{{ .RelPermalink }}"{{ end }}></script>
{{ end }}

19
layouts/partials/home/background.html
View File

@@ -1,5 +1,5 @@
{{ $disableImageOptimization := .Site.Params.disableImageOptimization | default false }}
<article class="max-w-full prose dark:prose-invert">
<article class="prose dark:prose-invert max-w-full">
<div class="relative">
<div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100"></div>
<div class="mx-auto max-w-7xl p-0">
@@ -22,16 +22,17 @@
{{ end }}
{{ if $homepageImage }}
<img
class="w-full h-[1000px] object-cover nozoom mt-0 mr-0 mb-0 ml-0"
id="homepage-background-image"
class="nozoom mt-0 mr-0 mb-0 ml-0 h-[1000px] w-full object-cover"
src="{{ $homepageImage.RelPermalink }}"
role="presentation">
<div
class="absolute inset-0 h-[1000px] bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
class="from-neutral absolute inset-0 h-[1000px] bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div>
<div
class="opacity-60 absolute inset-0 h-[1000px] bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral-100 dark:to-neutral-800 mix-blend-normal"></div>
class="from-neutral absolute inset-0 h-[1000px] bg-gradient-to-t to-neutral-100 opacity-60 mix-blend-normal dark:from-neutral-800 dark:to-neutral-800"></div>
{{ end }}
</div>
<div class="relative px-1 py-1 flex flex-col items-center justify-center text-center">
<div class="relative flex flex-col items-center justify-center px-1 py-1 text-center">
{{ with .Site.Params.Author.image }}
{{ $authorImage := "" }}
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
@@ -44,7 +45,7 @@
{{ $authorImage = $authorImage.Fill (print "288x288 q" ( $.Site.Params.Author.imagequality | default "96" )) }}
{{ end }}
<img
class="mb-2 rounded-full h-36 w-36"
class="mb-2 h-36 w-36 rounded-full"
width="144"
height="144"
alt="{{ $.Site.Params.Author.name | default " Author" }}"
@@ -65,7 +66,7 @@
{{ range $links := . }}
{{ range $name, $url := $links }}
<a
class="px-1 hover:text-primary-400 text-primary-800 dark:text-primary-200"
class="hover:text-primary-400 text-primary-800 dark:text-primary-200 px-1"
href="{{ $url }}"
target="_blank"
aria-label="{{ $name | title }}"
@@ -98,5 +99,7 @@
type="text/javascript"
src="{{ $backgroundBlur.RelPermalink }}"
integrity="{{ $backgroundBlur.Data.Integrity }}"
data-target-id="background-blur"></script>
data-target-id="background-blur"
data-image-id="homepage-background-image"
{{ if $homepageImage }}data-image-url="{{ $homepageImage.RelPermalink }}"{{ end }}></script>
{{ end }}