BigW Consortium Gitlab

gl_crop.js 5.67 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
import 'cropper';
4
import _ from 'underscore';
5

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

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

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

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

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

67
    onModalShow() {
Fatih Acet committed
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 98
      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
          });
        }
      });
99
    }
Fatih Acet committed
100

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

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

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

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

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

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

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

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

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

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