Add spoilers

This commit is contained in:
Cadence Ember 2020-11-28 17:14:47 +13:00
parent b4dfefbac9
commit a004e84adc
Signed by: cadence
GPG key ID: BC1C2C61CF521B17
7 changed files with 29 additions and 2 deletions

View file

@ -85,6 +85,18 @@ function postProcessElements(element) {
if (color) n.style.color = color
if (bgColor) n.style.backgroundColor = bgColor
})
element.querySelectorAll("[data-mx-spoiler]").forEach(spoiler => {
spoiler.classList.add("mx-spoiler")
spoiler.setAttribute("tabindex", 0)
function toggle() {
spoiler.classList.toggle("mx-spoiler--shown")
}
spoiler.addEventListener("click", toggle)
spoiler.addEventListener("keydown", event => {
if (event.key === "Enter") toggle()
})
})
}

View file

@ -11,7 +11,7 @@ function sync() {
room: {
// pulling more from the timeline massively increases download size
timeline: {
limit: 5
limit: 1
},
// members are not currently needed
state: {

View file

@ -52,7 +52,7 @@ select:-moz-focusring
text-shadow: 0 0 0 #ddd
body.show-focus
a, select, button, input, video
a, select, button, input, video, div, span
outline-color: #fff
&:focus

View file

@ -9,9 +9,12 @@
margin-right: 12px
outline-color: #000
opacity: 0
transform: translateY(-40px)
transition: transform 0.2s ease, opacity 0.2s ease-out
&--active
opacity: 1
transform: translateY(0px)
&__inner
display: grid

View file

@ -18,6 +18,9 @@
@at-root .c-message:last-child &
top: 11px
@at-root .c-message-event &
top: 7px
&__text
position: absolute
right: -14px

View file

@ -0,0 +1,8 @@
.mx-spoiler
color: #331911
background-color: #331911
outline-color: #fff !important
cursor: pointer
&--shown
color: inherit

View file

@ -10,3 +10,4 @@
@use "./components/highlighted-code"
@use "./components/read-marker"
@use "./components/chat-banner"
@use "./components/spoilers"