Add spoilers

src/js/events/message.js

@@ -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()
+		})
+	})
 }
 
 

src/js/sync/sync.js

@@ -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: {

src/sass/base.sass

@@ -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

src/sass/components/chat-banner.sass

@@ -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

src/sass/components/read-marker.sass

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

src/sass/components/spoilers.sass

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

src/sass/main.sass

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