From b9bc2417e7a8dc81feb0abe20359bedaf864f790 Mon Sep 17 00:00:00 2001 From: "John Molakvoæ (skjnldsv)" Date: Wed, 25 Sep 2019 18:19:42 +0200 Subject: Comply to eslint MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- apps/comments/src/commentstabview.js | 1260 +++++++++++++++++----------------- 1 file changed, 630 insertions(+), 630 deletions(-) (limited to 'apps/comments/src/commentstabview.js') diff --git a/apps/comments/src/commentstabview.js b/apps/comments/src/commentstabview.js index 8b71fc1f87b..a638f46a2c6 100644 --- a/apps/comments/src/commentstabview.js +++ b/apps/comments/src/commentstabview.js @@ -1,3 +1,4 @@ +/* eslint-disable */ /* * Copyright (c) 2016 * @@ -17,252 +18,252 @@ */ 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') { + 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]'); - } + 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) { + 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; + var $li = $(li) + $li.find('.avatar').avatar(undefined, 32) + return $li + }, + sorter: function(q, items) { return items } + }, + displayTpl: function(item) { + return '
  • ' + + '' + + '' + + '' + + '' + escapeHTML(item.label) + '' + + '
    • ' }, - sorter: function (q, items) { return items; } - }, - displayTpl: function (item) { - return '
  • ' + - '' + - '' + - '' + - '' + escapeHTML(item.label) + '' + - '
    • '; - }, - insertTpl: function (item) { - return '' + - '' + - '' + - '' + - '' + escapeHTML(item.label) + '' + - ''; - }, - searchKey: "label" - }); - $target.on('inserted.atwho', function (je, $el) { - var editionMode = true; - s._postRenderItem( + insertTpl: function(item) { + return '' + + '' + + '' + + '' + + '' + escapeHTML(item.label) + '' + + '' + }, + 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(); + $(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._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); + this._autoCompleteRequestTimer = _.delay(function() { + if (!_.isUndefined(this._autoCompleteRequestCall)) { + this._autoCompleteRequestCall.abort() } - }); - }, 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'); - } - }, + 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()); + _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; - } + if (type !== 'REPORT') { + return + } - // find first unread comment - var firstUnreadComment = this.collection.findWhere({isUnread: true}); - if (firstUnreadComment) { + // 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.collection.updateReadMarker( + null, + { + success: function() { + fileInfoModel.set('commentsUnread', 0) + } } - } - ); - } - this.$el.find('.newCommentForm .message').focus(); - - }, + ) + } + this.$el.find('.newCommentForm .message').focus() + + }, - /** + /** * takes care of post-rendering after a new comment was added to the * collection * @@ -271,322 +272,321 @@ * @param options * @private */ - _onAddModel: function(model, collection, options) { + _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'))) { + 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; + return + } + var $updated = $(self.commentTemplate(self._formatItem(model))) + $comment.html($updated.html()) + self._postRenderItem($comment) } - 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; - } + _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)) { + 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); + return } - }); - }, - - _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.getCurrentUser().uid) { - $el.find('.authorRow .avatar, .authorRow .author').contactsMenu( - username, 0, $el.find('.authorRow')); - } + var self = this - 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); + // 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.getCurrentUser().uid) { + $el.find('.authorRow .avatar, .authorRow .author').contactsMenu( + username, 0, $el.find('.authorRow')) + } - this._postRenderMessage($message, editionMode); - }, + var $message = $el.find('.message') + if ($message.length === 0) { + // it is the case when writing a comment and mentioning a person + $message = $el + } - _postRenderMessage: function($el, editionMode) { - if (editionMode) { - return; - } + 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) + } + }) + } - $el.find('.avatar-name-wrapper').each(function() { - var $this = $(this); - var $avatar = $this.find('.avatar'); + this._postRenderMessage($message, editionMode) + }, - var user = $avatar.data('user'); - if (user !== OC.getCurrentUser().uid) { - $this.contactsMenu(user, 0, $this); + _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
    tags. */ - _formatMessage: function(message, mentions, editMode) { - message = escapeHTML(message).replace(/\n/g, '
    '); + _formatMessage: function(message, mentions, editMode) { + message = escapeHTML(message).replace(/\n/g, '
    ') - 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 + '"'); - } + 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'); - } + // 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); + 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) { + // 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 = '' + - '' + - ''; - - var isCurrentUser = (uid === OC.getCurrentUser().uid); - - return '' + - '' + - '' + - avatar + - '' + _.escape(displayName) + '' + - '' + - ''; - }, - - nextPage: function() { - if (this._loading || !this.collection.hasMoreResults()) { - return; - } + return p1 + displayName + } + ) + } + if (editMode !== true) { + message = OCP.Comments.plainToRich(message) + } + return message + }, + + _composeHTMLMention: function(uid, displayName) { + var avatar = '' + + '' + + '' + + var isCurrentUser = (uid === OC.getCurrentUser().uid) + + return '' + + '' + + '' + + avatar + + '' + _.escape(displayName) + '' + + '' + + '' + }, + + 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'); - } + 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(); - } - }, + 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})); + _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; - }, + return false + }, - _onClickShowMore: function(ev) { - ev.preventDefault(); - this.nextPage(); - }, + _onClickShowMore: function(ev) { + ev.preventDefault() + this.nextPage() + }, - /** + /** * takes care of updating comment element states after submit (either new * comment or edit). * @@ -594,106 +594,106 @@ * @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); - } - }); + _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() + var userId = $this.find('.avatar').data('username') + if (userId.indexOf(' ') !== -1) { + $inserted.html('@"' + userId + '"') + } else { + $inserted.html('@' + userId) + } + }) - $comment.html(OCP.Comments.richToPlain($comment.html())); + $comment.html(OCP.Comments.richToPlain($comment.html())) - var oldHtml; - var html = $comment.html(); - do { + var oldHtml + var html = $comment.html() + do { // replace works one by one - oldHtml = html; - html = oldHtml.replace("
    ", "\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; - } + oldHtml = html + html = oldHtml.replace('
    ', '\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'); + $commentField.prop('contenteditable', false) + $submit.addClass('hidden') + $loading.removeClass('hidden') - message = this._commentBodyHTML2Plain($commentField); - if (commentId) { + 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()) { + 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(); + var $row = $form.closest('.comment') + $row.data('commentEl').removeClass('hidden') + $row.remove() + } + }, + error: function() { + self._onSubmitError($form, commentId) } - }, - 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); - } - }); - } + }) + } 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; - }, + return false + }, - /** + /** * takes care of updating the UI after an error on submit (either new * comment or edit). * @@ -701,51 +701,51 @@ * @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'}); - } - }, + _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(); - } - }, + _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); - }, + _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; - } - }); + _isLong: function(message) { + return message.length > 250 || (message.match(/\n/g) || []).length > 1 + } + }) - OCA.Comments.CommentsTabView = CommentsTabView; -})(OC, OCA); + OCA.Comments.CommentsTabView = CommentsTabView +})(OC, OCA) -- cgit v1.2.3