gl_crop.js.es6 5.62 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 5
((global) => {
  // Matches everything but the file name
  const FILENAMEREGEX = /^.*[\\\/]/;
Fatih Acet's avatar
Fatih Acet committed
6

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

38
    getElement(selector) {
Fatih Acet's avatar
Fatih Acet committed
39
      return $(selector, this.form);
40
    }
Fatih Acet's avatar
Fatih Acet committed
41

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

60
    onPickImageClick() {
Fatih Acet's avatar
Fatih Acet committed
61
      return this.fileInput.trigger('click');
62
    }
Fatih Acet's avatar
Fatih Acet committed
63

64
    onModalShow() {
Fatih Acet's avatar
Fatih Acet committed
65 66 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
      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
          });
        }
      });
96
    }
Fatih Acet's avatar
Fatih Acet committed
97

98
    onModalHide() {
Fatih Acet's avatar
Fatih Acet committed
99
      return this.modalCropImg.attr('src', '').cropper('destroy');
100
    }
Fatih Acet's avatar
Fatih Acet committed
101

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

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

118
    onFileInputChange(e, input) {
Fatih Acet's avatar
Fatih Acet committed
119
      return this.readFile(input);
120
    }
Fatih Acet's avatar
Fatih Acet committed
121

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

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

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

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

161
    getBlob() {
Fatih Acet's avatar
Fatih Acet committed
162
      return this.croppedImageBlob;
163 164
    }
  }
Fatih Acet's avatar
Fatih Acet committed
165 166 167 168 169

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