Move CallButton to precompiled Handlebars templates

In Nextcloud 15 the default Content Security Policy disallows unsafe
eval expressions, so Handlebars templates can no longer be compiled at
runtime.

For the time being that default Content Security Policy was lifted for
Talk so "Handlebars.compile" could still be used. However, this only
applies to Talk itself; when using Talk components in other apps they
must abide to the Content Security Policy of those apps. As CallButton
is going to be used in the Files app it has been moved to precompiled
Handlebars templates (which are still compatible with the regular Talk
UI).

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

3 files changed, 50 insertions, 15 deletions

diff --git a/js/views/callbutton.js b/js/views/callbutton.js
index f60f438a0..f62bf1037 100644
--- a/js/views/callbutton.js
+++ b/js/views/callbutton.js
@@ -1,4 +1,4 @@
-/* global Marionette, Handlebars */
+/* global Marionette */
 
 /**
  *
@@ -21,34 +21,33 @@
  *
  */
 
-(function(OCA, Marionette, Handlebars) {
+(function(OCA, Marionette) {
 
 	'use strict';
 
 	OCA.SpreedMe = OCA.SpreedMe || {};
+	OCA.Talk = OCA.Talk || {};
 	OCA.SpreedMe.Views = OCA.SpreedMe.Views || {};
-
-	var TEMPLATE =
-		'{{#if isInCall}}' +
-		'	<button class="leave-call primary">' + t('spreed', 'Leave call') + '</button>' +
-		'{{else}}' +
-		'	{{#if hasCall}}' +
-		'	<button class="join-call call-ongoing primary">' + t('spreed', 'Join call') + '</button>' +
-		'	{{else}}' +
-		'	<button class="join-call primary">' + t('spreed', 'Start call') + '</button>' +
-		'	{{/if}}' +
-		'{{/if}}';
+	OCA.Talk.Views = OCA.Talk.Views || {};
 
 	var CallButton  = Marionette.View.extend({
 
 		className: 'call-button',
 
-		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['callbutton'](context);
+		},
 
 		templateContext: function() {
 			return {
 				isInCall: (this.model.get('participantFlags') & OCA.SpreedMe.app.FLAG_IN_CALL) !== 0,
 				hasCall: this.model.get('hasCall'),
+				leaveCallText: t('spreed', 'Leave call'),
+				joinCallText: t('spreed', 'Join call'),
+				startCallText: t('spreed', 'Start call'),
 			};
 		},
 
@@ -91,4 +90,4 @@
 
 	OCA.SpreedMe.Views.CallButton = CallButton;
 
-})(OCA, Marionette, Handlebars);
+})(OCA, Marionette);
diff --git a/js/views/templates.js b/js/views/templates.js
index 71fbccc0f..24a4f4fee 100644
--- a/js/views/templates.js
+++ b/js/views/templates.js
@@ -1,5 +1,32 @@
 (function() {
   var template = Handlebars.template, templates = OCA.Talk.Views.Templates = OCA.Talk.Views.Templates || {};
+templates['callbutton'] = template({"1":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return "<button class=\"leave-call primary\">"
+    + container.escapeExpression(((helper = (helper = helpers.leaveCallText || (depth0 != null ? depth0.leaveCallText : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"leaveCallText","hash":{},"data":data}) : helper)))
+    + "</button>\n";
+},"3":function(container,depth0,helpers,partials,data) {
+    var stack1;
+
+  return ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.hasCall : depth0),{"name":"if","hash":{},"fn":container.program(4, data, 0),"inverse":container.program(6, data, 0),"data":data})) != null ? stack1 : "");
+},"4":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return "<button class=\"join-call call-ongoing primary\">"
+    + container.escapeExpression(((helper = (helper = helpers.joinCallText || (depth0 != null ? depth0.joinCallText : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"joinCallText","hash":{},"data":data}) : helper)))
+    + "</button>\n";
+},"6":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return "<button class=\"join-call primary\">"
+    + container.escapeExpression(((helper = (helper = helpers.startCallText || (depth0 != null ? depth0.startCallText : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"startCallText","hash":{},"data":data}) : helper)))
+    + "</button>\n";
+},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+    var stack1;
+
+  return ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.isInCall : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data})) != null ? stack1 : "");
+},"useData":true});
 templates['chatview'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
     var helper;
 
diff --git a/js/views/templates/callbutton.handlebars b/js/views/templates/callbutton.handlebars
new file mode 100644
index 000000000..6b05adaf2
--- /dev/null
+++ b/js/views/templates/callbutton.handlebars
@@ -0,0 +1,9 @@
+{{#if isInCall}}
+<button class="leave-call primary">{{leaveCallText}}</button>
+{{else}}
+	{{#if hasCall}}
+<button class="join-call call-ongoing primary">{{joinCallText}}</button>
+	{{else}}
+<button class="join-call primary">{{startCallText}}</button>
+	{{/if}}
+{{/if}}