gitlab-org--gitlab-foss/app/assets/javascripts/notes.js

581 lines
17 KiB
JavaScript
Raw Normal View History

2011-11-15 03:34:30 -05:00
var NoteList = {
id: null,
notes_path: null,
target_params: null,
target_id: 0,
target_type: null,
2012-11-21 18:23:26 -05:00
init: function(tid, tt, path) {
2012-11-21 20:56:42 -05:00
NoteList.notes_path = path + ".js";
NoteList.target_id = tid;
NoteList.target_type = tt;
NoteList.target_params = "target_type=" + NoteList.target_type + "&target_id=" + NoteList.target_id;
NoteList.setupMainTargetNoteForm();
2012-11-21 18:23:26 -05:00
// get initial set of notes
2012-11-21 20:56:42 -05:00
NoteList.getContent();
2012-11-20 11:46:55 -05:00
// Unbind events to prevent firing twice
$(document).off("click", ".js-add-diff-note-button");
$(document).off("click", ".js-discussion-reply-button");
$(document).off("click", ".js-note-preview-button");
$(document).off("click", ".js-note-attachment-input");
$(document).off("click", ".js-close-discussion-note-form");
$(document).off("click", ".js-note-delete");
$(document).off("click", ".js-note-edit");
$(document).off("click", ".js-note-edit-cancel");
$(document).off("click", ".js-note-attachment-delete");
$(document).off("click", ".js-choose-note-attachment-button");
$(document).off("click", ".js-show-outdated-discussion");
$(document).off("ajax:complete", ".js-main-target-form");
2012-11-21 20:56:42 -05:00
// add a new diff note
2012-11-21 18:23:26 -05:00
$(document).on("click",
".js-add-diff-note-button",
NoteList.addDiffNote);
2012-11-21 20:56:42 -05:00
// reply to diff/discussion notes
2012-11-21 18:23:26 -05:00
$(document).on("click",
".js-discussion-reply-button",
NoteList.replyToDiscussionNote);
2012-11-21 20:56:42 -05:00
// setup note preview
$(document).on("click",
".js-note-preview-button",
NoteList.previewNote);
2012-12-03 16:34:50 -05:00
// update the file name when an attachment is selected
$(document).on("change",
".js-note-attachment-input",
NoteList.updateFormAttachment);
2012-11-21 18:23:26 -05:00
// hide diff note form
$(document).on("click",
".js-close-discussion-note-form",
NoteList.removeDiscussionNoteForm);
// remove a note (in general)
$(document).on("click",
".js-note-delete",
NoteList.removeNote);
2013-06-26 10:32:34 -04:00
// show the edit note form
$(document).on("click",
".js-note-edit",
NoteList.showEditNoteForm);
// cancel note editing
$(document).on("click",
".note-edit-cancel",
NoteList.cancelNoteEdit);
// delete note attachment
$(document).on("click",
".js-note-attachment-delete",
NoteList.deleteNoteAttachment);
// update the note after editing
$(document).on("ajax:complete",
"form.edit_note",
NoteList.updateNote);
2012-12-03 16:34:50 -05:00
// reset main target form after submit
2012-12-03 14:35:09 -05:00
$(document).on("ajax:complete",
".js-main-target-form",
2012-12-03 16:34:50 -05:00
NoteList.resetMainTargetForm);
2011-11-04 09:37:38 -04:00
2012-02-27 12:05:27 -05:00
2012-12-03 16:34:50 -05:00
$(document).on("click",
2013-06-26 10:32:34 -04:00
".js-choose-note-attachment-button",
NoteList.chooseNoteAttachment);
2013-01-15 04:12:17 -05:00
$(document).on("click",
2013-06-26 10:32:34 -04:00
".js-show-outdated-discussion",
function(e) { $(this).next('.outdated-discussion').show(); e.preventDefault() });
2012-12-03 16:34:50 -05:00
},
2012-11-20 11:46:55 -05:00
2012-12-03 14:35:09 -05:00
/**
2012-12-03 16:34:50 -05:00
* When clicking on buttons
2012-12-03 14:35:09 -05:00
*/
2012-11-20 11:46:55 -05:00
/**
* 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: function(e) {
e.preventDefault();
2012-11-20 11:46:55 -05:00
// find the form
var form = $(".js-new-note-form");
2012-11-20 11:46:55 -05:00
var row = $(this).closest("tr");
var nextRow = row.next();
// does it already have notes?
if (nextRow.is(".notes_holder")) {
2012-12-02 14:43:39 -05:00
$.proxy(NoteList.replyToDiscussionNote,
nextRow.find(".js-discussion-reply-button")
2012-11-20 11:46:55 -05:00
).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
2012-12-02 14:43:39 -05:00
NoteList.setupDiscussionNoteForm($(this), row.next().find("form"));
2012-11-20 11:46:55 -05:00
}
},
2012-12-03 16:34:50 -05:00
/**
* Called when clicking the "Choose File" button.
2013-06-26 10:32:34 -04:00
*
* Opens the file selection dialog.
2012-12-03 16:34:50 -05:00
*/
chooseNoteAttachment: function() {
var form = $(this).closest("form");
form.find(".js-note-attachment-input").click();
},
2012-11-21 20:56:42 -05:00
/**
* 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: function(e) {
e.preventDefault();
2012-11-21 20:56:42 -05:00
var form = $(this).closest("form");
var preview = form.find('.js-note-preview');
var noteText = form.find('.js-note-text').val();
2012-11-21 20:56:42 -05:00
if(noteText.trim().length === 0) {
2012-11-21 20:56:42 -05:00
preview.text('Nothing to preview.');
} else {
2012-11-21 20:56:42 -05:00
preview.text('Loading...');
$.post($(this).data('url'), {note: noteText})
2012-11-21 20:56:42 -05:00
.success(function(previewData) {
preview.html(previewData);
});
}
},
2012-11-20 11:46:55 -05:00
/**
* Called in response to "cancel" on a diff note form.
2013-06-26 10:32:34 -04:00
*
2012-11-20 11:46:55 -05:00
* Shows the reply button again.
* Removes the form and if necessary it's temporary row.
*/
2012-12-03 15:43:17 -05:00
removeDiscussionNoteForm: function() {
2012-11-20 11:46:55 -05:00
var form = $(this).closest("form");
var row = form.closest("tr");
2013-07-29 06:46:00 -04:00
// show the reply button (will only work for replies)
2012-12-02 14:43:39 -05:00
form.prev(".js-discussion-reply-button").show();
2012-11-20 11:46:55 -05:00
if (row.is(".js-temp-notes-holder")) {
2012-12-02 14:43:39 -05:00
// remove temporary row for diff lines
2012-11-20 11:46:55 -05:00
row.remove();
} else {
// only remove the form
form.remove();
}
},
/**
* Called in response to deleting a note of any kind.
*
* Removes the actual note from view.
2012-12-03 15:43:17 -05:00
* Removes the whole discussion if the last note is being removed.
2012-11-20 11:46:55 -05:00
*/
removeNote: function() {
2012-12-03 15:43:17 -05:00
var note = $(this).closest(".note");
var notes = note.closest(".notes");
// check if this is the last note for this line
if (notes.find(".note").length === 1) {
// for discussions
notes.closest(".discussion").remove();
// for diff lines
notes.closest("tr").remove();
}
note.remove();
2012-11-20 11:46:55 -05:00
NoteList.updateVotes();
},
2013-06-26 10:32:34 -04:00
/**
* 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
*/
showEditNoteForm: function(e) {
e.preventDefault();
var note = $(this).closest(".note");
note.find(".note-text").hide();
// Show the attachment delete link
note.find(".js-note-attachment-delete").show();
GitLab.GfmAutoComplete.setup();
2013-06-26 10:32:34 -04:00
var form = note.find(".note-edit-form");
form.show();
var textarea = form.find("textarea");
var p = $("<p></p>").text(textarea.val());
var hidden_div = $('<div class="note-original-content"></div>').append(p);
form.append(hidden_div);
hidden_div.hide();
textarea.focus();
},
/**
* Called in response to clicking the cancel button when editing a note
*
* Resets and hides the note editing form
*/
cancelNoteEdit: function(e) {
e.preventDefault();
var note = $(this).closest(".note");
NoteList.resetNoteEditing(note);
},
/**
* 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
*/
deleteNoteAttachment: function() {
var note = $(this).closest(".note");
note.find(".note-attachment").remove();
NoteList.resetNoteEditing(note);
NoteList.rewriteTimestamp(note.find(".note-last-update"));
},
2012-11-20 11:46:55 -05:00
/**
* Called when clicking on the "reply" button for a diff line.
*
* Shows the note form below the notes.
*/
2012-12-02 14:43:39 -05:00
replyToDiscussionNote: function() {
2012-11-20 11:46:55 -05:00
// find the form
var form = $(".js-new-note-form");
2012-11-20 11:46:55 -05:00
// hide reply button
$(this).hide();
// insert the form after the button
form.clone().insertAfter($(this));
// show the form
2012-12-02 14:43:39 -05:00
NoteList.setupDiscussionNoteForm($(this), $(this).next("form"));
2012-11-20 11:46:55 -05:00
},
2012-11-20 11:46:55 -05:00
/**
* Helper for inserting and setting up note forms.
*/
2012-12-03 14:35:09 -05:00
/**
* Called in response to creating a note failing validation.
*
* Adds the rendered errors to the respective form.
* If "discussionId" is null or undefined, the main target form is assumed.
*/
errorsOnForm: function(errorsHtml, discussionId) {
// find the form
if (discussionId) {
var form = $("form[rel='"+discussionId+"']");
} else {
var form = $(".js-main-target-form");
}
form.find(".js-errors").remove();
form.prepend(errorsHtml);
form.find(".js-note-text").focus();
},
/**
* Shows the diff/discussion form and does some setup on it.
2012-11-20 11:46:55 -05:00
*
* Sets some hidden fields in the form.
*
* Note: dataHolder must have the "discussionId", "lineCode", "noteableType"
* and "noteableId" data attributes set.
2012-11-20 11:46:55 -05:00
*/
setupDiscussionNoteForm: function(dataHolder, form) {
2012-11-20 11:46:55 -05:00
// setup note target
form.attr("rel", dataHolder.data("discussionId"));
2013-01-02 14:49:27 -05:00
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"));
2012-11-20 11:46:55 -05:00
NoteList.setupNoteForm(form);
2012-11-20 11:46:55 -05:00
2012-12-03 15:43:17 -05:00
form.find(".js-note-text").focus();
},
/**
* Shows the main form and does some setup on it.
*
* Sets some hidden fields in the form.
*/
setupMainTargetNoteForm: function() {
// find the form
var 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
NoteList.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: function(form) {
disableButtonIfEmptyField(form.find(".js-note-text"), form.find(".js-comment-button"));
2012-12-03 15:43:17 -05:00
form.removeClass("js-new-note-form");
// setup preview buttons
2012-12-03 15:43:17 -05:00
form.find(".js-note-edit-button, .js-note-preview-button")
.tooltip({ placement: 'left' });
2012-12-03 15:43:17 -05:00
previewButton = form.find(".js-note-preview-button");
form.find(".js-note-text").on("input", function() {
if ($(this).val().trim() !== "") {
2012-12-03 15:43:17 -05:00
previewButton.removeClass("turn-off").addClass("turn-on");
} else {
2012-12-03 15:43:17 -05:00
previewButton.removeClass("turn-on").addClass("turn-off");
}
});
2012-12-03 16:34:50 -05:00
// remove notify commit author checkbox for non-commit notes
if (form.find("#note_noteable_type").val() !== "Commit") {
form.find(".js-notify-commit-author").remove();
}
GitLab.GfmAutoComplete.setup();
2012-11-20 11:46:55 -05:00
form.show();
},
/**
* Handle loading the initial set of notes.
* And set up loading more notes when scrolling to the bottom of the page.
*/
2012-02-27 12:05:27 -05:00
/**
* Gets an initial set of notes.
*/
2012-11-21 18:23:26 -05:00
getContent: function() {
$.ajax({
2012-11-21 20:56:42 -05:00
url: NoteList.notes_path,
data: NoteList.target_params,
2012-12-03 15:43:17 -05:00
complete: function(){ $('.js-notes-busy').removeClass("loading")},
beforeSend: function() { $('.js-notes-busy').addClass("loading") },
2012-11-21 18:23:26 -05:00
dataType: "script"
});
},
2012-02-27 12:05:27 -05:00
/**
* Called in response to getContent().
* Replaces the content of #notes-list with the given html.
*/
2012-11-21 18:23:26 -05:00
setContent: function(newNoteIds, html) {
$("#notes-list").html(html);
},
/**
2012-11-21 20:57:22 -05:00
* Adds a single common note to #notes-list.
*/
2012-11-21 18:23:26 -05:00
appendNewNote: function(id, html) {
2012-11-21 20:56:42 -05:00
$("#notes-list").append(html);
NoteList.updateVotes();
2012-11-21 18:23:26 -05:00
},
2012-11-21 20:56:42 -05:00
/**
2012-11-21 20:57:22 -05:00
* Adds a single discussion note to #notes-list.
2012-12-03 14:35:09 -05:00
*
* Also removes the corresponding form.
2012-11-21 20:56:42 -05:00
*/
appendNewDiscussionNote: function(discussionId, diffRowHtml, noteHtml) {
2012-12-03 14:35:09 -05:00
var form = $("form[rel='"+discussionId+"']");
var row = form.closest("tr");
// is this the first note of discussion?
if (row.is(".js-temp-notes-holder")) {
2012-12-03 14:35:09 -05:00
// insert the note and the reply button after the temp row
row.after(diffRowHtml);
2012-12-03 14:35:09 -05:00
// remove the note (will be added again below)
row.next().find(".note").remove();
}
// append new note to all matching discussions
$(".notes[rel='"+discussionId+"']").append(noteHtml);
2012-12-03 14:35:09 -05:00
// cleanup after successfully creating a diff/discussion note
$.proxy(NoteList.removeDiscussionNoteForm, form).call();
},
2012-12-03 16:34:50 -05:00
/**
* Called in response the main target form has been successfully submitted.
*
* Removes any errors.
* Resets text and preview.
* Resets buttons.
*/
resetMainTargetForm: function(){
var form = $(this);
// remove validation errors
form.find(".js-errors").remove();
// reset text and preview
var previewContainer = form.find(".js-toggler-container.note_text_and_preview");
if (previewContainer.is(".on")) {
previewContainer.removeClass("on");
}
form.find(".js-note-text").val("").trigger("input");
},
/**
* Called after an attachment file has been selected.
*
* Updates the file name for the selected attachment.
*/
updateFormAttachment: function() {
var form = $(this).closest("form");
// get only the basename
var filename = $(this).val().replace(/^.*[\\\/]/, '');
form.find(".js-attachment-filename").text(filename);
},
/**
* Recalculates the votes and updates them (if they are displayed at all).
*
* Assumes all relevant notes are displayed (i.e. there are no more notes to
* load via getMore()).
* Might produce inaccurate results when not all notes have been loaded and a
* recalculation is triggered (e.g. when deleting a note).
*/
2012-11-21 18:23:26 -05:00
updateVotes: function() {
var votes = $("#votes .votes");
2012-11-21 20:56:42 -05:00
var notes = $("#notes-list .note .vote");
2012-11-21 18:23:26 -05:00
// only update if there is a vote display
if (votes.size()) {
var upvotes = notes.filter(".upvote").size();
var downvotes = notes.filter(".downvote").size();
var votesCount = upvotes + downvotes;
var upvotesPercent = votesCount ? (100.0 / votesCount * upvotes) : 0;
var downvotesPercent = votesCount ? (100.0 - upvotesPercent) : 0;
// change vote bar lengths
votes.find(".bar-success").css("width", upvotesPercent+"%");
votes.find(".bar-danger").css("width", downvotesPercent+"%");
// replace vote numbers
votes.find(".upvotes").text(votes.find(".upvotes").text().replace(/\d+/, upvotes));
votes.find(".downvotes").text(votes.find(".downvotes").text().replace(/\d+/, downvotes));
}
2013-06-26 10:32:34 -04:00
},
/**
* Called in response to the edit note form being submitted
*
* Updates the current note field.
* Hides the edit note form
*/
updateNote: function(e, xhr, settings) {
response = JSON.parse(xhr.responseText);
if (response.success) {
var note_li = $("#note_" + response.id);
var note_text = note_li.find(".note-text");
note_text.html(response.note).show();
var note_form = note_li.find(".note-edit-form");
note_form.hide();
note_form.find(".btn-save").enableButton();
// Update the "Edited at xxx label" on the note to show it's just been updated
NoteList.rewriteTimestamp(note_li.find(".note-last-update"));
}
},
/**
* Called in response to the 'cancel note' link clicked, or after deleting a note attachment
*
* Hides the edit note form and shows the note
* Resets the edit note form textarea with the original content of the note
*/
resetNoteEditing: function(note) {
note.find(".note-text").show();
// Hide the attachment delete link
note.find(".js-note-attachment-delete").hide();
// Put the original content of the note back into the edit form textarea
var form = note.find(".note-edit-form");
var original_content = form.find(".note-original-content");
form.find("textarea").val(original_content.text());
original_content.remove();
note.find(".note-edit-form").hide();
},
/**
* Utility function to generate new timestamp text for a note
*
*/
rewriteTimestamp: function(element) {
// Strip all newlines from the existing timestamp
var ts = element.text().replace(/\n/g, ' ').trim();
// If the timestamp already has '(Edited xxx ago)' text, remove it
ts = ts.replace(new RegExp("\\(Edited [A-Za-z0-9 ]+\\)$", "gi"), "");
// Append "(Edited just now)"
ts = (ts + " <small>(Edited just now)</small>");
element.html(ts);
2012-11-21 18:23:26 -05:00
}
};