nextcloud/apps/comments/src/commentstabview.js

/* eslint-disable */
/**
 * 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.getCurrentUser().uid) {
					$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')
				var $message = $form.find('.message')

				$submit.removeClass('hidden')
				$loading.addClass('hidden')
				$message.prop('contenteditable', true)
				$message.text('')
			},

			_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').toString()
					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)