gitlab-org--gitlab-foss/app/assets/javascripts/gl_crop.js.coffee

153 lines
4 KiB
CoffeeScript
Raw Normal View History

2016-03-17 10:44:08 -04:00
class GitLabCrop
2016-03-22 13:37:54 -04:00
# Matches everything but the file name
FILENAMEREGEX = /^.*[\\\/]/
2016-03-17 15:30:38 -04:00
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")
2016-03-17 10:44:08 -04:00
# Set defaults
{
@exportWidth = 200
@exportHeight = 200
@cropBoxWidth = 200
@cropBoxHeight = 200
2016-03-17 15:59:43 -04:00
@form = @fileInput.parents('form')
2016-03-17 10:44:08 -04:00
2016-03-17 15:59:43 -04:00
# Required params
@filename
@previewImage
@modalCrop
@pickImageEl
@uploadImageBtn
@modalCropImg
2016-03-17 10:44:08 -04:00
} = opts
# Ensure needed elements are jquery objects
2016-03-17 15:59:43 -04:00
# If selector is provided we will convert them to a jQuery Object
2016-03-22 12:45:23 -04:00
@filename = @getElement(@filename)
@previewImage = @getElement(@previewImage)
@pickImageEl = @getElement(@pickImageEl)
2016-03-17 15:59:43 -04:00
# Modal elements usually are outside the @form element
@modalCrop = if _.isString(@modalCrop) then $(@modalCrop) else @modalCrop
2016-03-17 15:59:43 -04:00
@uploadImageBtn = if _.isString(@uploadImageBtn) then $(@uploadImageBtn) else @uploadImageBtn
@modalCropImg = if _.isString(@modalCropImg) then $(@modalCropImg) else @modalCropImg
2016-03-17 10:44:08 -04:00
@cropActionsBtn = @modalCrop.find('[data-method]')
@bindEvents()
2016-03-22 12:45:23 -04:00
getElement: (selector) ->
$(selector, @form)
2016-03-17 10:44:08 -04:00
bindEvents: ->
2016-03-22 12:45:37 -04:00
_this = @
2016-03-17 10:44:08 -04:00
@fileInput.on 'change', (e) ->
2016-03-22 12:45:37 -04:00
_this.onFileInputChange(e, @)
2016-03-17 10:44:08 -04:00
@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 = @
2016-03-22 12:45:37 -04:00
_this.onActionBtnClick(btn)
2016-03-17 10:44:08 -04:00
@croppedImageBlob = null
onPickImageClick: =>
@fileInput.trigger('click')
onModalShow: =>
2016-03-22 12:45:37 -04:00
_this = @
2016-03-17 10:44:08 -04:00
@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: ->
2016-03-22 12:45:37 -04:00
$image = $(@)
container = $image.cropper 'getContainerData'
cropBoxWidth = _this.cropBoxWidth;
cropBoxHeight = _this.cropBoxHeight;
2016-03-17 10:44:08 -04:00
2016-03-22 12:45:37 -04:00
$image.cropper('setCropBoxData',
2016-03-17 10:44:08 -04:00
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()
2016-03-17 10:44:08 -04:00
@modalCrop.modal('hide')
@fileInput.val('')
2016-03-17 10:44:08 -04:00
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) ->
2016-03-22 12:45:37 -04:00
_this = @
2016-03-17 10:44:08 -04:00
reader = new FileReader
reader.onload = ->
2016-03-22 12:45:37 -04:00
_this.modalCropImg.attr('src', reader.result)
_this.modalCrop.modal('show')
2016-03-17 10:44:08 -04:00
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)
2016-03-22 13:37:54 -04:00
filename = @fileInput.val().replace(FILENAMEREGEX, '')
@filename.text(filename)
2016-03-17 10:44:08 -04:00
setBlob: ->
@dataURL = @modalCropImg.cropper('getCroppedCanvas',
width: 200
height: 200
).toDataURL('image/png')
@croppedImageBlob = @dataURLtoBlob(@dataURL)
2016-03-17 10:44:08 -04:00
getBlob: ->
@croppedImageBlob
$.fn.glCrop = (opts) ->
return @.each ->
$(@).data('glcrop', new GitLabCrop(@, opts))