debian-mirror-gitlab/app/assets/javascripts/profile/gl_crop.js

193 lines
5.7 KiB
JavaScript
Raw Normal View History

2019-12-26 22:10:19 +05:30
/* eslint-disable no-useless-escape, no-underscore-dangle, func-names, no-return-assign, consistent-return, class-methods-use-this */
2017-08-17 22:00:37 +05:30
2018-05-09 12:01:36 +05:30
import $ from 'jquery';
2017-09-10 17:25:29 +05:30
import 'cropper';
2020-04-08 14:13:33 +05:30
import { isString } from 'lodash';
2021-01-03 14:25:43 +05:30
import { loadCSSFile } from '../lib/utils/css_utils';
2016-09-13 17:45:13 +05:30
2019-12-04 20:38:33 +05:30
(() => {
2016-11-03 12:29:30 +05:30
// Matches everything but the file name
const FILENAMEREGEX = /^.*[\\\/]/;
2016-09-13 17:45:13 +05:30
2016-11-03 12:29:30 +05:30
class GitLabCrop {
2018-12-13 13:39:08 +05:30
constructor(
input,
{
filename,
previewImage,
modalCrop,
pickImageEl,
uploadImageBtn,
modalCropImg,
exportWidth = 200,
exportHeight = 200,
cropBoxWidth = 200,
cropBoxHeight = 200,
} = {},
) {
2016-11-03 12:29:30 +05:30
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-09-13 17:45:13 +05:30
this.fileInput = $(input);
2020-04-08 14:13:33 +05:30
this.modalCropImg = isString(this.modalCropImg) ? $(this.modalCropImg) : this.modalCropImg;
2018-12-13 13:39:08 +05:30
this.fileInput
.attr('name', `${this.fileInput.attr('name')}-trigger`)
.attr('id', `${this.fileInput.attr('id')}-trigger`);
2016-11-03 12:29:30 +05:30
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);
2020-04-08 14:13:33 +05:30
this.modalCrop = isString(modalCrop) ? $(modalCrop) : modalCrop;
this.uploadImageBtn = isString(uploadImageBtn) ? $(uploadImageBtn) : uploadImageBtn;
this.modalCropImg = isString(modalCropImg) ? $(modalCropImg) : modalCropImg;
2016-09-13 17:45:13 +05:30
this.cropActionsBtn = this.modalCrop.find('[data-method]');
this.bindEvents();
}
2016-11-03 12:29:30 +05:30
getElement(selector) {
2016-09-13 17:45:13 +05:30
return $(selector, this.form);
2016-11-03 12:29:30 +05:30
}
2016-09-13 17:45:13 +05:30
2016-11-03 12:29:30 +05:30
bindEvents() {
2019-12-26 22:10:19 +05:30
const _this = this;
2016-09-13 17:45:13 +05:30
this.fileInput.on('change', function(e) {
2018-11-08 19:23:39 +05:30
_this.onFileInputChange(e, this);
this.value = null;
2016-09-13 17:45:13 +05:30
});
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);
2019-12-04 20:38:33 +05:30
this.cropActionsBtn.on('click', function() {
2019-12-26 22:10:19 +05:30
const btn = this;
2016-09-13 17:45:13 +05:30
return _this.onActionBtnClick(btn);
});
2018-12-13 13:39:08 +05:30
return (this.croppedImageBlob = null);
2016-11-03 12:29:30 +05:30
}
2016-09-13 17:45:13 +05:30
2016-11-03 12:29:30 +05:30
onPickImageClick() {
2016-09-13 17:45:13 +05:30
return this.fileInput.trigger('click');
2016-11-03 12:29:30 +05:30
}
2016-09-13 17:45:13 +05:30
2016-11-03 12:29:30 +05:30
onModalShow() {
2019-12-26 22:10:19 +05:30
const _this = this;
2016-09-13 17:45:13 +05:30
return this.modalCropImg.cropper({
viewMode: 1,
center: false,
aspectRatio: 1,
modal: true,
scalable: false,
2018-03-17 18:26:18 +05:30
rotatable: true,
checkOrientation: true,
2016-09-13 17:45:13 +05:30
zoomable: true,
dragMode: 'move',
guides: false,
zoomOnTouch: false,
zoomOnWheel: false,
cropBoxMovable: false,
cropBoxResizable: false,
toggleDragModeOnDblclick: false,
2019-12-04 20:38:33 +05:30
built() {
2018-11-08 19:23:39 +05:30
const $image = $(this);
const container = $image.cropper('getContainerData');
const { cropBoxWidth, cropBoxHeight } = _this;
2016-09-13 17:45:13 +05:30
return $image.cropper('setCropBoxData', {
width: cropBoxWidth,
height: cropBoxHeight,
left: (container.width - cropBoxWidth) / 2,
2018-12-13 13:39:08 +05:30
top: (container.height - cropBoxHeight) / 2,
2016-09-13 17:45:13 +05:30
});
2018-12-13 13:39:08 +05:30
},
2016-09-13 17:45:13 +05:30
});
2016-11-03 12:29:30 +05:30
}
2016-09-13 17:45:13 +05:30
2016-11-03 12:29:30 +05:30
onModalHide() {
2016-09-13 17:45:13 +05:30
return this.modalCropImg.attr('src', '').cropper('destroy');
2016-11-03 12:29:30 +05:30
}
2016-09-13 17:45:13 +05:30
2016-11-03 12:29:30 +05:30
onUploadImageBtnClick(e) {
e.preventDefault();
2016-09-13 17:45:13 +05:30
this.setBlob();
this.setPreview();
this.modalCrop.modal('hide');
return this.fileInput.val('');
2016-11-03 12:29:30 +05:30
}
2016-09-13 17:45:13 +05:30
2016-11-03 12:29:30 +05:30
onActionBtnClick(btn) {
2019-12-26 22:10:19 +05:30
const data = $(btn).data();
2016-09-13 17:45:13 +05:30
if (this.modalCropImg.data('cropper') && data.method) {
2019-12-04 20:38:33 +05:30
return this.modalCropImg.cropper(data.method, data.option);
2016-09-13 17:45:13 +05:30
}
2016-11-03 12:29:30 +05:30
}
2016-09-13 17:45:13 +05:30
2016-11-03 12:29:30 +05:30
onFileInputChange(e, input) {
2016-09-13 17:45:13 +05:30
return this.readFile(input);
2016-11-03 12:29:30 +05:30
}
2016-09-13 17:45:13 +05:30
2016-11-03 12:29:30 +05:30
readFile(input) {
2019-12-26 22:10:19 +05:30
const _this = this;
const reader = new FileReader();
2016-11-03 12:29:30 +05:30
reader.onload = () => {
2016-09-13 17:45:13 +05:30
_this.modalCropImg.attr('src', reader.result);
return _this.modalCrop.modal('show');
};
return reader.readAsDataURL(input.files[0]);
2016-11-03 12:29:30 +05:30
}
2016-09-13 17:45:13 +05:30
2016-11-03 12:29:30 +05:30
dataURLtoBlob(dataURL) {
2019-12-26 22:10:19 +05:30
let i = 0;
let len = 0;
const binary = atob(dataURL.split(',')[1]);
const array = [];
2018-11-08 19:23:39 +05:30
for (i = 0, len = binary.length; i < len; i += 1) {
array.push(binary.charCodeAt(i));
2016-09-13 17:45:13 +05:30
}
return new Blob([new Uint8Array(array)], {
2018-12-13 13:39:08 +05:30
type: 'image/png',
2016-09-13 17:45:13 +05:30
});
2016-11-03 12:29:30 +05:30
}
2016-09-13 17:45:13 +05:30
2016-11-03 12:29:30 +05:30
setPreview() {
2019-12-26 22:10:19 +05:30
const filename = this.fileInput.val().replace(FILENAMEREGEX, '');
2016-09-13 17:45:13 +05:30
this.previewImage.attr('src', this.dataURL);
return this.filename.text(filename);
2016-11-03 12:29:30 +05:30
}
2016-09-13 17:45:13 +05:30
2016-11-03 12:29:30 +05:30
setBlob() {
2018-12-13 13:39:08 +05:30
this.dataURL = this.modalCropImg
.cropper('getCroppedCanvas', {
width: 200,
height: 200,
})
.toDataURL('image/png');
return (this.croppedImageBlob = this.dataURLtoBlob(this.dataURL));
2016-11-03 12:29:30 +05:30
}
2016-09-13 17:45:13 +05:30
2016-11-03 12:29:30 +05:30
getBlob() {
2016-09-13 17:45:13 +05:30
return this.croppedImageBlob;
2016-11-03 12:29:30 +05:30
}
}
2016-09-13 17:45:13 +05:30
2021-01-03 14:25:43 +05:30
const cropModal = document.querySelector('.modal-profile-crop');
if (cropModal) loadCSSFile(cropModal.dataset.cropperCssPath);
2016-09-13 17:45:13 +05:30
$.fn.glCrop = function(opts) {
return this.each(function() {
return $(this).data('glcrop', new GitLabCrop(this, opts));
});
2017-08-17 22:00:37 +05:30
};
2016-11-03 12:29:30 +05:30
})(window.gl || (window.gl = {}));