From 04219c4ccbfe2b028266df41ff08d29a0d59eeb9 Mon Sep 17 00:00:00 2001
From: Julian Lam <julian@nodebb.org>
Date: Wed, 29 Mar 2023 15:12:31 -0400
Subject: [PATCH] feat: open topic thumbs on click in a bootbox dialog instead
 of opening in same page; complements nodebb/nodebb-theme-harmony#12

---
 public/src/client/topic.js | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/public/src/client/topic.js b/public/src/client/topic.js
index d249447f3a..950039e0c1 100644
--- a/public/src/client/topic.js
+++ b/public/src/client/topic.js
@@ -15,10 +15,12 @@ define('forum/topic', [
 	'hooks',
 	'api',
 	'alerts',
+	'bootbox',
 ], function (
 	infinitescroll, threadTools, postTools,
 	events, posts, navigator, sort, quickreply,
-	components, storage, hooks, api, alerts
+	components, storage, hooks, api, alerts,
+	bootbox
 ) {
 	const Topic = {};
 	let tid = 0;
@@ -65,6 +67,7 @@ define('forum/topic', [
 		addPostsPreviewHandler();
 		setupQuickReply();
 		handleBookmark(tid);
+		handleThumbs();
 
 		$(window).on('scroll', utils.debounce(updateTopicTitle, 250));
 
@@ -169,6 +172,28 @@ define('forum/topic', [
 		}
 	}
 
+	function handleThumbs() {
+		const listEl = document.querySelector('[component="topic/thumb/list"]');
+		if (!listEl) {
+			return;
+		}
+
+		listEl.addEventListener('click', (e) => {
+			const subselector = e.target.closest('a');
+			if (subselector) {
+				e.preventDefault();
+
+				const src = subselector.href;
+				bootbox.dialog({
+					size: 'lg',
+					onEscape: true,
+					backdrop: true,
+					message: `<div class="text-center mb-5"><img src="${src}" style="max-height: 66vh;" /></div>`,
+				});
+			}
+		});
+	}
+
 	function addBlockQuoteHandler() {
 		components.get('topic').on('click', 'blockquote .toggle', function () {
 			const blockQuote = $(this).parent('blockquote');