From 484891472e4d1912268ed599583def1393fc7017 Mon Sep 17 00:00:00 2001 From: pichalite Date: Fri, 17 Feb 2017 00:48:38 +0000 Subject: [PATCH] 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) {