From 1e37eeea056ea5219033dd6ee642db370c3dcb47 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Thu, 13 Apr 2023 00:03:22 +0000
Subject: [PATCH] Experimenting with collapsing images.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4258 ed5197a5-7fde-0310-b194-c3ffbd925b24
---
 apps/ssb/tf-message.js | 7 +++++++
 apps/ssb/tf-styles.js  | 9 +++++++++
 apps/ssb/tf-utils.js   | 1 +
 3 files changed, 17 insertions(+)

diff --git a/apps/ssb/tf-message.js b/apps/ssb/tf-message.js
index f8a50aa60..66d347740 100644
--- a/apps/ssb/tf-message.js
+++ b/apps/ssb/tf-message.js
@@ -127,6 +127,13 @@ class TfMessageElement extends LitElement {
 	body_click(event) {
 		if (event.srcElement.tagName == 'IMG') {
 			this.show_image(event.srcElement.src);
+		} else if (event.srcElement.tagName == 'DIV' && event.srcElement.classList.contains('img_caption')) {
+			let next = event.srcElement.nextSibling;
+			if (next.style.display == 'block') {
+				next.style.display = 'none';
+			} else {
+				next.style.display = 'block';
+			}
 		}
 	}
 
diff --git a/apps/ssb/tf-styles.js b/apps/ssb/tf-styles.js
index 56f6f5d8f..f2570ac89 100644
--- a/apps/ssb/tf-styles.js
+++ b/apps/ssb/tf-styles.js
@@ -36,4 +36,13 @@ img {
 	padding: 8px;
 	margin: 4px;
 }
+
+div.img_caption {
+	color: #888;
+	cursor: pointer;
+}
+
+div.img_caption::after {
+	content: ' ±';
+}
 `;
\ No newline at end of file
diff --git a/apps/ssb/tf-utils.js b/apps/ssb/tf-utils.js
index aa209a298..0fd781aaf 100644
--- a/apps/ssb/tf-utils.js
+++ b/apps/ssb/tf-utils.js
@@ -26,6 +26,7 @@ function image(node, entering) {
 	} else {
 		if (entering) {
 			if (this.disableTags === 0) {
+				this.lit('<div class="img_caption">' + this.esc(node.firstChild?.literal || node.destination) + '</div>');
 				if (this.options.safe && potentiallyUnsafe(node.destination)) {
 					this.lit('<img src="" alt="');
 				} else {