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

close #7024

Browse Source 
show error instead showing crop modal
v1.18.x
Barış Soner Uşaklı 7 years ago
parent 3e6d21d3cc
commit e78aea1e86
1 changed files with 107 additions and 105 deletions
Show Stats Download Patch File Download Diff File

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

@ -1,12 +1,11 @@
'use strict'; 'use strict';
define('pictureCropper', ['cropper'], function (Cropper) {
define('pictureCropper', ['translator', 'cropper', 'benchpress'], function (translator, Cropper, Benchpress) {
var module = {}; var module = {};
module.show = function (data, callback) { module.show = function (data, callback) {
var fileSize = data.hasOwnProperty('fileSize') && data.fileSize !== undefined ? parseInt(data.fileSize, 10) : false; var fileSize = data.hasOwnProperty('fileSize') && data.fileSize !== undefined ? parseInt(data.fileSize, 10) : false;
parseModal({ app.parseAndTranslate('partials/modals/upload_file_modal', {
showHelp: data.hasOwnProperty('showHelp') && data.showHelp !== undefined ? data.showHelp : true, showHelp: data.hasOwnProperty('showHelp') && data.showHelp !== undefined ? data.showHelp : true,
fileSize: fileSize, fileSize: fileSize,
title: data.title || '[[global:upload_file]]', title: data.title || '[[global:upload_file]]',
@ -14,8 +13,6 @@ define('pictureCropper', ['translator', 'cropper', 'benchpress'], function (tran
button: data.button || '[[global:upload]]', button: data.button || '[[global:upload]]',
accept: data.accept ? data.accept.replace(/,/g, ', ') : '', accept: data.accept ? data.accept.replace(/,/g, ', ') : '',
}, function (uploadModal) { }, function (uploadModal) {
uploadModal = $(uploadModal);
uploadModal.modal('show'); uploadModal.modal('show');
uploadModal.on('hidden.bs.modal', function () { uploadModal.on('hidden.bs.modal', function () {
uploadModal.remove(); uploadModal.remove();
@ -32,121 +29,132 @@ define('pictureCropper', ['translator', 'cropper', 'benchpress'], function (tran
module.handleImageCrop = function (data, callback) { module.handleImageCrop = function (data, callback) {
$('#crop-picture-modal').remove(); $('#crop-picture-modal').remove();
Benchpress.parse('modals/crop_picture', { app.parseAndTranslate('modals/crop_picture', {
url: utils.escapeHTML(data.url), url: utils.escapeHTML(data.url),
}, function (cropperHtml) { }, function (cropperModal) {
translator.translate(cropperHtml, function (translated) { cropperModal.modal({
var cropperModal = $(translated); backdrop: 'static',
cropperModal.modal({ }).modal('hide');
backdrop: 'static',
}).modal('show');
// Set cropper image max-height based on viewport // Set cropper image max-height based on viewport
var cropBoxHeight = parseInt($(window).height() / 2, 10); var cropBoxHeight = parseInt($(window).height() / 2, 10);
var img = document.getElementById('cropped-image'); var img = document.getElementById('cropped-image');
$(img).css('max-height', cropBoxHeight); $(img).css('max-height', cropBoxHeight);
var cropperTool = new Cropper(img, { var cropperTool = new Cropper(img, {
aspectRatio: data.aspectRatio, aspectRatio: data.aspectRatio,
autoCropArea: 1, autoCropArea: 1,
viewMode: 1, viewMode: 1,
checkCrossOrigin: false, checkCrossOrigin: false,
cropmove: function () { cropmove: function () {
if (data.restrictImageDimension) { if (data.restrictImageDimension) {
if (cropperTool.cropBoxData.width > data.imageDimension) { 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({ cropperTool.setCropBoxData({
width: dimension, width: data.imageDimension,
height: dimension,
}); });
} }
if (cropperTool.cropBoxData.height > data.imageDimension) {
cropperTool.setCropBoxData({
height: data.imageDimension,
});
}
}
},
ready: function () {
if (!checkCORS(cropperTool, data)) {
return;
}
cropperModal.find('.rotate').on('click', function () { cropperModal.modal('show');
var degrees = this.getAttribute('data-degrees');
cropperTool.rotate(degrees); 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('.flip').on('click', function () { cropperModal.find('.rotate').on('click', function () {
var option = this.getAttribute('data-option'); var degrees = this.getAttribute('data-degrees');
var method = this.getAttribute('data-method'); cropperTool.rotate(degrees);
if (method === 'scaleX') { });
cropperTool.scaleX(option);
} else {
cropperTool.scaleY(option);
}
this.setAttribute('data-option', option * -1);
});
cropperModal.find('.reset').on('click', function () { cropperModal.find('.flip').on('click', function () {
cropperTool.reset(); var option = this.getAttribute('data-option');
}); var method = this.getAttribute('data-method');
if (method === 'scaleX') {
cropperTool.scaleX(option);
} else {
cropperTool.scaleY(option);
}
this.setAttribute('data-option', option * -1);
});
cropperModal.find('.crop-btn').on('click', function () { cropperModal.find('.reset').on('click', function () {
$(this).addClass('disabled'); cropperTool.reset();
var imageData; });
try {
imageData = data.imageType ? cropperTool.getCroppedCanvas().toDataURL(data.imageType) : cropperTool.getCroppedCanvas().toDataURL(); cropperModal.find('.crop-btn').on('click', function () {
} catch (err) { $(this).addClass('disabled');
if (err.message === 'Failed to execute \'toDataURL\' on \'HTMLCanvasElement\': Tainted canvases may not be exported.') { var imageData = checkCORS(cropperTool, data);
app.alertError('[[error:cors-error]]'); if (!imageData) {
} else { return;
app.alertError(err.message); }
}
return; 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);
} }
cropperModal.find('#upload-progress-bar').css('width', '100%'); callback(imageData.url);
cropperModal.find('#upload-progress-box').show().removeClass('hide'); cropperModal.modal('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 () { cropperModal.find('.upload-btn').on('click', function () {
$(this).addClass('disabled'); $(this).addClass('disabled');
cropperTool.destroy(); cropperTool.destroy();
cropperTool = new Cropper(img, { cropperTool = new Cropper(img, {
viewMode: 1, viewMode: 1,
autoCropArea: 1, autoCropArea: 1,
ready: function () { ready: function () {
cropperModal.find('.crop-btn').trigger('click'); cropperModal.find('.crop-btn').trigger('click');
}, },
});
}); });
}, });
}); },
}); });
}); });
}; };
function checkCORS(cropperTool, data) {
var imageData;
try {
imageData = data.imageType ? cropperTool.getCroppedCanvas().toDataURL(data.imageType) : cropperTool.getCroppedCanvas().toDataURL();
} catch (err) {
if (err.message === 'Failed to execute \'toDataURL\' on \'HTMLCanvasElement\': Tainted canvases may not be exported.') {
app.alertError('[[error:cors-error]]');
} else {
app.alertError(err.message);
}
return;
}
return imageData;
}
function onSubmit(data, callback) { function onSubmit(data, callback) {
function showAlert(type, message) { function showAlert(type, message) {
if (type === 'error') { if (type === 'error') {
@ -190,11 +198,5 @@ define('pictureCropper', ['translator', 'cropper', 'benchpress'], function (tran
} }
} }
function parseModal(tplVals, callback) {
Benchpress.parse('partials/modals/upload_file_modal', tplVals, function (html) {
translator.translate(html, callback);
});
}
return module; return module;
}); });

Write Preview
Loading…
Cancel
Save