Recognise image spoilers (based on "body")
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Cadence Ember 2020-11-28 18:45:08 +13:00
parent a004e84adc
commit 2e91ff8ff2
Signed by: cadence
GPG key ID: BC1C2C61CF521B17
2 changed files with 52 additions and 1 deletions

View file

@ -16,7 +16,23 @@ class Image extends GroupableEvent {
image.attribute("width", info.w)
image.attribute("height", info.h)
}
this.child(image)
const wrapper = ejs("div").class("c-media__wrapper").child(
image
)
if (this.data.content.body && this.data.content.body.startsWith("SPOILER")) {
wrapper.attribute("tabindex", 0)
wrapper.class("c-media--spoiler")
const wall = ejs("div").class("c-media__spoiler").text("Spoiler")
wrapper.child(wall)
function toggle() {
wrapper.element.classList.toggle("c-media--shown")
}
wrapper.on("click", toggle)
wrapper.on("keydown", event => {
if (event.key === "Enter") toggle()
})
}
this.child(wrapper)
super.render()
}

View file

@ -58,6 +58,7 @@
// fix whitespace
font-size: 0
margin-top: 8px
display: flex
&--pending
opacity: 0.5
@ -149,3 +150,37 @@
padding: 12px
background-color: c.$milder
border-radius: 8px
.c-media
&__wrapper
overflow: hidden
position: relative
&--spoiler
cursor: pointer
img
filter: blur(40px)
&--shown img
filter: none
&__spoiler
position: absolute
top: 0
bottom: 0
left: 0
right: 0
display: flex
align-items: center
justify-content: center
font-size: 18px
font-weight: 500
color: #fff
text-transform: uppercase
background: rgba(0, 0, 0, 0.3)
cursor: pointer
pointer-events: none
&--shown &__spoiler
display: none