nextcloud/apps/comments/js/commentstabview.js

743 lines
21 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/*
* Copyright (c) 2016
*
* This file is licensed under the Affero General Public License version 3
* or later.
*
* See the COPYING-README file.
*
*/
/* global Handlebars, escapeHTML */
(function(OC, OCA) {
/**
* @memberof OCA.Comments
*/
var CommentsTabView = OCA.Files.DetailTabView.extend(
/** @lends OCA.Comments.CommentsTabView.prototype */ {
id: 'commentsTabView',
className: 'tab commentsTabView',
_autoCompleteData: undefined,
_commentsModifyMenu: undefined,
events: {
'submit .newCommentForm': '_onSubmitComment',
'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'
},
_commentMaxLength: 1000,
initialize: function() {
OCA.Files.DetailTabView.prototype.initialize.apply(this, arguments);
this.collection = new OCA.Comments.CommentCollection();
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);
this._commentMaxThreshold = this._commentMaxLength * 0.9;
// TODO: error handling
_.bindAll(this, '_onTypeComment', '_initAutoComplete', '_onAutoComplete');
},
template: function(params) {
var currentUser = OC.getCurrentUser();
return OCA.Comments.Templates['view'](_.extend({
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,
newMessagePlaceholder: t('comments', 'New comment …'),
submitText: t('comments', 'Post'),
cancelText: t('comments', 'Cancel'),
tag: 'li'
}, params));
},
commentTemplate: function(params) {
params = _.extend({
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);
},
getLabel: function() {
return t('comments', 'Comments');
},
getIcon: function() {
return 'icon-comment';
},
setFileInfo: function(fileInfo) {
if (fileInfo) {
this.model = fileInfo;
this.render();
this._initAutoComplete($('#commentsTabView').find('.newCommentForm .message'));
this.collection.setObjectId(this.model.id);
// reset to first page
this.collection.reset([], {silent: true});
this.nextPage();
} else {
this.model = null;
this.render();
this.collection.reset();
}
},
render: function() {
this.$el.html(this.template({
emptyResultLabel: t('comments', 'No comments yet, start the conversation!'),
moreLabel: t('comments', 'More comments …')
}));
this.$el.find('.comments').before(this.editCommentTemplate({ tag: 'div'}));
this.$el.find('.has-tooltip').tooltip();
this.$container = this.$el.find('ul.comments');
this.$el.find('.avatar').avatar(OC.getCurrentUser().uid, 32);
this.delegateEvents();
this.$el.find('.message').on('keydown input change', this._onTypeComment);
autosize(this.$el.find('.newCommentRow .message'))
this.$el.find('.newCommentForm .message').focus();
},
_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);
},
_formatItem: function(commentModel) {
var timestamp = new Date(commentModel.get('creationDateTime')).getTime();
var data = _.extend({
timestamp: timestamp,
date: OC.Util.relativeModifiedDate(timestamp),
altDate: OC.Util.formatDate(timestamp),
formattedMessage: this._formatMessage(commentModel.get('message'), commentModel.get('mentions'))
}, commentModel.attributes);
return data;
},
_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');
}
},
_onEndRequest: function(type) {
var fileInfoModel = this.model;
this._toggleLoading(false);
this.$el.find('.emptycontent').toggleClass('hidden', !!this.collection.length);
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();
},
/**
* takes care of post-rendering after a new comment was added to the
* collection
*
* @param model
* @param collection
* @param options
* @private
*/
_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;
}
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);
}
});
},
_postRenderItem: function($el, editionMode) {
$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);
}
});
},
/**
* 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;
},
_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>';
},
nextPage: function() {
if (this._loading || !this.collection.hasMoreResults()) {
return;
}
this.collection.fetchNext();
},
_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');
// spawn form
$comment.after($formRow);
$formRow.data('commentEl', $comment);
$formRow.find('.message').on('keydown input change', this._onTypeComment);
// copy avatar element from original to avoid flickering
$formRow.find('.avatar:first').replaceWith($comment.find('.avatar:first').clone());
$formRow.find('.has-tooltip').tooltip();
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'));
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');
}
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();
}
},
_onClickComment: function(ev) {
var $row = $(ev.target);
if (!$row.is('.comment')) {
$row = $row.closest('.comment');
}
$row.removeClass('collapsed');
},
_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');
$comment.addClass('disabled');
$loading.removeClass('hidden');
$moreIcon.addClass('hidden');
$comment.data('commentEl', $comment);
this.collection.get(commentId).destroy({
success: function() {
$comment.data('commentEl').remove();
$comment.remove();
},
error: function() {
$loading.addClass('hidden');
$moreIcon.removeClass('hidden');
$comment.removeClass('disabled');
OC.Notification.showTemporary(t('comments', 'Error occurred while retrieving comment with ID {id}', {id: commentId}));
}
});
return false;
},
_onClickShowMore: function(ev) {
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();
},
_onSubmitComment: function(e) {
var self = this;
var $form = $(e.target);
var commentId = $form.closest('.comment').data('id');
var currentUser = OC.getCurrentUser();
var $submit = $form.find('.submit');
var $loading = $form.find('.submitLoading');
var $commentField = $form.find('.message');
var message = $commentField.text().trim();
e.preventDefault();
if (!message.length || message.length > this._commentMaxLength) {
return;
}
$commentField.prop('contenteditable', false);
$submit.addClass('hidden');
$loading.removeClass('hidden');
message = this._commentBodyHTML2Plain($commentField);
if (commentId) {
// edit mode
var comment = this.collection.get(commentId);
comment.save({
message: message
}, {
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();
}
},
error: function() {
self._onSubmitError($form, commentId);
}
});
} else {
this.collection.create({
actorId: currentUser.uid,
actorDisplayName: currentUser.displayName,
actorType: 'users',
verb: 'comment',
message: message,
creationDateTime: (new Date()).toUTCString()
}, {
at: 0,
// wait for real creation before adding
wait: true,
success: function(model) {
self._onSubmitSuccess(model, $form);
},
error: function() {
self._onSubmitError($form, undefined);
}
});
}
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;
}
});
OCA.Comments.CommentsTabView = CommentsTabView;
})(OC, OCA);