From 52fe681ba21fd17622a35cb773d28e2376be1b0a Mon Sep 17 00:00:00 2001
From: f0x52 <f0x@cthu.lu>
Date: Sun, 14 Aug 2022 19:22:13 +0200
Subject: [frontend] Sensitive media spoilers (#752)

* sensitive media spoilers

* small tweaks, use pointer-events (thanks @owl!)

* allow hiding all media

* add button roles

* add tabindices

* s/Show media/Show sensitive media/

* show hovering alt-text on hidden sensitive images

Co-authored-by: tobi <31960611+tsmethurst@users.noreply.github.com>
---
 web/template/status.tmpl | 33 +++++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 10 deletions(-)

(limited to 'web/template')

diff --git a/web/template/status.tmpl b/web/template/status.tmpl
index 2216b48d5..decad4764 100644
--- a/web/template/status.tmpl
+++ b/web/template/status.tmpl
@@ -7,7 +7,7 @@
 		<input class="spoiler" id="hideSpoiler-{{.ID}}" type="checkbox" style="display: none" aria-hidden="true" checked="true" />
 		<div class="spoiler">
 			<span class="spoiler-text">{{.SpoilerText}}</span>
-			<label class="button spoiler-label" for="hideSpoiler-{{.ID}}">Toggle visibility</label>
+			<label class="button spoiler-label" for="hideSpoiler-{{.ID}}" tabindex="0">Toggle visibility</label>
 		</div>
 		{{end}}
 		<div class="content">
@@ -15,16 +15,29 @@
 		</div>
 	</div>
 	{{with .MediaAttachments}}
-		<div class="media photoswipe-gallery {{(len .) | oddOrEven }}{{if eq (len .) 1}} single{{end}}{{if eq (len .) 2}} double{{end}}">
-			{{range .}}
-				<a href="{{.URL}}" target="_blank" title="{{.Description}}" data-pswp-width="{{.Meta.Original.Width}}px" data-pswp-height="{{.Meta.Original.Height}}px">
-						{{if not .Description}}
-			 			<div class="no-image-desc" aria-hidden="true" ><i class="fa fa-info-circle"></i><span>Missing image description</span></div>
-					{{end}}
-					<img src="{{.PreviewURL}}" alt="{{.Description}}"/>
-				</a>
-			{{end}}
+	<div class="media photoswipe-gallery {{(len .) | oddOrEven }}{{if eq (len .) 1}} single{{end}}{{if eq (len .) 2}} double{{end}}">
+		{{range .}}
+		<div class="media-wrapper">
+			{{if not .Description}}
+			<div class="no-image-desc" aria-hidden="true" ><i class="fa fa-info-circle"></i><span>Missing image description</span></div>
+			{{end}}	
+			<input type="checkbox" id="sensitiveMedia-{{.ID}}" class="sensitive-checkbox hidden" {{if not $.Sensitive}}checked{{end}}/>
+			<div class="sensitive">
+				<div class="open">
+					<label for="sensitiveMedia-{{.ID}}" class="button" role="button" tabindex="0">
+						<i class="fa fa-eye-slash" title="Hide sensitive media"></i>
+					</label>
+				</div>
+				<div class="closed" {{if .Description}}title="{{.Description}}"{{end}}>
+					<label for="sensitiveMedia-{{.ID}}" class="button" role="button" tabindex="0">Show sensitive media</label>
+				</div>
+			</div>
+			<a href="{{.URL}}" target="_blank" {{if .Description}}title="{{.Description}}"{{end}} data-pswp-width="{{.Meta.Original.Width}}px" data-pswp-height="{{.Meta.Original.Height}}px">
+				<img src="{{.PreviewURL}}" {{if .Description}}alt="{{.Description}}"{{end}} data-blurhash="{{.Blurhash}}"/>
+			</a>
 		</div>
+		{{end}}
+	</div>
 	{{end}}
 </div>
 <div class="info">
-- 
cgit v1.3