From 484891472e4d1912268ed599583def1393fc7017 Mon Sep 17 00:00:00 2001 From: pichalite Date: Fri, 17 Feb 2017 00:48:38 +0000 Subject: [PATCH 1/4] Make cropper in to a module --- public/src/client/account/edit.js | 88 +++++----------------------- public/src/client/account/header.js | 6 +- public/src/client/groups/details.js | 6 +- public/src/modules/pictureCropper.js | 78 ++++++++++++++++++++++++ public/src/modules/uploader.js | 36 ++++++------ 5 files changed, 119 insertions(+), 95 deletions(-) create mode 100644 public/src/modules/pictureCropper.js diff --git a/public/src/client/account/edit.js b/public/src/client/account/edit.js index 2856d10f99..03e9f2914a 100644 --- a/public/src/client/account/edit.js +++ b/public/src/client/account/edit.js @@ -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; }); diff --git a/public/src/client/account/header.js b/public/src/client/account/header.js index d0f84ade3a..757b87dc1f 100644 --- a/public/src/client/account/header.js +++ b/public/src/client/account/header.js @@ -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'] + ')'); diff --git a/public/src/client/groups/details.js b/public/src/client/groups/details.js index 96610baf38..9de3e47113 100644 --- a/public/src/client/groups/details.js +++ b/public/src/client/groups/details.js @@ -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 + ')'); }); diff --git a/public/src/modules/pictureCropper.js b/public/src/modules/pictureCropper.js new file mode 100644 index 0000000000..c4a896b551 --- /dev/null +++ b/public/src/modules/pictureCropper.js @@ -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; +}); diff --git a/public/src/modules/uploader.js b/public/src/modules/uploader.js index bae1a2ce00..1a15e0e6ea 100644 --- a/public/src/modules/uploader.js +++ b/public/src/modules/uploader.js @@ -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) { From 43f4d9819ef664238be949b90d645f98d7d2c983 Mon Sep 17 00:00:00 2001 From: pichalite Date: Fri, 17 Feb 2017 00:54:53 +0000 Subject: [PATCH 2/4] Linting --- public/src/modules/pictureCropper.js | 118 +++++++++++++-------------- 1 file changed, 59 insertions(+), 59 deletions(-) diff --git a/public/src/modules/pictureCropper.js b/public/src/modules/pictureCropper.js index c4a896b551..c4887e0d6e 100644 --- a/public/src/modules/pictureCropper.js +++ b/public/src/modules/pictureCropper.js @@ -4,75 +4,75 @@ define('pictureCropper', ['translator', 'cropper'], function (translator, cropper) { - var module = {}; + 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'); + $('#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(); - var img = document.getElementById('cropped-image'); - var cropperTool = new cropper.default(img, { - aspectRatio: data.aspectRatio, - viewMode: 1 - }); + cropperModal.find('#upload-progress-bar').css('width', '100%'); + cropperModal.find('#upload-progress-box').show().removeClass('hide'); - cropperModal.find('.rotate').on('click', function () { - var degrees = this.getAttribute("data-degrees"); - cropperTool.rotate(degrees); - }); + var socketData = {}; + socketData[data.paramName] = data.paramValue; + socketData['imageData'] = imageData; - 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); - }); + 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('.reset').on('click', function () { - cropperTool.reset(); + callback(imageData.url); + cropperModal.modal('hide'); }); - - 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'); + }); + + 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; }); From d784a8dce832f86d2ef2b9207cfe53deba09c123 Mon Sep 17 00:00:00 2001 From: pichalite Date: Fri, 17 Feb 2017 04:26:34 +0000 Subject: [PATCH 3/4] Restore uploader.js --- public/src/modules/uploader.js | 101 ++++++++++++++++++++++----------- 1 file changed, 69 insertions(+), 32 deletions(-) diff --git a/public/src/modules/uploader.js b/public/src/modules/uploader.js index 1a15e0e6ea..0e2a7e7ec8 100644 --- a/public/src/modules/uploader.js +++ b/public/src/modules/uploader.js @@ -2,7 +2,7 @@ /* globals define, templates */ -define('uploader', ['translator', 'pictureCropper'], function (translator, pictureCropper) { +define('uploader', ['translator'], function (translator) { var module = {}; @@ -32,10 +32,17 @@ define('uploader', ['translator', 'pictureCropper'], function (translator, pictu 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'); - data.uploadModal = uploadModal; - onSubmit(data, callback); + uploadForm.submit(); + }); + + uploadForm.submit(function () { + onSubmit(uploadModal, fileSize, callback); return false; }); }); @@ -45,43 +52,55 @@ define('uploader', ['translator', 'pictureCropper'], function (translator, pictu $(modal).find('#alert-status, #alert-success, #alert-error, #upload-progress-box').addClass('hide'); }; - function onSubmit(data, callback) { + function onSubmit(uploadModal, fileSize, callback) { function showAlert(type, message) { - module.hideAlerts(data.uploadModal); + module.hideAlerts(uploadModal); if (type === 'error') { - data.uploadModal.find('#fileUploadSubmitBtn').removeClass('disabled'); + uploadModal.find('#fileUploadSubmitBtn').removeClass('disabled'); } - data.uploadModal.find('#alert-' + type).translateText(message).removeClass('hide'); + uploadModal.find('#alert-' + type).translateText(message).removeClass('hide'); } - var fileInput = data.uploadModal.find('#fileInput'); + showAlert('status', '[[uploads:uploading-file]]'); + + uploadModal.find('#upload-progress-bar').css('width', '0%'); + uploadModal.find('#upload-progress-box').show().removeClass('hide'); + + var fileInput = 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'); - - pictureCropper.handleImageCrop({ - url: imageUrl, - imageType: imageType, - socketMethod: data.socketMethod, - aspectRatio: data.aspectRatio, - paramName: data.paramName, - paramValue: data.paramValue - }, callback); - }, false); - - if (file) { - reader.readAsDataURL(file); + if (!hasValidFileSize(fileInput[0], fileSize)) { + return showAlert('error', '[[error:file-too-big, ' + fileSize + ']]'); } + + uploadModal.find('#uploadForm').ajaxSubmit({ + headers: { + 'x-csrf-token': config.csrf_token + }, + error: function (xhr) { + xhr = maybeParse(xhr); + showAlert('error', xhr.responseJSON ? (xhr.responseJSON.error || xhr.statusText) : 'error uploading, code : ' + xhr.status); + }, + uploadProgress: function (event, position, total, percent) { + uploadModal.find('#upload-progress-bar').css('width', percent + '%'); + }, + success: function (response) { + response = maybeParse(response); + + if (response.error) { + return showAlert('error', response.error); + } + + callback(response[0].url); + + showAlert('success', '[[uploads:upload-success]]'); + setTimeout(function () { + module.hideAlerts(uploadModal); + uploadModal.modal('hide'); + }, 750); + } + }); } function parseModal(tplVals, callback) { @@ -90,5 +109,23 @@ define('uploader', ['translator', 'pictureCropper'], function (translator, pictu }); } + function maybeParse(response) { + if (typeof response === 'string') { + try { + return $.parseJSON(response); + } catch (e) { + return {error: '[[error:parse-error]]'}; + } + } + return response; + } + + function hasValidFileSize(fileElement, maxSize) { + if (window.FileReader && maxSize) { + return fileElement.files[0].size <= maxSize * 1000; + } + return true; + } + return module; -}); +}); \ No newline at end of file From 2ca8f60e7745ad3b3c2656dbd213133212af6ba3 Mon Sep 17 00:00:00 2001 From: pichalite Date: Fri, 17 Feb 2017 05:32:37 +0000 Subject: [PATCH 4/4] Finalize cropper module --- public/src/client/account/edit.js | 4 +- public/src/client/account/header.js | 6 +- public/src/client/groups/details.js | 6 +- public/src/modules/pictureCropper.js | 182 +++++++++++++++++++-------- 4 files changed, 135 insertions(+), 63 deletions(-) diff --git a/public/src/client/account/edit.js b/public/src/client/account/edit.js index 03e9f2914a..bc80fd49e5 100644 --- a/public/src/client/account/edit.js +++ b/public/src/client/account/edit.js @@ -2,7 +2,7 @@ /* 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 = {}; 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.modal('hide'); - uploader.show({ + pictureCropper.show({ socketMethod: 'user.uploadCroppedPicture', aspectRatio: '1 / 1', paramName: 'uid', diff --git a/public/src/client/account/header.js b/public/src/client/account/header.js index 757b87dc1f..7dcf320fbe 100644 --- a/public/src/client/account/header.js +++ b/public/src/client/account/header.js @@ -3,10 +3,10 @@ define('forum/account/header', [ 'coverPhoto', - 'uploader', + 'pictureCropper', 'components', 'translator' -], function (coverPhoto, uploader, components, translator) { +], function (coverPhoto, pictureCropper, components, translator) { var AccountHeader = {}; var isAdminOrSelfOrGlobalMod; @@ -78,7 +78,7 @@ define('forum/account/header', [ }, callback); }, function () { - uploader.show({ + pictureCropper.show({ title: '[[user:upload_cover_picture]]', socketMethod: 'user.updateCover', aspectRatio: '16 / 9', diff --git a/public/src/client/groups/details.js b/public/src/client/groups/details.js index 9de3e47113..771c355fcc 100644 --- a/public/src/client/groups/details.js +++ b/public/src/client/groups/details.js @@ -6,10 +6,10 @@ define('forum/groups/details', [ 'iconSelect', 'components', 'coverPhoto', - 'uploader', + 'pictureCropper', 'translator', 'vendor/colorpicker/colorpicker' -], function (memberList, iconSelect, components, coverPhoto, uploader, translator) { +], function (memberList, iconSelect, components, coverPhoto, pictureCropper, translator) { var Details = {}; var groupName; @@ -31,7 +31,7 @@ define('forum/groups/details', [ }, callback); }, function () { - uploader.show({ + pictureCropper.show({ title: '[[groups:upload-group-cover]]', socketMethod: 'groups.cover.update', aspectRatio: '16 / 9', diff --git a/public/src/modules/pictureCropper.js b/public/src/modules/pictureCropper.js index c4887e0d6e..40be206c19 100644 --- a/public/src/modules/pictureCropper.js +++ b/public/src/modules/pictureCropper.js @@ -3,8 +3,33 @@ /* globals define, socket, app, templates */ define('pictureCropper', ['translator', 'cropper'], function (translator, cropper) { + var module = {}; - 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(); + }); + + uploadModal.find('#fileUploadSubmitBtn').on('click', function () { + $(this).addClass('disabled'); + data.uploadModal = uploadModal; + onSubmit(data, callback); + return false; + }); + }); + }; module.handleImageCrop = function (data, callback) { $('#crop-picture-modal').remove(); @@ -12,67 +37,114 @@ define('pictureCropper', ['translator', 'cropper'], function (translator, croppe 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'); + viewMode: 1, + ready: function () { + 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, + ready: function () { + 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; });