diff --git a/apps/ssb/tf-message.js b/apps/ssb/tf-message.js index f8a50aa6..66d34774 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 56f6f5d8..f2570ac8 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 aa209a29..0fd781aa 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('
' + this.esc(node.firstChild?.literal || node.destination) + '
'); if (this.options.safe && potentiallyUnsafe(node.destination)) { this.lit('