feat: #8626, new move posts modal

public/language/en-GB/topic.json

@@ -1,7 +1,5 @@
 {
 	"topic": "Topic",
-	"topic_id": "Topic ID",
-	"topic_id_placeholder": "Enter topic ID",
 
 	"no_topics_found": "No topics found!",
 	"no_posts_found": "No posts found!",
@@ -116,6 +114,9 @@
 	"fork_topic": "Fork Topic",
 	"fork_topic_instruction": "Click the posts you want to fork",
 	"fork_no_pids": "No posts selected!",
+	"no-posts-selected": "No posts selected!",
+	"x-posts-selected": "%1 post(s) selected",
+	"x-posts-will-be-moved-to-y": "%1 post(s) will be moved to \"%2\"",
 	"fork_pid_count": "%1 post(s) selected",
 	"fork_success": "Successfully forked topic! Click here to go to the forked topic.",
 	"delete_posts_instruction": "Click the posts you want to delete/purge",
@@ -124,7 +125,7 @@
 	"merge-options": "Merge options",
 	"merge-select-main-topic": "Select the main topic",
 	"merge-new-title-for-topic": "New title for topic",
-	"move_posts_instruction": "Click the posts you want to move",
+	"move_posts_instruction": "Click the posts you want to move then go to target topic and click move.",
 	"change_owner_instruction": "Click the posts you want to assign to another user",
 
 	"composer.title_placeholder": "Enter your topic title here...",

public/less/modals.less

@@ -0,0 +1,12 @@
+.tool-modal {
+	position: fixed;
+	bottom: 10%;
+	right: 2rem;
+	z-index: 1;
+}
+
+@media screen and (min-width: @screen-sm-min) {
+	.tool-modal {
+		max-width: 33%;
+	}
+}

public/src/client/topic/move-post.js

@@ -1,17 +1,21 @@
 'use strict';
 
 
-define('forum/topic/move-post', ['components', 'postSelect'], function (components, postSelect) {
+define('forum/topic/move-post', [
+	'components', 'postSelect', 'translator',
+], function (components, postSelect, translator) {
 	var MovePost = {};
 
 	var moveModal;
 	var moveCommit;
+	var fromTid;
 
 	MovePost.init = function (postEl) {
 		if (moveModal) {
 			return;
 		}
-		app.parseAndTranslate('partials/move_post_modal', {}, function (html) {
+		fromTid = ajaxify.data.tid;
+		app.parseAndTranslate('modals/move-post', {}, function (html) {
 			moveModal = html;
 
 			moveCommit = moveModal.find('#move_posts_confirm');
@@ -19,7 +23,6 @@ define('forum/topic/move-post', ['components', 'postSelect'], function (componen
 			$('body').append(moveModal);
 
 			moveModal.find('.close,#move_posts_cancel').on('click', closeMoveModal);
-			moveModal.find('#topicId').on('keyup', checkMoveButtonEnable);
 			postSelect.init(onPostToggled);
 			showPostsSelected();
 
@@ -27,6 +30,9 @@ define('forum/topic/move-post', ['components', 'postSelect'], function (componen
 				postSelect.togglePostSelection(postEl, postEl.attr('data-pid'));
 			}
 
+			$(window).off('action:axajify.end', checkMoveButtonEnable)
+				.on('action:ajaxify.end', checkMoveButtonEnable);
+
 			moveCommit.on('click', function () {
 				movePosts();
 			});
@@ -34,29 +40,45 @@ define('forum/topic/move-post', ['components', 'postSelect'], function (componen
 	};
 
 	function showPostsSelected() {
+		if (!moveModal) {
+			return;
+		}
 		if (postSelect.pids.length) {
-			moveModal.find('#pids').translateHtml('[[topic:fork_pid_count, ' + postSelect.pids.length + ']]');
+			if (ajaxify.data.template.topic && ajaxify.data.tid && ajaxify.data.tid !== fromTid) {
+				var translateStr = translator.compile('topic:x-posts-will-be-moved-to-y', postSelect.pids.length, ajaxify.data.title);
+				moveModal.find('#pids').translateHtml(translateStr);
+			} else {
+				moveModal.find('#pids').translateHtml('[[topic:x-posts-selected, ' + postSelect.pids.length + ']]');
+			}
 		} else {
-			moveModal.find('#pids').translateHtml('[[topic:fork_no_pids]]');
+			moveModal.find('#pids').translateHtml('[[topic:no-posts-selected]]');
 		}
 	}
 
 	function checkMoveButtonEnable() {
-		if (moveModal.find('#topicId').val().length && postSelect.pids.length) {
+		if (!moveModal) {
+			return;
+		}
+
+		if (postSelect.pids.length && ajaxify.data.tid &&
+			ajaxify.data.template.topic && ajaxify.data.tid !== fromTid
+		) {
 			moveCommit.removeAttr('disabled');
 		} else {
 			moveCommit.attr('disabled', true);
 		}
+		showPostsSelected();
 	}
 
 	function onPostToggled() {
 		checkMoveButtonEnable();
-		showPostsSelected();
 	}
 
 	function movePosts() {
-		var tid = moveModal.find('#topicId').val();
+		if (!ajaxify.data.template.topic || !ajaxify.data.tid) {
-		socket.emit('posts.movePosts', { pids: postSelect.pids, tid: tid }, function (err) {
+			return;
+		}
+		socket.emit('posts.movePosts', { pids: postSelect.pids, tid: ajaxify.data.tid }, function (err) {
 			if (err) {
 				return app.alertError(err.message);
 			}

src/meta/css.js

@@ -32,6 +32,7 @@ var buildImports = {
 			'@import "../../public/less/generics.less";',
 			'@import "../../public/less/mixins.less";',
 			'@import "../../public/less/global.less";',
+			'@import "../../public/less/modals.less";',
 		].map(function (str) {
 			return str.replace(/\//g, path.sep);
 		}).join('\n');

src/views/modals/move-post.tpl

@@ -0,0 +1,20 @@
+<div class="panel panel-primary tool-modal">
+	<div class="panel-heading">
+		<h3 class="panel-title">[[topic:thread_tools.move-posts]]</h3>
+	</div>
+	<div class="panel-body">
+		<p>
+    		<strong><span id="pids"></span></strong>
+        </p>
+        <p class="help-block">
+            [[topic:move_posts_instruction]]
+        </p>
+	</div>
+	<div class="panel-footer">
+		&nbsp;
+		<div class="btn-group pull-right">
+			<button class="btn btn-link btn-xs" id="move_posts_cancel">[[global:buttons.close]]</button>
+			<button class="btn btn-primary btn-xs" id="move_posts_confirm" disabled>[[topic:move]]</button>
+		</div>
+	</div>
+</div>