From 84a78c2d5f22b89c7e8ddb5b96fe9efbf7a8dd79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Wed, 26 Apr 2023 12:15:03 -0400
Subject: [PATCH] feat: move topic thumb to template

use a single modal to show all thumbs and allow switching
---
 public/src/client/topic.js             | 26 ++++++++++++++++++++------
 src/views/modals/topic-thumbs-view.tpl | 13 +++++++++++++
 2 files changed, 33 insertions(+), 6 deletions(-)
 create mode 100644 src/views/modals/topic-thumbs-view.tpl

diff --git a/public/src/client/topic.js b/public/src/client/topic.js
index 950039e0c1..012cc573ff 100644
--- a/public/src/client/topic.js
+++ b/public/src/client/topic.js
@@ -178,17 +178,31 @@ define('forum/topic', [
 			return;
 		}
 
-		listEl.addEventListener('click', (e) => {
-			const subselector = e.target.closest('a');
-			if (subselector) {
+		listEl.addEventListener('click', async (e) => {
+			const clickedThumb = e.target.closest('a');
+			if (clickedThumb) {
+				const clickedThumbIndex = Array.from(clickedThumb.parentNode.children).indexOf(clickedThumb);
 				e.preventDefault();
+				const thumbs = ajaxify.data.thumbs.map(t => ({ ...t }));
+				thumbs.forEach((t, i) => {
+					t.selected = i === clickedThumbIndex;
+				});
+				const html = await app.parseAndTranslate('modals/topic-thumbs-view', {
+					src: clickedThumb.href,
+					thumbs: thumbs,
+				});
 
-				const src = subselector.href;
-				bootbox.dialog({
+				const modal = bootbox.dialog({
 					size: 'lg',
 					onEscape: true,
 					backdrop: true,
-					message: `<div class="text-center mb-5"><img src="${src}" style="max-height: 66vh;" /></div>`,
+					message: html,
+				});
+				modal.on('click', '[component="topic/thumb/select"]', function () {
+					$('[component="topic/thumb/select"]').removeClass('border-primary');
+					$(this).addClass('border-primary');
+					$('[component="topic/thumb/current"]')
+						.attr('src', $(this).attr('src'));
 				});
 			}
 		});
diff --git a/src/views/modals/topic-thumbs-view.tpl b/src/views/modals/topic-thumbs-view.tpl
new file mode 100644
index 0000000000..a478228fa5
--- /dev/null
+++ b/src/views/modals/topic-thumbs-view.tpl
@@ -0,0 +1,13 @@
+<div class="d-flex flex-column gap-4 topic-thumbs-view-modal">
+	<div class="d-flex justify-content-center align-items-center mb-5" style="height: 33vh; max-height: 33vh;">
+		<img component="topic/thumb/current" src="{src}" style="max-height: 33vh;" />
+	</div>
+	<hr/>
+	<div class="d-flex justify-content-center mb-3 gap-3">
+	{{{ each thumbs }}}
+		<div>
+			<img component="topic/thumb/select" class="pointer rounded border border-3 {{{ if ./selected }}}border-primary{{{ end }}}" height="64px" style="width: auto;" src="{./url}"/>
+		</div>
+	{{{ end }}}
+	</div>
+</div>
\ No newline at end of file