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,121 +29,132 @@ 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) {
+			cropperModal.modal({
-				var cropperModal = $(translated);
+				backdrop: 'static',
-				cropperModal.modal({
+			}).modal('hide');
-					backdrop: 'static',
+
-				}).modal('show');
+			// Set cropper image max-height based on viewport
-
+			var cropBoxHeight = parseInt($(window).height() / 2, 10);
-				// Set cropper image max-height based on viewport
+			var img = document.getElementById('cropped-image');
-				var cropBoxHeight = parseInt($(window).height() / 2, 10);
+			$(img).css('max-height', cropBoxHeight);
-				var img = document.getElementById('cropped-image');
+
-				$(img).css('max-height', cropBoxHeight);
+			var cropperTool = new Cropper(img, {
-
+				aspectRatio: data.aspectRatio,
-				var cropperTool = new Cropper(img, {
+				autoCropArea: 1,
-					aspectRatio: data.aspectRatio,
+				viewMode: 1,
-					autoCropArea: 1,
+				checkCrossOrigin: false,
-					viewMode: 1,
+				cropmove: function () {
-					checkCrossOrigin: false,
+					if (data.restrictImageDimension) {
-					cropmove: function () {
+						if (cropperTool.cropBoxData.width > data.imageDimension) {
-						if (data.restrictImageDimension) {
+							cropperTool.setCropBoxData({
-							if (cropperTool.cropBoxData.width > data.imageDimension) {
+								width: data.imageDimension,
-								cropperTool.setCropBoxData({
+							});
-									width: data.imageDimension,
-								});
-							}
-							if (cropperTool.cropBoxData.height > data.imageDimension) {
-								cropperTool.setCropBoxData({
-									height: data.imageDimension,
-								});
-							}
 						}
-					},
+						if (cropperTool.cropBoxData.height > data.imageDimension) {
-					ready: function () {
-						if (data.restrictImageDimension) {
-							var origDimension = (img.width < img.height) ? img.width : img.height;
-							var dimension = (origDimension > data.imageDimension) ? data.imageDimension : origDimension;
 							cropperTool.setCropBoxData({
-								width: dimension,
+								height: data.imageDimension,
-								height: dimension,
 							});
 						}
-
+					}
-						cropperModal.find('.rotate').on('click', function () {
+				},
-							var degrees = this.getAttribute('data-degrees');
+				ready: function () {
-							cropperTool.rotate(degrees);
+					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;
+						cropperTool.setCropBoxData({
+							width: dimension,
+							height: dimension,
 						});
+					}
+
+					cropperModal.find('.rotate').on('click', function () {
+						var degrees = this.getAttribute('data-degrees');
+						cropperTool.rotate(degrees);
+					});
+
+					cropperModal.find('.flip').on('click', function () {
+						var option = this.getAttribute('data-option');
+						var method = this.getAttribute('data-method');
+						if (method === 'scaleX') {
+							cropperTool.scaleX(option);
+						} else {
+							cropperTool.scaleY(option);
+						}
+						this.setAttribute('data-option', option * -1);
+					});
+
+					cropperModal.find('.reset').on('click', function () {
+						cropperTool.reset();
+					});
+
+					cropperModal.find('.crop-btn').on('click', function () {
+						$(this).addClass('disabled');
+						var imageData = checkCORS(cropperTool, data);
+						if (!imageData) {
+							return;
+						}
 
-						cropperModal.find('.flip').on('click', function () {
+						cropperModal.find('#upload-progress-bar').css('width', '100%');
-							var option = this.getAttribute('data-option');
+						cropperModal.find('#upload-progress-box').show().removeClass('hide');
-							var method = this.getAttribute('data-method');
-							if (method === 'scaleX') {
-								cropperTool.scaleX(option);
-							} else {
-								cropperTool.scaleY(option);
-							}
-							this.setAttribute('data-option', option * -1);
-						});
 
-						cropperModal.find('.reset').on('click', function () {
+						var socketData = {};
-							cropperTool.reset();
+						socketData[data.paramName] = data.paramValue;
-						});
+						socketData.imageData = imageData;
 
-						cropperModal.find('.crop-btn').on('click', function () {
+						socket.emit(data.socketMethod, socketData, function (err, imageData) {
-							$(this).addClass('disabled');
+							if (err) {
-							var imageData;
+								cropperModal.find('#upload-progress-box').hide();
-							try {
+								cropperModal.find('.upload-btn').removeClass('disabled');
-								imageData = data.imageType ? cropperTool.getCroppedCanvas().toDataURL(data.imageType) : cropperTool.getCroppedCanvas().toDataURL();
+								cropperModal.find('.crop-btn').removeClass('disabled');
-							} catch (err) {
+								return app.alertError(err.message);
-								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;
 							}
 
-							cropperModal.find('#upload-progress-bar').css('width', '100%');
+							callback(imageData.url);
-							cropperModal.find('#upload-progress-box').show().removeClass('hide');
+							cropperModal.modal('hide');
-
-							var socketData = {};
-							socketData[data.paramName] = data.paramValue;
-							socketData.imageData = imageData;
-
-							socket.emit(data.socketMethod, socketData, function (err, imageData) {
-								if (err) {
-									cropperModal.find('#upload-progress-box').hide();
-									cropperModal.find('.upload-btn').removeClass('disabled');
-									cropperModal.find('.crop-btn').removeClass('disabled');
-									return app.alertError(err.message);
-								}
-
-								callback(imageData.url);
-								cropperModal.modal('hide');
-							});
 						});
-
+					});
-						cropperModal.find('.upload-btn').on('click', function () {
+
-							$(this).addClass('disabled');
+					cropperModal.find('.upload-btn').on('click', function () {
-							cropperTool.destroy();
+						$(this).addClass('disabled');
-
+						cropperTool.destroy();
-							cropperTool = new Cropper(img, {
+
-								viewMode: 1,
+						cropperTool = new Cropper(img, {
-								autoCropArea: 1,
+							viewMode: 1,
-								ready: function () {
+							autoCropArea: 1,
-									cropperModal.find('.crop-btn').trigger('click');
+							ready: function () {
-								},
+								cropperModal.find('.crop-btn').trigger('click');
-							});
+							},
 						});
-					},
+					});
-				});
+				},
 			});
 		});
 	};
 
+	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;
 });