123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751 |
- /*
- * 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) {
- 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;
- if (mentions[i].mentionId.indexOf(' ') !== -1) {
- mention = _.escape('@"' + mentions[i].mentionId + '"');
- }
-
- // escape possible regex characters in the name
- mention = mention.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
- var regex = new RegExp("(^|\\s)(" + mention + ")\\b", 'g');
- if (mentions[i].mentionId.indexOf(' ') !== -1) {
- regex = new RegExp("(^|\\s)(" + mention + ")", '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(regex,
- 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),
- $inserted = $this.parent(),
- userId = $this.find('.avatar').data('username');
- if (userId.indexOf(' ') !== -1) {
- $inserted.html('@"' + userId + '"');
- } else {
- $inserted.html('@' + userId);
- }
- });
-
- $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);
|