mirror of
https://github.com/nunocoracao/blowfish.git
synced 2026-01-30 16:31:52 +01:00
fix(a11y): disableImages not working when layoutBackgroundBlur is false
This commit is contained in:
@@ -16,14 +16,10 @@ window.A11yPanel = (() => {
|
||||
disableImages: {
|
||||
default: false,
|
||||
apply: (enabled) => {
|
||||
document.querySelectorAll("script[data-target-id]").forEach((script) => {
|
||||
const image = document.getElementById(script.getAttribute("data-image-id"));
|
||||
const imageUrl = script.getAttribute("data-image-url");
|
||||
if (image) {
|
||||
image.style.display = enabled ? "none" : "";
|
||||
if (!enabled && imageUrl && !image.src) image.src = imageUrl;
|
||||
}
|
||||
});
|
||||
const image = document.getElementById("background-image");
|
||||
if (image) {
|
||||
image.style.display = enabled ? "none" : "";
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@@ -198,14 +198,17 @@
|
||||
</div>
|
||||
|
||||
<div class="space-y-5">
|
||||
{{- $toggles := slice
|
||||
(dict "id" (print $prefix "disable-blur") "label" (i18n "a11y.disable_blur"))
|
||||
{{ $toggles := slice }}
|
||||
{{ $shouldDisableBlur := or site.Params.homepage.layoutBackgroundBlur site.Params.article.layoutBackgroundBlur site.Params.list.layoutBackgroundBlur }}
|
||||
{{ if $shouldDisableBlur }}
|
||||
{{ $toggles = $toggles | append (dict "id" (print $prefix "disable-blur") "label" (i18n "a11y.disable_blur")) }}
|
||||
{{ end }}
|
||||
{{- $toggles = $toggles | append
|
||||
(dict "id" (print $prefix "disable-images") "label" (i18n "a11y.disable_images"))
|
||||
(dict "id" (print $prefix "underline-links") "label" (i18n "a11y.show_link_underline"))
|
||||
(dict "id" (print $prefix "zen-mode") "label" (i18n "article.zen_mode_title.enable"))
|
||||
-}}
|
||||
|
||||
|
||||
{{- range $toggles }}
|
||||
<div class="flex items-center justify-between">
|
||||
<label for="{{ .id }}" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
||||
|
||||
@@ -59,23 +59,15 @@
|
||||
{{- with $background -}}
|
||||
|
||||
<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 }}
|
||||
{{ $imageURL := .RelPermalink }}
|
||||
{{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }}
|
||||
{{ $imageURL = (.Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x")).RelPermalink }}
|
||||
{{ end }}
|
||||
<img
|
||||
id="background-image"
|
||||
src="{{ $imageURL }}"
|
||||
alt="Background Image"
|
||||
class="absolute inset-0 h-full w-full object-cover">
|
||||
<div
|
||||
class="from-neutral absolute inset-0 bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div>
|
||||
<div
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
{{ end }}
|
||||
{{ if $homepageImage }}
|
||||
<img
|
||||
id="homepage-background-image"
|
||||
id="background-image"
|
||||
class="nozoom mt-0 mr-0 mb-0 ml-0 h-[1000px] w-full object-cover"
|
||||
src="{{ $homepageImage.RelPermalink }}"
|
||||
role="presentation">
|
||||
@@ -100,6 +100,6 @@
|
||||
src="{{ $backgroundBlur.RelPermalink }}"
|
||||
integrity="{{ $backgroundBlur.Data.Integrity }}"
|
||||
data-target-id="background-blur"
|
||||
data-image-id="homepage-background-image"
|
||||
data-image-id="background-image"
|
||||
{{ if $homepageImage }}data-image-url="{{ $homepageImage.RelPermalink }}"{{ end }}></script>
|
||||
{{ end }}
|
||||
|
||||
Reference in New Issue
Block a user