nextcloud/apps/comments/js/commentstabview.js

739 lines
21 KiB
JavaScript
Raw Normal View History

2016-01-27 20:28:55 +03:00
/*
* Copyright (c) 2016
*
* This file is licensed under the Affero General Public License version 3
* or later.
*
* See the COPYING-README file.
*
*/
2016-02-17 17:19:42 +03:00
/* global Handlebars, escapeHTML */
2016-02-03 20:44:14 +03:00
2016-02-01 18:37:33 +03:00
(function(OC, OCA) {
2016-01-27 20:28:55 +03:00
/**
* @memberof OCA.Comments
*/
var CommentsTabView = OCA.Files.DetailTabView.extend(
/** @lends OCA.Comments.CommentsTabView.prototype */ {
id: 'commentsTabView',
className: 'tab commentsTabView',
_autoCompleteData: undefined,
_commentsModifyMenu: undefined,
2016-01-27 20:28:55 +03:00
events: {
'submit .newCommentForm': '_onSubmitComment',
2016-02-03 20:44:14 +03:00
'click .showMore': '_onClickShowMore',
'click .cancel': '_onClickCloseComment',
'click .comment': '_onClickComment',
'keyup div.message': '_onTextChange',
'change div.message': '_onTextChange',
'input div.message': '_onTextChange',
'paste div.message': '_onPaste'
2016-01-27 20:28:55 +03:00
},
_commentMaxLength: 1000,
2016-01-27 20:28:55 +03:00
initialize: function() {
OCA.Files.DetailTabView.prototype.initialize.apply(this, arguments);
2016-02-02 17:13:45 +03:00
this.collection = new OCA.Comments.CommentCollection();
2016-01-27 20:28:55 +03:00
this.collection.on('request', this._onRequest, this);
this.collection.on('sync', this._onEndRequest, this);
this.collection.on('add', this._onAddModel, this);
this.collection.on('change:message', this._onChangeModel, this);
2016-02-01 18:37:33 +03:00
this._commentMaxThreshold = this._commentMaxLength * 0.9;
2016-01-27 20:28:55 +03:00
// TODO: error handling
_.bindAll(this, '_onTypeComment', '_initAutoComplete', '_onAutoComplete');
2016-01-27 20:28:55 +03:00
},
template: function(params) {
2016-02-01 18:37:33 +03:00
var currentUser = OC.getCurrentUser();
return OCA.Comments.Templates['view'](_.extend({
2016-02-03 20:44:14 +03:00
actorId: currentUser.uid,
actorDisplayName: currentUser.displayName
}, params));
},
editCommentTemplate: function(params) {
var currentUser = OC.getCurrentUser();
return OCA.Comments.Templates['edit_comment'](_.extend({
actorId: currentUser.uid,
actorDisplayName: currentUser.displayName,
2016-08-03 14:18:09 +03:00
newMessagePlaceholder: t('comments', 'New comment …'),
submitText: t('comments', 'Post'),
cancelText: t('comments', 'Cancel'),
tag: 'li'
2016-01-27 20:28:55 +03:00
}, params));
},
commentTemplate: function(params) {
params = _.extend({
2016-02-03 20:44:14 +03:00
editTooltip: t('comments', 'Edit comment'),
isUserAuthor: OC.getCurrentUser().uid === params.actorId,
isLong: this._isLong(params.message)
}, params);
if (params.actorType === 'deleted_users') {
// makes the avatar a X
params.actorId = null;
params.actorDisplayName = t('comments', '[Deleted user]');
}
return OCA.Comments.Templates['comment'](params);
2016-01-27 20:28:55 +03:00
},
getLabel: function() {
return t('comments', 'Comments');
},
setFileInfo: function(fileInfo) {
if (fileInfo) {
this.model = fileInfo;
2016-01-27 20:28:55 +03:00
this.render();
this._initAutoComplete($('#commentsTabView').find('.newCommentForm .message'));
this.collection.setObjectId(this.model.id);
2016-01-27 20:28:55 +03:00
// reset to first page
this.collection.reset([], {silent: true});
this.nextPage();
} else {
this.model = null;
2016-01-27 20:28:55 +03:00
this.render();
this.collection.reset();
}
},
render: function() {
this.$el.html(this.template({
2016-08-03 14:18:09 +03:00
emptyResultLabel: t('comments', 'No comments yet, start the conversation!'),
moreLabel: t('comments', 'More comments …')
2016-01-27 20:28:55 +03:00
}));
this.$el.find('.comments').before(this.editCommentTemplate({ tag: 'div'}));
2016-01-27 20:28:55 +03:00
this.$el.find('.has-tooltip').tooltip();
this.$container = this.$el.find('ul.comments');
this.$el.find('.avatar').avatar(OC.getCurrentUser().uid, 32);
2016-01-27 20:28:55 +03:00
this.delegateEvents();
2016-08-03 14:18:09 +03:00
this.$el.find('.message').on('keydown input change', this._onTypeComment);
autosize(this.$el.find('.newCommentRow .message'))
this.$el.find('.newCommentForm .message').focus();
2016-01-27 20:28:55 +03:00
},
_initAutoComplete: function($target) {
var s = this;
var limit = 10;
if(!_.isUndefined(OC.appConfig.comments)) {
limit = OC.appConfig.comments.maxAutoCompleteResults;
}
$target.atwho({
at: '@',
limit: limit,
callbacks: {
remoteFilter: s._onAutoComplete,
highlighter: function (li) {
// misuse the highlighter callback to instead of
// highlighting loads the avatars.
var $li = $(li);
$li.find('.avatar').avatar(undefined, 32);
return $li;
},
sorter: function (q, items) { return items; }
},
displayTpl: function (item) {
return '<li>' +
'<span class="avatar-name-wrapper">' +
'<span class="avatar" ' +
'data-username="' + escapeHTML(item.id) + '" ' + // for avatars
'data-user="' + escapeHTML(item.id) + '" ' + // for contactsmenu
'data-user-display-name="' + escapeHTML(item.label) + '">' +
'</span>' +
'<strong>' + escapeHTML(item.label) + '</strong>' +
'</span></li>';
},
insertTpl: function (item) {
return '' +
'<span class="avatar-name-wrapper">' +
'<span class="avatar" ' +
'data-username="' + escapeHTML(item.id) + '" ' + // for avatars
'data-user="' + escapeHTML(item.id) + '" ' + // for contactsmenu
'data-user-display-name="' + escapeHTML(item.label) + '">' +
'</span>' +
'<strong>' + escapeHTML(item.label) + '</strong>' +
'</span>';
},
searchKey: "label"
});
$target.on('inserted.atwho', function (je, $el) {
var editionMode = true;
s._postRenderItem(
// we need to pass the parent of the inserted element
// passing the whole comments form would re-apply and request
// avatars from the server
$(je.target).find(
'span[data-username="' + $el.find('[data-username]').data('username') + '"]'
).parent(),
editionMode
);
});
},
_onAutoComplete: function(query, callback) {
if(_.isEmpty(query)) {
return;
}
var s = this;
if(!_.isUndefined(this._autoCompleteRequestTimer)) {
clearTimeout(this._autoCompleteRequestTimer);
}
this._autoCompleteRequestTimer = _.delay(function() {
if(!_.isUndefined(this._autoCompleteRequestCall)) {
this._autoCompleteRequestCall.abort();
}
this._autoCompleteRequestCall = $.ajax({
url: OC.linkToOCS('core', 2) + 'autocomplete/get',
data: {
search: query,
itemType: 'files',
itemId: s.model.get('id'),
sorter: 'commenters|share-recipients',
limit: OC.appConfig.comments.maxAutoCompleteResults
},
beforeSend: function (request) {
request.setRequestHeader('Accept', 'application/json');
},
success: function (result) {
callback(result.ocs.data);
}
});
}, 400);
},
2016-01-27 20:28:55 +03:00
_formatItem: function(commentModel) {
2016-01-28 13:47:23 +03:00
var timestamp = new Date(commentModel.get('creationDateTime')).getTime();
var data = _.extend({
2016-08-31 18:46:50 +03:00
timestamp: timestamp,
2016-01-28 13:47:23 +03:00
date: OC.Util.relativeModifiedDate(timestamp),
2016-02-01 18:54:27 +03:00
altDate: OC.Util.formatDate(timestamp),
formattedMessage: this._formatMessage(commentModel.get('message'), commentModel.get('mentions'))
2016-01-28 13:47:23 +03:00
}, commentModel.attributes);
return data;
2016-01-27 20:28:55 +03:00
},
_toggleLoading: function(state) {
this._loading = state;
this.$el.find('.loading').toggleClass('hidden', !state);
},
_onRequest: function(type) {
if (type === 'REPORT') {
this._toggleLoading(true);
this.$el.find('.showMore').addClass('hidden');
}
2016-01-27 20:28:55 +03:00
},
_onEndRequest: function(type) {
var fileInfoModel = this.model;
2016-01-27 20:28:55 +03:00
this._toggleLoading(false);
2016-08-03 14:18:09 +03:00
this.$el.find('.emptycontent').toggleClass('hidden', !!this.collection.length);
2016-01-27 20:28:55 +03:00
this.$el.find('.showMore').toggleClass('hidden', !this.collection.hasMoreResults());
if (type !== 'REPORT') {
return;
}
// find first unread comment
var firstUnreadComment = this.collection.findWhere({isUnread: true});
if (firstUnreadComment) {
// update read marker
this.collection.updateReadMarker(
null,
{
success: function() {
fileInfoModel.set('commentsUnread', 0);
}
}
);
}
this.$el.find('.newCommentForm .message').focus();
2016-01-27 20:28:55 +03:00
},
/**
* takes care of post-rendering after a new comment was added to the
* collection
*
* @param model
* @param collection
* @param options
* @private
*/
2016-01-27 20:28:55 +03:00
_onAddModel: function(model, collection, options) {
// we need to render it immediately, to ensure that the right
// order of comments is kept on opening comments tab
var $comment = $(this.commentTemplate(this._formatItem(model)));
if (!_.isUndefined(options.at) && collection.length > 1) {
this.$container.find('li').eq(options.at).before($comment);
} else {
this.$container.append($comment);
}
this._postRenderItem($comment);
$('#commentsTabView').find('.newCommentForm div.message').text('').prop('contenteditable', true);
// we need to update the model, because it consists of client data
// only, but the server might add meta data, e.g. about mentions
var oldMentions = model.get('mentions');
var self = this;
model.fetch({
success: function (model) {
if(_.isEqual(oldMentions, model.get('mentions'))) {
// don't attempt to render if unnecessary, avoids flickering
return;
}
var $updated = $(self.commentTemplate(self._formatItem(model)));
$comment.html($updated.html());
self._postRenderItem($comment);
}
})
},
/**
* takes care of post-rendering after a new comment was edited
*
* @param model
* @private
*/
_onChangeModel: function (model) {
if(model.get('message').trim() === model.previous('message').trim()) {
return;
}
var $form = this.$container.find('.comment[data-id="' + model.id + '"] form');
var $row = $form.closest('.comment');
var $target = $row.data('commentEl');
if(_.isUndefined($target)) {
// ignore noise this is only set after editing a comment and hitting post
return;
2016-01-27 20:28:55 +03:00
}
var self = this;
// we need to update the model, because it consists of client data
// only, but the server might add meta data, e.g. about mentions
model.fetch({
success: function (model) {
$target.removeClass('hidden');
$row.remove();
var $message = $target.find('.message');
$message
.html(self._formatMessage(model.get('message'), model.get('mentions')))
.find('.avatar')
.each(function () { $(this).avatar(); });
self._postRenderItem($message);
}
});
2016-02-01 18:37:33 +03:00
},
_postRenderItem: function($el, editionMode) {
2016-01-28 13:47:23 +03:00
$el.find('.has-tooltip').tooltip();
var inlineAvatars = $el.find('.message .avatar');
if ($($el.context).hasClass('message')) {
inlineAvatars = $el.find('.avatar');
}
inlineAvatars.each(function () {
var $this = $(this);
$this.avatar($this.attr('data-username'), 16);
});
$el.find('.authorRow .avatar').each(function () {
var $this = $(this);
$this.avatar($this.attr('data-username'), 32);
});
var username = $el.find('.avatar').data('username');
if (username !== oc_current_user) {
$el.find('.authorRow .avatar, .authorRow .author').contactsMenu(
username, 0, $el.find('.authorRow'));
}
var $message = $el.find('.message');
if($message.length === 0) {
// it is the case when writing a comment and mentioning a person
$message = $el;
}
if (!editionMode) {
var self = this;
// add the dropdown menu to display the edit and delete option
var modifyCommentMenu = new OCA.Comments.CommentsModifyMenu();
$el.find('.authorRow').append(modifyCommentMenu.$el);
$el.find('.more').on('click', _.bind(modifyCommentMenu.show, modifyCommentMenu));
self.listenTo(modifyCommentMenu, 'select:menu-item-clicked', function(ev, action) {
if (action === 'edit') {
self._onClickEditComment(ev);
} else if (action === 'delete') {
self._onClickDeleteComment(ev);
}
});
}
this._postRenderMessage($message, editionMode);
},
_postRenderMessage: function($el, editionMode) {
if (editionMode) {
return;
}
$el.find('.avatar-name-wrapper').each(function() {
var $this = $(this);
var $avatar = $this.find('.avatar');
var user = $avatar.data('user');
if (user !== OC.getCurrentUser().uid) {
$this.contactsMenu(user, 0, $this);
}
});
2016-01-27 20:28:55 +03:00
},
2016-02-01 18:54:27 +03:00
/**
* Convert a message to be displayed in HTML,
* converts newlines to <br> tags.
*/
_formatMessage: function(message, mentions, editMode) {
message = escapeHTML(message).replace(/\n/g, '<br/>');
for(var i in mentions) {
if(!mentions.hasOwnProperty(i)) {
return;
}
var mention = '@' + mentions[i].mentionId;
// escape possible regex characters in the name
mention = mention.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
var displayName = this._composeHTMLMention(mentions[i].mentionId, mentions[i].mentionDisplayName);
// replace every mention either at the start of the input or after a whitespace
// followed by a non-word character.
message = message.replace(new RegExp("(^|\\s)(" + mention + ")\\b", 'g'),
function(match, p1) {
// to get number of whitespaces (0 vs 1) right
return p1+displayName;
}
);
}
if(editMode !== true) {
message = OCP.Comments.plainToRich(message);
}
return message;
2016-02-01 18:54:27 +03:00
},
_composeHTMLMention: function(uid, displayName) {
var avatar = '' +
'<span class="avatar" ' +
'data-username="' + _.escape(uid) + '" ' +
'data-user="' + _.escape(uid) + '" ' +
'data-user-display-name="' + _.escape(displayName) + '">' +
'</span>';
var isCurrentUser = (uid === OC.getCurrentUser().uid);
return '' +
'<span class="atwho-inserted" contenteditable="false">' +
'<span class="avatar-name-wrapper' + (isCurrentUser ? ' currentUser' : '') + '">' +
avatar +
'<strong>' + _.escape(displayName) + '</strong>' +
'</span>' +
'</span>';
},
2016-01-27 20:28:55 +03:00
nextPage: function() {
if (this._loading || !this.collection.hasMoreResults()) {
return;
}
this.collection.fetchNext();
},
2016-02-03 20:44:14 +03:00
_onClickEditComment: function(ev) {
ev.preventDefault();
var $comment = $(ev.target).closest('.comment');
var commentId = $comment.data('id');
var commentToEdit = this.collection.get(commentId);
var $formRow = $(this.editCommentTemplate(_.extend({
isEditMode: true,
submitText: t('comments', 'Save')
}, commentToEdit.attributes)));
$comment.addClass('hidden').removeClass('collapsed');
2016-02-03 20:44:14 +03:00
// spawn form
$comment.after($formRow);
$formRow.data('commentEl', $comment);
$formRow.find('.message').on('keydown input change', this._onTypeComment);
2016-02-03 20:44:14 +03:00
// copy avatar element from original to avoid flickering
$formRow.find('.avatar:first').replaceWith($comment.find('.avatar:first').clone());
$formRow.find('.has-tooltip').tooltip();
2016-02-03 20:44:14 +03:00
var $message = $formRow.find('.message');
$message
.html(this._formatMessage(commentToEdit.get('message'), commentToEdit.get('mentions'), true))
.find('.avatar')
.each(function () { $(this).avatar(); });
var editionMode = true;
this._postRenderItem($message, editionMode);
// Enable autosize
autosize($formRow.find('.message'));
// enable autocomplete
this._initAutoComplete($formRow.find('.message'));
2016-02-03 20:44:14 +03:00
return false;
},
_onTypeComment: function(ev) {
var $field = $(ev.target);
var len = $field.text().length;
var $submitButton = $field.data('submitButtonEl');
if (!$submitButton) {
$submitButton = $field.closest('form').find('.submit');
$field.data('submitButtonEl', $submitButton);
}
$field.tooltip('hide');
if (len > this._commentMaxThreshold) {
$field.attr('data-original-title', t('comments', 'Allowed characters {count} of {max}', {count: len, max: this._commentMaxLength}));
$field.tooltip({trigger: 'manual'});
$field.tooltip('show');
$field.addClass('error');
}
2016-02-17 17:19:42 +03:00
var limitExceeded = (len > this._commentMaxLength);
$field.toggleClass('error', limitExceeded);
$submitButton.prop('disabled', limitExceeded);
// 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();
2016-05-03 13:29:43 +03:00
}
},
_onClickComment: function(ev) {
var $row = $(ev.target);
if (!$row.is('.comment')) {
$row = $row.closest('.comment');
}
$row.removeClass('collapsed');
},
2016-02-03 20:44:14 +03:00
_onClickCloseComment: function(ev) {
ev.preventDefault();
var $row = $(ev.target).closest('.comment');
$row.data('commentEl').removeClass('hidden');
$row.remove();
return false;
},
_onClickDeleteComment: function(ev) {
ev.preventDefault();
var $comment = $(ev.target).closest('.comment');
var commentId = $comment.data('id');
var $loading = $comment.find('.deleteLoading');
var $moreIcon = $comment.find('.more');
2016-02-03 20:44:14 +03:00
$comment.addClass('disabled');
$loading.removeClass('hidden');
$moreIcon.addClass('hidden');
$comment.data('commentEl', $comment);
2016-02-03 20:44:14 +03:00
this.collection.get(commentId).destroy({
success: function() {
$comment.data('commentEl').remove();
2016-02-03 20:44:14 +03:00
$comment.remove();
},
error: function() {
$loading.addClass('hidden');
$moreIcon.removeClass('hidden');
2016-02-03 20:44:14 +03:00
$comment.removeClass('disabled');
OC.Notification.showTemporary(t('comments', 'Error occurred while retrieving comment with ID {id}', {id: commentId}));
2016-02-03 20:44:14 +03:00
}
});
return false;
},
_onClickShowMore: function(ev) {
2016-01-27 20:28:55 +03:00
ev.preventDefault();
this.nextPage();
},
/**
* takes care of updating comment element states after submit (either new
* comment or edit).
*
* @param {OC.Backbone.Model} model
* @param {jQuery} $form
* @private
*/
_onSubmitSuccess: function(model, $form) {
var $submit = $form.find('.submit');
var $loading = $form.find('.submitLoading');
$submit.removeClass('hidden');
$loading.addClass('hidden');
},
_commentBodyHTML2Plain: function($el) {
var $comment = $el.clone();
$comment.find('.avatar-name-wrapper').each(function () {
var $this = $(this);
var $inserted = $this.parent();
$inserted.html('@' + $this.find('.avatar').data('username'));
});
$comment.html(OCP.Comments.richToPlain($comment.html()));
var oldHtml;
var html = $comment.html();
do {
// replace works one by one
oldHtml = html;
html = oldHtml.replace("<br>", "\n"); // preserve line breaks
} while(oldHtml !== html);
$comment.html(html);
return $comment.text();
},
2016-01-27 20:28:55 +03:00
_onSubmitComment: function(e) {
2016-02-03 20:44:14 +03:00
var self = this;
2016-02-02 14:06:12 +03:00
var $form = $(e.target);
2016-02-03 20:44:14 +03:00
var commentId = $form.closest('.comment').data('id');
2016-02-01 18:37:33 +03:00
var currentUser = OC.getCurrentUser();
2016-02-02 14:06:12 +03:00
var $submit = $form.find('.submit');
var $loading = $form.find('.submitLoading');
var $commentField = $form.find('.message');
var message = $commentField.text().trim();
2016-01-27 20:28:55 +03:00
e.preventDefault();
2016-02-02 14:06:12 +03:00
if (!message.length || message.length > this._commentMaxLength) {
2016-02-02 14:06:12 +03:00
return;
}
$commentField.prop('contenteditable', false);
2016-02-02 14:06:12 +03:00
$submit.addClass('hidden');
$loading.removeClass('hidden');
message = this._commentBodyHTML2Plain($commentField);
2016-02-03 20:44:14 +03:00
if (commentId) {
// edit mode
var comment = this.collection.get(commentId);
comment.save({
message: message
2016-02-03 20:44:14 +03:00
}, {
success: function(model) {
self._onSubmitSuccess(model, $form);
if(model.get('message').trim() === model.previous('message').trim()) {
// model change event doesn't trigger, manually remove the row.
var $row = $form.closest('.comment');
$row.data('commentEl').removeClass('hidden');
$row.remove();
}
2016-02-03 20:44:14 +03:00
},
error: function() {
self._onSubmitError($form, commentId);
2016-02-03 20:44:14 +03:00
}
});
} else {
this.collection.create({
actorId: currentUser.uid,
actorDisplayName: currentUser.displayName,
actorType: 'users',
verb: 'comment',
message: message,
2016-02-03 20:44:14 +03:00
creationDateTime: (new Date()).toUTCString()
}, {
at: 0,
// wait for real creation before adding
wait: true,
success: function(model) {
self._onSubmitSuccess(model, $form);
2016-02-03 20:44:14 +03:00
},
error: function() {
self._onSubmitError($form, undefined);
2016-02-03 20:44:14 +03:00
}
});
}
2016-01-27 20:28:55 +03:00
return false;
},
/**
* takes care of updating the UI after an error on submit (either new
* comment or edit).
*
* @param {jQuery} $form
* @param {string|undefined} commentId
* @private
*/
_onSubmitError: function($form, commentId) {
$form.find('.submit').removeClass('hidden');
$form.find('.submitLoading').addClass('hidden');
$form.find('.message').prop('contenteditable', true);
if(!_.isUndefined(commentId)) {
OC.Notification.show(t('comments', 'Error occurred while updating comment with id {id}', {id: commentId}), {type: 'error'});
} else {
OC.Notification.show(t('comments', 'Error occurred while posting comment'), {type: 'error'});
}
},
/**
* ensures the contenteditable div is really empty, when user removed
* all input, so that the placeholder will be shown again
*
* @private
*/
_onTextChange: function() {
var $message = $('#commentsTabView').find('.newCommentForm div.message');
if(!$message.text().trim().length) {
$message.empty();
}
},
/**
* Limit pasting to plain text
*
* @param e
* @private
*/
_onPaste: function (e) {
e.preventDefault();
var text = e.originalEvent.clipboardData.getData("text/plain");
document.execCommand('insertText', false, text);
},
/**
* Returns whether the given message is long and needs
* collapsing
*/
_isLong: function(message) {
return message.length > 250 || (message.match(/\n/g) || []).length > 1;
2016-01-27 20:28:55 +03:00
}
});
OCA.Comments.CommentsTabView = CommentsTabView;
2016-02-01 18:37:33 +03:00
})(OC, OCA);