feat: clent-side modal for managing topic thumbs

closes #9087

public/.eslintrc

@@ -31,11 +31,10 @@
 		"prefer-template": "off"
 	},
 	"parserOptions": {
-		"ecmaVersion": 6,
+		"ecmaVersion": 2018,
 		"ecmaFeatures": {
 			"classes": false,
 			"defaultParams": false,
-			"experimentalObjectRestSpread": false,
 			"blockBindings": false,
 			"forOf": false,
 			"generators": false,

public/language/en-GB/modules.json

@@ -70,5 +70,12 @@
 
 	"cover.dragging_title": "Cover Photo Positioning",
 	"cover.dragging_message": "Drag the cover photo to the desired position and click \"Save\"",
-	"cover.saved": "Cover photo image and position saved"
+	"cover.saved": "Cover photo image and position saved",
+
+	"thumbs.modal.title": "Manage topic thumbnails",
+	"thumbs.modal.no-thumbs": "No thumbnails found.",
+	"thumbs.modal.resize-note": "<strong>Note</strong>: This forum is configured to resize topic thumbnails down to a maximum width of %1px",
+	"thumbs.modal.add": "Add thumbnail",
+	"thumbs.modal.remove": "Remove thumbnail",
+	"thumbs.modal.confirm-remove": "Are you sure you want to remove this thumbnail?"
 }

public/less/modals.less

@@ -9,4 +9,10 @@
 	.tool-modal {
 		max-width: 33%;
 	}
+}
+
+.topic-thumbs-modal {
+	img.media-object {
+		max-width: 20rem;
+	}
 }

public/src/modules/topicThumbs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-define('topicThumbs', ['api'], function (api) {
+define('topicThumbs', ['api', 'bootbox', 'uploader', 'benchpress', 'translator'], function (api, bootbox, uploader, Benchpress, translator) {
 	const Thumbs = {};
 
 	Thumbs.get = id => api.get(`/topics/${id}/thumbs`, {});
@@ -17,5 +17,78 @@ define('topicThumbs', ['api'], function (api) {
 		});
 	};
 
+	Thumbs.upload = id => new Promise((resolve) => {
+		uploader.show({
+			title: '[[topic:composer.thumb_title]]',
+			method: 'put',
+			route: config.relative_path + `/api/v3/topics/${id}/thumbs`,
+		}, function (url) {
+			resolve(url);
+		});
+	});
+
+	Thumbs.modal = {};
+
+	Thumbs.modal.open = function (payload) {
+		const { id, pid } = payload;
+		let { modal } = payload;
+
+		return new Promise((resolve) => {
+			Promise.all([
+				Thumbs.get(id),
+				pid ? Thumbs.getByPid(pid) : [],
+			]).then(results => new Promise((resolve) => {
+				resolve(results.reduce((memo, cur) => memo.concat(cur)));
+			})).then(thumbs => Benchpress.render('modals/topic-thumbs', { thumbs })).then((html) => {
+				if (modal) {
+					translator.translate(html, function (translated) {
+						modal.find('.bootbox-body').html(translated);
+					});
+				} else {
+					modal = bootbox.dialog({
+						title: '[[modules:thumbs.modal.title]]',
+						message: html,
+						buttons: {
+							add: {
+								label: '<i class="fa fa-plus"></i> [[modules:thumbs.modal.add]]',
+								className: 'btn-primary',
+								callback: () => {
+									Thumbs.upload(id).then(() => {
+										Thumbs.modal.open({ ...payload, modal });
+										resolve();
+									});
+									return false;
+								},
+							},
+						},
+					});
+					Thumbs.modal.handleDelete({ ...payload, modal });
+				}
+			});
+		});
+	};
+
+	Thumbs.modal.handleDelete = (payload) => {
+		const modalEl = payload.modal.get(0);
+
+		modalEl.addEventListener('click', (ev) => {
+			if (ev.target.closest('button[data-action="remove"]')) {
+				bootbox.confirm('[[modules:thumbs.modal.confirm-remove]]', (ok) => {
+					if (!ok) {
+						return;
+					}
+
+					const id = ev.target.closest('.media[data-id]').getAttribute('data-id');
+					const path = ev.target.closest('.media[data-path]').getAttribute('data-path');
+					api.del(`/topics/${id}/thumbs`, {
+						path: path,
+					}).then(() => {
+						Thumbs.modal.open(payload);
+					}).catch(app.alertError);
+				});
+			}
+		});
+	};
+
 	return Thumbs;
 });

src/controllers/api.js

@@ -77,6 +77,9 @@ apiController.loadConfig = async function (req) {
 			link: translator.escape(validator.escape(meta.config.cookieConsentLink || '[[global:cookies.learn_more]]')).replace(/\\/g, '\\\\'),
 			link_url: translator.escape(validator.escape(meta.config.cookieConsentLinkUrl || 'https://www.cookiesandyou.com')).replace(/\\/g, '\\\\'),
 		},
+		thumbs: {
+			size: meta.config.topicThumbSize,
+		},
 	};
 
 	let settings = config;

src/topics/thumbs.js

@@ -29,7 +29,9 @@ Thumbs.get = async function (tids) {
 
 	const sets = tids.map(tid => `${validator.isUUID(String(tid)) ? 'draft' : 'topic'}:${tid}:thumbs`);
 	const thumbs = await db.getSortedSetsMembers(sets);
-	let response = thumbs.map(thumbSet => thumbSet.map(thumb => ({
+	let response = thumbs.map(thumbSet => thumbSet.map((thumb, idx) => ({
+		id: tids[idx],
+		name: path.basename(thumb),
 		url: path.join(nconf.get('upload_url'), thumb),
 	})));
 

src/views/modals/topic-thumbs.tpl

@@ -0,0 +1,20 @@
+<div class="topic-thumbs-modal">
+	{{{ if !thumbs.length }}}
+	<div class="alert alert-info">[[modules:thumbs.modal.no-thumbs]]</div>
+	{{{ end }}}
+	{{{ each thumbs }}}
+	<div class="media" data-id="{./id}" data-path="{./url}">
+		<div class="media-left">
+			<img class="media-object" src="{./url}" />
+		</div>
+		<div class="media-body">
+			<p>
+				<code>{./name}</code>
+			</p>
+			<button class="btn btn-danger" data-action="remove"><i class="fa fa-times"></i> [[modules:thumbs.modal.remove]]</button>
+		</div>
+	</div>
+	<hr />
+	{{{ end }}}
+	<p class="help-block">[[modules:thumbs.modal.resize-note, {config.thumbs.size}]]</p>
+</div>