nodebb-plugin-poll 3.2.8 → 4.0.0

package/public/js/poll/creator.js

@@ -1,210 +1,240 @@
 'use strict';
 
 (function (Poll) {
-	var Creator = {};
+	const Creator = {};
 
 	function init() {
 		$(window).on('action:composer.enhanced', initComposer);
+	}
 
-		$(window).on('action:redactor.load', initRedactor);
+	function initComposer(ev, { postContainer, postData }) {
+		require(['composer', 'composer/formatting'], function (composer, formatting) {
+			if (formatting) {
+				formatting.addButtonDispatch('poll', function (/* textarea */) {
+					onPollButtonClicked(composer);
+				});
 
-		$(window).on('action:composer.loaded', function (ev, data) {
-			if ($.Redactor) {
-				if (data.composerData.isMain && $.Redactor.opts.plugins.indexOf('poll') === -1) {
-					$.Redactor.opts.plugins.push('poll');
-				} else if (!data.composerData.isMain && $.Redactor.opts.plugins.indexOf('poll') !== -1) {
-					$.Redactor.opts.plugins.splice($.Redactor.opts.plugins.indexOf('poll'), 1);
-				}
+				updateComposerBadgeCount(postContainer, postData.polls ? postData.polls.length : 0);
 			}
 		});
 	}
 
-	function initComposer() {
-		require(['composer', 'composer/formatting', 'composer/controls'], function (composer, formatting, controls) {
-			if (formatting && controls) {
-				formatting.addButtonDispatch('poll', function (textarea) {
-					composerBtnHandle(composer, textarea);
-				});
-			}
+	async function onPollButtonClicked(composer) {
+		const postData = composer.posts[composer.active];
+		if (!postData) {
+			return showAlert('error', '[[poll:error.invalid-post]]');
+		}
+		if (parseInt(postData.cid, 10) === 0) {
+			return showAlert('error', '[[error:category-not-selected]]');
+		}
+
+		const canCreate = await socket.emit('plugins.poll.canCreate', {
+			cid: postData.cid,
+			pid: postData.pid,
+			tid: postData.tid,
 		});
+		if (!canCreate) {
+			return showAlert('error', '[[error:no-privileges]]');
+		}
+		postData.polls = postData.polls || [];
+		await openManageModal({ postData, uuid: composer.active });
 	}
 
-	function initRedactor() {
-		$.Redactor.prototype.poll = function () {
-			return {
-				init: function () {
-					var self = this;
-
-					// require translator as such because it was undefined without it
-					require(['translator'], function (translator) {
-						translator.translate('[[poll:creator_title]]', function (translated) {
-							var button = self.button.add('poll', translated);
-							self.button.setIcon(button, '<i class="fa fa-bar-chart-o"></i>');
-							self.button.addCallback(button, self.poll.onClick);
-						});
-					});
-				},
-				onClick: function () {
-					var self = this;
-					var code = this.code.get();
-					require(['composer'], function (composer) {
-						composerBtnHandle(composer, {
-							value: code,
-							redactor: function (code) {
-								self.code.set(code);
-							},
-						});
-					});
+	async function openManageModal(payload) {
+		const bootbox = await app.require('bootbox');
+		const { postData, modal, uuid } = payload;
+		const html = await app.parseAndTranslate('poll/manage', { post: postData });
+
+		if (modal) {
+			modal.find('.bootbox-body').html(html[0].outerHTML);
+			handleSort({ modal, polls: postData.polls });
+		} else {
+			const modal = bootbox.dialog({
+				title: '[[poll:manage-polls]]',
+				message: html,
+				className: 'poll-manage',
+				buttons: {
+					add: {
+						label: '<i class="fa fa-plus"></i> [[poll:add-poll]]',
+						className: 'btn-success',
+						callback: () => {
+							Creator.show('[[poll:creator_title]]', {
+								// temp id, will be replaced in the backend before saving
+								// used to identify the poll in the manage modal after creation
+								// so we can edit/delete
+								pollId: Date.now(),
+								maximumVotesPerUser: config.poll.maximumVotesPerUser,
+							}, config.poll).then((newPoll) => {
+								if (newPoll) {
+									postData.polls.push(newPoll);
+								}
+								openManageModal({ ...payload, modal });
+								const postContainer = $(`[component="composer"][data-uuid="${uuid}"]`);
+								updateComposerBadgeCount(postContainer, postData.polls.length);
+							});
+							return false;
+						},
+					},
+					close: {
+						label: '[[global:close]]',
+						className: 'btn-primary',
+					},
 				},
-			};
-		};
+			});
+			handleDelete({ ...payload, modal });
+			handleEdit({ ...payload, modal });
+			handleSort({ modal, polls: postData.polls });
+		}
 	}
 
-	function composerBtnHandle(composer, textarea) {
-		require(['composer/controls', 'alerts'], function (controls, alerts) {
-			var post = composer.posts[composer.active];
-			if (!post || !post.isMain || (isNaN(parseInt(post.cid, 10)) && isNaN(parseInt(post.pid, 10)))) {
-				return alerts.error('[[poll:error.not_main]]');
-			}
-			if (parseInt(post.cid, 10) === 0) {
-				return alerts.error('[[error:category-not-selected]]');
-			}
-
-			socket.emit('plugins.poll.canCreate', {
-				cid: post.cid,
-				pid: post.pid,
-			}, function (err, canCreate) {
-				if (err) {
-					return alerts.error(err);
+	async function handleDelete(payload) {
+		const bootbox = await app.require('bootbox');
+		const { uuid, modal, postData } = payload;
+		modal.on('click', 'button[data-action="remove"]', function () {
+			const clickedPollId = $(this).attr('data-poll-id');
+			bootbox.confirm('[[poll:confirm-remove]]', (ok) => {
+				if (!ok) {
+					return;
 				}
-				if (!canCreate) {
-					return alerts.error('[[error:no-privileges]]');
+				const poll = postData?.polls.find(poll => String(poll.pollId) === clickedPollId);
+				if (poll) {
+					postData.polls = postData.polls.filter(poll => String(poll.pollId) !== clickedPollId);
+					openManageModal(payload);
+					const postContainer = $(`[component="composer"][data-uuid="${uuid}"]`);
+					updateComposerBadgeCount(postContainer, postData.polls.length);
 				}
-				socket.emit('plugins.poll.getConfig', null, function (err, config) {
-					if (err) {
-						return alerts.error(err);
-					}
-
-					var poll = {};
+			});
+		});
+	};
 
-					// If there's already a poll in the post, serialize it for editing
-					if (Poll.serializer.canSerialize(textarea.value)) {
-						poll = Poll.serializer.serialize(textarea.value, config);
+	function handleEdit(payload) {
+		const { modal, postData } = payload;
+		modal.on('click', 'button[data-action="edit"]', async function () {
+			const clickedPollId = $(this).attr('data-poll-id');
+			const poll = postData?.polls.find(poll => String(poll.pollId) === clickedPollId);
+			if (poll) {
+				const editedPoll = await Creator.show(
+					'[[poll:edit-a-poll-title]]',
+					poll,
+					config.poll,
+				);
+				if (editedPoll) {
+					postData.polls = postData.polls.map(
+						p => String(p.pollId) === String(editedPoll.pollId) ? editedPoll : p
+					);
+					openManageModal(payload);
+				}
+			}
+		});
+	}
 
-						if (poll.settings.end === 0) {
-							delete poll.settings.end;
-						} else {
-							poll.settings.end = parseInt(poll.settings.end, 10);
-						}
+	function handleSort({ modal, polls }) {
+		if (Array.isArray(polls) && polls.length > 1) {
+			const selectorEl = modal.find('.topic-poll-modal');
+			selectorEl.sortable({
+				handle: '[component="sort/handle"]',
+				axis: 'y',
+				zIndex: 9999,
+				items: '[component="post/poll/item"]',
+			});
+			selectorEl.on('sortupdate', function () {
+				if (!polls) return;
+				const newOrder = [];
+				selectorEl.find('[component="post/poll/item"]').each(function () {
+					const pollId = $(this).attr('data-poll-id');
+					const poll = polls.find(p => String(p.pollId) === pollId);
+					if (poll) {
+						newOrder.push(poll);
 					}
-
-					Creator.show(poll, config, function (data) {
-						// Anything invalid will be discarded by the serializer
-						var markup = Poll.serializer.deserialize(data, config);
-
-						// Remove any existing poll markup
-						textarea.value = Poll.serializer.removeMarkup(textarea.value);
-
-						// Insert the poll markup at the bottom
-						if (textarea.value.charAt(textarea.value.length - 1) !== '\n') {
-							markup = '\n' + markup;
-						}
-
-						if ($.Redactor) {
-							textarea.redactor(textarea.value + '<p>' + markup + '</p>');
-						} else {
-							controls.insertIntoTextarea(textarea, markup);
-						}
-					});
 				});
+				// Mutate polls array in place
+				polls.length = 0;
+				Array.prototype.push.apply(polls, newOrder);
 			});
-		});
-	}
-
-	Creator.show = function (poll, config, callback) {
-		if (poll.hasOwnProperty('info')) {
-			return Poll.alertError('Editing not implemented');
 		}
+	};
 
-		require(['bootbox'], function (bootbox) {
-			app.parseAndTranslate('poll/creator', { poll: poll, config: config, isRedactor: !!$.Redactor }, function (html) {
-				// Initialise modal
-				var modal = bootbox.dialog({
-					title: '[[poll:creator_title]]',
-					message: html,
-					className: 'poll-creator',
-					buttons: {
-						cancel: {
-							label: '[[modules:bootbox.cancel]]',
-							className: 'btn-default',
-							callback: function () {
-								return true;
+	Creator.show = function (modalTitle, poll, config) {
+		return new Promise((resolve) => {
+			require(['bootbox'], function (bootbox) {
+				app.parseAndTranslate('poll/creator', { poll, config }, function (html) {
+					const modal = bootbox.dialog({
+						title: modalTitle,
+						message: html,
+						className: 'poll-creator',
+						buttons: {
+							cancel: {
+								label: '[[global:close]]',
+								callback: function () {
+									resolve(null);
+								},
 							},
-						},
-						save: {
-							label: '[[modules:bootbox.confirm]]',
-							className: 'btn-primary',
-							callback: function (e) {
-								clearErrors();
-								var form = $(e.currentTarget).parents('.bootbox').find('#pollCreator');
-								var obj = serializeObjectFromForm(form);
-
-								// Let's be nice and at least show an error if there are no options
-								obj.options.filter(function (obj) {
-									return obj.length;
-								});
-
-								if (obj.options.length === 0) {
-									return error('[[poll:error.no_options]]');
-								}
-
-								if (obj.settings.end) {
-									obj.settings.end = new Date(obj.settings.end).getTime();
-								}
-								callback(obj);
-								return true;
+							save: {
+								label: '[[modules:bootbox.confirm]]',
+								callback: function () {
+									clearErrors();
+									const form = modal.find('#pollCreator');
+									const newPoll = serializeObjectFromForm(form);
+
+									// Let's be nice and at least show an error if there are no options
+									if (newPoll.options.length === 0) {
+										error('[[poll:error.no_options]]');
+										return false;
+									}
+
+									resolve(newPoll);
+									return true;
+								},
 							},
 						},
-					},
-				});
+					});
+
+					handleOptionSort({ modal });
 
-				// Add option adder
-				modal.find('#pollAddOption')
-					.off('click')
-					.on('click', function (e) {
-						var el = $(e.currentTarget);
-						var prevOption = el.prev();
-
-						if (config.limits.maxOptions <= el.prevAll('input').length) {
-							clearErrors();
-							require(['translator'], function (translator) {
-								translator.translate('[[poll:error.max_options]]', function (text) {
-									error(text.replace('%d', config.limits.maxOptions));
-								});
+					// Add option adder
+					modal.find('#pollAddOption')
+						.off('click')
+						.on('click', async function (e) {
+							const el = $(e.currentTarget);
+							if (config.maxOptions <= el.prevAll('input').length) {
+								clearErrors();
+								error(`[[poll:error.max_options, ${config.maxOptions}]]`);
+								return false;
+							}
+							const id = Date.now();
+							const newOptionInput = await app.parseAndTranslate('poll/option-input', {
+								id: id,
+								title: '',
 							});
-							return false;
-						}
+							const container = modal.find('#poll-options-container');
+							container.append(newOptionInput);
+							modal.find(`[data-option-id="${id}"] input`).focus();
+						});
 
-						if (prevOption.val().length !== 0) {
-							prevOption.clone().val('').insertBefore(el).focus();
-						}
+					modal.find('#poll-options-container').on('click', '[data-action="remove-option"]', function () {
+						$(this).parents('[component="post/poll/option/item"]').remove();
 					});
-
-				if (poll.settings && poll.settings.end) {
-
-					// flatpickrInstance.setDate(poll.settings.end);
-				}
+				});
 			});
 		});
 	};
 
-	function error(message) {
-		var errorBox = $('#pollErrorBox');
+	function handleOptionSort({ modal }) {
+		const selectorEl = modal.find('#poll-options-container');
+		selectorEl.sortable({
+			handle: '[component="sort/handle"]',
+			axis: 'y',
+			zIndex: 9999,
+			items: '[component="post/poll/option/item"]',
+		});
+	}
 
+	async function error(message) {
+		const errorBox = $('#pollErrorBox');
+		const translator = await app.require('translator');
+		const msgTranslated = await translator.translate(message);
 		errorBox.removeClass('hidden');
-		errorBox.append(message + '<br>');
-
-		return false;
+		errorBox.append(msgTranslated + '<br>');
 	}
 
 	function clearErrors() {
@@ -212,21 +242,44 @@
 	}
 
 	function serializeObjectFromForm(form) {
-		var obj = form.serializeObject();
-		var result = {
-			options: obj.options,
-			settings: {
-				title: obj['settings.title'],
-				maxvotes: obj['settings.maxvotes'],
-				disallowVoteUpdate: obj['settings.disallowVoteUpdate'] === 'on' ? 'true' : 'false',
-				allowAnonVoting: obj['settings.allowAnonVoting'] === 'on' ? 'true' : 'false',
-				end: obj['settings.end'],
-			},
+		const obj = form.serializeObject();
+		obj.options = obj.options || [];
+		obj.id = obj.id || [];
+
+		const options = obj.options.map((opt, index) => ({
+			id: obj.id[index],
+			title: opt,
+		})).filter(option => option.title?.length);
+
+		const result = {
+			pollId: obj.pollId,
+			options: options,
+			title: obj.title,
+			maximumVotesPerUser: obj.maximumVotesPerUser,
+			disallowVoteUpdate: obj.disallowVoteUpdate === 'on' ? 1 : 0,
+			allowAnonVoting: obj.allowAnonVoting === 'on' ? 1 : 0,
+			end: obj.end ? new Date(obj.end).getTime() : 0,
 		};
 
 		return result;
 	}
 
+	function showAlert(type, message) {
+		require(['alerts'], function (alerts) {
+			alerts[type](message);
+		});
+	}
+
+	function updateComposerBadgeCount(postContainer, count) {
+		require(['composer'], (composer) => {
+			composer.updateFormattingBtnBadgeCount(
+				postContainer,
+				'poll',
+				count
+			);
+		});
+	}
+
 	Poll.creator = Creator;
 
 	init();

package/public/js/poll/main.js

@@ -4,38 +4,65 @@
 
 window.Poll = {};
 
-(function () {
+$(document).ready(function () {
 	window.Poll.alertError = function (message) {
 		require(['alerts'], function (alerts) {
 			alerts.error(message);
 		});
 	};
 
-	require('poll/serializer')(window.utils);
+	require(['hooks'], function (hooks) {
+		// add polls to data that is sent to server on composer submit
+		hooks.on('filter:composer.submit', function (hookData) {
+			hookData.composerData.polls = hookData.postData.polls || [];
+		});
+
+		hooks.on('filter:composer.drafts.save', function (hookData) {
+			const { draft, postData } = hookData;
+			if (Object.hasOwn(postData, 'polls')) {
+				draft.polls = postData.polls || [];
+			}
+			return hookData;
+		});
+
+		hooks.on('filter:composer.drafts.open', function (hookData) {
+			const { draft } = hookData;
+			if (Object.hasOwn(draft, 'polls')) {
+				hookData.composerData.polls = draft.polls || [];
+			}
+			return hookData;
+		});
+
+		hooks.on('filter:composer.topic.push', function (hookData) {
+			hookData.pushData.polls = hookData.data.polls || [];
+			return hookData;
+		});
+		hooks.on('filter:composer.reply.push', function (hookData) {
+			hookData.pushData.polls = hookData.data.polls || [];
+			return hookData;
+		});
+	});
 
 	$(window).on('action:topic.loading', function () {
-		if (ajaxify.data.posts.length > 0 && ajaxify.data.posts[0].hasOwnProperty('pollId')) {
-			getPollByPost(ajaxify.data.posts[0]);
-		}
+		ajaxify.data.posts.forEach((post) => {
+			getPollByPost(post);
+		});
 	});
 
 	$(window).on('action:posts.loaded', function (ev, data) {
 		data.posts.forEach((post) => {
-			if (post.hasOwnProperty('pollId')) {
-				getPollByPost(post);
-			}
+			getPollByPost(post);
 		});
 	});
 
 	$(window).on('action:posts.edited', function (ev, data) {
-		if (data.post.hasOwnProperty('pollId')) {
-			getPollByPost(data.post);
-		}
+		getPollByPost(data.post);
 	});
 
 	$(window).on('action:ajaxify.end', function () {
 		$('[data-widget-poll-id]').each(function () {
-			getPoll($(this).attr('data-widget-poll-id'), $(this));
+			const $this = $(this);
+			getPolls([$this.attr('data-widget-poll-id')], $this);
 		});
 	});
 
@@ -44,25 +71,34 @@ window.Poll = {};
 	});
 
 	function getPollByPost(post) {
-		const postEl = $('[component="post"][data-pid="' + post.pid + '"]');
-		if (postEl.length && post.pollId) {
-			getPoll(post.pollId, postEl.find('[component="post/content"]'));
+		if (!post || !post.hasOwnProperty('pollIds') || !post.pollIds) return;
+		let pollIds;
+		try {
+			pollIds = JSON.parse(post.pollIds || '[]');
+		} catch (err) {
+			pollIds = [];
+		}
+		if (pollIds.length) {
+			const postEl = $(`[component="post"][data-pid="${post.pid}"]`);
+			getPolls(pollIds, postEl.find('[component="post/content"]'));
 		}
 	}
 
-	function getPoll(pollId, container) {
-		pollId = parseInt(pollId, 10);
-		if (!isNaN(pollId)) {
-			if (!socket.connected) {
-				socket.connect();
+	function getPolls(pollIds, container) {
+		const validPollIds = pollIds.map(id => parseInt(id, 10)).filter(id => !isNaN(id));
+		socket.emit('plugins.poll.get', { pollIds: validPollIds }, async function (err, pollDataArr) {
+			if (err) {
+				return Poll.alertError(err.message);
 			}
-			socket.emit('plugins.poll.get', { pollId }, function (err, pollData) {
-				if (err) {
-					return Poll.alertError(err.message);
-				}
+			pollDataArr.reverse();
+			for (const pollData of pollDataArr) {
 				pollData.container = container;
-				Poll.view.load(pollData);
-			});
-		}
+				if (container.attr('data-widget-poll-id')) {
+					pollData.isWidget = true;
+				}
+				// eslint-disable-next-line no-await-in-loop
+				await Poll.view.load(pollData);
+			}
+		});
 	}
-}());
+});