hyperzlib
/
nodebb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #5461 from pichalite/image-dimension

Browse Source 
Use ACP profile image dimension setting in cropper
v1.18.x
Julian Lam 8 years ago committed by GitHub
parent 2dac3d2292 fd0f0beaf2
commit e887dda37a
6 changed files with 168 additions and 110 deletions
Show Stats Download Patch File Download Diff File

22
public/src/client/account/edit.js
Unescape Escape View File

@ -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);

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

@ -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);
}

118
public/src/client/groups/details.js
Unescape Escape View File

@ -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) {

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

@ -44,7 +44,30 @@ define('pictureCropper', ['translator', 'cropper'], function (translator, croppe
var cropperTool = new cropper.default(img, {
aspectRatio: data.aspectRatio,
viewMode: 1,
cropmove: function () {
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);

33
src/controllers/accounts/edit.js
Unescape Escape View File

@ -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;
module.exports = editController;

69
src/views/modals/crop_picture.tpl
Unescape Escape 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 class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<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 class="cropper">
<img id="cropped-image" src="{url}" >
<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-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<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>
<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 class="cropper">
<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 <!-- 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>

Write Preview
Loading…
Cancel
Save