Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-11-02 03:55:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use ACP profile image dimension setting in cropper

Browse Source
This commit is contained in:
pichalite
2017-02-19 08:30:30 +00:00
parent 1b43faba1a
commit a99572fc48
6 changed files with 164 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
public/src/client/account/edit.js
View File

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

10
public/src/client/account/header.js
View File

@@ -83,7 +83,9 @@ define('forum/account/header', [
pictureCropper.show({ pictureCropper.show({
title: '[[user:upload_cover_picture]]', title: '[[user:upload_cover_picture]]',
socketMethod: 'user.updateCover', socketMethod: 'user.updateCover',
aspectRatio: '16 / 9', aspectRatio: NaN,
allowSkippingCrop: true,
restrictImageDimension: false,
paramName: 'uid', paramName: 'uid',
paramValue: ajaxify.data.theirid, paramValue: ajaxify.data.theirid,
accept: '.png,.jpg,.bmp' 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; 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) { if (err) {
return app.alertError(err.message); return app.alertError(err.message);
} }

108
public/src/client/groups/details.js
View File

@@ -34,7 +34,9 @@ define('forum/groups/details', [
pictureCropper.show({ pictureCropper.show({
title: '[[groups:upload-group-cover]]', title: '[[groups:upload-group-cover]]',
socketMethod: 'groups.cover.update', socketMethod: 'groups.cover.update',
aspectRatio: '16 / 9', aspectRatio: NaN,
allowSkippingCrop: true,
restrictImageDimension: false,
paramName: 'groupName', paramName: 'groupName',
paramValue: groupName paramValue: groupName
}, function (imageUrlOnServer) { }, function (imageUrlOnServer) {
@@ -59,62 +61,62 @@ define('forum/groups/details', [
uid = userRow.attr('data-uid'), uid = userRow.attr('data-uid'),
action = btnEl.attr('data-action'); action = btnEl.attr('data-action');
switch(action) { switch (action) {
case 'toggleOwnership': case 'toggleOwnership':
socket.emit('groups.' + (isOwner ? 'rescind' : 'grant'), { socket.emit('groups.' + (isOwner ? 'rescind' : 'grant'), {
toUid: uid, toUid: uid,
groupName: groupName groupName: groupName
}, function (err) { }, function (err) {
if (!err) { if (!err) {
ownerFlagEl.toggleClass('invisible'); ownerFlagEl.toggleClass('invisible');
} else { } else {
app.alertError(err.message); app.alertError(err.message);
} }
}); });
break; break;
case 'kick': case 'kick':
socket.emit('groups.kick', { socket.emit('groups.kick', {
uid: uid, uid: uid,
groupName: groupName groupName: groupName
}, function (err) { }, function (err) {
if (!err) { if (!err) {
userRow.slideUp().remove(); userRow.slideUp().remove();
} else { } else {
app.alertError(err.message); app.alertError(err.message);
} }
}); });
break; break;
case 'update': case 'update':
Details.update(); Details.update();
break; break;
case 'delete': case 'delete':
Details.deleteGroup(); Details.deleteGroup();
break; break;
case 'join': // intentional fall-throughs! case 'join': // intentional fall-throughs!
case 'leave': case 'leave':
case 'accept': case 'accept':
case 'reject': case 'reject':
case 'issueInvite': case 'issueInvite':
case 'rescindInvite': case 'rescindInvite':
case 'acceptInvite': case 'acceptInvite':
case 'rejectInvite': case 'rejectInvite':
case 'acceptAll': case 'acceptAll':
case 'rejectAll': case 'rejectAll':
socket.emit('groups.' + action, { socket.emit('groups.' + action, {
toUid: uid, toUid: uid,
groupName: groupName groupName: groupName
}, function (err) { }, function (err) {
if (!err) { if (!err) {
ajaxify.refresh(); ajaxify.refresh();
} else { } else {
app.alertError(err.message); app.alertError(err.message);
} }
}); });
break; break;
} }
}); });
}; };

26
public/src/modules/pictureCropper.js
View File

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

31
src/controllers/accounts/edit.js
View File

@@ -27,6 +27,7 @@ editController.get = function (req, res, callback) {
userData.maximumProfileImageSize = parseInt(meta.config.maximumProfileImageSize, 10); userData.maximumProfileImageSize = parseInt(meta.config.maximumProfileImageSize, 10);
userData.allowProfileImageUploads = parseInt(meta.config.allowProfileImageUploads) === 1; userData.allowProfileImageUploads = parseInt(meta.config.allowProfileImageUploads) === 1;
userData.allowAccountDelete = parseInt(meta.config.allowAccountDelete, 10) === 1; userData.allowAccountDelete = parseInt(meta.config.allowAccountDelete, 10) === 1;
userData.profileImageDimension = parseInt(meta.config.profileImageDimension, 10) || 128;
userData.groups = userData.groups.filter(function (group) { userData.groups = userData.groups.filter(function (group) {
return group && group.userTitleEnabled && !groups.isPrivilegeGroup(group.name) && group.name !== 'registered-users'; 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.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 = []; userData.editButtons = [];
plugins.fireHook('filter:user.account.edit', userData, function (err, userData) { 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.title = '[[pages:account/edit/' + name + ', ' + userData.username + ']]';
userData.breadcrumbs = helpers.buildBreadcrumbs([ userData.breadcrumbs = helpers.buildBreadcrumbs([{
{text: userData.username, url: '/user/' + userData.userslug}, text: userData.username,
{text: '[[user:edit]]', url: '/user/' + userData.userslug + '/edit'}, url: '/user/' + userData.userslug
{text: '[[user:' + name + ']]'} }, {
]); text: '[[user:edit]]',
url: '/user/' + userData.userslug + '/edit'
}, {
text: '[[user:' + name + ']]'
}]);
res.render('account/edit/' + name, userData); res.render('account/edit/' + name, userData);
}); });
@@ -139,7 +149,10 @@ editController.uploadPicture = function (req, res, next) {
return next(err); 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); return next(err);
} }
res.json([{ url: image.url }]); res.json([{
url: image.url
}]);
}); });
}; };

67
src/views/modals/crop_picture.tpl
View File

@@ -1,40 +1,39 @@
<div id="crop-picture-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="crop-picture" aria-hidden="true"> <div id="crop-picture-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="crop-picture" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="crop-picture">[[user:crop_picture]]</h3> <h3 id="crop-picture">[[user:crop_picture]]</h3>
</div>
<div class="modal-body">
<div id="upload-progress-box" class="progress hide">
<div id="upload-progress-bar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0">
</div>
</div> </div>
<div class="modal-body">
<div id="upload-progress-box" class="progress hide">
<div id="upload-progress-bar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0">
</div>
</div>
<div class="cropper"> <div class="cropper">
<img id="cropped-image" src="{url}" > <img id="cropped-image" src="{url}">
</div>
<hr />
<div class="btn-group">
<button class="btn btn-primary rotate" data-degrees="-45"><i class="fa fa-rotate-left"></i></button>
<button class="btn btn-primary rotate" data-degrees="45"><i class="fa fa-rotate-right"></i></button>
</div>
<div class="btn-group">
<button class="btn btn-primary flip" data-option="-1" data-method="scaleX"><i class="fa fa-arrows-h"></i></button>
<button class="btn btn-primary flip" data-option="1" data-method="scaleY"><i class="fa fa-arrows-v"></i></button>
</div>
<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 crop-btn">[[user:upload_cropped_picture]]</button>
</div> </div>
<hr />
<div class="btn-group">
<button class="btn btn-primary rotate" data-degrees="-45"><i class="fa fa-rotate-left"></i></button>
<button class="btn btn-primary rotate" data-degrees="45"><i class="fa fa-rotate-right"></i></button>
</div>
<div class="btn-group">
<button class="btn btn-primary flip" data-option="-1" data-method="scaleX"><i class="fa fa-arrows-h"></i></button>
<button class="btn btn-primary flip" data-option="1" data-method="scaleY"><i class="fa fa-arrows-v"></i></button>
</div>
<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 <!-- IF !allowSkippingCrop -->hidden<!-- ENDIF !allowSkippingCrop -->">[[user:upload_picture]]</button>
<button class="btn btn-primary crop-btn">[[user:upload_cropped_picture]]</button>
</div> </div>
</div> </div>
</div> </div>
</div>