Move Comments to compiled handlebars

Signed-off-by: Roeland Jago Douma <roeland@famdouma.nl>

6 files changed, 128 insertions, 56 deletions

diff --git a/apps/comments/js/commentstabview.js b/apps/comments/js/commentstabview.js
index 28382c8b67e..35e73d3f4a6 100644
--- a/apps/comments/js/commentstabview.js
+++ b/apps/comments/js/commentstabview.js
@@ -11,49 +11,6 @@
 /* global Handlebars, escapeHTML */
 
 (function(OC, OCA) {
-	var TEMPLATE =
-		'<ul class="comments">' +
-		'</ul>' +
-		'<div class="emptycontent hidden"><div class="icon-comment"></div>' +
-		'<p>{{emptyResultLabel}}</p></div>' +
-		'<input type="button" class="showMore hidden" value="{{moreLabel}}"' +
-		' name="show-more" id="show-more" />' +
-		'<div class="loading hidden" style="height: 50px"></div>';
-
-	var EDIT_COMMENT_TEMPLATE =
-		'<{{tag}} class="newCommentRow comment" data-id="{{id}}">' +
-		'    <div class="authorRow">' +
-		'        <div class="avatar currentUser" data-username="{{actorId}}"></div>' +
-		'        <div class="author currentUser">{{actorDisplayName}}</div>' +
-		'{{#if isEditMode}}' +
-		'        <div class="action-container">' +
-		'            <a href="#" class="action cancel icon icon-close has-tooltip" title="{{cancelText}}"></a>' +
-		'        </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>'+
-		'    </form>' +
-		'</{{tag}}>';
-
-	var COMMENT_TEMPLATE =
-		'<li class="comment{{#if isUnread}} unread{{/if}}{{#if isLong}} collapsed{{/if}}" data-id="{{id}}">' +
-		'    <div class="authorRow">' +
-		'        <div class="avatar{{#if isUserAuthor}} currentUser{{/if}}" {{#if actorId}}data-username="{{actorId}}"{{/if}}> </div>' +
-		'        <div class="author{{#if isUserAuthor}} currentUser{{/if}}">{{actorDisplayName}}</div>' +
-		'{{#if isUserAuthor}}' +
-		'        <a href="#" class="action more icon icon-more has-tooltip"></a>' +
-		'        <div class="deleteLoading icon-loading-small hidden"></div>' +
-		'{{/if}}' +
-		'        <div class="date has-tooltip live-relative-timestamp" data-timestamp="{{timestamp}}" title="{{altDate}}">{{date}}</div>' +
-		'    </div>' +
-		'    <div class="message">{{{formattedMessage}}}</div>' +
-		'{{#if isLong}}' +
-		'    <div class="message-overlay"></div>' +
-		'{{/if}}' +
-		'</li>';
 
 	/**
 	 * @memberof OCA.Comments
@@ -93,22 +50,16 @@
 		},
 
 		template: function(params) {
-			if (!this._template) {
-				this._template = Handlebars.compile(TEMPLATE);
-			}
 			var currentUser = OC.getCurrentUser();
-			return this._template(_.extend({
+			return OCA.Comments.Templates['view'](_.extend({
 				actorId: currentUser.uid,
 				actorDisplayName: currentUser.displayName
 			}, params));
 		},
 
 		editCommentTemplate: function(params) {
-			if (!this._editCommentTemplate) {
-				this._editCommentTemplate = Handlebars.compile(EDIT_COMMENT_TEMPLATE);
-			}
 			var currentUser = OC.getCurrentUser();
-			return this._editCommentTemplate(_.extend({
+			return OCA.Comments.Templates['edit_comment'](_.extend({
 				actorId: currentUser.uid,
 				actorDisplayName: currentUser.displayName,
 				newMessagePlaceholder: t('comments', 'New comment …'),
@@ -119,10 +70,6 @@
 		},
 
 		commentTemplate: function(params) {
-			if (!this._commentTemplate) {
-				this._commentTemplate = Handlebars.compile(COMMENT_TEMPLATE);
-			}
-
 			params = _.extend({
 				editTooltip: t('comments', 'Edit comment'),
 				isUserAuthor: OC.getCurrentUser().uid === params.actorId,
@@ -135,7 +82,7 @@
 				params.actorDisplayName = t('comments', '[Deleted user]');
 			}
 
-			return this._commentTemplate(params);
+			return OCA.Comments.Templates['comment'](params);
 		},
 
 		getLabel: function() {
diff --git a/apps/comments/js/merged.json b/apps/comments/js/merged.json
index d5b2b882334..8f40b5621a6 100644
--- a/apps/comments/js/merged.json
+++ b/apps/comments/js/merged.json
@@ -1,5 +1,6 @@
 [
   "app.js",
+  "templates.js",
   "commentmodel.js",
   "commentcollection.js",
   "commentsummarymodel.js",
diff --git a/apps/comments/js/templates.js b/apps/comments/js/templates.js
new file mode 100644
index 00000000000..90ded7fe4e5
--- /dev/null
+++ b/apps/comments/js/templates.js
@@ -0,0 +1,87 @@
+(function() {
+  var template = Handlebars.template, templates = OCA.Comments.Templates = OCA.Comments.Templates || {};
+templates['comment'] = template({"1":function(container,depth0,helpers,partials,data) {
+    return " unread";
+},"3":function(container,depth0,helpers,partials,data) {
+    return " collapsed";
+},"5":function(container,depth0,helpers,partials,data) {
+    return " currentUser";
+},"7":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return "data-username=\""
+    + 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)))
+    + "\"";
+},"9":function(container,depth0,helpers,partials,data) {
+    return "			<a href=\"#\" class=\"action more icon icon-more has-tooltip\"></a>\n			<div class=\"deleteLoading icon-loading-small hidden\"></div>\n";
+},"11":function(container,depth0,helpers,partials,data) {
+    return "		<div class=\"message-overlay\"></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 "<li class=\"comment"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isUnread : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isLong : depth0),{"name":"if","hash":{},"fn":container.program(3, data, 0),"inverse":container.noop,"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\">\n		<div class=\"avatar"
+    + ((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.actorId : depth0),{"name":"if","hash":{},"fn":container.program(7, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "> </div>\n		<div class=\"author"
+    + ((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 : "")
+    + "\">"
+    + 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"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isUserAuthor : depth0),{"name":"if","hash":{},"fn":container.program(9, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "		<div class=\"date has-tooltip live-relative-timestamp\" 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"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isLong : depth0),{"name":"if","hash":{},"fn":container.program(11, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "</li>\n";
+},"useData":true});
+templates['edit_comment'] = template({"1":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return "			<div class=\"action-container\">\n				<a href=\"#\" class=\"action cancel icon icon-close has-tooltip\" title=\""
+    + container.escapeExpression(((helper = (helper = helpers.cancelText || (depth0 != null ? depth0.cancelText : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"cancelText","hash":{},"data":data}) : helper)))
+    + "\"></a>\n			</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 "<"
+    + alias4(((helper = (helper = helpers.tag || (depth0 != null ? depth0.tag : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"tag","hash":{},"data":data}) : helper)))
+    + " class=\"newCommentRow comment\" 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\">\n		<div class=\"avatar currentUser\" data-username=\""
+    + 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		<div class=\"author currentUser\">"
+    + 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"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.isEditMode : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"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	</form>\n'</"
+    + alias4(((helper = (helper = helpers.tag || (depth0 != null ? depth0.tag : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"tag","hash":{},"data":data}) : helper)))
+    + ">\n";
+},"useData":true});
+templates['view'] = 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 "<ul class=\"comments\">\n</ul>\n<div class=\"emptycontent hidden\"><div class=\"icon-comment\"></div>\n	<p>"
+    + alias4(((helper = (helper = helpers.emptyResultLabel || (depth0 != null ? depth0.emptyResultLabel : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"emptyResultLabel","hash":{},"data":data}) : helper)))
+    + "</p></div>\n<input type=\"button\" class=\"showMore hidden\" value=\""
+    + alias4(((helper = (helper = helpers.moreLabel || (depth0 != null ? depth0.moreLabel : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"moreLabel","hash":{},"data":data}) : helper)))
+    + "\" name=\"show-more\" id=\"show-more\" />\n<div class=\"loading hidden\" style=\"height: 50px\"></div>'\n";
+},"useData":true});
+})();
\ No newline at end of file
diff --git a/apps/comments/js/templates/comment.handlebars b/apps/comments/js/templates/comment.handlebars
new file mode 100644
index 00000000000..c1a1091a4e0
--- /dev/null
+++ b/apps/comments/js/templates/comment.handlebars
@@ -0,0 +1,15 @@
+<li class="comment{{#if isUnread}} unread{{/if}}{{#if isLong}} collapsed{{/if}}" data-id="{{id}}">
+	<div class="authorRow">
+		<div class="avatar{{#if isUserAuthor}} currentUser{{/if}}" {{#if actorId}}data-username="{{actorId}}"{{/if}}> </div>
+		<div class="author{{#if isUserAuthor}} currentUser{{/if}}">{{actorDisplayName}}</div>
+		{{#if isUserAuthor}}
+			<a href="#" class="action more icon icon-more has-tooltip"></a>
+			<div class="deleteLoading icon-loading-small hidden"></div>
+		{{/if}}
+		<div class="date has-tooltip live-relative-timestamp" data-timestamp="{{timestamp}}" title="{{altDate}}">{{date}}</div>
+	</div>
+	<div class="message">{{{formattedMessage}}}</div>
+	{{#if isLong}}
+		<div class="message-overlay"></div>
+	{{/if}}
+</li>
diff --git a/apps/comments/js/templates/edit_comment.handlebars b/apps/comments/js/templates/edit_comment.handlebars
new file mode 100644
index 00000000000..05f89ec598a
--- /dev/null
+++ b/apps/comments/js/templates/edit_comment.handlebars
@@ -0,0 +1,16 @@
+<{{tag}} class="newCommentRow comment" data-id="{{id}}">
+	<div class="authorRow">
+		<div class="avatar currentUser" data-username="{{actorId}}"></div>
+		<div class="author currentUser">{{actorDisplayName}}</div>
+		{{#if isEditMode}}
+			<div class="action-container">
+				<a href="#" class="action cancel icon icon-close has-tooltip" title="{{cancelText}}"></a>
+			</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>'+
+	</form>
+'</{{tag}}>
diff --git a/apps/comments/js/templates/view.handlebars b/apps/comments/js/templates/view.handlebars
new file mode 100644
index 00000000000..5f52a42861d
--- /dev/null
+++ b/apps/comments/js/templates/view.handlebars
@@ -0,0 +1,6 @@
+<ul class="comments">
+</ul>
+<div class="emptycontent hidden"><div class="icon-comment"></div>
+	<p>{{emptyResultLabel}}</p></div>
+<input type="button" class="showMore hidden" value="{{moreLabel}}" name="show-more" id="show-more" />
+<div class="loading hidden" style="height: 50px"></div>'