From 1168a1458d18a9d5242db5dbd7810dd28b738b62 Mon Sep 17 00:00:00 2001
From: f0x <f0x@cthu.lu>
Date: Fri, 10 Sep 2021 23:59:18 +0200
Subject: [PATCH] basic CW implementation

---
 web/assets/status.css                       | 14 ++++++++++++++
 web/gotosocial-styling/templates/status.css | 16 ++++++++++++++++
 web/template/status.tmpl                    | 10 +++++++++-
 web/template/thread.tmpl                    | 15 +++++++++++++++
 4 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/web/assets/status.css b/web/assets/status.css
index 2da5e33ed..bd37452ab 100644
--- a/web/assets/status.css
+++ b/web/assets/status.css
@@ -47,6 +47,20 @@ main {
 		justify-self: start;
 	}
 
+.toot input.spoiler:checked ~ .content {
+		display: none;
+	}
+
+.toot .spoiler label {
+			background: #de8957;
+			border-radius: 0.3rem;
+			padding: 0.3rem;
+			margin-left: 0.4rem;
+			position: relative;
+			z-index: 2;
+			cursor: pointer;
+		}
+
 .toot .text {
 		margin: 0;
 		grid-column: span 2;
diff --git a/web/gotosocial-styling/templates/status.css b/web/gotosocial-styling/templates/status.css
index c0e0d6ad1..72fb049ec 100644
--- a/web/gotosocial-styling/templates/status.css
+++ b/web/gotosocial-styling/templates/status.css
@@ -46,6 +46,22 @@ main {
 		justify-self: start;
 	}
 
+	input.spoiler:checked ~ .content {
+		display: none;
+	}
+
+	.spoiler {
+		label {
+			background: $acc1;
+			border-radius: 0.3rem;
+			padding: 0.3rem;
+			margin-left: 0.4rem;
+			position: relative;
+			z-index: 2;
+			cursor: pointer;
+		}
+	}
+
 	.text {
 		margin: 0;
 		grid-column: span 2;
diff --git a/web/template/status.tmpl b/web/template/status.tmpl
index c561edd57..45714f0bf 100644
--- a/web/template/status.tmpl
+++ b/web/template/status.tmpl
@@ -2,7 +2,15 @@
 <a href="{{.Account.URL}}" class="displayname">{{.Account.DisplayName}}</a>
 <a href="{{.Account.URL}}" class="username">@{{.Account.Username}}</a>
 <div class="text">
-	{{.Content |noescape}}
+	{{if .SpoilerText}}
+	<input class="spoiler" id="hideSpoiler-{{.ID}}" type="checkbox" style="display: none" aria-hidden="true" checked="true" />
+	<div class="spoiler">
+		<span>{{.SpoilerText}}</span><label class="spoiler-label" for="hideSpoiler-{{.ID}}">Toggle visibility</label>
+	</div>
+	{{end}}
+	<div class="content">
+		{{.Content |noescape}}
+	</div>
 </div>
 {{with .MediaAttachments}}
 	<div class="media {{(len .) | oddOrEven }}{{if eq (len .) 1}} single{{end}}{{if eq (len .) 2}} double{{end}}">
diff --git a/web/template/thread.tmpl b/web/template/thread.tmpl
index d0f003b91..b6b91fd31 100644
--- a/web/template/thread.tmpl
+++ b/web/template/thread.tmpl
@@ -16,4 +16,19 @@
 		{{end}}
 	</div>
 </main>
+<script>
+	Array.from(document.getElementsByClassName("spoiler-label")).forEach((label) => {
+		let checkbox = document.getElementById(label.htmlFor);
+		function update() {
+			if(checkbox.checked) {
+				label.innerHTML = "Show more";
+			} else {
+				label.innerHTML = "Show less";
+			}
+		}
+		update();
+
+		label.addEventListener("click", () => {setTimeout(update, 1)});
+	});
+</script>
 {{ template "footer.tmpl" .}}
\ No newline at end of file