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

Make cropper in to a module

Browse Source
v1.18.x
pichalite 8 years ago
parent fd88e9fdff
commit 484891472e
5 changed files with 119 additions and 95 deletions
Show Stats Download Patch File Download Diff File

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

@ -2,7 +2,7 @@
/* globals define, ajaxify, socket, app, config, templates, bootbox */
define('forum/account/edit', ['forum/account/header', 'uploader', 'translator', 'components', 'cropper'], function (header, uploader, translator, components, cropper) {
define('forum/account/edit', ['forum/account/header', 'uploader', 'translator', 'components', 'pictureCropper'], function (header, uploader, translator, components, pictureCropper) {
var AccountEdit = {};
AccountEdit.init = function () {
@ -210,86 +210,21 @@ define('forum/account/edit', ['forum/account/header', 'uploader', 'translator',
updateHeader();
}
}
function handleImageCrop(data) {
$('#crop-picture-modal').remove();
templates.parse('modals/crop_picture', {url: data.url}, function (cropperHtml) {
translator.translate(cropperHtml, function (translated) {
var cropperModal = $(translated);
cropperModal.modal('show');
var img = document.getElementById('cropped-image');
var cropperTool = new cropper.default(img, {
aspectRatio: 1 / 1,
viewMode: 1
});
cropperModal.find('.rotate').on('click', function () {
var degrees = this.getAttribute("data-degrees");
cropperTool.rotate(degrees);
});
cropperModal.find('.flip').on('click', function () {
var option = this.getAttribute("data-option");
var method = this.getAttribute("data-method");
method === 'scaleX' ? cropperTool.scaleX(option) : cropperTool.scaleY(option);
this.setAttribute("data-option", option * -1);
});
cropperModal.find('.reset').on('click', function () {
cropperTool.reset();
});
cropperModal.find('.crop-btn').on('click', function () {
$(this).addClass('disabled');
var imageData = data.imageType ? cropperTool.getCroppedCanvas().toDataURL(data.imageType) : cropperTool.getCroppedCanvas().toDataURL();
cropperModal.find('#upload-progress-bar').css('width', '100%');
cropperModal.find('#upload-progress-box').show().removeClass('hide');
socket.emit('user.uploadCroppedPicture', {
uid: ajaxify.data.theirid,
imageData: imageData
}, function (err, imageData) {
if (err) {
cropperModal.find('#upload-progress-box').hide();
cropperModal.find('.upload-btn').removeClass('disabled');
cropperModal.find('.crop-btn').removeClass('disabled');
app.alertError(err.message);
}
onUploadComplete(imageData.url);
cropperModal.modal('hide');
});
});
cropperModal.find('.upload-btn').on('click', function () {
$(this).addClass('disabled');
cropperTool.destroy();
cropperTool = new cropper.default(img, {
viewMode: 1,
autoCropArea: 1
});
cropperModal.find('.crop-btn').trigger('click');
});
});
});
}
modal.find('[data-action="upload"]').on('click', function () {
modal.modal('hide');
uploader.show({
route: config.relative_path + '/api/user/' + ajaxify.data.userslug + '/uploadpicture',
params: {},
socketMethod: 'user.uploadCroppedPicture',
aspectRatio: '1 / 1',
paramName: 'uid',
paramValue: ajaxify.data.theirid,
fileSize: ajaxify.data.maximumProfileImageSize,
title: '[[user:upload_picture]]',
description: '[[user:upload_a_picture]]',
accept: '.png,.jpg,.bmp'
}, function (data) {
handleImageCrop(data);
}, function (url) {
onUploadComplete(url);
});
return false;
@ -309,7 +244,14 @@ define('forum/account/edit', ['forum/account/header', 'uploader', 'translator',
}
uploadModal.modal('hide');
handleImageCrop({url: url});
pictureCropper.handleImageCrop({
url: url,
socketMethod: 'user.uploadCroppedPicture',
aspectRatio: '1 / 1',
paramName: 'uid',
paramValue: ajaxify.data.theirid,
}, onUploadComplete);
return false;
});

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

@ -80,8 +80,10 @@ define('forum/account/header', [
function () {
uploader.show({
title: '[[user:upload_cover_picture]]',
route: config.relative_path + '/api/user/' + ajaxify.data.userslug + '/uploadcover',
params: {uid: ajaxify.data.uid },
socketMethod: 'user.updateCover',
aspectRatio: '16 / 9',
paramName: 'uid',
paramValue: ajaxify.data.theirid,
accept: '.png,.jpg,.bmp'
}, function (imageUrlOnServer) {
components.get('account/cover').css('background-image', 'url(' + imageUrlOnServer + '?' + config['cache-buster'] + ')');

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

@ -33,8 +33,10 @@ define('forum/groups/details', [
function () {
uploader.show({
title: '[[groups:upload-group-cover]]',
route: config.relative_path + '/api/groups/uploadpicture',
params: {groupName: groupName}
socketMethod: 'groups.cover.update',
aspectRatio: '16 / 9',
paramName: 'groupName',
paramValue: groupName
}, function (imageUrlOnServer) {
components.get('groups/cover').css('background-image', 'url(' + imageUrlOnServer + ')');
});

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

@ -0,0 +1,78 @@
'use strict';
/* globals define, socket, app, templates */
define('pictureCropper', ['translator', 'cropper'], function (translator, cropper) {
var module = {};
module.handleImageCrop = function (data, callback) {
$('#crop-picture-modal').remove();
templates.parse('modals/crop_picture', {url: data.url}, function (cropperHtml) {
translator.translate(cropperHtml, function (translated) {
var cropperModal = $(translated);
cropperModal.modal('show');
var img = document.getElementById('cropped-image');
var cropperTool = new cropper.default(img, {
aspectRatio: data.aspectRatio,
viewMode: 1
});
cropperModal.find('.rotate').on('click', function () {
var degrees = this.getAttribute("data-degrees");
cropperTool.rotate(degrees);
});
cropperModal.find('.flip').on('click', function () {
var option = this.getAttribute("data-option");
var method = this.getAttribute("data-method");
method === 'scaleX' ? cropperTool.scaleX(option) : cropperTool.scaleY(option);
this.setAttribute("data-option", option * -1);
});
cropperModal.find('.reset').on('click', function () {
cropperTool.reset();
});
cropperModal.find('.crop-btn').on('click', function () {
$(this).addClass('disabled');
var imageData = data.imageType ? cropperTool.getCroppedCanvas().toDataURL(data.imageType) : cropperTool.getCroppedCanvas().toDataURL();
cropperModal.find('#upload-progress-bar').css('width', '100%');
cropperModal.find('#upload-progress-box').show().removeClass('hide');
var socketData = {};
socketData[data.paramName] = data.paramValue;
socketData['imageData'] = imageData;
socket.emit(data.socketMethod, socketData, function (err, imageData) {
if (err) {
cropperModal.find('#upload-progress-box').hide();
cropperModal.find('.upload-btn').removeClass('disabled');
cropperModal.find('.crop-btn').removeClass('disabled');
return app.alertError(err.message);
}
callback(imageData.url);
cropperModal.modal('hide');
});
});
cropperModal.find('.upload-btn').on('click', function () {
$(this).addClass('disabled');
cropperTool.destroy();
cropperTool = new cropper.default(img, {
viewMode: 1,
autoCropArea: 1
});
cropperModal.find('.crop-btn').trigger('click');
});
});
});
}
return module;
});

36
public/src/modules/uploader.js
Unescape Escape View File

@ -1,8 +1,8 @@
'use strict';
/* globals define, ajaxify, socket, app, templates */
/* globals define, templates */
define('uploader', ['translator', 'cropper'], function (translator, cropper) {
define('uploader', ['translator', 'pictureCropper'], function (translator, pictureCropper) {
var module = {};
@ -32,17 +32,10 @@ define('uploader', ['translator', 'cropper'], function (translator, cropper) {
uploadModal.remove();
});
var uploadForm = uploadModal.find('#uploadForm');
uploadForm.attr('action', data.route);
uploadForm.find('#params').val(JSON.stringify(data.params));
uploadModal.find('#fileUploadSubmitBtn').on('click', function () {
$(this).addClass('disabled');
uploadForm.submit();
});
uploadForm.submit(function () {
onSubmit(uploadModal, fileSize, callback);
data.uploadModal = uploadModal;
onSubmit(data, callback);
return false;
});
});
@ -52,16 +45,16 @@ define('uploader', ['translator', 'cropper'], function (translator, cropper) {
$(modal).find('#alert-status, #alert-success, #alert-error, #upload-progress-box').addClass('hide');
};
function onSubmit(uploadModal, fileSize, callback) {
function onSubmit(data, callback) {
function showAlert(type, message) {
module.hideAlerts(uploadModal);
module.hideAlerts(data.uploadModal);
if (type === 'error') {
uploadModal.find('#fileUploadSubmitBtn').removeClass('disabled');
data.uploadModal.find('#fileUploadSubmitBtn').removeClass('disabled');
}
uploadModal.find('#alert-' + type).translateText(message).removeClass('hide');
data.uploadModal.find('#alert-' + type).translateText(message).removeClass('hide');
}
var fileInput = uploadModal.find('#fileInput');
var fileInput = data.uploadModal.find('#fileInput');
if (!fileInput.val()) {
return showAlert('error', '[[uploads:select-file-to-upload]]');
}
@ -74,9 +67,16 @@ define('uploader', ['translator', 'cropper'], function (translator, cropper) {
reader.addEventListener("load", function () {
imageUrl = reader.result;
uploadModal.modal('hide');
data.uploadModal.modal('hide');
callback({url: imageUrl, imageType: imageType});
pictureCropper.handleImageCrop({
url: imageUrl,
imageType: imageType,
socketMethod: data.socketMethod,
aspectRatio: data.aspectRatio,
paramName: data.paramName,
paramValue: data.paramValue
}, callback);
}, false);
if (file) {

Write Preview
Loading…
Cancel
Save