parse upload picture modal on demand

public/src/modules/uploader.js

@@ -1,84 +1,95 @@
 'use strict';
 
-/* globals define */
+/* globals define, templates, translator */
 
 define('uploader', ['csrf'], function(csrf) {
 
 	var module = {};
 
 	module.open = function(route, params, fileSize, callback) {
-		var uploadModal = $('#upload-picture-modal');
+		parseModal(function(uploadModal) {
-		uploadModal.modal('show').removeClass('hide');
+			uploadModal = $(uploadModal);
-		module.hideAlerts();
-		var uploadForm = $('#uploadForm');
-		uploadForm[0].reset();
-		uploadForm.attr('action', route);
-		uploadForm.find('#params').val(JSON.stringify(params));
-
-		if (fileSize) {
-			uploadForm.find('#file-size-block')
-				.translateText('[[uploads:maximum-file-size, ' + fileSize + ']]')
-				.removeClass('hide');
-		} else {
-			uploadForm.find('#file-size-block').addClass('hide');
-		}
 
-		$('#pictureUploadSubmitBtn').off('click').on('click', function() {
+			uploadModal.modal('show');
-			uploadForm.submit();
+		 	uploadModal.on('hidden.bs.modal', function() {
-		});
+				uploadModal.remove();
+			});
 
-		uploadForm.off('submit').submit(function() {
+			var uploadForm = uploadModal.find('#uploadForm');
+			uploadForm.attr('action', route);
+			uploadForm.find('#params').val(JSON.stringify(params));
 
-			function showAlert(type, message) {
+			if (fileSize) {
-				module.hideAlerts();
+				uploadForm.find('#file-size-block')
-				uploadModal.find('#alert-' + type).translateText(message).removeClass('hide');
+					.translateText('[[uploads:maximum-file-size, ' + fileSize + ']]')
+					.removeClass('hide');
+			} else {
+				uploadForm.find('#file-size-block').addClass('hide');
 			}
 
-			showAlert('status', '[[uploads:uploading-file]]');
+			uploadModal.find('#pictureUploadSubmitBtn').off('click').on('click', function() {
+				uploadForm.submit();
+			});
 
-			uploadModal.find('#upload-progress-bar').css('width', '0%');
+			uploadForm.off('submit').submit(function() {
-			uploadModal.find('#upload-progress-box').show().removeClass('hide');
 
-			if (!$('#userPhotoInput').val()) {
+				function showAlert(type, message) {
-				showAlert('error', '[[uploads:select-file-to-upload]]');
+					module.hideAlerts(uploadModal);
-				return false;
+					uploadModal.find('#alert-' + type).translateText(message).removeClass('hide');
-			}
+				}
 
-			$(this).ajaxSubmit({
+				showAlert('status', '[[uploads:uploading-file]]');
-				headers: {
-					'x-csrf-token': csrf.get()
-				},
-				error: function(xhr) {
-					xhr = maybeParse(xhr);
-					showAlert('error', xhr.responseJSON ? xhr.responseJSON.error : 'error uploading, code : ' + xhr.status);
-				},
-
-				uploadProgress: function(event, position, total, percent) {
-					uploadModal.find('#upload-progress-bar').css('width', percent + '%');
-				},
-
-				success: function(response) {
-					response = maybeParse(response);
-
-					if (response.error) {
-						showAlert('error', response.error);
-						return;
-					}
 
-					callback(response[0].url);
+				uploadModal.find('#upload-progress-bar').css('width', '0%');
+				uploadModal.find('#upload-progress-box').show().removeClass('hide');
 
-					showAlert('success', '[[uploads:upload-success]]');
+				if (!uploadModal.find('#userPhotoInput').val()) {
-					setTimeout(function() {
+					showAlert('error', '[[uploads:select-file-to-upload]]');
-						module.hideAlerts();
+					return false;
-						uploadModal.modal('hide');
-					}, 750);
 				}
-			});
 
-			return false;
+				$(this).ajaxSubmit({
+					headers: {
+						'x-csrf-token': csrf.get()
+					},
+					error: function(xhr) {
+						xhr = maybeParse(xhr);
+						showAlert('error', xhr.responseJSON ? xhr.responseJSON.error : 'error uploading, code : ' + xhr.status);
+					},
+
+					uploadProgress: function(event, position, total, percent) {
+						uploadModal.find('#upload-progress-bar').css('width', percent + '%');
+					},
+
+					success: function(response) {
+						response = maybeParse(response);
+
+						if (response.error) {
+							showAlert('error', response.error);
+							return;
+						}
+
+						callback(response[0].url);
+
+						showAlert('success', '[[uploads:upload-success]]');
+						setTimeout(function() {
+							module.hideAlerts();
+							uploadModal.modal('hide');
+						}, 750);
+					}
+				});
+
+				return false;
+			});
 		});
 	};
 
+	function parseModal(callback) {
+		templates.parse('partials/modals/upload_picture_modal', {}, function(html) {
+			translator.translate(html, callback);
+		});
+	}
+
 	function maybeParse(response) {
 		if (typeof response === 'string') {
 			try {
@@ -90,8 +101,8 @@ define('uploader', ['csrf'], function(csrf) {
 		return response;
 	}
 
-	module.hideAlerts = function() {
+	module.hideAlerts = function(modal) {
-		$('#upload-picture-modal').find('#alert-status, #alert-success, #alert-error, #upload-progress-box').addClass('hide');
+		modal.find('#alert-status, #alert-success, #alert-error, #upload-progress-box').addClass('hide');
 	};
 
 	return module;