close #7024

show error instead showing crop modal

public/src/modules/pictureCropper.js

@@ -1,12 +1,11 @@
 'use strict';
 
-
+define('pictureCropper', ['cropper'], function (Cropper) {
-define('pictureCropper', ['translator', 'cropper', 'benchpress'], function (translator, Cropper, Benchpress) {
 	var module = {};
 
 	module.show = function (data, callback) {
 		var fileSize = data.hasOwnProperty('fileSize') && data.fileSize !== undefined ? parseInt(data.fileSize, 10) : false;
-		parseModal({
+		app.parseAndTranslate('partials/modals/upload_file_modal', {
 			showHelp: data.hasOwnProperty('showHelp') && data.showHelp !== undefined ? data.showHelp : true,
 			fileSize: fileSize,
 			title: data.title || '[[global:upload_file]]',
@@ -14,8 +13,6 @@ define('pictureCropper', ['translator', 'cropper', 'benchpress'], function (tran
 			button: data.button || '[[global:upload]]',
 			accept: data.accept ? data.accept.replace(/,/g, ', ') : '',
 		}, function (uploadModal) {
-			uploadModal = $(uploadModal);
-
 			uploadModal.modal('show');
 			uploadModal.on('hidden.bs.modal', function () {
 				uploadModal.remove();
@@ -32,14 +29,12 @@ define('pictureCropper', ['translator', 'cropper', 'benchpress'], function (tran
 
 	module.handleImageCrop = function (data, callback) {
 		$('#crop-picture-modal').remove();
-		Benchpress.parse('modals/crop_picture', {
+		app.parseAndTranslate('modals/crop_picture', {
 			url: utils.escapeHTML(data.url),
-		}, function (cropperHtml) {
+		}, function (cropperModal) {
-			translator.translate(cropperHtml, function (translated) {
-				var cropperModal = $(translated);
 			cropperModal.modal({
 				backdrop: 'static',
-				}).modal('show');
+			}).modal('hide');
 
 			// Set cropper image max-height based on viewport
 			var cropBoxHeight = parseInt($(window).height() / 2, 10);
@@ -66,6 +61,12 @@ define('pictureCropper', ['translator', 'cropper', 'benchpress'], function (tran
 					}
 				},
 				ready: function () {
+					if (!checkCORS(cropperTool, data)) {
+						return;
+					}
+
+					cropperModal.modal('show');
+
 					if (data.restrictImageDimension) {
 						var origDimension = (img.width < img.height) ? img.width : img.height;
 						var dimension = (origDimension > data.imageDimension) ? data.imageDimension : origDimension;
@@ -97,15 +98,8 @@ define('pictureCropper', ['translator', 'cropper', 'benchpress'], function (tran
 
 					cropperModal.find('.crop-btn').on('click', function () {
 						$(this).addClass('disabled');
-							var imageData;
+						var imageData = checkCORS(cropperTool, data);
-							try {
+						if (!imageData) {
-								imageData = data.imageType ? cropperTool.getCroppedCanvas().toDataURL(data.imageType) : cropperTool.getCroppedCanvas().toDataURL();
-							} catch (err) {
-								if (err.message === 'Failed to execute \'toDataURL\' on \'HTMLCanvasElement\': Tainted canvases may not be exported.') {
-									app.alertError('[[error:cors-error]]');
-								} else {
-									app.alertError(err.message);
-								}
 							return;
 						}
 
@@ -144,9 +138,23 @@ define('pictureCropper', ['translator', 'cropper', 'benchpress'], function (tran
 				},
 			});
 		});
-		});
 	};
 
+	function checkCORS(cropperTool, data) {
+		var imageData;
+		try {
+			imageData = data.imageType ? cropperTool.getCroppedCanvas().toDataURL(data.imageType) : cropperTool.getCroppedCanvas().toDataURL();
+		} catch (err) {
+			if (err.message === 'Failed to execute \'toDataURL\' on \'HTMLCanvasElement\': Tainted canvases may not be exported.') {
+				app.alertError('[[error:cors-error]]');
+			} else {
+				app.alertError(err.message);
+			}
+			return;
+		}
+		return imageData;
+	}
+
 	function onSubmit(data, callback) {
 		function showAlert(type, message) {
 			if (type === 'error') {
@@ -190,11 +198,5 @@ define('pictureCropper', ['translator', 'cropper', 'benchpress'], function (tran
 		}
 	}
 
-	function parseModal(tplVals, callback) {
-		Benchpress.parse('partials/modals/upload_file_modal', tplVals, function (html) {
-			translator.translate(html, callback);
-		});
-	}
-
 	return module;
 });