Commit 1100320b authored by Fatih Acet's avatar Fatih Acet

Refactor discussion edit widget to have only one at a time.

parent 7c2a4699
...@@ -129,4 +129,16 @@ ...@@ -129,4 +129,16 @@
})(window); })(window);
gl.utils.isElementVisibleInViewport = function(el) {
var rect = el.getBoundingClientRect();
var height = Math.max(document.documentElement.clientHeight, window.innerHeight);
return !(rect.bottom - 110 < 0 || rect.top - height >= 0); // -110 for sticky GitLab navigation header
}
gl.utils.animateToElement = function($el) {
return $('body, html').animate({
scrollTop: $el.offset().top - 110
}, 200);
}
}).call(this); }).call(this);
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
// change note in UI after update // change note in UI after update
$(document).on("ajax:success", "form.edit-note", this.updateNote); $(document).on("ajax:success", "form.edit-note", this.updateNote);
// Edit note link // Edit note link
$(document).on("click", ".js-note-edit", this.showEditForm); $(document).on("click", ".js-note-edit", this.showEditForm.bind(this));
$(document).on("click", ".note-edit-cancel", this.cancelEdit); $(document).on("click", ".note-edit-cancel", this.cancelEdit);
// Reopen and close actions for Issue/MR combined with note form submit // Reopen and close actions for Issue/MR combined with note form submit
$(document).on("click", ".js-comment-button", this.updateCloseButton); $(document).on("click", ".js-comment-button", this.updateCloseButton);
...@@ -466,6 +466,9 @@ ...@@ -466,6 +466,9 @@
var $html, $note_li; var $html, $note_li;
// Convert returned HTML to a jQuery object so we can modify it further // Convert returned HTML to a jQuery object so we can modify it further
$html = $(note.html); $html = $(note.html);
$('.note-edit-form').insertBefore('.notes-form');
gl.utils.localTimeAgo($('.js-timeago', $html)); gl.utils.localTimeAgo($('.js-timeago', $html));
$html.renderGFM(); $html.renderGFM();
$html.find('.js-task-list-container').taskList('enable'); $html.find('.js-task-list-container').taskList('enable');
...@@ -480,48 +483,73 @@ ...@@ -480,48 +483,73 @@
}; };
Notes.prototype.checkContentToAllowEditing = function($el) {
var initialContent = $el.find('.original-note-content').text().trim();
var currentContent = $el.find('.note-textarea').val();
var isAllowed = true;
if (currentContent === initialContent) {
this.removeNoteEditForm($el);
$el.find('.js-md-write-button').trigger('click');
}
else {
var $buttons = $el.find('.note-form-actions');
var isButtonsVisible = gl.utils.isElementVisibleInViewport($buttons[0]);
var isWidgetVisible = gl.utils.isElementVisibleInViewport($el[0]);
if (!isButtonsVisible || !isWidgetVisible) {
gl.utils.animateToElement($el);
}
$el.find('.js-edit-warning').show();
$el.find('.js-md-write-button').trigger('click');
isAllowed = false;
}
return isAllowed;
}
/* /*
Called in response to clicking the edit note link Called in response to clicking the edit note link
Replaces the note text with the note edit form Replaces the note text with the note edit form
Adds a data attribute to the form with the original content of the note for cancellations Adds a data attribute to the form with the original content of the note for cancellations
*/ */
Notes.prototype.showEditForm = function(e, scrollTo, myLastNote) { Notes.prototype.showEditForm = function(e, scrollTo, myLastNote) {
var $noteText, done, form, note;
e.preventDefault(); e.preventDefault();
note = $(this).closest(".note");
note.addClass("is-editting"); var $currentlyEditing = $('.note.is-editting');
form = note.find(".note-edit-form"); if ($currentlyEditing.length) {
var isEditAllowed = this.checkContentToAllowEditing($currentlyEditing);
if (!isEditAllowed) {
return;
}
}
var note = $(e.target).closest('.note');
var $editForm = $('.note-edit-form');
var $originalContentEl = note.find('.original-note-content');
var originalContent = $originalContentEl.text().trim();
var postUrl = $originalContentEl.data('post-url');
var form = note.find('.note-edit-form');
var $noteText = form.find('.js-note-text');
var noteTextVal = $noteText.val(); // Neat little trick to put the cursor at the end
note.addClass('is-editting');
$editForm.insertAfter(note.find('.note-text'));
$editForm.find('.js-note-text').val(originalContent);
$editForm.find('form').attr('action', postUrl);
form.addClass('current-note-edit-form'); form.addClass('current-note-edit-form');
// Show the attachment delete link note.find('.js-note-attachment-delete').show(); // Show the attachment delete link
note.find(".js-note-attachment-delete").show();
done = function($noteText) {
var noteTextVal;
// Neat little trick to put the cursor at the end
noteTextVal = $noteText.val();
// Store the original note text in a data attribute to retrieve if a user cancels edit.
form.find('form.edit-note').data('original-note', noteTextVal);
return $noteText.val('').val(noteTextVal);
};
new GLForm(form); new GLForm(form);
if ((scrollTo != null) && (myLastNote != null)) {
// scroll to the bottom
// so the open of the last element doesn't make a jump
$('html, body').scrollTop($(document).height());
return $('html, body').animate({
scrollTop: myLastNote.offset().top - 150
}, 500, function() {
var $noteText;
$noteText = form.find(".js-note-text");
$noteText.focus();
return done($noteText);
});
} else {
$noteText = form.find('.js-note-text');
$noteText.focus(); $noteText.focus();
return done($noteText); // Store the original note text in a data attribute to retrieve if a user cancels edit.
} form.find('form.edit-note').data('original-note', noteTextVal);
$noteText.val('').val(noteTextVal);
}; };
...@@ -532,15 +560,17 @@ ...@@ -532,15 +560,17 @@
*/ */
Notes.prototype.cancelEdit = function(e) { Notes.prototype.cancelEdit = function(e) {
var note;
e.preventDefault(); e.preventDefault();
note = $(e.target).closest('.note'); var note = $(e.target).closest('.note');
note.find('.js-edit-warning').hide();
note.find('.js-md-write-button').trigger('click');
$('.note-edit-form').insertBefore('.notes-form');
return this.removeNoteEditForm(note); return this.removeNoteEditForm(note);
}; };
Notes.prototype.removeNoteEditForm = function(note) { Notes.prototype.removeNoteEditForm = function(note) {
var form; var form = note.find(".current-note-edit-form");
form = note.find(".current-note-edit-form");
note.removeClass("is-editting"); note.removeClass("is-editting");
form.removeClass("current-note-edit-form"); form.removeClass("current-note-edit-form");
// Replace markdown textarea text with original note text. // Replace markdown textarea text with original note text.
......
...@@ -601,3 +601,12 @@ ul.notes { ...@@ -601,3 +601,12 @@ ul.notes {
position: relative; position: relative;
} }
} }
.note-edit-warning.settings-message {
display: none;
position: relative;
top: 1px;
left: 7px;
padding: 5px 10px;
}
...@@ -7,5 +7,7 @@ ...@@ -7,5 +7,7 @@
.note-form-actions.clearfix .note-form-actions.clearfix
= f.submit 'Save Comment', class: 'btn btn-nr btn-save js-comment-button' = f.submit 'Save Comment', class: 'btn btn-nr btn-save js-comment-button'
%span.settings-message.note-edit-warning.js-edit-warning
Finish editing this message first!
%button.btn.btn-nr.btn-cancel.note-edit-cancel{ type: 'button' } %button.btn.btn-nr.btn-cancel.note-edit-cancel{ type: 'button' }
Cancel Cancel
...@@ -67,7 +67,8 @@ ...@@ -67,7 +67,8 @@
= note.redacted_note_html = note.redacted_note_html
= edited_time_ago_with_tooltip(note, placement: 'bottom', html_class: 'note_edited_ago', include_author: true) = edited_time_ago_with_tooltip(note, placement: 'bottom', html_class: 'note_edited_ago', include_author: true)
- if note_editable - if note_editable
= render 'projects/notes/edit_form', note: note .original-note-content.hidden{data: {post_url: namespace_project_note_path(@project.namespace, @project, note), target_id: note.noteable.id, target_type: note.noteable.class.name.underscore}}
#{note.note}
.note-awards .note-awards
= render 'award_emoji/awards_block', awardable: note, inline: false = render 'award_emoji/awards_block', awardable: note, inline: false
- if note.system - if note.system
......
...@@ -6,3 +6,6 @@ ...@@ -6,3 +6,6 @@
= render 'discussions/discussion', discussion: discussion = render 'discussions/discussion', discussion: discussion
- else - else
= render partial: "projects/notes/note", collection: @notes, as: :note = render partial: "projects/notes/note", collection: @notes, as: :note
= render 'projects/notes/edit_form', note: @notes[0]
= hidden_field_tag :authenticity_token, form_authenticity_token
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment