Use ACP profile image dimension setting in cropper

public/src/client/account/edit.js

@@ -73,7 +73,9 @@ define('forum/account/edit', ['forum/account/header', 'translator', 'components'
 	function handleImageChange() {
 
 		$('#changePictureBtn').on('click', function () {
-			socket.emit('user.getProfilePictures', {uid: ajaxify.data.uid}, function (err, pictures) {
+			socket.emit('user.getProfilePictures', {
+				uid: ajaxify.data.uid
+			}, function (err, pictures) {
 				if (err) {
 					return app.alertError(err.message);
 				}
@@ -216,10 +218,13 @@ define('forum/account/edit', ['forum/account/header', 'translator', 'components'
 
 			pictureCropper.show({
 				socketMethod: 'user.uploadCroppedPicture',
-				aspectRatio: '1 / 1',
+				aspectRatio: 1 / 1,
 				paramName: 'uid',
 				paramValue: ajaxify.data.theirid,
 				fileSize: ajaxify.data.maximumProfileImageSize,
+				allowSkippingCrop: false,
+				restrictImageDimension: true,
+				imageDimension: ajaxify.data.profileImageDimension,
 				title: '[[user:upload_picture]]',
 				description: '[[user:upload_a_picture]]',
 				accept: '.png,.jpg,.bmp'
@@ -249,6 +254,9 @@ define('forum/account/edit', ['forum/account/header', 'translator', 'components'
 							url: url,
 							socketMethod: 'user.uploadCroppedPicture',
 							aspectRatio: '1 / 1',
+							allowSkippingCrop: false,
+							restrictImageDimension: true,
+							imageDimension: ajaxify.data.profileImageDimension,
 							paramName: 'uid',
 							paramValue: ajaxify.data.theirid,
 						}, onUploadComplete);
@@ -262,7 +270,9 @@ define('forum/account/edit', ['forum/account/header', 'translator', 'components'
 		});
 
 		modal.find('[data-action="remove-uploaded"]').on('click', function () {
-			socket.emit('user.removeUploadedPicture', {uid: ajaxify.data.theirid}, function (err) {
+			socket.emit('user.removeUploadedPicture', {
+				uid: ajaxify.data.theirid
+			}, function (err) {
 				modal.modal('hide');
 				if (err) {
 					return app.alertError(err.message);

public/src/client/account/header.js

@@ -83,7 +83,9 @@ define('forum/account/header', [
 				pictureCropper.show({
 					title: '[[user:upload_cover_picture]]',
 					socketMethod: 'user.updateCover',
-					aspectRatio: '16 / 9',
+					aspectRatio: NaN,
+					allowSkippingCrop: true,
+					restrictImageDimension: false,
 					paramName: 'uid',
 					paramValue: ajaxify.data.theirid,
 					accept: '.png,.jpg,.bmp'
@@ -131,7 +133,11 @@ define('forum/account/header', [
 							}, {});
 							var until = parseInt(formData.length, 10) ? (Date.now() + formData.length * 1000 * 60 * 60 * (parseInt(formData.unit, 10) ? 24 : 1)) : 0;
 
-							socket.emit('user.banUsers', { uids: [ajaxify.data.theirid], until: until, reason: formData.reason || '' }, function (err) {
+							socket.emit('user.banUsers', {
+								uids: [ajaxify.data.theirid],
+								until: until,
+								reason: formData.reason || ''
+							}, function (err) {
 								if (err) {
 									return app.alertError(err.message);
 								}

public/src/client/groups/details.js

@@ -34,7 +34,9 @@ define('forum/groups/details', [
 					pictureCropper.show({
 						title: '[[groups:upload-group-cover]]',
 						socketMethod: 'groups.cover.update',
-						aspectRatio: '16 / 9',
+						aspectRatio: NaN,
+						allowSkippingCrop: true,
+						restrictImageDimension: false,
 						paramName: 'groupName',
 						paramValue: groupName
 					}, function (imageUrlOnServer) {

public/src/modules/pictureCropper.js

@@ -44,7 +44,30 @@ define('pictureCropper', ['translator', 'cropper'], function (translator, croppe
 				var cropperTool = new cropper.default(img, {
 					aspectRatio: data.aspectRatio,
 					viewMode: 1,
+					cropmove: function (e) {
+						if (data.restrictImageDimension) {
+							if (cropperTool.cropBoxData.width > data.imageDimension) {
+								cropperTool.setCropBoxData({
+									width: data.imageDimension
+								});
+							}
+							if (cropperTool.cropBoxData.height > data.imageDimension) {
+								cropperTool.setCropBoxData({
+									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: dimension
+							});
+						}
+
 						cropperModal.find('.rotate').on('click', function () {
 							var degrees = this.getAttribute("data-degrees");
 							cropperTool.rotate(degrees);
@@ -132,6 +155,9 @@ define('pictureCropper', ['translator', 'cropper'], function (translator, croppe
 				imageType: imageType,
 				socketMethod: data.socketMethod,
 				aspectRatio: data.aspectRatio,
+				allowSkippingCrop: data.allowSkippingCrop,
+				restrictImageDimension: data.restrictImageDimension,
+				imageDimension: data.imageDimension,
 				paramName: data.paramName,
 				paramValue: data.paramValue
 			}, callback);

src/controllers/accounts/edit.js

@@ -27,6 +27,7 @@ editController.get = function (req, res, callback) {
 		userData.maximumProfileImageSize = parseInt(meta.config.maximumProfileImageSize, 10);
 		userData.allowProfileImageUploads = parseInt(meta.config.allowProfileImageUploads) === 1;
 		userData.allowAccountDelete = parseInt(meta.config.allowAccountDelete, 10) === 1;
+		userData.profileImageDimension = parseInt(meta.config.profileImageDimension, 10) || 128;
 
 		userData.groups = userData.groups.filter(function (group) {
 			return group && group.userTitleEnabled && !groups.isPrivilegeGroup(group.name) && group.name !== 'registered-users';
@@ -36,7 +37,12 @@ editController.get = function (req, res, callback) {
 		});
 
 		userData.title = '[[pages:account/edit, ' + userData.username + ']]';
-		userData.breadcrumbs = helpers.buildBreadcrumbs([{text: userData.username, url: '/user/' + userData.userslug}, {text: '[[user:edit]]'}]);
+		userData.breadcrumbs = helpers.buildBreadcrumbs([{
+			text: userData.username,
+			url: '/user/' + userData.userslug
+		}, {
+			text: '[[user:edit]]'
+		}]);
 		userData.editButtons = [];
 
 		plugins.fireHook('filter:user.account.edit', userData, function (err, userData) {
@@ -75,11 +81,15 @@ function renderRoute(name, req, res, next) {
 		}
 
 		userData.title = '[[pages:account/edit/' + name + ', ' + userData.username + ']]';
-		userData.breadcrumbs = helpers.buildBreadcrumbs([
-			{text: userData.username, url: '/user/' + userData.userslug},
-			{text: '[[user:edit]]', url: '/user/' + userData.userslug + '/edit'},
-			{text: '[[user:' + name + ']]'}
-		]);
+		userData.breadcrumbs = helpers.buildBreadcrumbs([{
+			text: userData.username,
+			url: '/user/' + userData.userslug
+		}, {
+			text: '[[user:edit]]',
+			url: '/user/' + userData.userslug + '/edit'
+		}, {
+			text: '[[user:' + name + ']]'
+		}]);
 
 		res.render('account/edit/' + name, userData);
 	});
@@ -139,7 +149,10 @@ editController.uploadPicture = function (req, res, next) {
 			return next(err);
 		}
 
-		res.json([{name: userPhoto.name, url: image.url.startsWith('http') ? image.url : nconf.get('relative_path') + image.url}]);
+		res.json([{
+			name: userPhoto.name,
+			url: image.url.startsWith('http') ? image.url : nconf.get('relative_path') + image.url
+		}]);
 	});
 };
 
@@ -154,7 +167,9 @@ editController.uploadCoverPicture = function (req, res, next) {
 			return next(err);
 		}
 
-		res.json([{ url: image.url }]);
+		res.json([{
+			url: image.url
+		}]);
 	});
 };
 

src/views/modals/crop_picture.tpl

@@ -28,11 +28,10 @@
 				<div class="btn-group">
 					<button class="btn btn-primary reset"><i class="fa fa-refresh"></i></button>
 				</div>
-					
 			</div>
 			<div class="modal-footer">
 				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
-					<button class="btn btn-primary upload-btn">[[user:upload_picture]]</button>
+				<button class="btn btn-primary upload-btn <!-- IF !allowSkippingCrop -->hidden<!-- ENDIF !allowSkippingCrop -->">[[user:upload_picture]]</button>
 				<button class="btn btn-primary crop-btn">[[user:upload_cropped_picture]]</button>
 			</div>
 		</div>