gl_crop.js.es6 5.36 KB
Newer Older
1
/* eslint-disable */
2
((global) => {
Fatih Acet's avatar
Fatih Acet committed
3

4 5
  // Matches everything but the file name
  const FILENAMEREGEX = /^.*[\\\/]/;
Fatih Acet's avatar
Fatih Acet committed
6

7 8 9
  class GitLabCrop {
    constructor(input, { filename, previewImage, modalCrop, pickImageEl, uploadImageBtn, modalCropImg,
        exportWidth = 200, exportHeight = 200, cropBoxWidth = 200, cropBoxHeight = 200 } = {}) {
Fatih Acet's avatar
Fatih Acet committed
10

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  $.fn.glCrop = function(opts) {
    return this.each(function() {
      return $(this).data('glcrop', new GitLabCrop(this, opts));
    });
171
  }
Fatih Acet's avatar
Fatih Acet committed
172

173
})(window.gl || (window.gl = {}));