BigW Consortium Gitlab

gl_crop.js 5.65 KB
Newer Older
1
/* 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 */
2

3 4
import 'vendor/cropper';

5 6 7
((global) => {
  // Matches everything but the file name
  const FILENAMEREGEX = /^.*[\\\/]/;
Fatih Acet committed
8

9 10 11 12 13 14 15
  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);
Fatih Acet committed
16 17
      this.fileInput = $(input);
      this.modalCropImg = _.isString(this.modalCropImg) ? $(this.modalCropImg) : this.modalCropImg;
18
      this.fileInput.attr('name', `${this.fileInput.attr('name')}-trigger`).attr('id', `${this.fileInput.attr('id')}-trigger`);
19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
      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;
Fatih Acet committed
36 37 38 39
      this.cropActionsBtn = this.modalCrop.find('[data-method]');
      this.bindEvents();
    }

40
    getElement(selector) {
Fatih Acet committed
41
      return $(selector, this.form);
42
    }
Fatih Acet committed
43

44
    bindEvents() {
Fatih Acet committed
45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
      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;
60
    }
Fatih Acet committed
61

62
    onPickImageClick() {
Fatih Acet committed
63
      return this.fileInput.trigger('click');
64
    }
Fatih Acet committed
65

66
    onModalShow() {
Fatih Acet committed
67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
      var _this;
      _this = this;
      return this.modalCropImg.cropper({
        viewMode: 1,
        center: false,
        aspectRatio: 1,
        modal: true,
        scalable: false,
        rotatable: false,
        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
          });
        }
      });
98
    }
Fatih Acet committed
99

100
    onModalHide() {
Fatih Acet committed
101
      return this.modalCropImg.attr('src', '').cropper('destroy');
102
    }
Fatih Acet committed
103

104 105
    onUploadImageBtnClick(e) {
      e.preventDefault();
Fatih Acet committed
106 107 108 109
      this.setBlob();
      this.setPreview();
      this.modalCrop.modal('hide');
      return this.fileInput.val('');
110
    }
Fatih Acet committed
111

112
    onActionBtnClick(btn) {
Fatih Acet committed
113 114 115 116 117
      var data, result;
      data = $(btn).data();
      if (this.modalCropImg.data('cropper') && data.method) {
        return result = this.modalCropImg.cropper(data.method, data.option);
      }
118
    }
Fatih Acet committed
119

120
    onFileInputChange(e, input) {
Fatih Acet committed
121
      return this.readFile(input);
122
    }
Fatih Acet committed
123

124
    readFile(input) {
Fatih Acet committed
125 126 127
      var _this, reader;
      _this = this;
      reader = new FileReader;
128
      reader.onload = () => {
Fatih Acet committed
129 130 131 132
        _this.modalCropImg.attr('src', reader.result);
        return _this.modalCrop.modal('show');
      };
      return reader.readAsDataURL(input.files[0]);
133
    }
Fatih Acet committed
134

135
    dataURLtoBlob(dataURL) {
Fatih Acet committed
136 137 138
      var array, binary, i, k, len, v;
      binary = atob(dataURL.split(',')[1]);
      array = [];
139
      for (k = i = 0, len = binary.length; i < len; k = (i += 1)) {
Fatih Acet committed
140 141 142 143 144 145
        v = binary[k];
        array.push(binary.charCodeAt(k));
      }
      return new Blob([new Uint8Array(array)], {
        type: 'image/png'
      });
146
    }
Fatih Acet committed
147

148
    setPreview() {
Fatih Acet committed
149 150 151 152
      var filename;
      this.previewImage.attr('src', this.dataURL);
      filename = this.fileInput.val().replace(FILENAMEREGEX, '');
      return this.filename.text(filename);
153
    }
Fatih Acet committed
154

155
    setBlob() {
Fatih Acet committed
156 157 158 159 160
      this.dataURL = this.modalCropImg.cropper('getCroppedCanvas', {
        width: 200,
        height: 200
      }).toDataURL('image/png');
      return this.croppedImageBlob = this.dataURLtoBlob(this.dataURL);
161
    }
Fatih Acet committed
162

163
    getBlob() {
Fatih Acet committed
164
      return this.croppedImageBlob;
165 166
    }
  }
Fatih Acet committed
167 168 169 170 171

  $.fn.glCrop = function(opts) {
    return this.each(function() {
      return $(this).data('glcrop', new GitLabCrop(this, opts));
    });
172
  };
173
})(window.gl || (window.gl = {}));