From a99572fc485f9e45c671ca09f16ae308a849c310 Mon Sep 17 00:00:00 2001 From: pichalite Date: Sun, 19 Feb 2017 08:30:30 +0000 Subject: [PATCH 1/2] Use ACP profile image dimension setting in cropper --- public/src/client/account/edit.js | 22 +++-- public/src/client/account/header.js | 10 ++- public/src/client/groups/details.js | 118 ++++++++++++++------------- public/src/modules/pictureCropper.js | 26 ++++++ src/controllers/accounts/edit.js | 33 ++++++-- src/views/modals/crop_picture.tpl | 69 ++++++++-------- 6 files changed, 168 insertions(+), 110 deletions(-) diff --git a/public/src/client/account/edit.js b/public/src/client/account/edit.js index bc80fd49e5..86b9dcafe6 100644 --- a/public/src/client/account/edit.js +++ b/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' @@ -242,17 +247,20 @@ define('forum/account/edit', ['forum/account/header', 'translator', 'components' if (!url) { return; } - + uploadModal.modal('hide'); - + pictureCropper.handleImageCrop({ url: url, socketMethod: 'user.uploadCroppedPicture', aspectRatio: '1 / 1', + allowSkippingCrop: false, + restrictImageDimension: true, + imageDimension: ajaxify.data.profileImageDimension, paramName: 'uid', paramValue: ajaxify.data.theirid, }, onUploadComplete); - + return false; }); }); @@ -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); diff --git a/public/src/client/account/header.js b/public/src/client/account/header.js index 9e1a29577b..63869af05b 100644 --- a/public/src/client/account/header.js +++ b/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); } diff --git a/public/src/client/groups/details.js b/public/src/client/groups/details.js index 771c355fcc..6d0559add3 100644 --- a/public/src/client/groups/details.js +++ b/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) { @@ -59,62 +61,62 @@ define('forum/groups/details', [ uid = userRow.attr('data-uid'), action = btnEl.attr('data-action'); - switch(action) { - case 'toggleOwnership': - socket.emit('groups.' + (isOwner ? 'rescind' : 'grant'), { - toUid: uid, - groupName: groupName - }, function (err) { - if (!err) { - ownerFlagEl.toggleClass('invisible'); - } else { - app.alertError(err.message); - } - }); - break; - - case 'kick': - socket.emit('groups.kick', { - uid: uid, - groupName: groupName - }, function (err) { - if (!err) { - userRow.slideUp().remove(); - } else { - app.alertError(err.message); - } - }); - break; - - case 'update': - Details.update(); - break; - - case 'delete': - Details.deleteGroup(); - break; - - case 'join': // intentional fall-throughs! - case 'leave': - case 'accept': - case 'reject': - case 'issueInvite': - case 'rescindInvite': - case 'acceptInvite': - case 'rejectInvite': - case 'acceptAll': - case 'rejectAll': - socket.emit('groups.' + action, { - toUid: uid, - groupName: groupName - }, function (err) { - if (!err) { - ajaxify.refresh(); - } else { - app.alertError(err.message); - } - }); - break; + switch (action) { + case 'toggleOwnership': + socket.emit('groups.' + (isOwner ? 'rescind' : 'grant'), { + toUid: uid, + groupName: groupName + }, function (err) { + if (!err) { + ownerFlagEl.toggleClass('invisible'); + } else { + app.alertError(err.message); + } + }); + break; + + case 'kick': + socket.emit('groups.kick', { + uid: uid, + groupName: groupName + }, function (err) { + if (!err) { + userRow.slideUp().remove(); + } else { + app.alertError(err.message); + } + }); + break; + + case 'update': + Details.update(); + break; + + case 'delete': + Details.deleteGroup(); + break; + + case 'join': // intentional fall-throughs! + case 'leave': + case 'accept': + case 'reject': + case 'issueInvite': + case 'rescindInvite': + case 'acceptInvite': + case 'rejectInvite': + case 'acceptAll': + case 'rejectAll': + socket.emit('groups.' + action, { + toUid: uid, + groupName: groupName + }, function (err) { + if (!err) { + ajaxify.refresh(); + } else { + app.alertError(err.message); + } + }); + break; } }); }; @@ -273,7 +275,7 @@ define('forum/groups/details', [ if (!confirm) { return; } - + socket.emit('groups.cover.remove', { groupName: ajaxify.data.group.name }, function (err) { diff --git a/public/src/modules/pictureCropper.js b/public/src/modules/pictureCropper.js index b04bc48e97..d640bd94bb 100644 --- a/public/src/modules/pictureCropper.js +++ b/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); diff --git a/src/controllers/accounts/edit.js b/src/controllers/accounts/edit.js index c9549a1def..58409060e4 100644 --- a/src/controllers/accounts/edit.js +++ b/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,8 +167,10 @@ editController.uploadCoverPicture = function (req, res, next) { return next(err); } - res.json([{ url: image.url }]); + res.json([{ + url: image.url + }]); }); }; -module.exports = editController; \ No newline at end of file +module.exports = editController; diff --git a/src/views/modals/crop_picture.tpl b/src/views/modals/crop_picture.tpl index ba98860df4..f54370a0bb 100644 --- a/src/views/modals/crop_picture.tpl +++ b/src/views/modals/crop_picture.tpl @@ -1,40 +1,39 @@ -