gitlab-org--gitlab-foss/app/assets/javascripts/profile/gl_crop.js

176 lines
5.7 KiB
JavaScript
Raw Normal View History

/* eslint-disable no-useless-escape, max-len, quotes, no-var, no-underscore-dangle, func-names, space-before-function-paren, no-unused-vars, no-return-assign, object-shorthand, one-var, one-var-declaration-per-line, comma-dangle, consistent-return, class-methods-use-this, new-parens */
import 'cropper';
import _ from 'underscore';
2016-09-09 11:49:13 -04:00
((global) => {
// Matches everything but the file name
const FILENAMEREGEX = /^.*[\\\/]/;
2016-07-24 16:45:11 -04:00
2016-09-09 11:49:13 -04:00
class GitLabCrop {
constructor(input, { filename, previewImage, modalCrop, pickImageEl, uploadImageBtn, modalCropImg,
exportWidth = 200, exportHeight = 200, cropBoxWidth = 200, cropBoxHeight = 200 } = {}) {
this.onUploadImageBtnClick = this.onUploadImageBtnClick.bind(this);
this.onModalHide = this.onModalHide.bind(this);
this.onModalShow = this.onModalShow.bind(this);
this.onPickImageClick = this.onPickImageClick.bind(this);
2016-07-24 16:45:11 -04:00
this.fileInput = $(input);
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`);
2016-09-09 11:49:13 -04:00
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;
2016-07-24 16:45:11 -04:00
this.cropActionsBtn = this.modalCrop.find('[data-method]');
this.bindEvents();
}
2016-09-09 11:49:13 -04:00
getElement(selector) {
2016-07-24 16:45:11 -04:00
return $(selector, this.form);
2016-09-09 11:49:13 -04:00
}
2016-07-24 16:45:11 -04:00
2016-09-09 11:49:13 -04:00
bindEvents() {
2016-07-24 16:45:11 -04:00
var _this;
_this = this;
this.fileInput.on('change', function(e) {
return _this.onFileInputChange(e, this);
});
this.pickImageEl.on('click', this.onPickImageClick);
this.modalCrop.on('shown.bs.modal', this.onModalShow);
this.modalCrop.on('hidden.bs.modal', this.onModalHide);
this.uploadImageBtn.on('click', this.onUploadImageBtnClick);
this.cropActionsBtn.on('click', function(e) {
var btn;
btn = this;
return _this.onActionBtnClick(btn);
});
return this.croppedImageBlob = null;
2016-09-09 11:49:13 -04:00
}
2016-07-24 16:45:11 -04:00
2016-09-09 11:49:13 -04:00
onPickImageClick() {
2016-07-24 16:45:11 -04:00
return this.fileInput.trigger('click');
2016-09-09 11:49:13 -04:00
}
2016-07-24 16:45:11 -04:00
2016-09-09 11:49:13 -04:00
onModalShow() {
2016-07-24 16:45:11 -04:00
var _this;
_this = this;
return this.modalCropImg.cropper({
viewMode: 1,
center: false,
aspectRatio: 1,
modal: true,
scalable: false,
2017-09-22 21:26:00 -04:00
rotatable: true,
checkOrientation: true,
2016-07-24 16:45:11 -04:00
zoomable: true,
dragMode: 'move',
guides: false,
zoomOnTouch: false,
zoomOnWheel: false,
cropBoxMovable: false,
cropBoxResizable: false,
toggleDragModeOnDblclick: false,
built: function() {
var $image, container, cropBoxHeight, cropBoxWidth;
$image = $(this);
container = $image.cropper('getContainerData');
cropBoxWidth = _this.cropBoxWidth;
cropBoxHeight = _this.cropBoxHeight;
return $image.cropper('setCropBoxData', {
width: cropBoxWidth,
height: cropBoxHeight,
left: (container.width - cropBoxWidth) / 2,
top: (container.height - cropBoxHeight) / 2
});
}
});
2016-09-09 11:49:13 -04:00
}
2016-07-24 16:45:11 -04:00
2016-09-09 11:49:13 -04:00
onModalHide() {
2016-07-24 16:45:11 -04:00
return this.modalCropImg.attr('src', '').cropper('destroy');
2016-09-09 11:49:13 -04:00
}
2016-07-24 16:45:11 -04:00
2016-09-09 11:49:13 -04:00
onUploadImageBtnClick(e) {
e.preventDefault();
2016-07-24 16:45:11 -04:00
this.setBlob();
this.setPreview();
this.modalCrop.modal('hide');
return this.fileInput.val('');
2016-09-09 11:49:13 -04:00
}
2016-07-24 16:45:11 -04:00
2016-09-09 11:49:13 -04:00
onActionBtnClick(btn) {
2016-07-24 16:45:11 -04:00
var data, result;
data = $(btn).data();
if (this.modalCropImg.data('cropper') && data.method) {
return result = this.modalCropImg.cropper(data.method, data.option);
}
2016-09-09 11:49:13 -04:00
}
2016-07-24 16:45:11 -04:00
2016-09-09 11:49:13 -04:00
onFileInputChange(e, input) {
2016-07-24 16:45:11 -04:00
return this.readFile(input);
2016-09-09 11:49:13 -04:00
}
2016-07-24 16:45:11 -04:00
2016-09-09 11:49:13 -04:00
readFile(input) {
2016-07-24 16:45:11 -04:00
var _this, reader;
_this = this;
reader = new FileReader;
2016-09-09 11:49:13 -04:00
reader.onload = () => {
2016-07-24 16:45:11 -04:00
_this.modalCropImg.attr('src', reader.result);
return _this.modalCrop.modal('show');
};
return reader.readAsDataURL(input.files[0]);
2016-09-09 11:49:13 -04:00
}
2016-07-24 16:45:11 -04:00
2016-09-09 11:49:13 -04:00
dataURLtoBlob(dataURL) {
2016-07-24 16:45:11 -04:00
var array, binary, i, k, len, v;
binary = atob(dataURL.split(',')[1]);
array = [];
for (k = i = 0, len = binary.length; i < len; k = (i += 1)) {
2016-07-24 16:45:11 -04:00
v = binary[k];
array.push(binary.charCodeAt(k));
}
return new Blob([new Uint8Array(array)], {
type: 'image/png'
});
2016-09-09 11:49:13 -04:00
}
2016-07-24 16:45:11 -04:00
2016-09-09 11:49:13 -04:00
setPreview() {
2016-07-24 16:45:11 -04:00
var filename;
this.previewImage.attr('src', this.dataURL);
filename = this.fileInput.val().replace(FILENAMEREGEX, '');
return this.filename.text(filename);
2016-09-09 11:49:13 -04:00
}
2016-07-24 16:45:11 -04:00
2016-09-09 11:49:13 -04:00
setBlob() {
2016-07-24 16:45:11 -04:00
this.dataURL = this.modalCropImg.cropper('getCroppedCanvas', {
width: 200,
height: 200
}).toDataURL('image/png');
return this.croppedImageBlob = this.dataURLtoBlob(this.dataURL);
2016-09-09 11:49:13 -04:00
}
2016-07-24 16:45:11 -04:00
2016-09-09 11:49:13 -04:00
getBlob() {
2016-07-24 16:45:11 -04:00
return this.croppedImageBlob;
2016-09-09 11:49:13 -04:00
}
}
2016-07-24 16:45:11 -04:00
$.fn.glCrop = function(opts) {
return this.each(function() {
return $(this).data('glcrop', new GitLabCrop(this, opts));
});
};
2016-09-09 11:49:13 -04:00
})(window.gl || (window.gl = {}));