Refactor GitLabCrop to ES6.
This commit is contained in:
parent
13182a9c5c
commit
5bc3b7be60
|
@ -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 = {}));
|
Loading…
Reference in New Issue