Add spinner when submitting comments

This commit is contained in:
Vincent Petry 2016-02-02 12:06:12 +01:00
parent d81c00304f
commit 9028457ea2
2 changed files with 32 additions and 7 deletions

View File

@ -17,8 +17,8 @@
resize: none; resize: none;
} }
#commentsTabView .newCommentForm .submit { #commentsTabView .newCommentForm .submitLoading {
display: block; background-position: left;
} }
#commentsTabView .comment { #commentsTabView .comment {

View File

@ -20,6 +20,7 @@
' <form class="newCommentForm">' + ' <form class="newCommentForm">' +
' <textarea class="message" placeholder="{{newMessagePlaceholder}}"></textarea>' + ' <textarea class="message" placeholder="{{newMessagePlaceholder}}"></textarea>' +
' <input class="submit" type="submit" value="{{submitText}}" />' + ' <input class="submit" type="submit" value="{{submitText}}" />' +
' <div class="submitLoading icon-loading-small hidden"></div>'+
' </form>' + ' </form>' +
' <ul class="comments">' + ' <ul class="comments">' +
' </ul>' + ' </ul>' +
@ -125,7 +126,6 @@
altDate: OC.Util.formatDate(timestamp), altDate: OC.Util.formatDate(timestamp),
formattedMessage: this._formatMessage(commentModel.get('message')) formattedMessage: this._formatMessage(commentModel.get('message'))
}, commentModel.attributes); }, commentModel.attributes);
// TODO: format
return data; return data;
}, },
@ -188,9 +188,22 @@
}, },
_onSubmitComment: function(e) { _onSubmitComment: function(e) {
var $form = $(e.target);
var currentUser = OC.getCurrentUser(); var currentUser = OC.getCurrentUser();
var $textArea = $(e.target).find('textarea'); var $submit = $form.find('.submit');
var $loading = $form.find('.submitLoading');
var $textArea = $form.find('textarea');
var message = $textArea.val().trim();
e.preventDefault(); e.preventDefault();
if (!message.length) {
return;
}
$textArea.prop('disabled', true);
$submit.addClass('hidden');
$loading.removeClass('hidden');
this.collection.create({ this.collection.create({
actorId: currentUser.uid, actorId: currentUser.uid,
actorDisplayName: currentUser.displayName, actorDisplayName: currentUser.displayName,
@ -198,10 +211,22 @@
verb: 'comment', verb: 'comment',
message: $textArea.val(), message: $textArea.val(),
creationDateTime: (new Date()).getTime() creationDateTime: (new Date()).getTime()
}, {at: 0}); }, {
at: 0,
success: function() {
$submit.removeClass('hidden');
$loading.addClass('hidden');
$textArea.val('').prop('disabled', false);
},
error: function(msg) {
$submit.removeClass('hidden');
$loading.addClass('hidden');
$textArea.prop('disabled', false);
OC.Notification.showTemporary(msg);
}
});
// TODO: spinner/disable field?
$textArea.val('');
return false; return false;
} }
}); });