diff options
author | Bryce Johnson <bryce@gitlab.com> | 2016-09-09 18:49:13 +0300 |
---|---|---|
committer | Bryce Johnson <bryce@gitlab.com> | 2016-10-05 12:25:02 +0300 |
commit | 5bc3b7be601a234dfbf16a32b2e58b95d3aa677b (patch) | |
tree | 3568410f4dec20c11634aac65cdacca6d7a64d58 /app/assets/javascripts/profile | |
parent | 13182a9c5c97b9e104e9efcda203d8b566b72f28 (diff) |
Refactor GitLabCrop to ES6.
Diffstat (limited to 'app/assets/javascripts/profile')
-rw-r--r-- | app/assets/javascripts/profile/gl_crop.js.es6 (renamed from app/assets/javascripts/profile/gl_crop.js) | 123 |
1 files changed, 59 insertions, 64 deletions
diff --git a/app/assets/javascripts/profile/gl_crop.js b/app/assets/javascripts/profile/gl_crop.js.es6 index 30cd6f6e470..a1b0126e857 100644 --- a/app/assets/javascripts/profile/gl_crop.js +++ b/app/assets/javascripts/profile/gl_crop.js.es6 @@ -1,47 +1,45 @@ -(function() { - var GitLabCrop, - bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; +((global) => { - GitLabCrop = (function() { - var FILENAMEREGEX; + // Matches everything but the file name + const FILENAMEREGEX = /^.*[\\\/]/; - // Matches everything but the file name - FILENAMEREGEX = /^.*[\\\/]/; + class GitLabCrop { + constructor(input, { filename, previewImage, modalCrop, pickImageEl, uploadImageBtn, modalCropImg, + exportWidth = 200, exportHeight = 200, cropBoxWidth = 200, cropBoxHeight = 200 } = {}) { - function GitLabCrop(input, opts) { - var ref, ref1, ref2, ref3, ref4; - if (opts == null) { - opts = {}; - } - this.onUploadImageBtnClick = bind(this.onUploadImageBtnClick, this); - this.onModalHide = bind(this.onModalHide, this); - this.onModalShow = bind(this.onModalShow, this); - this.onPickImageClick = bind(this.onPickImageClick, this); + this.onUploadImageBtnClick = this.onUploadImageBtnClick.bind(this); + this.onModalHide = this.onModalHide.bind(this); + this.onModalShow = this.onModalShow.bind(this); + this.onPickImageClick = this.onPickImageClick.bind(this); this.fileInput = $(input); - // We should rename to avoid spec to fail - // Form will submit the proper input filed with a file using FormData - this.fileInput.attr('name', (this.fileInput.attr('name')) + "-trigger").attr('id', (this.fileInput.attr('id')) + "-trigger"); - // Set defaults - this.exportWidth = (ref = opts.exportWidth) != null ? ref : 200, this.exportHeight = (ref1 = opts.exportHeight) != null ? ref1 : 200, this.cropBoxWidth = (ref2 = opts.cropBoxWidth) != null ? ref2 : 200, this.cropBoxHeight = (ref3 = opts.cropBoxHeight) != null ? ref3 : 200, this.form = (ref4 = opts.form) != null ? ref4 : this.fileInput.parents('form'), this.filename = opts.filename, this.previewImage = opts.previewImage, this.modalCrop = opts.modalCrop, this.pickImageEl = opts.pickImageEl, this.uploadImageBtn = opts.uploadImageBtn, this.modalCropImg = opts.modalCropImg; - // Required params - // Ensure needed elements are jquery objects - // If selector is provided we will convert them to a jQuery Object - this.filename = this.getElement(this.filename); - this.previewImage = this.getElement(this.previewImage); - this.pickImageEl = this.getElement(this.pickImageEl); - // Modal elements usually are outside the @form element - this.modalCrop = _.isString(this.modalCrop) ? $(this.modalCrop) : this.modalCrop; - this.uploadImageBtn = _.isString(this.uploadImageBtn) ? $(this.uploadImageBtn) : this.uploadImageBtn; this.modalCropImg = _.isString(this.modalCropImg) ? $(this.modalCropImg) : this.modalCropImg; + this.fileInput.attr('name', `${this.fileInput.attr('name')}-trigger`).attr('id', `this.fileInput.attr('id')-trigger`); + this.exportWidth = exportWidth; + this.exportHeight = exportHeight; + this.cropBoxWidth = cropBoxWidth; + this.cropBoxHeight = cropBoxHeight; + this.form = this.fileInput.parents('form'); + this.filename = filename; + this.previewImage = previewImage; + this.modalCrop = modalCrop; + this.pickImageEl = pickImageEl; + this.uploadImageBtn = uploadImageBtn; + this.modalCropImg = modalCropImg; + this.filename = this.getElement(filename); + this.previewImage = this.getElement(previewImage); + this.pickImageEl = this.getElement(pickImageEl); + this.modalCrop = _.isString(modalCrop) ? $(modalCrop) : modalCrop; + this.uploadImageBtn = _.isString(uploadImageBtn) ? $(uploadImageBtn) : uploadImageBtn; + this.modalCropImg = _.isString(modalCropImg) ? $(modalCropImg) : modalCropImg; this.cropActionsBtn = this.modalCrop.find('[data-method]'); this.bindEvents(); } - GitLabCrop.prototype.getElement = function(selector) { + getElement(selector) { return $(selector, this.form); - }; + } - GitLabCrop.prototype.bindEvents = function() { + bindEvents() { var _this; _this = this; this.fileInput.on('change', function(e) { @@ -57,13 +55,13 @@ return _this.onActionBtnClick(btn); }); return this.croppedImageBlob = null; - }; + } - GitLabCrop.prototype.onPickImageClick = function() { + onPickImageClick() { return this.fileInput.trigger('click'); - }; + } - GitLabCrop.prototype.onModalShow = function() { + onModalShow() { var _this; _this = this; return this.modalCropImg.cropper({ @@ -95,44 +93,44 @@ }); } }); - }; + } - GitLabCrop.prototype.onModalHide = function() { + onModalHide() { return this.modalCropImg.attr('src', '').cropper('destroy'); - }; + } - GitLabCrop.prototype.onUploadImageBtnClick = function(e) { // Remove attached image - e.preventDefault(); // Destroy cropper instance + onUploadImageBtnClick(e) { + e.preventDefault(); this.setBlob(); this.setPreview(); this.modalCrop.modal('hide'); return this.fileInput.val(''); - }; + } - GitLabCrop.prototype.onActionBtnClick = function(btn) { + onActionBtnClick(btn) { var data, result; data = $(btn).data(); if (this.modalCropImg.data('cropper') && data.method) { return result = this.modalCropImg.cropper(data.method, data.option); } - }; + } - GitLabCrop.prototype.onFileInputChange = function(e, input) { + onFileInputChange(e, input) { return this.readFile(input); - }; + } - GitLabCrop.prototype.readFile = function(input) { + readFile(input) { var _this, reader; _this = this; reader = new FileReader; - reader.onload = function() { + reader.onload = () => { _this.modalCropImg.attr('src', reader.result); return _this.modalCrop.modal('show'); }; return reader.readAsDataURL(input.files[0]); - }; + } - GitLabCrop.prototype.dataURLtoBlob = function(dataURL) { + dataURLtoBlob(dataURL) { var array, binary, i, k, len, v; binary = atob(dataURL.split(',')[1]); array = []; @@ -143,35 +141,32 @@ return new Blob([new Uint8Array(array)], { type: 'image/png' }); - }; + } - GitLabCrop.prototype.setPreview = function() { + setPreview() { var filename; this.previewImage.attr('src', this.dataURL); filename = this.fileInput.val().replace(FILENAMEREGEX, ''); return this.filename.text(filename); - }; + } - GitLabCrop.prototype.setBlob = function() { + setBlob() { this.dataURL = this.modalCropImg.cropper('getCroppedCanvas', { width: 200, height: 200 }).toDataURL('image/png'); return this.croppedImageBlob = this.dataURLtoBlob(this.dataURL); - }; + } - GitLabCrop.prototype.getBlob = function() { + getBlob() { return this.croppedImageBlob; - }; - - return GitLabCrop; - - })(); + } + } $.fn.glCrop = function(opts) { return this.each(function() { return $(this).data('glcrop', new GitLabCrop(this, opts)); }); - }; + } -}).call(this); +})(window.gl || (window.gl = {})); |