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

(function() {
  var GitLabCrop,
    bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

  GitLabCrop = (function() {
    var FILENAMEREGEX;

    // Matches everything but the file name
    FILENAMEREGEX = /^.*[\\\/]/;

    function GitLabCrop(input, opts) {
      var ref, ref1, ref2, ref3, ref4;
      if (opts == null) {
        opts = {};
      }
      this.onUploadImageBtnClick = bind(this.onUploadImageBtnClick, this);
      this.onModalHide = bind(this.onModalHide, this);
      this.onModalShow = bind(this.onModalShow, this);
      this.onPickImageClick = bind(this.onPickImageClick, this);
      this.fileInput = $(input);
      // We should rename to avoid spec to fail
      // Form will submit the proper input filed with a file using FormData
      this.fileInput.attr('name', (this.fileInput.attr('name')) + "-trigger").attr('id', (this.fileInput.attr('id')) + "-trigger");
      // Set defaults
      this.exportWidth = (ref = opts.exportWidth) != null ? ref : 200, this.exportHeight = (ref1 = opts.exportHeight) != null ? ref1 : 200, this.cropBoxWidth = (ref2 = opts.cropBoxWidth) != null ? ref2 : 200, this.cropBoxHeight = (ref3 = opts.cropBoxHeight) != null ? ref3 : 200, this.form = (ref4 = opts.form) != null ? ref4 : this.fileInput.parents('form'), this.filename = opts.filename, this.previewImage = opts.previewImage, this.modalCrop = opts.modalCrop, this.pickImageEl = opts.pickImageEl, this.uploadImageBtn = opts.uploadImageBtn, this.modalCropImg = opts.modalCropImg;
      // Required params
      // Ensure needed elements are jquery objects
      // If selector is provided we will convert them to a jQuery Object
      this.filename = this.getElement(this.filename);
      this.previewImage = this.getElement(this.previewImage);
      this.pickImageEl = this.getElement(this.pickImageEl);
      // Modal elements usually are outside the @form element
      this.modalCrop = _.isString(this.modalCrop) ? $(this.modalCrop) : this.modalCrop;
      this.uploadImageBtn = _.isString(this.uploadImageBtn) ? $(this.uploadImageBtn) : this.uploadImageBtn;
      this.modalCropImg = _.isString(this.modalCropImg) ? $(this.modalCropImg) : this.modalCropImg;
      this.cropActionsBtn = this.modalCrop.find('[data-method]');
      this.bindEvents();
    }

    GitLabCrop.prototype.getElement = function(selector) {
      return $(selector, this.form);
    };

    GitLabCrop.prototype.bindEvents = function() {
      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;
    };

    GitLabCrop.prototype.onPickImageClick = function() {
      return this.fileInput.trigger('click');
    };

    GitLabCrop.prototype.onModalShow = function() {
      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
          });
        }
      });
    };

    GitLabCrop.prototype.onModalHide = function() {
      return this.modalCropImg.attr('src', '').cropper('destroy');
    };

    GitLabCrop.prototype.onUploadImageBtnClick = function(e) { // Remove attached image
      e.preventDefault(); // Destroy cropper instance
      this.setBlob();
      this.setPreview();
      this.modalCrop.modal('hide');
      return this.fileInput.val('');
    };

    GitLabCrop.prototype.onActionBtnClick = function(btn) {
      var data, result;
      data = $(btn).data();
      if (this.modalCropImg.data('cropper') && data.method) {
        return result = this.modalCropImg.cropper(data.method, data.option);
      }
    };

    GitLabCrop.prototype.onFileInputChange = function(e, input) {
      return this.readFile(input);
    };

    GitLabCrop.prototype.readFile = function(input) {
      var _this, reader;
      _this = this;
      reader = new FileReader;
      reader.onload = function() {
        _this.modalCropImg.attr('src', reader.result);
        return _this.modalCrop.modal('show');
      };
      return reader.readAsDataURL(input.files[0]);
    };

    GitLabCrop.prototype.dataURLtoBlob = function(dataURL) {
      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'
      });
    };

    GitLabCrop.prototype.setPreview = function() {
      var filename;
      this.previewImage.attr('src', this.dataURL);
      filename = this.fileInput.val().replace(FILENAMEREGEX, '');
      return this.filename.text(filename);
    };

    GitLabCrop.prototype.setBlob = function() {
      this.dataURL = this.modalCropImg.cropper('getCroppedCanvas', {
        width: 200,
        height: 200
      }).toDataURL('image/png');
      return this.croppedImageBlob = this.dataURLtoBlob(this.dataURL);
    };

    GitLabCrop.prototype.getBlob = function() {
      return this.croppedImageBlob;
    };

    return GitLabCrop;

  })();

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

}).call(this);