parse picture modals when needed

https://github.com/NodeBB/nodebb-theme-persona/issues/161

public/src/client/account/edit.js

@@ -29,12 +29,10 @@ define('forum/account/edit', ['forum/account/header', 'uploader', 'translator'],
 
 		handleImageChange();
 		handleAccountDelete();
-		handleImageUpload();
 		handleEmailConfirm();
 		handlePasswordChange();
 		updateSignature();
 		updateAboutMe();
-		updateImages();
 	};
 
 	function updateProfile() {
@@ -68,7 +66,7 @@ define('forum/account/edit', ['forum/account/header', 'uploader', 'translator'],
 
 			if (data.userslug) {
 				var oldslug = $('.account-username-box').attr('data-userslug');
-				$('.account-username-box a').each(function(index) {
+				$('.account-username-box a').each(function() {
 					$(this).attr('href', $(this).attr('href').replace(oldslug, data.userslug));
 				});
 
@@ -104,49 +102,78 @@ define('forum/account/edit', ['forum/account/header', 'uploader', 'translator'],
 	}
 
 	function handleImageChange() {
-		function selectImageType(type) {
-			$('#gravatar-box .fa-check').toggle(type === 'gravatar');
-			$('#uploaded-box .fa-check').toggle(type === 'uploaded');
-			selectedImageType = type;
-		}
 
 		$('#changePictureBtn').on('click', function() {
-			selectedImageType = '';
+			templates.parse('partials/modals/change_picture_modal', {uploadedpicture: uploadedPicture}, function(html) {
-			updateImages();
+				translator.translate(html, function(html) {
+					function updateImages() {
+						var currentPicture = $('#user-current-picture').attr('src');
 
-			$('#change-picture-modal').modal('show');
+						if (gravatarPicture) {
-			$('#change-picture-modal').removeClass('hide');
+							modal.find('#user-gravatar-picture').attr('src', gravatarPicture);
+						}
 
-			return false;
+						if (uploadedPicture) {
-		});
+							modal.find('#user-uploaded-picture').attr('src', uploadedPicture);
+						}
 
-		$('#gravatar-box').on('click', function() {
+						modal.find('#gravatar-box').toggle(!!gravatarPicture);
-			selectImageType('gravatar');
+						modal.find('#uploaded-box').toggle(!!uploadedPicture);
-		});
 
-		$('#uploaded-box').on('click', function() {
+						modal.find('#gravatar-box .fa-check').toggle(currentPicture !== uploadedPicture);
-			selectImageType('uploaded');
+						modal.find('#uploaded-box .fa-check').toggle(currentPicture === uploadedPicture);
-		});
+					}
 
-		$('#savePictureChangesBtn').on('click', function() {
+					function selectImageType(type) {
-			$('#change-picture-modal').modal('hide');
+						modal.find('#gravatar-box .fa-check').toggle(type === 'gravatar');
+						modal.find('#uploaded-box .fa-check').toggle(type === 'uploaded');
+						selectedImageType = type;
+					}
 
-			if (!selectedImageType) {
+					var modal = $(html);
-				return;
+					modal.on('hidden.bs.modal', function() {
-			}
+						modal.remove();
-			changeUserPicture(selectedImageType, function(err) {
+					});
-				if (err) {
+					selectedImageType = '';
-					return app.alertError(err.message);
+					updateImages();
-				}
 
-				if (selectedImageType === 'gravatar') {
+					modal.modal('show');
-					$('#user-current-picture').attr('src', gravatarPicture);
+
-					updateHeader(gravatarPicture);
+					modal.find('#gravatar-box').on('click', function() {
-				} else if (selectedImageType === 'uploaded') {
+						selectImageType('gravatar');
-					$('#user-current-picture').attr('src', uploadedPicture);
+					});
-					updateHeader(uploadedPicture);
+
-				}
+					modal.find('#uploaded-box').on('click', function() {
+						selectImageType('uploaded');
+					});
+
+					handleImageUpload(modal);
+
+					modal.find('#savePictureChangesBtn').on('click', function() {
+
+						modal.modal('hide');
+
+						if (!selectedImageType) {
+							return;
+						}
+						changeUserPicture(selectedImageType, function(err) {
+							if (err) {
+								return app.alertError(err.message);
+							}
+
+							if (selectedImageType === 'gravatar') {
+								$('#user-current-picture').attr('src', gravatarPicture);
+								updateHeader(gravatarPicture);
+							} else if (selectedImageType === 'uploaded') {
+								$('#user-current-picture').attr('src', uploadedPicture);
+								updateHeader(uploadedPicture);
+							}
+						});
+					});
+				});
 			});
+
+			return false;
 		});
 	}
 
@@ -178,32 +205,23 @@ define('forum/account/edit', ['forum/account/header', 'uploader', 'translator'],
 		});
 	}
 
-	function handleImageUpload() {
+	function handleImageUpload(modal) {
 		function onUploadComplete(urlOnServer) {
 			urlOnServer = urlOnServer + '?' + new Date().getTime();
 
 			$('#user-current-picture').attr('src', urlOnServer);
-			$('#user-uploaded-picture').attr('src', urlOnServer);
 			updateHeader(urlOnServer);
 			uploadedPicture = urlOnServer;
-			$('#removeUploadedPictureBtn').removeClass('hide');
 		}
 
 		function onRemoveComplete(urlOnServer) {
 			$('#user-current-picture').attr('src', urlOnServer);
-			$('#user-uploaded-picture').attr('src', '');
 			updateHeader(urlOnServer);
 			uploadedPicture = '';
-			$('#removeUploadedPictureBtn').addClass('hide');
 		}
 
-		$('#upload-picture-modal').on('hide', function() {
+		modal.find('#uploadPictureBtn').on('click', function() {
-			$('#userPhotoInput').val('');
+			modal.modal('hide');
-		});
-
-		$('#uploadPictureBtn').on('click', function() {
-
-			$('#change-picture-modal').modal('hide');
 			uploader.open(config.relative_path + '/api/user/' + ajaxify.data.userslug + '/uploadpicture', {}, config.maximumProfileImageSize, function(imageUrlOnServer) {
 				onUploadComplete(imageUrlOnServer);
 			});
@@ -211,39 +229,44 @@ define('forum/account/edit', ['forum/account/header', 'uploader', 'translator'],
 			return false;
 		});
 
-		$('#uploadFromUrlBtn').on('click', function() {
+		modal.find('#uploadFromUrlBtn').on('click', function() {
-			$('#change-picture-modal').modal('hide');
+			modal.modal('hide');
-			var uploadModal = $('#upload-picture-from-url-modal');
+			templates.parse('partials/modals/upload_picture_from_url_modal', {}, function(html) {
-			uploadModal.modal('show').removeClass('hide');
+				translator.translate(html, function(html) {
+					var uploadModal = $(html);
+					uploadModal.modal('show');
+
+					uploadModal.find('.upload-btn').on('click', function() {
+						var url = uploadModal.find('#uploadFromUrl').val();
+						if (!url) {
+							return;
+						}
+						socket.emit('user.uploadProfileImageFromUrl', {url: url, uid: ajaxify.data.theirid}, function(err, imageUrlOnServer) {
+							if (err) {
+								return app.alertError(err.message);
+							}
+							onUploadComplete(imageUrlOnServer);
 
-			uploadModal.find('.upload-btn').on('click', function() {
+							uploadModal.modal('hide');
-				var url = uploadModal.find('#uploadFromUrl').val();
+						});
-				if (!url) {
-					return;
-				}
-				socket.emit('user.uploadProfileImageFromUrl', {url: url, uid: ajaxify.data.theirid}, function(err, imageUrlOnServer) {
-					if (err) {
-						return app.alertError(err.message);
-					}
-					onUploadComplete(imageUrlOnServer);
 
-					uploadModal.modal('hide');
+						return false;
+					});
 				});
-
-				return false;
 			});
+
 			return false;
 		});
 
-		$('#removeUploadedPictureBtn').on('click', function() {
+		modal.find('#removeUploadedPictureBtn').on('click', function() {
 			socket.emit('user.removeUploadedPicture', {uid: ajaxify.data.theirid}, function(err, imageUrlOnServer) {
+				modal.modal('hide');
 				if (err) {
 					return app.alertError(err.message);
 				}
 				onRemoveComplete(imageUrlOnServer);
-				$('#change-picture-modal').modal('hide');
 			});
-		})
+		});
 	}
 
 	function handleEmailConfirm() {
@@ -348,24 +371,6 @@ define('forum/account/edit', ['forum/account/header', 'uploader', 'translator'],
 		}, callback);
 	}
 
-	function updateImages() {
-		var currentPicture = $('#user-current-picture').attr('src');
-
-		if (gravatarPicture) {
-			$('#user-gravatar-picture').attr('src', gravatarPicture);
-		}
-
-		if (uploadedPicture) {
-			$('#user-uploaded-picture').attr('src', uploadedPicture);
-		}
-
-		$('#gravatar-box').toggle(!!gravatarPicture);
-		$('#uploaded-box').toggle(!!uploadedPicture);
-
-		$('#gravatar-box .fa-check').toggle(currentPicture !== uploadedPicture);
-		$('#uploaded-box .fa-check').toggle(currentPicture === uploadedPicture);
-	}
-
 	function getCharsLeft(el, max) {
 		return el.length ? '(' + el.val().length + '/' + max + ')' : '';
 	}