Merge pull request #481 from nextcloud/csp

Move to compiled handlebars

Makefile

@@ -0,0 +1,2 @@
+js-tempaltes:
+	handlebars -n Gallery.Templates js/templates -f js/templates.js

js/breadcrumb.js

@@ -13,25 +13,6 @@
 (function ($, OC, t, Gallery) {
 	"use strict";
 
-	var TEMPLATE =
-		'{{#each crumbs}}' +
-		'	<div class="crumb {{cssClass}}" data-dir="{{dir}}">' +
-		'	{{#if link}}' +
-		'		<a href="{{link}}">' +
-		'		{{#if img}}' +
-		'			{{#with img}}' +
-		'			<img title="{{title}}" src="{{imageSrc}}">' +
-		'			{{/with}}' +
-		'		{{else}}' +
-		'			{{name}}' +
-		'		{{/if}}' +
-		'		</a>' +
-		'	{{else}}' +
-		'		<span>{{name}}</span>' +
-		'	{{/if}}' +
-		'	</div>' +
-		'{{/each}}';
-
 	/**
 	 * Breadcrumbs that represent the path to the current album
 	 *
@@ -65,9 +46,6 @@
 			this.albumPath = albumPath;
 			this.availableWidth = availableWidth;
 			this.breadcrumbs = [];
-			if (!this._template) {
-				this._template = Handlebars.compile(TEMPLATE);
-			}
 			this._build();
 			this._resize(this.availableWidth);
 		},
@@ -225,7 +203,7 @@
 		_render: function () {
 			this.breadcrumbsElement.children().remove();
 
-			var breadcrumbs = this._template({
+			var breadcrumbs = Gallery.Templates.breadcrumb({
 				crumbs: this.breadcrumbs
 			});
 

js/galleryalbum.js

@@ -13,20 +13,6 @@
 (function ($, Gallery) {
 	"use strict";
 
-	var TEMPLATE =
-		'<a class="row-element" style="width: {{targetWidth}}px; height: {{targetHeight}}px;" ' +
-		'data-width="{{targetWidth}}" data-height="{{targetHeight}}"' +
-		'href="{{targetPath}}" data-dir="{{dir}}" data-path="{{path}}"' +
-		'data-permissions="{{permissions}}" data-freespace="{{freeSpace}}"' +
-		'>' +
-		'	<div class="album-loader loading"></div>' +
-		'	<span class="album-label">' +
-		'		<span class="title">{{label}}</span>' +
-		'	</span>' +
-		'	<div class="album container" style="width: {{targetWidth}}px; height: {{targetHeight}}px;" >' +
-		'	</div>' +
-		'</a>';
-
 	/**
 	 * Creates a new album object to store information about an album
 	 *
@@ -120,8 +106,7 @@
 		 */
 		getDom: function (targetHeight) {
 			if (this.domDef === null) {
-				var template = Handlebars.compile(TEMPLATE);
-				var albumElement = template({
+				var albumElement = Gallery.Templates.galleryalbum({
 					targetHeight: targetHeight,
 					targetWidth: targetHeight,
 					dir: this.path,

js/galleryimage.js

@@ -13,16 +13,6 @@
 (function ($, Gallery, oc_requesttoken) {
 	"use strict";
 
-	var TEMPLATE =
-		'<a class="row-element" style="width: {{targetWidth}}px; height: {{targetHeight}}px;" ' +
-		'href="" data-path="{{path}}">' +
-		'	<div class="image-loader loading"></div>' +
-		'	<span class="image-label">' +
-		'		<span class="title">{{label}}</span>' +
-		'	</span>' +
-		'	<div class="image container"></div>' +
-		'</a>';
-
 	/**
 	 * Creates a new image object to store information about a media file
 	 *
@@ -115,8 +105,7 @@
 		 */
 		getDom: function (targetHeight) {
 			if (this.domDef === null) {
-				var template = Handlebars.compile(TEMPLATE);
-				var imageElement = template({
+				var imageElement = Gallery.Templates.galleryimage({
 					targetHeight: targetHeight,
 					targetWidth: targetHeight,
 					label: OC.basename(this.path),

js/galleryview.js

@@ -566,13 +566,8 @@
 			if (!$actionsContainer.length) {
 				return;
 			}
-			if (!this._addButtonTemplate) {
-				this._addButtonTemplate = Handlebars.compile(TEMPLATE_ADDBUTTON);
-			}
-			var $newButton = $(this._addButtonTemplate({
-				addText: t('gallery', 'New'),
-				iconUrl: OC.imagePath('core', 'actions/add')
-			}));
+
+			var $newButton = $(TEMPLATE_ADDBUTTON);
 
 			$actionsContainer.prepend($newButton);
 			$newButton.tooltip({'placement': 'bottom'});

js/merged.json

@@ -3,6 +3,7 @@
   "vendor/jquery-touch-events/src/1.0.8/jquery.mobile-events.min.js",
   "vendor/jquery.ui.touch-punch-custom.js",
   "gallery.js",
+  "templates.js",
   "galleryutility.js",
   "galleryconfig.js",
   "galleryinfobox.js",

js/templates.js

@@ -0,0 +1,113 @@
+(function() {
+  var template = Handlebars.template, templates = Gallery.Templates = Gallery.Templates || {};
+templates['breadcrumb'] = template({"1":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=\"crumb "
+    + alias4(((helper = (helper = helpers.cssClass || (depth0 != null ? depth0.cssClass : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"cssClass","hash":{},"data":data}) : helper)))
+    + "\" data-dir=\""
+    + alias4(((helper = (helper = helpers.dir || (depth0 != null ? depth0.dir : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"dir","hash":{},"data":data}) : helper)))
+    + "\">\n"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.link : depth0),{"name":"if","hash":{},"fn":container.program(2, data, 0),"inverse":container.program(8, data, 0),"data":data})) != null ? stack1 : "")
+    + "	</div>\n";
+},"2":function(container,depth0,helpers,partials,data) {
+    var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {});
+
+  return "			<a href=\""
+    + container.escapeExpression(((helper = (helper = helpers.link || (depth0 != null ? depth0.link : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(alias1,{"name":"link","hash":{},"data":data}) : helper)))
+    + "\">\n"
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.img : depth0),{"name":"if","hash":{},"fn":container.program(3, data, 0),"inverse":container.program(6, data, 0),"data":data})) != null ? stack1 : "")
+    + "			</a>\n";
+},"3":function(container,depth0,helpers,partials,data) {
+    var stack1;
+
+  return ((stack1 = helpers["with"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.img : depth0),{"name":"with","hash":{},"fn":container.program(4, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "");
+},"4":function(container,depth0,helpers,partials,data) {
+    var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "						<img title=\""
+    + alias4(((helper = (helper = helpers.title || (depth0 != null ? depth0.title : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"title","hash":{},"data":data}) : helper)))
+    + "\" src=\""
+    + alias4(((helper = (helper = helpers.imageSrc || (depth0 != null ? depth0.imageSrc : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"imageSrc","hash":{},"data":data}) : helper)))
+    + "\">\n";
+},"6":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return "					"
+    + 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)))
+    + "\n";
+},"8":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return "			<span>"
+    + 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)))
+    + "</span>\n";
+},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+    var stack1;
+
+  return ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.crumbs : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "");
+},"useData":true});
+templates['galleryalbum'] = 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 class=\"row-element\" style=\"width: "
+    + alias4(((helper = (helper = helpers.targetWidth || (depth0 != null ? depth0.targetWidth : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"targetWidth","hash":{},"data":data}) : helper)))
+    + "px; height: "
+    + alias4(((helper = (helper = helpers.targetHeight || (depth0 != null ? depth0.targetHeight : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"targetHeight","hash":{},"data":data}) : helper)))
+    + "px;\" 'data-width=\""
+    + alias4(((helper = (helper = helpers.targetWidth || (depth0 != null ? depth0.targetWidth : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"targetWidth","hash":{},"data":data}) : helper)))
+    + "\" data-height=\""
+    + alias4(((helper = (helper = helpers.targetHeight || (depth0 != null ? depth0.targetHeight : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"targetHeight","hash":{},"data":data}) : helper)))
+    + "\" href=\""
+    + alias4(((helper = (helper = helpers.targetPath || (depth0 != null ? depth0.targetPath : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"targetPath","hash":{},"data":data}) : helper)))
+    + "\" data-dir=\""
+    + alias4(((helper = (helper = helpers.dir || (depth0 != null ? depth0.dir : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"dir","hash":{},"data":data}) : helper)))
+    + "\" data-path=\""
+    + alias4(((helper = (helper = helpers.path || (depth0 != null ? depth0.path : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"path","hash":{},"data":data}) : helper)))
+    + "\" data-permissions=\""
+    + alias4(((helper = (helper = helpers.permissions || (depth0 != null ? depth0.permissions : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"permissions","hash":{},"data":data}) : helper)))
+    + "\" data-freespace=\""
+    + alias4(((helper = (helper = helpers.freeSpace || (depth0 != null ? depth0.freeSpace : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"freeSpace","hash":{},"data":data}) : helper)))
+    + "\">\n	<div class=\"album-loader loading\"></div>\n	<span class=\"album-label\">\n		<span class=\"title\">"
+    + alias4(((helper = (helper = helpers.label || (depth0 != null ? depth0.label : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"label","hash":{},"data":data}) : helper)))
+    + "</span>\n	</span>\n	<div class=\"album container\" style=\"width: "
+    + alias4(((helper = (helper = helpers.targetWidth || (depth0 != null ? depth0.targetWidth : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"targetWidth","hash":{},"data":data}) : helper)))
+    + "px; height: "
+    + alias4(((helper = (helper = helpers.targetHeight || (depth0 != null ? depth0.targetHeight : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"targetHeight","hash":{},"data":data}) : helper)))
+    + "px;\" >\n	</div>\n</a>\n";
+},"useData":true});
+templates['galleryimage'] = 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 class=\"row-element\" style=\"width: "
+    + alias4(((helper = (helper = helpers.targetWidth || (depth0 != null ? depth0.targetWidth : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"targetWidth","hash":{},"data":data}) : helper)))
+    + "px; height: "
+    + alias4(((helper = (helper = helpers.targetHeight || (depth0 != null ? depth0.targetHeight : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"targetHeight","hash":{},"data":data}) : helper)))
+    + "px;\" href=\"\" data-path=\""
+    + alias4(((helper = (helper = helpers.path || (depth0 != null ? depth0.path : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"path","hash":{},"data":data}) : helper)))
+    + "\">\n	<div class=\"image-loader loading\"></div>\n	<span class=\"image-label\">\n		<span class=\"title\">"
+    + alias4(((helper = (helper = helpers.label || (depth0 != null ? depth0.label : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"label","hash":{},"data":data}) : helper)))
+    + "</span>\n	</span>\n	<div class=\"image container\"></div>\n</a>\n";
+},"useData":true});
+templates['newfilemenu'] = template({"1":function(container,depth0,helpers,partials,data) {
+    var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "		<li>\n			<a href=\"#\" class=\"menuitem\" data-action=\""
+    + 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 class=\"icon "
+    + alias4(((helper = (helper = helpers.iconClass || (depth0 != null ? depth0.iconClass : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"iconClass","hash":{},"data":data}) : helper)))
+    + " svg\"></span><span class=\"displayname\">"
+    + alias4(((helper = (helper = helpers.displayName || (depth0 != null ? depth0.displayName : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"displayName","hash":{},"data":data}) : helper)))
+    + "</span></a>\n		</li>\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 "<ul>\n	<li>\n		<label for=\"file_upload_start\" class=\"menuitem\" data-action=\"upload\" title=\""
+    + alias4(((helper = (helper = helpers.uploadMaxHumanFilesize || (depth0 != null ? depth0.uploadMaxHumanFilesize : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"uploadMaxHumanFilesize","hash":{},"data":data}) : helper)))
+    + "\"><span class=\"svg icon icon-upload\"></span><span class=\"displayname\">"
+    + alias4(((helper = (helper = helpers.uploadLabel || (depth0 != null ? depth0.uploadLabel : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"uploadLabel","hash":{},"data":data}) : helper)))
+    + "</span></label>\n	</li>\n"
+    + ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.items : depth0),{"name":"each","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "</ul>\n";
+},"useData":true});
+})();

js/templates/breadcrumb.handlebars

@@ -0,0 +1,17 @@
+{{#each crumbs}}
+	<div class="crumb {{cssClass}}" data-dir="{{dir}}">
+		{{#if link}}
+			<a href="{{link}}">
+				{{#if img}}
+					{{#with img}}
+						<img title="{{title}}" src="{{imageSrc}}">
+					{{/with}}
+				{{else}}
+					{{name}}
+				{{/if}}
+			</a>
+		{{else}}
+			<span>{{name}}</span>
+		{{/if}}
+	</div>
+{{/each}}

js/templates/galleryalbum.handlebars

@@ -0,0 +1,8 @@
+<a class="row-element" style="width: {{targetWidth}}px; height: {{targetHeight}}px;" 'data-width="{{targetWidth}}" data-height="{{targetHeight}}" href="{{targetPath}}" data-dir="{{dir}}" data-path="{{path}}" data-permissions="{{permissions}}" data-freespace="{{freeSpace}}">
+	<div class="album-loader loading"></div>
+	<span class="album-label">
+		<span class="title">{{label}}</span>
+	</span>
+	<div class="album container" style="width: {{targetWidth}}px; height: {{targetHeight}}px;" >
+	</div>
+</a>

js/templates/galleryimage.handlebars

@@ -0,0 +1,7 @@
+<a class="row-element" style="width: {{targetWidth}}px; height: {{targetHeight}}px;" href="" data-path="{{path}}">
+	<div class="image-loader loading"></div>
+	<span class="image-label">
+		<span class="title">{{label}}</span>
+	</span>
+	<div class="image container"></div>
+</a>

js/templates/newfilemenu.handlebars

@@ -0,0 +1,10 @@
+<ul>
+	<li>
+		<label for="file_upload_start" class="menuitem" data-action="upload" title="{{uploadMaxHumanFilesize}}"><span class="svg icon icon-upload"></span><span class="displayname">{{uploadLabel}}</span></label>
+	</li>
+	{{#each items}}
+		<li>
+			<a href="#" class="menuitem" data-action="{{id}}"><span class="icon {{iconClass}} svg"></span><span class="displayname">{{displayName}}</span></a>
+		</li>
+	{{/each}}
+</ul>

js/vendor/nextcloud/newfilemenu.js

@@ -11,17 +11,6 @@
 /* global Handlebars, Gallery */
 (function ($, Gallery) {
 	"use strict";
-	var TEMPLATE_MENU =
-		'<ul>' +
-		'<li>' +
-		'<label for="file_upload_start" class="menuitem" data-action="upload" title="{{uploadMaxHumanFilesize}}"><span class="svg icon icon-upload"></span><span class="displayname">{{uploadLabel}}</span></label>' +
-		'</li>' +
-		'{{#each items}}' +
-		'<li>' +
-		'<a href="#" class="menuitem" data-action="{{id}}"><span class="icon {{iconClass}} svg"></span><span class="displayname">{{displayName}}</span></a>' +
-		'</li>' +
-		'{{/each}}' +
-		'</ul>';
 
 	/**
 	 * Construct a new NewFileMenu instance
@@ -53,10 +42,7 @@
 		},
 
 		template: function (data) {
-			if (!Gallery.NewFileMenu._TEMPLATE) {
-				Gallery.NewFileMenu._TEMPLATE = Handlebars.compile(TEMPLATE_MENU);
-			}
-			return Gallery.NewFileMenu._TEMPLATE(data);
+			return Gallery.Templates.newfilemenu(data);
 		},
 
 		/**