summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/profile/gl_crop.js.coffee
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/javascripts/profile/gl_crop.js.coffee')
-rw-r--r--app/assets/javascripts/profile/gl_crop.js.coffee152
1 files changed, 0 insertions, 152 deletions
diff --git a/app/assets/javascripts/profile/gl_crop.js.coffee b/app/assets/javascripts/profile/gl_crop.js.coffee
deleted file mode 100644
index df9bfdfa6cc..00000000000
--- a/app/assets/javascripts/profile/gl_crop.js.coffee
+++ /dev/null
@@ -1,152 +0,0 @@
-class GitLabCrop
- # Matches everything but the file name
- FILENAMEREGEX = /^.*[\\\/]/
-
- 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")
-
- # Set defaults
- {
- @exportWidth = 200
- @exportHeight = 200
- @cropBoxWidth = 200
- @cropBoxHeight = 200
- @form = @fileInput.parents('form')
-
- # Required params
- @filename
- @previewImage
- @modalCrop
- @pickImageEl
- @uploadImageBtn
- @modalCropImg
- } = opts
-
- # Ensure needed elements are jquery objects
- # If selector is provided we will convert them to a jQuery Object
- @filename = @getElement(@filename)
- @previewImage = @getElement(@previewImage)
- @pickImageEl = @getElement(@pickImageEl)
-
- # Modal elements usually are outside the @form element
- @modalCrop = if _.isString(@modalCrop) then $(@modalCrop) else @modalCrop
- @uploadImageBtn = if _.isString(@uploadImageBtn) then $(@uploadImageBtn) else @uploadImageBtn
- @modalCropImg = if _.isString(@modalCropImg) then $(@modalCropImg) else @modalCropImg
-
- @cropActionsBtn = @modalCrop.find('[data-method]')
-
- @bindEvents()
-
- getElement: (selector) ->
- $(selector, @form)
-
- bindEvents: ->
- _this = @
- @fileInput.on 'change', (e) ->
- _this.onFileInputChange(e, @)
-
- @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 = @
- _this.onActionBtnClick(btn)
- @croppedImageBlob = null
-
- onPickImageClick: =>
- @fileInput.trigger('click')
-
- onModalShow: =>
- _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: ->
- $image = $(@)
- container = $image.cropper 'getContainerData'
- cropBoxWidth = _this.cropBoxWidth;
- cropBoxHeight = _this.cropBoxHeight;
-
- $image.cropper('setCropBoxData',
- 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()
- @setPreview()
- @modalCrop.modal('hide')
- @fileInput.val('')
-
- 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) ->
- _this = @
- reader = new FileReader
- reader.onload = ->
- _this.modalCropImg.attr('src', reader.result)
- _this.modalCrop.modal('show')
-
- 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')
-
- setPreview: ->
- @previewImage.attr('src', @dataURL)
- filename = @fileInput.val().replace(FILENAMEREGEX, '')
- @filename.text(filename)
-
- setBlob: ->
- @dataURL = @modalCropImg.cropper('getCroppedCanvas',
- width: 200
- height: 200
- ).toDataURL('image/png')
- @croppedImageBlob = @dataURLtoBlob(@dataURL)
-
- getBlob: ->
- @croppedImageBlob
-
-$.fn.glCrop = (opts) ->
- return @.each ->
- $(@).data('glcrop', new GitLabCrop(@, opts))