parse modals on demand

public/src/client/topic/fork.js

@@ -1,6 +1,6 @@
 'use strict';
 
-/* globals define, app, ajaxify, socket */
+/* globals define, app, ajaxify, socket, templates, translator */
 
 define('forum/topic/fork', ['components'], function(components) {
 
@@ -26,7 +26,13 @@ define('forum/topic/fork', ['components'], function(components) {
 	}
 
 	function onForkThreadClicked() {
-		forkModal = $('#fork-thread-modal');
+		parseModal(function(html) {
+			forkModal = $(html);
+
+			forkModal.on('hidden.bs.modal', function() {
+				forkModal.remove();
+			});
+
 			forkCommit = forkModal.find('#fork_thread_commit');
 			pids.length = 0;
 
@@ -42,12 +48,20 @@ define('forum/topic/fork', ['components'], function(components) {
 			disableClicksOnPosts();
 
 			forkCommit.on('click', createTopicFromPosts);
+
+		});
+	}
+
+	function parseModal(callback) {
+		templates.parse('partials/fork_thread_modal', {}, function(html) {
+			translator.translate(html, callback);
+		});
 	}
 
 	function showForkModal() {
-		forkModal.removeClass('hide')
+		forkModal.modal({backdrop: false, show: true})
 			.css('position', 'fixed')
-			.css('left', Math.max(0, (($(window).width() - $(forkModal).outerWidth()) / 2) + $(window).scrollLeft()) + 'px')
+			.css('left', Math.max(0, (($(window).width() - forkModal.outerWidth()) / 2) + $(window).scrollLeft()) + 'px')
 			.css('top', '0px')
 			.css('z-index', '2000');
 	}
@@ -88,11 +102,11 @@ define('forum/topic/fork', ['components'], function(components) {
 	function togglePostSelection(post) {
 		var newPid = post.attr('data-pid');
 
-		if(parseInt(post.attr('data-index'), 10) === 0) {
+		if (parseInt(post.attr('data-index'), 10) === 0) {
 			return;
 		}
 
-		if(newPid) {
+		if (newPid) {
 			var index = pids.indexOf(newPid);
 			if(index === -1) {
 				pids.push(newPid);
@@ -125,11 +139,12 @@ define('forum/topic/fork', ['components'], function(components) {
 	}
 
 	function closeForkModal() {
-		for(var i=0; i<pids.length; ++i) {
+		for (var i=0; i<pids.length; ++i) {
 			components.get('post', 'pid', pids[i]).css('opacity', 1);
 		}
 
-		forkModal.addClass('hide');
+		forkModal.modal('hide');
+
 		components.get('topic').off('click', '[data-pid]');
 		enableClicksOnPosts();
 	}

public/src/client/topic/move.js

@@ -1,6 +1,6 @@
 'use strict';
 
-/* globals define, app, socket, templates */
+/* globals define, app, socket, templates, translator */
 
 define('forum/topic/move', function() {
 
@@ -10,57 +10,59 @@ define('forum/topic/move', function() {
 		targetCategoryLabel;
 
 	Move.init = function(tids, currentCid, onComplete) {
-		modal = $('#move_thread_modal');
-
 		Move.tids = tids;
 		Move.currentCid = currentCid;
 		Move.onComplete = onComplete;
 		Move.moveAll = tids ? false : true;
 
-		modal.on('shown.bs.modal', onMoveModalShown);
-		$('#move-confirm').addClass('hide');
-
-		if (Move.moveAll || (tids && tids.length > 1)) {
-			modal.find('.modal-header h3').translateText('[[topic:move_topics]]');
-		}
-
-		modal.modal('show');
-	};
-
-	function onMoveModalShown() {
-		var loadingEl = $('#categories-loading');
-		if (!loadingEl.length) {
-			return;
-		}
-
 		socket.emit('categories.get', onCategoriesLoaded);
-	}
+	};
 
 	function onCategoriesLoaded(err, categories) {
 		if (err) {
 			return app.alertError(err.message);
 		}
 
-		renderCategories(categories);
+		parseModal(categories, function(html) {
+			modal = $(html);
+
+			modal.on('hidden.bs.modal', function() {
+				modal.remove();
+			});
+
+			modal.find('#move-confirm').addClass('hide');
+
+			if (Move.moveAll || (Move.tids && Move.tids.length > 1)) {
+				modal.find('.modal-header h3').translateText('[[topic:move_topics]]');
+			}
 
 			modal.on('click', '.category-list li[data-cid]', function(e) {
 				selectCategory($(this));
 			});
 
-		$('#move_thread_commit').on('click', onCommitClicked);
+			modal.find('#move_thread_commit').on('click', onCommitClicked);
+
+			modal.modal('show');
+		});
+	}
+
+	function parseModal(categories, callback) {
+		templates.parse('partials/move_thread_modal', {categories: categories}, function(html) {
+			translator.translate(html, callback);
+		});
 	}
 
 	function selectCategory(category) {
 		modal.find('#confirm-category-name').html(category.html());
-		$('#move-confirm').removeClass('hide');
+		modal.find('#move-confirm').removeClass('hide');
 
 		targetCid = category.attr('data-cid');
 		targetCategoryLabel = category.html();
-		$('#move_thread_commit').prop('disabled', false);
+		modal.find('#move_thread_commit').prop('disabled', false);
 	}
 
 	function onCommitClicked() {
-		var commitEl = $('#move_thread_commit');
+		var commitEl = modal.find('#move_thread_commit');
 
 		if (!commitEl.prop('disabled') && targetCid) {
 			commitEl.prop('disabled', true);
@@ -76,7 +78,6 @@ define('forum/topic/move', function() {
 			currentCid: Move.currentCid
 		}, function(err) {
 			modal.modal('hide');
-			$('#move_thread_commit').prop('disabled', false);
 
 			if (err) {
 				return app.alertError(err.message);
@@ -89,12 +90,6 @@ define('forum/topic/move', function() {
 		});
 	}
 
-	function renderCategories(categories) {
-		templates.parse('partials/category_list', {categories: categories}, function(html) {
-			modal.find('.modal-body').prepend(html);
-			$('#categories-loading').remove();
-		});
-	}
 
 	return Move;
 });

public/src/client/topic/postTools.js

@@ -289,53 +289,63 @@ define('forum/topic/postTools', ['share', 'navigator', 'components', 'translator
 	}
 
 	function openMovePostModal(button) {
-		var moveModal = $('#move-post-modal'),
+		parseMoveModal(function(html) {
-			moveBtn = moveModal.find('#move_post_commit'),
+			var moveModal = $(html);
+
+			var	moveBtn = moveModal.find('#move_post_commit'),
 				topicId = moveModal.find('#topicId');
 
-		showMoveModal();
+			moveModal.on('hidden.bs.modal', function() {
+				moveModal.remove();
+			});
+
+			showMoveModal(moveModal);
 
-		moveModal.find('.close,#move_post_cancel').on('click', function() {
+			moveModal.find('.close, #move_post_cancel').on('click', function() {
 				moveModal.addClass('hide');
 			});
 
-		topicId.on('change', function() {
+			topicId.on('keyup change', function() {
-			if(topicId.val().length) {
+				moveBtn.attr('disabled', !topicId.val())
-				moveBtn.removeAttr('disabled');
-			} else {
-				moveBtn.attr('disabled', true);
-			}
 			});
 
 			moveBtn.on('click', function() {
-			movePost(button.parents('[data-pid]'), getData(button, 'data-pid'), topicId.val());
+				movePost(button.parents('[data-pid]'), getData(button, 'data-pid'), topicId.val(), function() {
+					moveModal.modal('hide');
+					topicId.val('');
+				});
+			});
+
 		});
 	}
 
-	function showMoveModal() {
+	function parseMoveModal(callback) {
-		$('#move-post-modal').removeClass('hide')
+		templates.parse('partials/move_post_modal', {}, function(html) {
+			translator.translate(html, callback);
+		});
+	}
+
+	function showMoveModal(modal) {
+		modal.modal('show')
 			.css("position", "fixed")
-			.css("left", Math.max(0, (($(window).width() - $($('#move-post-modal')).outerWidth()) / 2) + $(window).scrollLeft()) + "px")
+			.css("left", Math.max(0, (($(window).width() - modal.outerWidth()) / 2) + $(window).scrollLeft()) + "px")
 			.css("top", "0px")
 			.css("z-index", "2000");
 	}
 
-	function movePost(post, pid, tid) {
+	function movePost(post, pid, tid, callback) {
 		socket.emit('posts.movePost', {pid: pid, tid: tid}, function(err) {
-			$('#move-post-modal').addClass('hide');
-
 			if (err) {
-				$('#topicId').val('');
+				app.alertError(err.message);
-				return app.alertError(err.message);
+				return callback();
 			}
 
 			post.fadeOut(500, function() {
 				post.remove();
 			});
 
-			$('#topicId').val('');
-
 			app.alertSuccess('[[topic:post_moved]]');
+			callback();
 		});
 	}