[frogend/bugfix] fix dynamicSpoiler elements (#1771)

This commit is contained in:
f0x52 2023-05-12 13:50:37 +02:00 committed by GitHub
parent b315aa10c8
commit 66df974143
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 19 deletions

View file

@ -104,31 +104,29 @@ function dynamicSpoiler(className, updateFunc) {
} }
dynamicSpoiler("text-spoiler", (spoiler) => { dynamicSpoiler("text-spoiler", (spoiler) => {
const button = spoiler.querySelector("button"); const button = spoiler.querySelector(".button");
if (button != undefined) { return () => {
return () => { button.textContent = spoiler.open
button.textContent = spoiler.open ? "Show less"
? "Show less" : "Show more";
: "Show more"; };
};
}
}); });
dynamicSpoiler("video-spoiler", (spoiler) => { dynamicSpoiler("media-spoiler", (spoiler) => {
const video = spoiler.querySelector(".plyr-video");
const eye = spoiler.querySelector(".eye.button"); const eye = spoiler.querySelector(".eye.button");
const video = spoiler.querySelector(".plyr-video");
if (video != undefined) { return () => {
return () => { if (spoiler.open) {
if (spoiler.open) { eye.setAttribute("aria-label", "Hide media");
eye.setAttribute("aria-label", "Hide media"); } else {
} else { eye.setAttribute("aria-label", "Show media");
eye.setAttribute("aria-label", "Show media"); if (video) {
video.pause(); video.pause();
} }
}; }
} };
}); });
Array.from(document.getElementsByClassName("plyr-video")).forEach((video) => { Array.from(document.getElementsByClassName("plyr-video")).forEach((video) => {

View file

@ -55,7 +55,7 @@
{{range $index, $media := .}} {{range $index, $media := .}}
{{with $media}} {{with $media}}
<div class="media-wrapper"> <div class="media-wrapper">
<details class="{{.Type}}-spoiler" {{if not $.Sensitive}}open{{end}}> <details class="{{.Type}}-spoiler media-spoiler" {{if not $.Sensitive}}open{{end}}>
<summary> <summary>
<div class="show sensitive button" aria-hidden="true"> <div class="show sensitive button" aria-hidden="true">
Show sensitive media Show sensitive media