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: ``,
+ 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 @@
+
+
+
+
+
+
+ {{{ each thumbs }}}
+
+
+
+ {{{ end }}}
+
+