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

@@ -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';
+			}
 		}
 	}
 

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: ' ±';
+}
 `;

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 {