BigW Consortium Gitlab

dropzone_input.js.coffee 6.3 KB
Newer Older
1 2
#= require markdown_preview

3 4 5 6 7 8 9 10
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>"
11
    iconPaperclip = "<i class=\"fa fa-paperclip div-dropzone-icon\"></i>"
12
    iconSpinner = "<i class=\"fa fa-spinner fa-spin div-dropzone-icon\"></i>"
13
    uploadProgress = $("<div class=\"div-dropzone-progress\"></div>")
14
    btnAlert = "<button type=\"button\"" + alertAttr + ">&times;</button>"
Douwe Maan committed
15
    project_uploads_path = window.project_uploads_path or null
16
    max_file_size = gon.max_file_size or 10
17

18
    form_textarea = $(form).find(".js-gfm-input")
19
    form_textarea.wrap "<div class=\"div-dropzone\"></div>"
20
    form_textarea.on 'paste', (event) =>
21
      handlePaste(event)
22

23 24
    $mdArea = $(form_textarea).closest('.md-area')

25
    $(form).setupMarkdownPreview()
26 27 28 29

    form_dropzone = $(form).find('.div-dropzone')
    form_dropzone.parent().addClass "div-dropzone-wrapper"
    form_dropzone.append divHover
30
    form_dropzone.find(".div-dropzone-hover").append iconPaperclip
31
    form_dropzone.append divSpinner
32
    form_dropzone.find(".div-dropzone-spinner").append iconSpinner
33
    form_dropzone.find(".div-dropzone-spinner").append uploadProgress
34
    form_dropzone.find(".div-dropzone-spinner").css
35 36 37 38
      "opacity": 0
      "display": "none"

    dropzone = form_dropzone.dropzone(
Douwe Maan committed
39
      url: project_uploads_path
40 41
      dictDefaultMessage: ""
      clickable: true
Douwe Maan committed
42
      paramName: "file"
43
      maxFilesize: max_file_size
44 45 46 47 48 49 50 51 52 53
      uploadMultiple: false
      headers:
        "X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content")

      previewContainer: false

      processing: ->
        $(".div-dropzone-alert").alert "close"

      dragover: ->
54
        $mdArea.addClass 'is-dropzone-hover'
55 56 57 58
        form.find(".div-dropzone-hover").css "opacity", 0.7
        return

      dragleave: ->
59
        $mdArea.removeClass 'is-dropzone-hover'
60 61 62 63
        form.find(".div-dropzone-hover").css "opacity", 0
        return

      drop: ->
64
        $mdArea.removeClass 'is-dropzone-hover'
65 66 67 68 69
        form.find(".div-dropzone-hover").css "opacity", 0
        form_textarea.focus()
        return

      success: (header, response) ->
70
        pasteText response.link.markdown
71 72 73
        return

      error: (temp, errorMessage) ->
74 75
        errorAlert = $(form).find('.error-alert')
        checkIfMsgExists = errorAlert.children().length
76
        if checkIfMsgExists is 0
77
          errorAlert.append divAlert
78 79 80
          $(".div-dropzone-alert").append btnAlert + errorMessage
        return

81 82 83 84
      totaluploadprogress: (totalUploadProgress) ->
        uploadProgress.text Math.round(totalUploadProgress) + "%"
        return

85 86 87 88 89 90
      sending: ->
        form_dropzone.find(".div-dropzone-spinner").css
          "opacity": 0.7
          "display": "inherit"
        return

91 92
      queuecomplete: ->
        uploadProgress.text ""
93 94 95 96 97 98 99 100 101 102
        $(".dz-preview").remove()
        $(".markdown-area").trigger "input"
        $(".div-dropzone-spinner").css
          "opacity": 0
          "display": "none"
        return
    )

    child = $(dropzone[0]).children("textarea")

103 104 105 106 107 108 109 110 111 112 113
    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
114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131

    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
132
      child.get(0).setSelectionRange caretStart + text.length, caretEnd + text.length
133 134 135 136 137 138 139 140 141 142 143 144 145
      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()
Douwe Maan committed
146
      formData.append "file", item, filename
147
      $.ajax
Douwe Maan committed
148
        url: project_uploads_path
149 150 151 152 153 154 155 156 157 158 159 160 161
        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) ->
162
          insertToTextArea(filename, response.responseJSON.link.markdown)
163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188

        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) ->
189 190
      errorAlert = $(form).find('.error-alert')
      checkIfMsgExists = errorAlert.children().length
191
      if checkIfMsgExists is 0
192
        errorAlert.append divAlert
193 194 195 196 197 198 199 200 201
        $(".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