markdown_area.js.coffee 5.56 KB
Newer Older
1 2 3
formatLink = (str) ->
  "![" + str.alt + "](" + str.url + ")"

4 5 6 7 8 9 10 11 12 13 14
$(document).ready ->
  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>"
  iconPicture = "<i class=\"icon-picture div-dropzone-icon\"></i>"
  iconSpinner = "<i class=\"icon-spinner icon-spin div-dropzone-icon\"></i>"
  btnAlert = "<button type=\"button\"" + alertAttr + ">&times;</button>"
  project_image_path_upload = window.project_image_path_upload or null

15 16
  $("textarea.markdown-area").wrap "<div class=\"div-dropzone\"></div>"

17
  $(".div-dropzone").parent().addClass "div-dropzone-wrapper"
18

19 20
  $(".div-dropzone").append divHover
  $(".div-dropzone-hover").append iconPicture
21
  $(".div-dropzone").append divSpinner
22
  $(".div-dropzone-spinner").append iconSpinner
23 24 25
  $(".div-dropzone-spinner").css
    "opacity": 0
    "display": "none"
26 27 28 29

  dropzone = $(".div-dropzone").dropzone(
    url: project_image_path_upload
    dictDefaultMessage: ""
30
    clickable: true
31 32 33 34
    paramName: "markdown_img"
    maxFilesize: 10
    uploadMultiple: false
    acceptedFiles: "image/jpg,image/jpeg,image/gif,image/png"
35
    headers:
36 37 38 39 40
      "X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content")

    previewContainer: false

    processing: ->
41
      $(".div-dropzone-alert").alert "close"
42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

    dragover: ->
      $(".div-dropzone > textarea").addClass "div-dropzone-focus"
      $(".div-dropzone-hover").css "opacity", 0.7
      return

    dragleave: ->
      $(".div-dropzone > textarea").removeClass "div-dropzone-focus"
      $(".div-dropzone-hover").css "opacity", 0
      return

    drop: ->
      $(".div-dropzone > textarea").removeClass "div-dropzone-focus"
      $(".div-dropzone-hover").css "opacity", 0
      $(".div-dropzone > textarea").focus()
      return

    success: (header, response) ->
60 61
      child = $(dropzone[0]).children("textarea")
      $(child).val $(child).val() + formatLink(response.link) + "\n"
62 63 64
      return

    error: (temp, errorMessage) ->
65 66 67 68
      checkIfMsgExists = $(".error-alert").children().length
      if checkIfMsgExists is 0
        $(".error-alert").append divAlert
        $(".div-dropzone-alert").append btnAlert + errorMessage
69 70 71
      return

    sending: ->
72 73 74
      $(".div-dropzone-spinner").css
        "opacity": 0.7
        "display": "inherit"
75 76 77 78 79
      return

    complete: ->
      $(".dz-preview").remove()
      $(".markdown-area").trigger "input"
80 81 82
      $(".div-dropzone-spinner").css
        "opacity": 0
        "display": "none"
83 84 85
      return
  )

erbunao's avatar
erbunao committed
86 87 88 89 90 91 92 93
  child = $(dropzone[0]).children("textarea")

  formatLink = (str) ->
    "![" + str.alt + "](" + str.url + ")"

  handlePaste = (e) ->
    e.preventDefault()
    my_event = e.originalEvent
94

erbunao's avatar
erbunao committed
95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117
    if my_event.clipboardData and my_event.clipboardData.items
      processItem(my_event)

  processItem = (e) ->
    image = isImage(e)
    if image
      filename = getFilename(e) or "image.png"
      text = "{{" + filename + "}}"
      pasteText(text)
      uploadFile image.getAsFile(), filename

    else
      text = e.clipboardData.getData("text/plain")
      pasteText(text)

  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
118

erbunao's avatar
erbunao committed
119 120 121 122 123 124 125 126 127 128
  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
    $(".markdown-area").trigger "input"

129
  getFilename = (e) ->
erbunao's avatar
erbunao committed
130 131 132 133
    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")
134

erbunao's avatar
erbunao committed
135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156
    value = value.split("\r")
    value.first()

  uploadFile = (item, filename) ->
    formData = new FormData()
    formData.append "markdown_img", item, filename
    $.ajax
      url: project_image_path_upload
      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) ->
        insertToTextArea(filename, formatLink(response.responseJSON.link))
157

erbunao's avatar
erbunao committed
158 159 160 161 162 163 164 165 166 167 168 169 170 171 172
      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) ->
173 174 175
    $(".div-dropzone-spinner").css
      "opacity": 0.7
      "display": "inherit"
erbunao's avatar
erbunao committed
176 177

  closeSpinner = ->
178 179 180
    $(".div-dropzone-spinner").css
      "opacity": 0
      "display": "none"
erbunao's avatar
erbunao committed
181 182 183 184 185 186 187 188 189 190

  showError = (message) ->
    checkIfMsgExists = $(".error-alert").children().length
    if checkIfMsgExists is 0
      $(".error-alert").append divAlert
      $(".div-dropzone-alert").append btnAlert + message

  closeAlertMessage = ->
    $(".div-dropzone-alert").alert "close"

191 192
  $(".markdown-selector").click (e) ->
    e.preventDefault()
193
    $(@).closest('.gfm-form').find('.div-dropzone').click()
194 195
    return

196
  return