BigW Consortium Gitlab

gl_crop.js.coffee 4.01 KB
Newer Older
Alfredo Sumaran committed
1
class GitLabCrop
2 3 4
  # Matches everything but the file name
  FILENAMEREGEX = /^.*[\\\/]/

Alfredo Sumaran committed
5 6 7 8 9 10 11 12
  constructor: (input, opts = {}) ->
    @fileInput = $(input)

    # We should rename to avoid spec to fail
    # Form will submit the proper input filed with a file using FormData
    @fileInput
      .attr('name', "#{@fileInput.attr('name')}-trigger")
      .attr('id', "#{@fileInput.attr('id')}-trigger")
Alfredo Sumaran committed
13 14 15

    # Set defaults
    {
16 17 18 19
      @exportWidth = 200
      @exportHeight = 200
      @cropBoxWidth = 200
      @cropBoxHeight = 200
Alfredo Sumaran committed
20
      @form = @fileInput.parents('form')
Alfredo Sumaran committed
21

Alfredo Sumaran committed
22 23 24 25 26 27 28
      # Required params
      @filename
      @previewImage
      @modalCrop
      @pickImageEl
      @uploadImageBtn
      @modalCropImg
Alfredo Sumaran committed
29 30
    } = opts

31
    # Ensure needed elements are jquery objects
Alfredo Sumaran committed
32
    # If selector is provided we will convert them to a jQuery Object
33 34 35
    @filename = @getElement(@filename)
    @previewImage = @getElement(@previewImage)
    @pickImageEl = @getElement(@pickImageEl)
36

Alfredo Sumaran committed
37
    # Modal elements usually are outside the @form element
38
    @modalCrop = if _.isString(@modalCrop) then $(@modalCrop) else @modalCrop
Alfredo Sumaran committed
39 40
    @uploadImageBtn = if _.isString(@uploadImageBtn) then $(@uploadImageBtn) else @uploadImageBtn
    @modalCropImg = if _.isString(@modalCropImg) then $(@modalCropImg) else @modalCropImg
41

Alfredo Sumaran committed
42 43 44 45
    @cropActionsBtn = @modalCrop.find('[data-method]')

    @bindEvents()

46
  getElement: (selector) ->
47 48
    $(selector, @form)

Alfredo Sumaran committed
49
  bindEvents: ->
50
    _this = @
Alfredo Sumaran committed
51
    @fileInput.on 'change', (e) ->
52
      _this.onFileInputChange(e, @)
Alfredo Sumaran committed
53 54 55 56 57 58 59

    @pickImageEl.on 'click', @onPickImageClick
    @modalCrop.on 'shown.bs.modal', @onModalShow
    @modalCrop.on 'hidden.bs.modal', @onModalHide
    @uploadImageBtn.on 'click', @onUploadImageBtnClick
    @cropActionsBtn.on 'click', (e) ->
      btn = @
60
      _this.onActionBtnClick(btn)
Alfredo Sumaran committed
61 62 63 64 65 66
    @croppedImageBlob = null

  onPickImageClick: =>
    @fileInput.trigger('click')

  onModalShow: =>
67
    _this = @
Alfredo Sumaran committed
68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
    @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: ->
84 85 86 87
        $image = $(@)
        container = $image.cropper 'getContainerData'
        cropBoxWidth = _this.cropBoxWidth;
        cropBoxHeight = _this.cropBoxHeight;
Alfredo Sumaran committed
88

89
        $image.cropper('setCropBoxData',
Alfredo Sumaran committed
90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
          width: cropBoxWidth,
          height: cropBoxHeight,
          left: (container.width - cropBoxWidth) / 2,
          top: (container.height - cropBoxHeight) / 2
        )
    )


  onModalHide: =>
    @modalCropImg
      .attr('src', '') # Remove attached image
      .cropper('destroy') # Destroy cropper instance

  onUploadImageBtnClick: (e) =>
    e.preventDefault()
    @setBlob()
106
    @setPreview()
Alfredo Sumaran committed
107
    @modalCrop.modal('hide')
108
    @fileInput.val('')
Alfredo Sumaran committed
109 110 111 112 113 114 115 116 117 118 119

  onActionBtnClick: (btn) ->
    data = $(btn).data()

    if @modalCropImg.data('cropper') && data.method
      result = @modalCropImg.cropper data.method, data.option

  onFileInputChange: (e, input) ->
    @readFile(input)

  readFile: (input) ->
120
    _this = @
Alfredo Sumaran committed
121 122
    reader = new FileReader
    reader.onload = ->
123 124
      _this.modalCropImg.attr('src', reader.result)
      _this.modalCrop.modal('show')
Alfredo Sumaran committed
125 126 127 128 129 130 131 132 133 134

    reader.readAsDataURL(input.files[0])

  dataURLtoBlob: (dataURL) ->
    binary = atob(dataURL.split(',')[1])
    array = []
    for v, k in  binary
      array.push(binary.charCodeAt(k))
    new Blob([new Uint8Array(array)], type: 'image/png')

135 136
  setPreview: ->
    @previewImage.attr('src', @dataURL)
137
    filename = @fileInput.val().replace(FILENAMEREGEX, '')
138
    @filename.text(filename)
139

Alfredo Sumaran committed
140
  setBlob: ->
141 142 143 144 145
    @dataURL = @modalCropImg.cropper('getCroppedCanvas',
        width: 200
        height: 200
      ).toDataURL('image/png')
    @croppedImageBlob = @dataURLtoBlob(@dataURL)
Alfredo Sumaran committed
146 147 148 149 150 151 152

  getBlob: ->
    @croppedImageBlob

$.fn.glCrop = (opts) ->
  return @.each ->
    $(@).data('glcrop', new GitLabCrop(@, opts))