mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #7252 from nextcloud/send-comment-on-enter 

Submit comments with Enter and use Shift+Enter for new lines
This commit is contained in:
Morris Jobke 2017-12-08 15:31:10 +01:00 committed by GitHub
parent bb8acc5824 9b1f3b969e
commit 5724e75827
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 92 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/comments/js/commentstabview.js
View File

@ -530,9 +530,13 @@
$field.toggleClass('error', limitExceeded);
$submitButton.prop('disabled', limitExceeded);
//submits form on ctrl+Enter or cmd+Enter
if (ev.keyCode === 13 && (ev.ctrlKey || ev.metaKey)) {
// Submits form with Enter, but Shift+Enter is a new line. If the
// autocomplete popover is being shown Enter does not submit the
// form either; it will be handled by At.js which will add the
// currently selected item to the message.
if (ev.keyCode === 13 && !ev.shiftKey && !$field.atwho('isSelecting')) {
$submitButton.click();
ev.preventDefault();
}
},

96
apps/comments/tests/js/commentstabviewSpec.js
View File

@ -219,6 +219,7 @@ describe('OCA.Comments.CommentsTabView tests', function() {
describe('posting comments', function() {
var createStub;
var currentUserStub;
var $newCommentForm;
beforeEach(function() {
view.collection.set(testComments);
@ -229,6 +230,8 @@ describe('OCA.Comments.CommentsTabView tests', function() {
displayName: 'Test User'
});
$newCommentForm = view.$el.find('.newCommentForm');
// Required for the absolute selector used to find the new comment
// after a successful creation in _onSubmitSuccess.
$('#testArea').append(view.$el);
@ -239,8 +242,8 @@ describe('OCA.Comments.CommentsTabView tests', function() {
});
it('creates a new comment when clicking post button', function() {
view.$el.find('.message').text('New message');
view.$el.find('form').submit();
$newCommentForm.find('.message').text('New message');
$newCommentForm.submit();
expect(createStub.calledOnce).toEqual(true);
expect(createStub.lastCall.args[0]).toEqual({
@ -252,9 +255,82 @@ describe('OCA.Comments.CommentsTabView tests', function() {
creationDateTime: new Date(Date.UTC(2016, 1, 3, 10, 5, 9)).toUTCString()
});
});
it('creates a new comment when typing enter', function() {
$newCommentForm.find('.message').text('New message');
var keydownEvent = new $.Event('keydown', {keyCode: 13});
$newCommentForm.find('.message').trigger(keydownEvent);
expect(createStub.calledOnce).toEqual(true);
expect(createStub.lastCall.args[0]).toEqual({
actorId: 'testuser',
actorDisplayName: 'Test User',
actorType: 'users',
verb: 'comment',
message: 'New message',
creationDateTime: new Date(Date.UTC(2016, 1, 3, 10, 5, 9)).toUTCString()
});
expect(keydownEvent.isDefaultPrevented()).toEqual(true);
});
it('creates a new mention when typing enter in the autocomplete popover', function() {
var autoCompleteStub = sinon.stub(view, '_onAutoComplete');
autoCompleteStub.callsArgWith(1, [{"id":"userId", "label":"User Name", "source":"users"}]);
// Force the autocomplete to be initialized
view._initAutoComplete($newCommentForm.find('.message'));
// PhantomJS does not seem to handle typing in a contenteditable, so
// some tricks are needed to show the autocomplete popover.
//
// Instead of sending key events to type "@u" the characters are
// programatically set in the input field.
$newCommentForm.find('.message').text('Mention to @u');
// When focusing on the input field the caret is not guaranteed to
// be at the end; instead of calling "focus()" on the input field
// the caret is explicitly set at the end of the input field, that
// is, after "@u".
var range = document.createRange();
range.selectNodeContents($newCommentForm.find('.message')[0]);
range.collapse(false);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
// As PhantomJS does not handle typing in a contenteditable the key
// typed here is in practice ignored by At.js, but despite that it
// will cause the popover to be shown.
$newCommentForm.find('.message').trigger(new $.Event('keydown', {keyCode: 's'}));
$newCommentForm.find('.message').trigger(new $.Event('keyup', {keyCode: 's'}));
expect(autoCompleteStub.calledOnce).toEqual(true);
var keydownEvent = new $.Event('keydown', {keyCode: 13});
$newCommentForm.find('.message').trigger(keydownEvent);
expect(createStub.calledOnce).toEqual(false);
expect($newCommentForm.find('.message').html()).toContain('Mention to <span');
expect($newCommentForm.find('.message').html()).toContain('<div class="avatar"');
expect($newCommentForm.find('.message').html()).toContain('<strong>User Name</strong>');
expect($newCommentForm.find('.message').text()).not.toContain('@');
// In this case the default behaviour is prevented by the
// "onKeydown" event handler of At.js.
expect(keydownEvent.isDefaultPrevented()).toEqual(true);
});
it('creates a new line when typing shift+enter', function() {
$newCommentForm.find('.message').text('New message');
var keydownEvent = new $.Event('keydown', {keyCode: 13, shiftKey: true});
$newCommentForm.find('.message').trigger(keydownEvent);
expect(createStub.calledOnce).toEqual(false);
// PhantomJS does not seem to handle typing in a contenteditable, so
// instead of looking for a new line the best that can be done is
// checking that the default behaviour would have been executed.
expect($newCommentForm.find('.message').text()).toContain('New message');
expect(keydownEvent.isDefaultPrevented()).toEqual(false);
});
it('creates a new comment with mentions when clicking post button', function() {
view.$el.find('.message').text('New message @anotheruser');
view.$el.find('form').submit();
$newCommentForm.find('.message').text('New message @anotheruser');
$newCommentForm.submit();
var createStubExpectedData = {
actorId: 'testuser',
@ -297,8 +373,8 @@ describe('OCA.Comments.CommentsTabView tests', function() {
expect($message.find('.avatar[data-user=anotheruser] ~ .contactsmenu-popover').length).toEqual(1);
});
it('does not create a comment if the field is empty', function() {
view.$el.find('.message').val(' ');
view.$el.find('form').submit();
$newCommentForm.find('.message').val(' ');
$newCommentForm.submit();
expect(createStub.notCalled).toEqual(true);
});
@ -307,8 +383,8 @@ describe('OCA.Comments.CommentsTabView tests', function() {
for (var i = 0; i < view._commentMaxLength * 2; i++) {
bigMessage += 'a';
}
view.$el.find('.message').val(bigMessage);
view.$el.find('form').submit();
$newCommentForm.find('.message').val(bigMessage);
$newCommentForm.submit();
expect(createStub.notCalled).toEqual(true);
});
@ -319,8 +395,8 @@ describe('OCA.Comments.CommentsTabView tests', function() {
beforeEach(function() {
tooltipStub = sinon.stub($.fn, 'tooltip');
$message = view.$el.find('.message');
$submitButton = view.$el.find('.submit');
$message = $newCommentForm.find('.message');
$submitButton = $newCommentForm.find('.submit');
});
afterEach(function() {
tooltipStub.restore();