Write new Notes coffee class to handle comments
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
This commit is contained in:
Dmitriy Zaporozhets
parent
f7e7dc7ebb
commit
923bd2ecd2
1 changed files with 397 additions and 0 deletions
397
app/assets/javascripts/notes.js.coffee
Normal file
397
app/assets/javascripts/notes.js.coffee
Normal file
|
|
@ -0,0 +1,397 @@
|
|||
class Notes
|
||||
constructor: (notes_url, note_ids) ->
|
||||
@notes_url = notes_url
|
||||
@notes_url = gon.relative_url_root + @notes_url if gon.relative_url_root?
|
||||
@note_ids = note_ids
|
||||
@initRefresh()
|
||||
@setupMainTargetNoteForm()
|
||||
@cleanBinding()
|
||||
@addBinding()
|
||||
|
||||
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
|
||||
|
||||
# change note in UI after update
|
||||
$(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
|
||||
|
||||
# remove a note (in general)
|
||||
$(document).on "click", ".js-note-delete", @removeNote
|
||||
|
||||
# delete note attachment
|
||||
$(document).on "click", ".js-note-attachment-delete", @removeAttachment
|
||||
|
||||
# Preview button
|
||||
$(document).on "click", ".js-note-preview-button", @previewNote
|
||||
|
||||
# reset main target form after submit
|
||||
$(document).on "ajax:complete", ".js-main-target-form", @resetMainTargetForm
|
||||
|
||||
# attachment button
|
||||
$(document).on "click", ".js-choose-note-attachment-button", @chooseNoteAttachment
|
||||
|
||||
# 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
|
||||
|
||||
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 "click", ".js-note-preview-button"
|
||||
$(document).off "ajax:complete", ".js-main-target-form"
|
||||
$(document).off "click", ".js-choose-note-attachment-button"
|
||||
$(document).off "click", ".js-discussion-reply-button"
|
||||
$(document).off "click", ".js-add-diff-note-button"
|
||||
|
||||
|
||||
initRefresh: ->
|
||||
setInterval =>
|
||||
@refresh()
|
||||
, 15000
|
||||
|
||||
refresh: ->
|
||||
@getContent()
|
||||
|
||||
getContent: ->
|
||||
$.ajax
|
||||
url: @notes_url
|
||||
dataType: "json"
|
||||
success: (data) =>
|
||||
notes = data.notes
|
||||
$.each notes, (i, note) =>
|
||||
# render note if it not present in loaded list
|
||||
# or skip if rendered
|
||||
if $.inArray(note.id, @note_ids) == -1
|
||||
@note_ids.push(note.id)
|
||||
@renderNote(note)
|
||||
|
||||
|
||||
###
|
||||
Render note in main comments area.
|
||||
|
||||
Note: for rendering inline notes use renderDiscussionNote
|
||||
###
|
||||
renderNote: (note) ->
|
||||
$('ul.main-notes-list').append(note.html)
|
||||
|
||||
###
|
||||
Render note in discussion area.
|
||||
|
||||
Note: for rendering inline notes use renderDiscussionNote
|
||||
###
|
||||
renderDiscussionNote: (note) ->
|
||||
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()
|
||||
|
||||
# append new note to all matching discussions
|
||||
$(".notes[rel='" + note.discussion_id + "']").append note.html
|
||||
|
||||
# cleanup after successfully creating a diff/discussion note
|
||||
@removeDiscussionNoteForm(form)
|
||||
|
||||
###
|
||||
Shows the note preview.
|
||||
|
||||
Lets the server render GFM into Html and displays it.
|
||||
|
||||
Note: uses the Toggler behavior to toggle preview/edit views/buttons
|
||||
###
|
||||
previewNote: (e) ->
|
||||
e.preventDefault()
|
||||
form = $(this).closest("form")
|
||||
preview = form.find(".js-note-preview")
|
||||
noteText = form.find(".js-note-text").val()
|
||||
if noteText.trim().length is 0
|
||||
preview.text "Nothing to preview."
|
||||
else
|
||||
preview.text "Loading..."
|
||||
$.post($(this).data("url"),
|
||||
note: noteText
|
||||
).success (previewData) ->
|
||||
preview.html previewData
|
||||
|
||||
###
|
||||
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
|
||||
previewContainer = form.find(".js-toggler-container.note_text_and_preview")
|
||||
previewContainer.removeClass "on" if previewContainer.is(".on")
|
||||
form.find(".js-note-text").val("").trigger "input"
|
||||
|
||||
###
|
||||
Called when clicking the "Choose File" button.
|
||||
|
||||
Opens the file selection dialog.
|
||||
###
|
||||
chooseNoteAttachment: ->
|
||||
form = $(this).closest("form")
|
||||
form.find(".js-note-attachment-input").click()
|
||||
|
||||
###
|
||||
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"
|
||||
|
||||
# setup preview buttons
|
||||
form.find(".js-note-edit-button, .js-note-preview-button").tooltip placement: "left"
|
||||
previewButton = form.find(".js-note-preview-button")
|
||||
form.find(".js-note-text").on "input", ->
|
||||
if $(this).val().trim() isnt ""
|
||||
previewButton.removeClass("turn-off").addClass "turn-on"
|
||||
else
|
||||
previewButton.removeClass("turn-on").addClass "turn-off"
|
||||
|
||||
|
||||
# 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()
|
||||
form.show()
|
||||
|
||||
|
||||
###
|
||||
Called in response to the new note form being submitted
|
||||
|
||||
Adds new note to list.
|
||||
###
|
||||
addNote: (xhr, note, status) =>
|
||||
@note_ids.push(note.id)
|
||||
@renderNote(note)
|
||||
|
||||
###
|
||||
Called in response to the new note form being submitted
|
||||
|
||||
Adds new note to list.
|
||||
###
|
||||
addDiscussionNote: (xhr, note, status) =>
|
||||
@note_ids.push(note.id)
|
||||
@renderDiscussionNote(note)
|
||||
|
||||
###
|
||||
Called in response to the edit note form being submitted
|
||||
|
||||
Updates the current note field.
|
||||
###
|
||||
updateNote: (xhr, note, status) =>
|
||||
note_li = $("#note_" + note.id)
|
||||
note_li.replaceWith(note.html)
|
||||
|
||||
###
|
||||
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")
|
||||
note.find(".note-text").hide()
|
||||
|
||||
# Show the attachment delete link
|
||||
note.find(".js-note-attachment-delete").show()
|
||||
GitLab.GfmAutoComplete.setup()
|
||||
form = note.find(".note-edit-form")
|
||||
form.show()
|
||||
form.find("textarea").focus()
|
||||
|
||||
###
|
||||
Called in response to clicking the edit note link
|
||||
|
||||
Hides edit form
|
||||
###
|
||||
cancelEdit: (e) ->
|
||||
e.preventDefault()
|
||||
note = $(this).closest(".note")
|
||||
note.find(".note-text").show()
|
||||
note.find(".js-note-attachment-delete").hide()
|
||||
note.find(".note-edit-form").hide()
|
||||
|
||||
###
|
||||
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()
|
||||
note.find(".note-text").show()
|
||||
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")
|
||||
replyLink = $(e.target)
|
||||
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")
|
||||
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"
|
||||
|
||||
###
|
||||
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"
|
||||
form.removeClass "js-new-note-form"
|
||||
GitLab.GfmAutoComplete.setup()
|
||||
form.show()
|
||||
|
||||
###
|
||||
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()
|
||||
link = e.target
|
||||
form = $(".js-new-note-form")
|
||||
row = $(link).closest("tr")
|
||||
nextRow = row.next()
|
||||
|
||||
# does it already have notes?
|
||||
if nextRow.is(".notes_holder")
|
||||
$.proxy(@replyToDiscussionNote, nextRow.find(".js-discussion-reply-button")).call()
|
||||
else
|
||||
# add a notes row and insert the form
|
||||
row.after "<tr class=\"notes_holder js-temp-notes-holder\"><td class=\"notes_line\" colspan=\"2\"></td><td class=\"notes_content\"></td></tr>"
|
||||
form.clone().appendTo row.next().find(".notes_content")
|
||||
|
||||
# show the form
|
||||
@setupDiscussionNoteForm $(link), row.next().find("form")
|
||||
|
||||
###
|
||||
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")
|
||||
|
||||
# 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()
|
||||
|
||||
@Notes = Notes
|
||||
Loading…
Reference in a new issue