Merge pull request #1310 from nextcloud/move-chatview-and-richobjectstringparser-to-precompiled-handlebars-templates

Move ChatView and RichObjectStringParser to precompiled Handlebars templates

15 files changed, 214 insertions, 78 deletions

diff --git a/Makefile b/Makefile
index da5e92638..1b769fcd5 100644
--- a/Makefile
+++ b/Makefile
@@ -42,6 +42,8 @@ appstore: clean install-deps
 	--exclude=bower.json \
 	--exclude=.bowerrc \
 	--exclude=/build \
+	--exclude=check-handlebars-templates.sh \
+	--exclude=compile-handlebars-templates.sh \
 	--exclude=docs \
 	--exclude=.drone.yml \
 	--exclude=.eslintignore \
@@ -52,6 +54,7 @@ appstore: clean install-deps
 	--exclude=.gitignore \
 	--exclude=.jscsrc \
 	--exclude=.jshintignore \
+	--exclude=js/views/templates \
 	--exclude=js/tests \
 	--exclude=karma.conf.js \
 	--exclude=l10n/no-php \
diff --git a/compile-handlebars-templates.sh b/compile-handlebars-templates.sh
index 663a5bd83..8111f8555 100755
--- a/compile-handlebars-templates.sh
+++ b/compile-handlebars-templates.sh
@@ -4,3 +4,5 @@
 export PATH=./node_modules/.bin/:$PATH
 
 handlebars -n OCA.VideoCalls.Admin.Templates js/admin/templates/ -f js/admin/templates.js
+
+handlebars -n OCA.Talk.Views.Templates js/views/templates/ -f js/views/templates.js
diff --git a/js/views/chatview.js b/js/views/chatview.js
index eccf5f858..bf2e6750e 100644
--- a/js/views/chatview.js
+++ b/js/views/chatview.js
@@ -1,4 +1,4 @@
-/* global autosize, Handlebars, Marionette, moment, OC, OCA, OCP */
+/* global autosize, Marionette, moment, OC, OCA, OCP */
 
 /**
  *
@@ -21,51 +21,13 @@
  *
  */
 
-(function(OCA, OC, OCP, Marionette, Handlebars, autosize, moment) {
+(function(OCA, OC, OCP, Marionette, autosize, moment) {
 	'use strict';
 
 	OCA.SpreedMe = OCA.SpreedMe || {};
+	OCA.Talk = OCA.Talk || {};
 	OCA.SpreedMe.Views = OCA.SpreedMe.Views || {};
-
-	var TEMPLATE =
-		'<ul class="comments">' +
-		'</ul>' +
-		'<div class="emptycontent"><div class="icon-comment"></div>' +
-		'<p>{{emptyResultLabel}}</p></div>' +
-		'<div class="loading hidden" style="height: 50px"></div>';
-
-	var ADD_COMMENT_TEMPLATE =
-		'<div class="newCommentRow comment">' +
-		'    <div class="authorRow currentUser">' +
-		'        <div class="avatar" data-user-id="{{actorId}}"></div>' +
-		'        {{#if actorId}}' +
-		'            <div class="author">{{actorDisplayName}}</div>' +
-		'        {{else}}' +
-		'            <div class="guest-name"></div>' +
-		'        {{/if}}' +
-		'    </div>' +
-		'    <form class="newCommentForm">' +
-		'        <div contentEditable="true" class="message" data-placeholder="{{newMessagePlaceholder}}">{{message}}</div>' +
-		'        <input class="submit icon-confirm has-tooltip" type="submit" value="" title="{{submitText}}"/>' +
-		'        <div class="submitLoading icon-loading-small hidden"></div>'+
-		'        {{#if actorId}}' +
-		'        <button class="share icon-add has-tooltip" title="{{shareText}}"></button>' +
-		'        <div class="shareLoading icon-loading-small hidden"></div>'+
-		'        {{/if}}' +
-		'    </form>' +
-		'</div>';
-
-	var COMMENT_TEMPLATE =
-		'<li class="comment{{#if isNotSystemMessage}}{{else}} systemMessage{{/if}}" data-id="{{id}}">' +
-		'    <div class="authorRow{{#if isUserAuthor}} currentUser{{/if}}{{#if isGuest}} guestUser{{/if}}">' +
-		'        {{#if isNotSystemMessage}}' +
-		'        <div class="avatar" data-user-id="{{#if isGuest}}{{else}}{{actorId}}{{/if}}" data-user-display-name="{{actorDisplayName}}"> </div>' +
-		'        <div class="author">{{actorDisplayName}}</div>' +
-		'        {{/if}}' +
-		'        <div class="date has-tooltip{{#if relativeDate}} live-relative-timestamp{{/if}}" data-timestamp="{{timestamp}}" title="{{altDate}}">{{date}}</div>' +
-		'    </div>' +
-		'    <div class="message">{{{formattedMessage}}}</div>' +
-		'</li>';
+	OCA.Talk.Views = OCA.Talk.Views || {};
 
 	var ChatView = Marionette.View.extend({
 
@@ -201,14 +163,19 @@
 			document.execCommand('insertText', false, text);
 		},
 
-		template: Handlebars.compile(TEMPLATE),
+		template: function(context) {
+			// OCA.Talk.Views.Templates may not have been initialized when
+			// this view is initialized, so the template can not be directly
+			// assigned.
+			return OCA.Talk.Views.Templates['chatview'](context);
+		},
 		templateContext: {
 			emptyResultLabel: t('spreed', 'No messages yet, start the conversation!')
 		},
 
 		addCommentTemplate: function(params) {
 			if (!this._addCommentTemplate) {
-				this._addCommentTemplate = Handlebars.compile(ADD_COMMENT_TEMPLATE);
+				this._addCommentTemplate = OCA.Talk.Views.Templates['chatview_add_comment'];
 			}
 
 			return this._addCommentTemplate(_.extend({
@@ -222,7 +189,7 @@
 
 		commentTemplate: function(params) {
 			if (!this._commentTemplate) {
-				this._commentTemplate = Handlebars.compile(COMMENT_TEMPLATE);
+				this._commentTemplate = OCA.Talk.Views.Templates['chatview_comment'];
 			}
 
 			params = _.extend({
@@ -371,7 +338,7 @@
 
 			var formattedMessage = escapeHTML(commentModel.get('message')).replace(/\n/g, '<br/>');
 			formattedMessage = OCP.Comments.plainToRich(formattedMessage);
-			formattedMessage = OCA.SpreedMe.RichObjectStringParser.parseMessage(
+			formattedMessage = OCA.SpreedMe.Views.RichObjectStringParser.parseMessage(
 				formattedMessage, commentModel.get('messageParameters'));
 
 			var data = _.extend({}, commentModel.attributes, {
@@ -756,4 +723,4 @@
 
 	OCA.SpreedMe.Views.ChatView = ChatView;
 
-})(OCA, OC, OCP, Marionette, Handlebars, autosize, moment);
+})(OCA, OC, OCP, Marionette, autosize, moment);
diff --git a/js/richobjectstringparser.js b/js/views/richobjectstringparser.js
index 83a0360f8..02f7a25d1 100644
--- a/js/richobjectstringparser.js
+++ b/js/views/richobjectstringparser.js
@@ -1,4 +1,4 @@
-/* global OC, OCA, Handlebars */
+/* global OC, OCA */
 
 /**
  * @copyright (c) 2016 Joas Schilling <coding@schilljs.com>
@@ -9,29 +9,9 @@
  * later. See the COPYING file.
  */
 
-(function(OC, OCA, Handlebars) {
+(function(OC, OCA) {
 
-	OCA.SpreedMe.RichObjectStringParser = {
-
-		_userLocalTemplate: '' +
-				'<span class="atwho-inserted" contenteditable="false">' +
-					'<span class="mention-user avatar-name-wrapper {{#if isCurrentUser}}currentUser{{/if}}">' +
-						'<span class="avatar" ' +
-								'data-user-id="{{id}}" ' +
-								'data-user-display-name="{{name}}">' +
-						'</span>' +
-						'<strong>{{name}}</strong>' +
-					'</span>' +
-				'</span>',
-
-		_filePreviewTemplate: '' +
-				'<a href="{{link}}" class="filePreviewContainer" target="_blank" rel="noopener noreferrer">' +
-					'<span class="filePreview" data-file-id="{{id}}"></span>' +
-					'<strong>{{name}}</strong>' +
-				'</a>',
-
-		_unknownTemplate: '<strong>{{name}}</strong>',
-		_unknownLinkTemplate: '<a href="{{link}}" class="external" target="_blank" rel="noopener noreferrer"><strong>{{name}}</strong></a>',
+	OCA.SpreedMe.Views.RichObjectStringParser = {
 
 		/**
 		 * @param {string} subject
@@ -69,7 +49,7 @@
 			switch (parameter.type) {
 				case 'user':
 					if (!this.userLocalTemplate) {
-						this.userLocalTemplate = Handlebars.compile(this._userLocalTemplate);
+						this.userLocalTemplate = OCA.Talk.Views.Templates['richobjectstringparser_userlocal'];
 					}
 					if (!parameter.name) {
 						parameter.name = parameter.id;
@@ -81,20 +61,20 @@
 
 				case 'file':
 					if (!this.filePreviewTemplate) {
-						this.filePreviewTemplate = Handlebars.compile(this._filePreviewTemplate);
+						this.filePreviewTemplate = OCA.Talk.Views.Templates['richobjectstringparser_filepreview'];
 					}
 					return this.filePreviewTemplate(parameter);
 
 				default:
 					if (!_.isUndefined(parameter.link)) {
 						if (!this.unknownLinkTemplate) {
-							this.unknownLinkTemplate = Handlebars.compile(this._unknownLinkTemplate);
+							this.unknownLinkTemplate = OCA.Talk.Views.Templates['richobjectstringparser_unknownlink'];
 						}
 						return this.unknownLinkTemplate(parameter);
 					}
 
 					if (!this.unknownTemplate) {
-						this.unknownTemplate = Handlebars.compile(this._unknownTemplate);
+						this.unknownTemplate = OCA.Talk.Views.Templates['richobjectstringparser_unknown'];
 					}
 					return this.unknownTemplate(parameter);
 			}
@@ -102,4 +82,4 @@
 
 	};
 
-})(OC, OCA, Handlebars);
+})(OC, OCA);
diff --git a/js/views/templates.js b/js/views/templates.js
new file mode 100644
index 000000000..71fbccc0f
--- /dev/null
+++ b/js/views/templates.js
@@ -0,0 +1,131 @@
+(function() {
+  var template = Handlebars.template, templates = OCA.Talk.Views.Templates = OCA.Talk.Views.Templates || {};
+templates['chatview'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return "<ul class=\"comments\"></ul>\n<div class=\"emptycontent\">\n	<div class=\"icon-comment\"></div>\n	<p>"
+    + container.escapeExpression(((helper = (helper = helpers.emptyResultLabel || (depth0 != null ? depth0.emptyResultLabel : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"emptyResultLabel","hash":{},"data":data}) : helper)))
+    + "</p>\n</div>\n<div class=\"loading hidden\" style=\"height: 50px\"></div>\n";
+},"useData":true});
+templates['chatview_add_comment'] = template({"1":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return "		<div class=\"author\">"
+    + container.escapeExpression(((helper = (helper = helpers.actorDisplayName || (depth0 != null ? depth0.actorDisplayName : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"actorDisplayName","hash":{},"data":data}) : helper)))
+    + "</div>\n";
+},"3":function(container,depth0,helpers,partials,data) {
+    return "		<div class=\"guest-name\"></div>\n";
+},"5":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return "		<button class=\"share icon-add has-tooltip\" title=\""
+    + container.escapeExpression(((helper = (helper = helpers.shareText || (depth0 != null ? depth0.shareText : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"shareText","hash":{},"data":data}) : helper)))
+    + "\"></button>\n		<div class=\"shareLoading icon-loading-small hidden\"></div>\n";
+},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+    var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "<div class=\"newCommentRow comment\">\n	<div class=\"authorRow currentUser\">\n		<div class=\"avatar\" data-user-id=\""
+    + alias4(((helper = (helper = helpers.actorId || (depth0 != null ? depth0.actorId : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"actorId","hash":{},"data":data}) : helper)))
+    + "\"></div>\n"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.actorId : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data})) != null ? stack1 : "")
+    + "	</div>\n	<form class=\"newCommentForm\">\n		<div contentEditable=\"true\" class=\"message\" data-placeholder=\""
+    + alias4(((helper = (helper = helpers.newMessagePlaceholder || (depth0 != null ? depth0.newMessagePlaceholder : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"newMessagePlaceholder","hash":{},"data":data}) : helper)))
+    + "\">"
+    + alias4(((helper = (helper = helpers.message || (depth0 != null ? depth0.message : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"message","hash":{},"data":data}) : helper)))
+    + "</div>\n		<input class=\"submit icon-confirm has-tooltip\" type=\"submit\" value=\"\" title=\""
+    + alias4(((helper = (helper = helpers.submitText || (depth0 != null ? depth0.submitText : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"submitText","hash":{},"data":data}) : helper)))
+    + "\"/>\n		<div class=\"submitLoading icon-loading-small hidden\"></div>\n"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.actorId : depth0),{"name":"if","hash":{},"fn":container.program(5, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "	</form>\n</div>\n";
+},"useData":true});
+templates['chatview_comment'] = template({"1":function(container,depth0,helpers,partials,data) {
+    return "";
+},"3":function(container,depth0,helpers,partials,data) {
+    return " systemMessage";
+},"5":function(container,depth0,helpers,partials,data) {
+    return " currentUser";
+},"7":function(container,depth0,helpers,partials,data) {
+    return " guestUser";
+},"9":function(container,depth0,helpers,partials,data) {
+    var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "		<div class=\"avatar\" data-user-id=\""
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isGuest : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(10, data, 0),"data":data})) != null ? stack1 : "")
+    + "\" data-user-display-name=\""
+    + alias4(((helper = (helper = helpers.actorDisplayName || (depth0 != null ? depth0.actorDisplayName : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"actorDisplayName","hash":{},"data":data}) : helper)))
+    + "\"></div>\n		<div class=\"author\">"
+    + alias4(((helper = (helper = helpers.actorDisplayName || (depth0 != null ? depth0.actorDisplayName : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"actorDisplayName","hash":{},"data":data}) : helper)))
+    + "</div>\n";
+},"10":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return container.escapeExpression(((helper = (helper = helpers.actorId || (depth0 != null ? depth0.actorId : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"actorId","hash":{},"data":data}) : helper)));
+},"12":function(container,depth0,helpers,partials,data) {
+    return " live-relative-timestamp";
+},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+    var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "<li class=\"comment"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isNotSystemMessage : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data})) != null ? stack1 : "")
+    + "\" data-id=\""
+    + alias4(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"id","hash":{},"data":data}) : helper)))
+    + "\">\n	<div class=\"authorRow"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isUserAuthor : depth0),{"name":"if","hash":{},"fn":container.program(5, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isGuest : depth0),{"name":"if","hash":{},"fn":container.program(7, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "\">\n"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isNotSystemMessage : depth0),{"name":"if","hash":{},"fn":container.program(9, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "		<div class=\"date has-tooltip"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.relativeDate : depth0),{"name":"if","hash":{},"fn":container.program(12, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "\" data-timestamp=\""
+    + alias4(((helper = (helper = helpers.timestamp || (depth0 != null ? depth0.timestamp : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"timestamp","hash":{},"data":data}) : helper)))
+    + "\" title=\""
+    + alias4(((helper = (helper = helpers.altDate || (depth0 != null ? depth0.altDate : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"altDate","hash":{},"data":data}) : helper)))
+    + "\">"
+    + alias4(((helper = (helper = helpers.date || (depth0 != null ? depth0.date : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"date","hash":{},"data":data}) : helper)))
+    + "</div>\n	</div>\n	<div class=\"message\">"
+    + ((stack1 = ((helper = (helper = helpers.formattedMessage || (depth0 != null ? depth0.formattedMessage : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"formattedMessage","hash":{},"data":data}) : helper))) != null ? stack1 : "")
+    + "</div>\n</li>\n";
+},"useData":true});
+templates['richobjectstringparser_filepreview'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+    var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "<a href=\""
+    + alias4(((helper = (helper = helpers.link || (depth0 != null ? depth0.link : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"link","hash":{},"data":data}) : helper)))
+    + "\" class=\"filePreviewContainer\" target=\"_blank\" rel=\"noopener noreferrer\">\n	<span class=\"filePreview\" data-file-id=\""
+    + alias4(((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"id","hash":{},"data":data}) : helper)))
+    + "\"></span>\n	<strong>"
+    + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
+    + "</strong>\n</a>\n";
+},"useData":true});
+templates['richobjectstringparser_unknown'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return "<strong>"
+    + container.escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"name","hash":{},"data":data}) : helper)))
+    + "</strong>\n";
+},"useData":true});
+templates['richobjectstringparser_unknownlink'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+    var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "<a href=\""
+    + alias4(((helper = (helper = helpers.link || (depth0 != null ? depth0.link : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"link","hash":{},"data":data}) : helper)))
+    + "\" class=\"external\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>"
+    + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
+    + "</strong></a>\n";
+},"useData":true});
+templates['richobjectstringparser_userlocal'] = template({"1":function(container,depth0,helpers,partials,data) {
+    return "currentUser";
+},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+    var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "<span class=\"atwho-inserted\" contenteditable=\"false\">\