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

202 lines
6.3 KiB
CoffeeScript
Raw Normal View History

#= require markdown_preview
2015-01-15 00:43:31 -05:00
class @DropzoneInput
constructor: (form) ->
Dropzone.autoDiscover = false
alertClass = "alert alert-danger alert-dismissable div-dropzone-alert"
alertAttr = "class=\"close\" data-dismiss=\"alert\"" + "aria-hidden=\"true\""
divHover = "<div class=\"div-dropzone-hover\"></div>"
divSpinner = "<div class=\"div-dropzone-spinner\"></div>"
divAlert = "<div class=\"" + alertClass + "\"></div>"
iconPaperclip = "<i class=\"fa fa-paperclip div-dropzone-icon\"></i>"
2015-01-15 00:43:31 -05:00
iconSpinner = "<i class=\"fa fa-spinner fa-spin div-dropzone-icon\"></i>"
2015-08-10 03:18:02 -04:00
uploadProgress = $("<div class=\"div-dropzone-progress\"></div>")
2015-01-15 00:43:31 -05:00
btnAlert = "<button type=\"button\"" + alertAttr + ">&times;</button>"
2015-02-16 13:58:40 -05:00
project_uploads_path = window.project_uploads_path or null
max_file_size = gon.max_file_size or 10
2015-01-15 00:43:31 -05:00
2016-04-13 04:08:34 -04:00
form_textarea = $(form).find(".js-gfm-input")
2015-01-15 00:43:31 -05:00
form_textarea.wrap "<div class=\"div-dropzone\"></div>"
form_textarea.on 'paste', (event) =>
handlePaste(event)
2016-04-13 04:08:34 -04:00
$mdArea = $(form_textarea).closest('.md-area')
$(form).setupMarkdownPreview()
2015-01-15 00:43:31 -05:00
form_dropzone = $(form).find('.div-dropzone')
form_dropzone.parent().addClass "div-dropzone-wrapper"
form_dropzone.append divHover
form_dropzone.find(".div-dropzone-hover").append iconPaperclip
2015-01-15 00:43:31 -05:00
form_dropzone.append divSpinner
form_dropzone.find(".div-dropzone-spinner").append iconSpinner
2015-08-10 03:18:02 -04:00
form_dropzone.find(".div-dropzone-spinner").append uploadProgress
form_dropzone.find(".div-dropzone-spinner").css
2015-01-15 00:43:31 -05:00
"opacity": 0
"display": "none"
dropzone = form_dropzone.dropzone(
2015-02-16 13:58:40 -05:00
url: project_uploads_path
2015-01-15 00:43:31 -05:00
dictDefaultMessage: ""
clickable: true
2015-02-16 13:58:40 -05:00
paramName: "file"
maxFilesize: max_file_size
2015-01-15 00:43:31 -05:00
uploadMultiple: false
headers:
"X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content")
previewContainer: false
processing: ->
$(".div-dropzone-alert").alert "close"
dragover: ->
2016-04-13 04:08:34 -04:00
$mdArea.addClass 'is-dropzone-hover'
2015-01-15 00:43:31 -05:00
form.find(".div-dropzone-hover").css "opacity", 0.7
return
dragleave: ->
2016-04-13 04:08:34 -04:00
$mdArea.removeClass 'is-dropzone-hover'
2015-01-15 00:43:31 -05:00
form.find(".div-dropzone-hover").css "opacity", 0
return
drop: ->
$mdArea.removeClass 'is-dropzone-hover'
2015-01-15 00:43:31 -05:00
form.find(".div-dropzone-hover").css "opacity", 0
form_textarea.focus()
return
success: (header, response) ->
pasteText response.link.markdown
2015-01-15 00:43:31 -05:00
return
error: (temp) ->
errorAlert = $(form).find('.error-alert')
checkIfMsgExists = errorAlert.children().length
2015-01-15 00:43:31 -05:00
if checkIfMsgExists is 0
errorAlert.append divAlert
$(".div-dropzone-alert").append "#{btnAlert}Attaching the file failed."
2015-01-15 00:43:31 -05:00
return
2015-08-10 03:18:02 -04:00
totaluploadprogress: (totalUploadProgress) ->
uploadProgress.text Math.round(totalUploadProgress) + "%"
return
2015-01-15 00:43:31 -05:00
sending: ->
form_dropzone.find(".div-dropzone-spinner").css
"opacity": 0.7
"display": "inherit"
return
2015-08-10 03:18:02 -04:00
queuecomplete: ->
uploadProgress.text ""
2015-01-15 00:43:31 -05:00
$(".dz-preview").remove()
$(".markdown-area").trigger "input"
$(".div-dropzone-spinner").css
"opacity": 0
"display": "none"
return
)
child = $(dropzone[0]).children("textarea")
handlePaste = (event) ->
pasteEvent = event.originalEvent
if pasteEvent.clipboardData and pasteEvent.clipboardData.items
image = isImage(pasteEvent)
if image
event.preventDefault()
filename = getFilename(pasteEvent) or "image.png"
text = "{{" + filename + "}}"
pasteText(text)
uploadFile image.getAsFile(), filename
2015-01-15 00:43:31 -05:00
isImage = (data) ->
i = 0
while i < data.clipboardData.items.length
item = data.clipboardData.items[i]
if item.type.indexOf("image") isnt -1
return item
i++
return false
pasteText = (text) ->
caretStart = $(child)[0].selectionStart
caretEnd = $(child)[0].selectionEnd
textEnd = $(child).val().length
beforeSelection = $(child).val().substring 0, caretStart
afterSelection = $(child).val().substring caretEnd, textEnd
$(child).val beforeSelection + text + afterSelection
child.get(0).setSelectionRange caretStart + text.length, caretEnd + text.length
2015-01-15 00:43:31 -05:00
form_textarea.trigger "input"
getFilename = (e) ->
if window.clipboardData and window.clipboardData.getData
value = window.clipboardData.getData("Text")
else if e.clipboardData and e.clipboardData.getData
value = e.clipboardData.getData("text/plain")
value = value.split("\r")
value.first()
uploadFile = (item, filename) ->
formData = new FormData()
2015-02-16 13:58:40 -05:00
formData.append "file", item, filename
2015-01-15 00:43:31 -05:00
$.ajax
2015-02-16 13:58:40 -05:00
url: project_uploads_path
2015-01-15 00:43:31 -05:00
type: "POST"
data: formData
dataType: "json"
processData: false
contentType: false
headers:
"X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content")
beforeSend: ->
showSpinner()
closeAlertMessage()
success: (e, textStatus, response) ->
2016-01-07 07:37:14 -05:00
insertToTextArea(filename, response.responseJSON.link.markdown)
2015-01-15 00:43:31 -05:00
error: (response) ->
showError(response.responseJSON.message)
complete: ->
closeSpinner()
insertToTextArea = (filename, url) ->
$(child).val (index, val) ->
val.replace("{{" + filename + "}}", url + "\n")
appendToTextArea = (url) ->
$(child).val (index, val) ->
val + url + "\n"
showSpinner = (e) ->
form.find(".div-dropzone-spinner").css
"opacity": 0.7
"display": "inherit"
closeSpinner = ->
form.find(".div-dropzone-spinner").css
"opacity": 0
"display": "none"
showError = (message) ->
errorAlert = $(form).find('.error-alert')
checkIfMsgExists = errorAlert.children().length
2015-01-15 00:43:31 -05:00
if checkIfMsgExists is 0
errorAlert.append divAlert
2015-01-15 00:43:31 -05:00
$(".div-dropzone-alert").append btnAlert + message
closeAlertMessage = ->
form.find(".div-dropzone-alert").alert "close"
form.find(".markdown-selector").click (e) ->
e.preventDefault()
$(@).closest('.gfm-form').find('.div-dropzone').click()
return