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

Finalize cropper module

Browse Source
v1.18.x
pichalite 8 years ago
parent d784a8dce8
commit 2ca8f60e77
4 changed files with 135 additions and 63 deletions
Show Stats Download Patch File Download Diff File

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

@ -2,7 +2,7 @@
/* globals define, ajaxify, socket, app, config, templates, bootbox */ /* globals define, ajaxify, socket, app, config, templates, bootbox */
define('forum/account/edit', ['forum/account/header', 'uploader', 'translator', 'components', 'pictureCropper'], function (header, uploader, translator, components, pictureCropper) { define('forum/account/edit', ['forum/account/header', 'translator', 'components', 'pictureCropper'], function (header, translator, components, pictureCropper) {
var AccountEdit = {}; var AccountEdit = {};
AccountEdit.init = function () { AccountEdit.init = function () {
@ -214,7 +214,7 @@ define('forum/account/edit', ['forum/account/header', 'uploader', 'translator',
modal.find('[data-action="upload"]').on('click', function () { modal.find('[data-action="upload"]').on('click', function () {
modal.modal('hide'); modal.modal('hide');
uploader.show({ pictureCropper.show({
socketMethod: 'user.uploadCroppedPicture', socketMethod: 'user.uploadCroppedPicture',
aspectRatio: '1 / 1', aspectRatio: '1 / 1',
paramName: 'uid', paramName: 'uid',

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

@ -3,10 +3,10 @@
define('forum/account/header', [ define('forum/account/header', [
'coverPhoto', 'coverPhoto',
'uploader', 'pictureCropper',
'components', 'components',
'translator' 'translator'
], function (coverPhoto, uploader, components, translator) { ], function (coverPhoto, pictureCropper, components, translator) {
var AccountHeader = {}; var AccountHeader = {};
var isAdminOrSelfOrGlobalMod; var isAdminOrSelfOrGlobalMod;
@ -78,7 +78,7 @@ define('forum/account/header', [
}, callback); }, callback);
}, },
function () { function () {
uploader.show({ pictureCropper.show({
title: '[[user:upload_cover_picture]]', title: '[[user:upload_cover_picture]]',
socketMethod: 'user.updateCover', socketMethod: 'user.updateCover',
aspectRatio: '16 / 9', aspectRatio: '16 / 9',

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

@ -6,10 +6,10 @@ define('forum/groups/details', [
'iconSelect', 'iconSelect',
'components', 'components',
'coverPhoto', 'coverPhoto',
'uploader', 'pictureCropper',
'translator', 'translator',
'vendor/colorpicker/colorpicker' 'vendor/colorpicker/colorpicker'
], function (memberList, iconSelect, components, coverPhoto, uploader, translator) { ], function (memberList, iconSelect, components, coverPhoto, pictureCropper, translator) {
var Details = {}; var Details = {};
var groupName; var groupName;
@ -31,7 +31,7 @@ define('forum/groups/details', [
}, callback); }, callback);
}, },
function () { function () {
uploader.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: '16 / 9',

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

@ -3,8 +3,33 @@
/* globals define, socket, app, templates */ /* globals define, socket, app, templates */
define('pictureCropper', ['translator', 'cropper'], function (translator, cropper) { define('pictureCropper', ['translator', 'cropper'], function (translator, cropper) {
var module = {};
module.show = function (data, callback) {
var fileSize = data.hasOwnProperty('fileSize') && data.fileSize !== undefined ? parseInt(data.fileSize, 10) : false;
parseModal({
showHelp: data.hasOwnProperty('showHelp') && data.showHelp !== undefined ? data.showHelp : true,
fileSize: fileSize,
title: data.title || '[[global:upload_file]]',
description: data.description || '',
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();
});
var module = {}; uploadModal.find('#fileUploadSubmitBtn').on('click', function () {
$(this).addClass('disabled');
data.uploadModal = uploadModal;
onSubmit(data, callback);
return false;
});
});
};
module.handleImageCrop = function (data, callback) { module.handleImageCrop = function (data, callback) {
$('#crop-picture-modal').remove(); $('#crop-picture-modal').remove();
@ -16,63 +41,110 @@ define('pictureCropper', ['translator', 'cropper'], function (translator, croppe
var img = document.getElementById('cropped-image'); var img = document.getElementById('cropped-image');
var cropperTool = new cropper.default(img, { var cropperTool = new cropper.default(img, {
aspectRatio: data.aspectRatio, aspectRatio: data.aspectRatio,
viewMode: 1 viewMode: 1,
}); ready: function () {
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); });
});
cropperModal.find('.flip').on('click', function () {
cropperModal.find('.flip').on('click', function () { var option = this.getAttribute("data-option");
var option = this.getAttribute("data-option"); var method = this.getAttribute("data-method");
var method = this.getAttribute("data-method"); method === 'scaleX' ? cropperTool.scaleX(option) : cropperTool.scaleY(option);
method === 'scaleX' ? cropperTool.scaleX(option) : cropperTool.scaleY(option); this.setAttribute("data-option", option * -1);
this.setAttribute("data-option", option * -1); });
});
cropperModal.find('.reset').on('click', function () {
cropperModal.find('.reset').on('click', function () { cropperTool.reset();
cropperTool.reset(); });
});
cropperModal.find('.crop-btn').on('click', function () {
cropperModal.find('.crop-btn').on('click', function () { $(this).addClass('disabled');
$(this).addClass('disabled'); var imageData = data.imageType ? cropperTool.getCroppedCanvas().toDataURL(data.imageType) : cropperTool.getCroppedCanvas().toDataURL();
var imageData = data.imageType ? cropperTool.getCroppedCanvas().toDataURL(data.imageType) : cropperTool.getCroppedCanvas().toDataURL();
cropperModal.find('#upload-progress-bar').css('width', '100%');
cropperModal.find('#upload-progress-bar').css('width', '100%'); cropperModal.find('#upload-progress-box').show().removeClass('hide');
cropperModal.find('#upload-progress-box').show().removeClass('hide');
var socketData = {};
var socketData = {}; socketData[data.paramName] = data.paramValue;
socketData[data.paramName] = data.paramValue; socketData['imageData'] = imageData;
socketData['imageData'] = imageData;
socket.emit(data.socketMethod, socketData, function (err, imageData) {
socket.emit(data.socketMethod, socketData, function (err, imageData) { if (err) {
if (err) { cropperModal.find('#upload-progress-box').hide();
cropperModal.find('#upload-progress-box').hide(); cropperModal.find('.upload-btn').removeClass('disabled');
cropperModal.find('.upload-btn').removeClass('disabled'); cropperModal.find('.crop-btn').removeClass('disabled');
cropperModal.find('.crop-btn').removeClass('disabled'); return app.alertError(err.message);
return app.alertError(err.message); }
}
callback(imageData.url);
callback(imageData.url); cropperModal.modal('hide');
cropperModal.modal('hide'); });
}); });
});
cropperModal.find('.upload-btn').on('click', function () {
cropperModal.find('.upload-btn').on('click', function () { $(this).addClass('disabled');
$(this).addClass('disabled'); cropperTool.destroy();
cropperTool.destroy();
cropperTool = new cropper.default(img, {
cropperTool = new cropper.default(img, { viewMode: 1,
viewMode: 1, autoCropArea: 1,
autoCropArea: 1 ready: function () {
}); cropperModal.find('.crop-btn').trigger('click');
}
cropperModal.find('.crop-btn').trigger('click'); });
});
}
}); });
}); });
}); });
}; };
function onSubmit(data, callback) {
function showAlert(type, message) {
module.hideAlerts(data.uploadModal);
if (type === 'error') {
data.uploadModal.find('#fileUploadSubmitBtn').removeClass('disabled');
}
data.uploadModal.find('#alert-' + type).translateText(message).removeClass('hide');
}
var fileInput = data.uploadModal.find('#fileInput');
if (!fileInput.val()) {
return showAlert('error', '[[uploads:select-file-to-upload]]');
}
var file = fileInput[0].files[0];
var reader = new FileReader();
var imageUrl;
var imageType = file.type;
reader.addEventListener("load", function () {
imageUrl = reader.result;
data.uploadModal.modal('hide');
module.handleImageCrop({
url: imageUrl,
imageType: imageType,
socketMethod: data.socketMethod,
aspectRatio: data.aspectRatio,
paramName: data.paramName,
paramValue: data.paramValue
}, callback);
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
function parseModal(tplVals, callback) {
templates.parse('partials/modals/upload_file_modal', tplVals, function (html) {
translator.translate(html, callback);
});
}
return module; return module;
}); });

Write Preview
Loading…
Cancel
Save