Format rich messages in chat frontend

The RichObjectStringParser was copied from the Notifications app and
adapted to be used in the chat (support for file references was removed,
"-" is taken into account too in parameter IDs, only local users are
taken into account, and if the display name of a mention is empty the
user ID is used instead).

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

css/comments.scss

@@ -247,3 +247,7 @@
 #commentsTabView .comment.showDate .authorRow {
 	display: block;
 }
+
+#commentsTabView .comment .mention-user {
+	font-weight: bold;
+}

js/models/chatmessage.js

@@ -48,7 +48,8 @@
 			actorId: '',
 			actorDisplayName: '',
 			timestamp: 0,
-			message: ''
+			message: '',
+			messageParameters: []
 		},
 
 		url: function() {

js/richobjectstringparser.js

@@ -0,0 +1,76 @@
+/* global OCA, Handlebars */
+
+/**
+ * @copyright (c) 2016 Joas Schilling <coding@schilljs.com>
+ *
+ * @author Joas Schilling <coding@schilljs.com>
+ *
+ * This file is licensed under the Affero General Public License version 3 or
+ * later. See the COPYING file.
+ */
+
+(function(OCA, Handlebars) {
+
+	OCA.SpreedMe.RichObjectStringParser = {
+
+		_userLocalTemplate: '<span class="mention-user">@{{id}}</span>',
+
+		_unknownTemplate: '<strong>{{name}}</strong>',
+		_unknownLinkTemplate: '<a href="{{link}}">{{name}}</a>',
+
+		/**
+		 * @param {string} subject
+		 * @param {Object} parameters
+		 * @returns {string}
+		 */
+		parseMessage: function(subject, parameters) {
+			var self = this,
+				regex = /\{([a-z0-9-]+)\}/gi,
+				matches = subject.match(regex);
+
+			_.each(matches, function(parameter) {
+				parameter = parameter.substring(1, parameter.length - 1);
+				var parsed = self.parseParameter(parameters[parameter]);
+
+				subject = subject.replace('{' + parameter + '}', parsed);
+			});
+
+			return subject;
+		},
+
+		/**
+		 * @param {Object} parameter
+		 * @param {string} parameter.type
+		 * @param {string} parameter.id
+		 * @param {string} parameter.name
+		 * @param {string} parameter.link
+		 */
+		parseParameter: function(parameter) {
+			switch (parameter.type) {
+				case 'user':
+					if (!this.userLocalTemplate) {
+						this.userLocalTemplate = Handlebars.compile(this._userLocalTemplate);
+					}
+					if (!parameter.name) {
+						parameter.name = parameter.id;
+					}
+					return this.userLocalTemplate(parameter);
+
+				default:
+					if (!_.isUndefined(parameter.link)) {
+						if (!this.unknownLinkTemplate) {
+							this.unknownLinkTemplate = Handlebars.compile(this._unknownLinkTemplate);
+						}
+						return this.unknownLinkTemplate(parameter);
+					}
+
+					if (!this.unknownTemplate) {
+						this.unknownTemplate = Handlebars.compile(this._unknownTemplate);
+					}
+					return this.unknownTemplate(parameter);
+			}
+		}
+
+	};
+
+})(OCA, Handlebars);

js/views/chatview.js

@@ -206,6 +206,8 @@
 
 			var formattedMessage = escapeHTML(commentModel.get('message')).replace(/\n/g, '<br/>');
 			formattedMessage = OCP.Comments.plainToRich(formattedMessage);
+			formattedMessage = OCA.SpreedMe.RichObjectStringParser.parseMessage(
+				formattedMessage, commentModel.get('messageParameters'));
 
 			var data = _.extend({}, commentModel.attributes, {
 				actorDisplayName: actorDisplayName,

templates/index-public.php

@@ -25,6 +25,7 @@ script(
 		'views/roomlistview',
 		'views/sidebarview',
 		'views/tabview',
+		'richobjectstringparser',
 		'simplewebrtc',
 		'webrtc',
 		'signaling',

templates/index.php

@@ -28,6 +28,7 @@ script(
 		'views/roomlistview',
 		'views/sidebarview',
 		'views/tabview',
+		'richobjectstringparser',
 		'simplewebrtc',
 		'webrtc',
 		'signaling',