BigW Consortium Gitlab

notes.js.coffee 16.2 KB
Newer Older
1 2 3 4 5 6 7
#= require autosave
#= require dropzone
#= require dropzone_input
#= require gfm_auto_complete
#= require jquery.atwho
#= require task_list

8
class @Notes
9 10
  @interval: null

11
  constructor: (notes_url, note_ids, last_fetched_at, view) ->
12 13 14
    @notes_url = notes_url
    @notes_url = gon.relative_url_root + @notes_url if gon.relative_url_root?
    @note_ids = note_ids
15
    @last_fetched_at = last_fetched_at
16
    @view = view
17
    @noteable_url = document.URL
18 19 20 21
    @initRefresh()
    @setupMainTargetNoteForm()
    @cleanBinding()
    @addBinding()
22
    @initTaskList()
23 24 25 26 27 28

  addBinding: ->
    # add note to UI after creation
    $(document).on "ajax:success", ".js-main-target-form", @addNote
    $(document).on "ajax:success", ".js-discussion-note-form", @addDiscussionNote

29
    # change note in UI after update
30 31 32 33 34 35
    $(document).on "ajax:success", "form.edit_note", @updateNote

    # Edit note link
    $(document).on "click", ".js-note-edit", @showEditForm
    $(document).on "click", ".note-edit-cancel", @cancelEdit

36 37 38
    # Reopen and close actions for Issue/MR combined with note form submit
    $(document).on "click", ".js-note-target-reopen", @targetReopen
    $(document).on "click", ".js-note-target-close", @targetClose
39
    $(document).on "click", ".js-comment-button", @updateCloseButton
40 41
    $(document).on "keyup", ".js-note-text", @updateTargetButtons

42 43 44 45 46 47 48
    # remove a note (in general)
    $(document).on "click", ".js-note-delete", @removeNote

    # delete note attachment
    $(document).on "click", ".js-note-attachment-delete", @removeAttachment

    # reset main target form after submit
49 50
    $(document).on "ajax:complete", ".js-main-target-form", @reenableTargetFormSubmitButton
    $(document).on "ajax:success", ".js-main-target-form", @resetMainTargetForm
51

52 53 54
    # update the file name when an attachment is selected
    $(document).on "change", ".js-note-attachment-input", @updateFormAttachment

55 56 57 58 59 60
    # reply to diff/discussion notes
    $(document).on "click", ".js-discussion-reply-button", @replyToDiscussionNote

    # add diff note
    $(document).on "click", ".js-add-diff-note-button", @addDiffNote

61 62 63
    # hide diff note form
    $(document).on "click", ".js-close-discussion-note-form", @cancelDiscussionForm

64 65 66
    # fetch notes when tab becomes visible
    $(document).on "visibilitychange", @visibilityChange

67
    # Chrome doesn't fire keypress or keyup for Command+Enter, so we need keydown.
68
    $(document).on 'keydown', '.js-note-text', (e) ->
69
      return if e.originalEvent.repeat
70
      if e.keyCode == 10 || ((e.metaKey || e.ctrlKey) && e.keyCode == 13)
71
        $(@).closest('form').submit()
72

73 74 75 76 77 78 79 80 81
  cleanBinding: ->
    $(document).off "ajax:success", ".js-main-target-form"
    $(document).off "ajax:success", ".js-discussion-note-form"
    $(document).off "ajax:success", "form.edit_note"
    $(document).off "click", ".js-note-edit"
    $(document).off "click", ".note-edit-cancel"
    $(document).off "click", ".js-note-delete"
    $(document).off "click", ".js-note-attachment-delete"
    $(document).off "ajax:complete", ".js-main-target-form"
82
    $(document).off "ajax:success", ".js-main-target-form"
83 84
    $(document).off "click", ".js-discussion-reply-button"
    $(document).off "click", ".js-add-diff-note-button"
85
    $(document).off "visibilitychange"
86
    $(document).off "keydown", ".js-note-text"
87 88 89
    $(document).off "keyup", ".js-note-text"
    $(document).off "click", ".js-note-target-reopen"
    $(document).off "click", ".js-note-target-close"
90

91 92 93
    $('.note .js-task-list-container').taskList('disable')
    $(document).off 'tasklist:changed', '.note .js-task-list-container'

94
  initRefresh: ->
95 96
    clearInterval(Notes.interval)
    Notes.interval = setInterval =>
97 98 99 100
      @refresh()
    , 15000

  refresh: ->
101 102
    unless document.hidden or (@noteable_url != document.URL)
      @getContent()
103 104 105 106

  getContent: ->
    $.ajax
      url: @notes_url
107
      data: "last_fetched_at=" + @last_fetched_at
108 109 110
      dataType: "json"
      success: (data) =>
        notes = data.notes
111
        @last_fetched_at = data.last_fetched_at
112
        $.each notes, (i, note) =>
113
          @renderNote(note)
114 115 116 117 118 119 120 121


  ###
  Render note in main comments area.

  Note: for rendering inline notes use renderDiscussionNote
  ###
  renderNote: (note) ->
122 123 124 125 126
    # render note if it not present in loaded list
    # or skip if rendered
    if @isNewNote(note)
      @note_ids.push(note.id)
      $('ul.main-notes-list').append(note.html)
127
      @initTaskList()
128 129 130 131 132 133 134

  ###
  Check if note does not exists on page
  ###
  isNewNote: (note) ->
    $.inArray(note.id, @note_ids) == -1

135 136
  isParallelView: ->
    @view == 'parallel'
137 138 139 140 141 142 143

  ###
  Render note in discussion area.

  Note: for rendering inline notes use renderDiscussionNote
  ###
  renderDiscussionNote: (note) ->
144
    @note_ids.push(note.id)
145 146 147 148 149 150 151 152 153 154 155
    form = $("form[rel='" + note.discussion_id + "']")
    row = form.closest("tr")

    # is this the first note of discussion?
    if row.is(".js-temp-notes-holder")
      # insert the note and the reply button after the temp row
      row.after note.discussion_html

      # remove the note (will be added again below)
      row.next().find(".note").remove()

156 157 158
      # Add note to 'Changes' page discussions
      $(".notes[rel='" + note.discussion_id + "']").append note.html

159 160 161
      # Init discussion on 'Discussion' page if it is merge request page
      if $('body').attr('data-page').indexOf('projects:merge_request') == 0
        $('ul.main-notes-list').append(note.discussion_with_diff_html)
162 163 164
    else
      # append new note to all matching discussions
      $(".notes[rel='" + note.discussion_id + "']").append note.html
165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182

    # cleanup after successfully creating a diff/discussion note
    @removeDiscussionNoteForm(form)

  ###
  Called in response the main target form has been successfully submitted.

  Removes any errors.
  Resets text and preview.
  Resets buttons.
  ###
  resetMainTargetForm: ->
    form = $(".js-main-target-form")

    # remove validation errors
    form.find(".js-errors").remove()

    # reset text and preview
183
    form.find(".js-md-write-button").click()
184 185
    form.find(".js-note-text").val("").trigger "input"

186 187
    form.find(".js-note-text").data("autosave").reset()

188 189 190 191 192
  reenableTargetFormSubmitButton: ->
    form = $(".js-main-target-form")

    form.find(".js-note-text").trigger "input"

193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228
  ###
  Shows the main form and does some setup on it.

  Sets some hidden fields in the form.
  ###
  setupMainTargetNoteForm: ->

    # find the form
    form = $(".js-new-note-form")

    # insert the form after the button
    form.clone().replaceAll $(".js-main-target-form")
    form = form.prev("form")

    # show the form
    @setupNoteForm(form)

    # fix classes
    form.removeClass "js-new-note-form"
    form.addClass "js-main-target-form"

    # remove unnecessary fields and buttons
    form.find("#note_line_code").remove()
    form.find(".js-close-discussion-note-form").remove()

  ###
  General note form setup.

  deactivates the submit button when text is empty
  hides the preview button when text is empty
  setup GFM auto complete
  show the form
  ###
  setupNoteForm: (form) ->
    disableButtonIfEmptyField form.find(".js-note-text"), form.find(".js-comment-button")
    form.removeClass "js-new-note-form"
229
    form.find('.div-dropzone').remove()
230 231

    # setup preview buttons
232 233
    form.find(".js-md-write-button, .js-md-preview-button").tooltip placement: "left"
    previewButton = form.find(".js-md-preview-button")
234 235 236 237

    textarea = form.find(".js-note-text")

    textarea.on "input", ->
238 239 240 241 242
      if $(this).val().trim() isnt ""
        previewButton.removeClass("turn-off").addClass "turn-on"
      else
        previewButton.removeClass("turn-on").addClass "turn-off"

243 244 245 246 247 248 249
    new Autosave textarea, [
      "Note"
      form.find("#note_commit_id").val()
      form.find("#note_line_code").val()
      form.find("#note_noteable_type").val()
      form.find("#note_noteable_id").val()
    ]
250 251 252 253

    # remove notify commit author checkbox for non-commit notes
    form.find(".js-notify-commit-author").remove()  if form.find("#note_noteable_type").val() isnt "Commit"
    GitLab.GfmAutoComplete.setup()
254
    new DropzoneInput(form)
255 256 257 258 259 260 261 262 263
    form.show()

  ###
  Called in response to the new note form being submitted

  Adds new note to list.
  ###
  addNote: (xhr, note, status) =>
    @renderNote(note)
264
    @updateVotes()
265 266 267 268 269 270 271 272 273 274 275 276 277 278 279

  ###
  Called in response to the new note form being submitted

  Adds new note to list.
  ###
  addDiscussionNote: (xhr, note, status) =>
    @renderDiscussionNote(note)

  ###
  Called in response to the edit note form being submitted

  Updates the current note field.
  ###
  updateNote: (xhr, note, status) =>
280
    note_li = $(".note-row-" + note.id)
281
    note_li.replaceWith(note.html)
282
    note_li.find('.note-edit-form').hide()
283
    note_li.find('.note-body > .note-text').show()
284 285
    note_li.find('js-task-list-container').taskList('enable')
    @enableTaskList()
286 287 288 289 290 291 292 293 294 295 296

  ###
  Called in response to clicking the edit note link

  Replaces the note text with the note edit form
  Adds a hidden div with the original content of the note to fill the edit note form with
  if the user cancels
  ###
  showEditForm: (e) ->
    e.preventDefault()
    note = $(this).closest(".note")
297
    note.find(".note-body > .note-text").hide()
298 299 300 301
    note.find(".note-header").hide()
    base_form = note.find(".note-edit-form")
    form = base_form.clone().insertAfter(base_form)
    form.addClass('current-note-edit-form')
302
    form.find('.div-dropzone').remove()
303 304 305

    # Show the attachment delete link
    note.find(".js-note-attachment-delete").show()
306 307

    # Setup markdown form
308
    GitLab.GfmAutoComplete.setup()
309 310
    new DropzoneInput(form)

311
    form.show()
312 313
    textarea = form.find("textarea")
    textarea.focus()
314

315
    # HACK (rspeicher/DouweM): Work around a Chrome 43 bug(?).
316
    # The textarea has the correct value, Chrome just won't show it unless we
317 318 319 320
    # modify it, so let's clear it and re-set it!
    value = textarea.val()
    textarea.val ""
    textarea.val value
321

322
    disableButtonIfEmptyField textarea, form.find(".js-comment-button")
323 324 325 326 327 328 329 330 331

  ###
  Called in response to clicking the edit note link

  Hides edit form
  ###
  cancelEdit: (e) ->
    e.preventDefault()
    note = $(this).closest(".note")
332
    note.find(".note-body > .note-text").show()
333 334
    note.find(".note-header").show()
    note.find(".current-note-edit-form").remove()
335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365

  ###
  Called in response to deleting a note of any kind.

  Removes the actual note from view.
  Removes the whole discussion if the last note is being removed.
  ###
  removeNote: ->
    note = $(this).closest(".note")
    notes = note.closest(".notes")

    # check if this is the last note for this line
    if notes.find(".note").length is 1

      # for discussions
      notes.closest(".discussion").remove()

      # for diff lines
      notes.closest("tr").remove()

    note.remove()

  ###
  Called in response to clicking the delete attachment link

  Removes the attachment wrapper view, including image tag if it exists
  Resets the note editing form
  ###
  removeAttachment: ->
    note = $(this).closest(".note")
    note.find(".note-attachment").remove()
366
    note.find(".note-body > .note-text").show()
367 368 369 370 371 372 373 374 375 376
    note.find(".js-note-attachment-delete").hide()
    note.find(".note-edit-form").hide()

  ###
  Called when clicking on the "reply" button for a diff line.

  Shows the note form below the notes.
  ###
  replyToDiscussionNote: (e) =>
    form = $(".js-new-note-form")
377
    replyLink = $(e.target).closest(".js-discussion-reply-button")
378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396
    replyLink.hide()

    # insert the form after the button
    form.clone().insertAfter replyLink

    # show the form
    @setupDiscussionNoteForm(replyLink, replyLink.next("form"))

  ###
  Shows the diff or discussion form and does some setup on it.

  Sets some hidden fields in the form.

  Note: dataHolder must have the "discussionId", "lineCode", "noteableType"
  and "noteableId" data attributes set.
  ###
  setupDiscussionNoteForm: (dataHolder, form) =>
    # setup note target
    form.attr "rel", dataHolder.data("discussionId")
397
    form.find("#line_type").val dataHolder.data("lineType")
398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413
    form.find("#note_commit_id").val dataHolder.data("commitId")
    form.find("#note_line_code").val dataHolder.data("lineCode")
    form.find("#note_noteable_type").val dataHolder.data("noteableType")
    form.find("#note_noteable_id").val dataHolder.data("noteableId")
    @setupNoteForm form
    form.find(".js-note-text").focus()
    form.addClass "js-discussion-note-form"

  ###
  Called when clicking on the "add a comment" button on the side of a diff line.

  Inserts a temporary row for the form below the line.
  Sets up the form and shows it.
  ###
  addDiffNote: (e) =>
    e.preventDefault()
Dmitriy Zaporozhets committed
414
    link = e.currentTarget
415 416 417
    form = $(".js-new-note-form")
    row = $(link).closest("tr")
    nextRow = row.next()
418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440
    hasNotes = nextRow.is(".notes_holder")
    addForm = false
    targetContent = ".notes_content"
    rowCssToAdd = "<tr class=\"notes_holder js-temp-notes-holder\"><td class=\"notes_line\" colspan=\"2\"></td><td class=\"notes_content\"></td></tr>"

    # In parallel view, look inside the correct left/right pane
    if @isParallelView()
      lineType = $(link).data("lineType")
      targetContent += "." + lineType
      rowCssToAdd = "<tr class=\"notes_holder js-temp-notes-holder\"><td class=\"notes_line\"></td><td class=\"notes_content parallel old\"></td><td class=\"notes_line\"></td><td class=\"notes_content parallel new\"></td></tr>"

    if hasNotes
      notesContent = nextRow.find(targetContent)
      if notesContent.length
        replyButton = notesContent.find(".js-discussion-reply-button:visible")
        if replyButton.length
          e.target = replyButton[0]
          $.proxy(@replyToDiscussionNote, replyButton[0], e).call()
        else
          # In parallel view, the form may not be present in one of the panes
          noteForm = notesContent.find(".js-discussion-note-form")
          if noteForm.length == 0
            addForm = true
441 442
    else
      # add a notes row and insert the form
443 444 445 446 447 448
      row.after rowCssToAdd
      addForm = true

    if addForm
      newForm = form.clone()
      newForm.appendTo row.next().find(targetContent)
449 450

      # show the form
451
      @setupDiscussionNoteForm $(link), newForm
452 453 454 455 456 457 458 459 460 461

  ###
  Called in response to "cancel" on a diff note form.

  Shows the reply button again.
  Removes the form and if necessary it's temporary row.
  ###
  removeDiscussionNoteForm: (form)->
    row = form.closest("tr")

462 463
    form.find(".js-note-text").data("autosave").reset()

464 465 466 467 468 469 470 471 472
    # show the reply button (will only work for replies)
    form.prev(".js-discussion-reply-button").show()
    if row.is(".js-temp-notes-holder")
      # remove temporary row for diff lines
      row.remove()
    else
      # only remove the form
      form.remove()

473 474 475 476 477 478 479

  cancelDiscussionForm: (e) =>
    e.preventDefault()
    form = $(".js-new-note-form")
    form = $(e.target).closest(".js-discussion-note-form")
    @removeDiscussionNoteForm(form)

480
  updateVotes: ->
481
    true
482

483 484 485 486 487 488 489 490 491 492 493 494
  ###
  Called after an attachment file has been selected.

  Updates the file name for the selected attachment.
  ###
  updateFormAttachment: ->
    form = $(this).closest("form")

    # get only the basename
    filename = $(this).val().replace(/^.*[\\\/]/, "")
    form.find(".js-attachment-filename").text filename

495 496 497 498 499 500
  ###
  Called when the tab visibility changes
  ###
  visibilityChange: =>
    @refresh()

501 502 503 504 505 506 507 508 509 510 511
  targetReopen: (e) =>
    @submitNoteForm($(e.target).parents('form'))

  targetClose: (e) =>
    @submitNoteForm($(e.target).parents('form'))

  submitNoteForm: (form) =>
    noteText = form.find(".js-note-text").val()
    if noteText.trim().length > 0
      form.submit()

512 513 514 515 516
  updateCloseButton: (e) =>
    textarea = $(e.target)
    form = textarea.parents('form')
    form.find('.js-note-target-close').text('Close')

517 518 519 520 521 522 523 524 525 526
  updateTargetButtons: (e) =>
    textarea = $(e.target)
    form = textarea.parents('form')

    if textarea.val().trim().length > 0
      form.find('.js-note-target-reopen').text('Comment & reopen')
      form.find('.js-note-target-close').text('Comment & close')
    else
      form.find('.js-note-target-reopen').text('Reopen')
      form.find('.js-note-target-close').text('Close')
527 528 529 530 531

  initTaskList: ->
    @enableTaskList()
    $(document).on 'tasklist:changed', '.note .js-task-list-container', @updateTaskList

532 533 534
  enableTaskList: ->
    $('.note .js-task-list-container').taskList('enable')

535 536
  updateTaskList: ->
    $('form', this).submit()