Move files_external to compiled handlebars

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

apps/files_external/js/settings.js

@@ -10,58 +10,6 @@
 
 (function(){
 
-// TODO: move to a separate file
-var MOUNT_OPTIONS_DROPDOWN_TEMPLATE =
-	'<div class="popovermenu open">'+
-	// FIXME: options are hard-coded for now
-	'	<ul>'+
-	'		<li class="optionRow">'+
-	'			<span class="menuitem">'+
-	'				<input id="mountOptionsEncrypt" class="checkbox" name="encrypt" type="checkbox" value="true" checked="checked"/>'+
-	'				<label for="mountOptionsEncrypt">{{t "files_external" "Enable encryption"}}</label>'+
-	'			</span>'+
-	'		</li>'+
-	'		<li class="optionRow">'+
-	'			<span class="menuitem">'+
-	'				<input id="mountOptionsPreviews" class="checkbox" name="previews" type="checkbox" value="true" checked="checked"/>'+
-	'				<label for="mountOptionsPreviews">{{t "files_external" "Enable previews"}}</label>'+
-	'			</span>'+
-	'		</li>'+
-	'		<li class="optionRow">'+
-	'			<span class="menuitem">'+
-	'				<input id="mountOptionsSharing" class="checkbox" name="enable_sharing" type="checkbox" value="true"/>'+
-	'				<label for="mountOptionsSharing">{{t "files_external" "Enable sharing"}}</label>'+
-	'			</span>'+
-	'		</li>'+
-	'		<li class="optionRow">'+
-	'			<span class="menuitem icon-search">'+
-	'				<label for="mountOptionsFilesystemCheck">{{t "files_external" "Check for changes"}}</label>'+
-	'				<select id="mountOptionsFilesystemCheck" name="filesystem_check_changes" data-type="int">'+
-	'					<option value="0">{{t "files_external" "Never"}}</option>'+
-	'					<option value="1" selected="selected">{{t "files_external" "Once every direct access"}}</option>'+
-	'				</select>'+
-	'			</span>'+
-	'		</li>'+
-	'		<li class="optionRow">'+
-	'			<span class="menuitem">'+
-	'				<input id="mountOptionsEncoding" class="checkbox" name="encoding_compatibility" type="checkbox" value="true"/>'+
-	'				<label for="mountOptionsEncoding">{{mountOptionsEncodingLabel}}</label>'+
-	'			</span>'+
-	'		</li>'+
-	'		<li class="optionRow">' +
-	'			<span class="menuitem">' +
-	'				<input id="mountOptionsReadOnly" class="checkbox" name="readonly" type="checkbox" value="true"/>' +
-	'				<label for="mountOptionsReadOnly">{{t "files_external" "Read only"}}</label>' +
-	'			</span>' +
-	'		</li>' +
-	'		<li class="optionRow persistent">' +
-	'			<a href="#" class="menuitem remove icon-delete">' +
-	'				<span>{{t "files_external" "Delete"}}</span>' +
-	'			</a>' +
-	'		</li>' +
-	'	</ul>'+
-	'</div>';
-
 /**
  * Returns the selection of applicable users in the given configuration row
  *
@@ -514,14 +462,16 @@ MountOptionsDropdown.prototype = {
 			MountOptionsDropdown._last.hide();
 		}
 
-		var template = MountOptionsDropdown._template;
-		if (!template) {
-			template = Handlebars.compile(MOUNT_OPTIONS_DROPDOWN_TEMPLATE);
-			MountOptionsDropdown._template = template;
-		}
-
-		var $el = $(template({
-			mountOptionsEncodingLabel: t('files_external', 'Compatibility with Mac NFD encoding (slow)')
+		var $el = $(OCA.External.Templates.mountOptionsDropDown({
+			mountOptionsEncodingLabel: t('files_external', 'Compatibility with Mac NFD encoding (slow)'),
+			mountOptionsEncryptLabel: t('files_external', 'Enable encryption'),
+			mountOptionsPreviewsLabel: t('files_external', 'Enable previews'),
+			mountOptionsSharingLabel: t('files_external', 'Enable sharing'),
+			mountOptionsFilesystemCheckLabel: t('files_external', 'Check for changes'),
+			mountOptionsFilesystemCheckOnce: t('files_external', 'Never'),
+			mountOptionsFilesystemCheckDA: t('files_external', 'Once every direct access'),
+			mountOptionsReadOnlyLabel: t('files_external', 'Read only'),
+			deleteLabel: t('files_external', 'Delete')
 		}));
 		this.$el = $el;
 

apps/files_external/js/statusmanager.js

@@ -392,8 +392,7 @@ OCA.External.StatusManager = {
 	 * @param mountData
 	 */
 	showCredentialsDialog: function (mountPoint, mountData) {
-		var template = Handlebars.compile(OCA.External.StatusManager.credentialsDialogTemplate);
-		var dialog = $(template({
+		var dialog = $(OCA.External.Templates.credentialsDialog({
 			credentials_text: t('files_external', 'Please enter the credentials for the {mount} mount', {
 				'mount': mountPoint
 			}),

apps/files_external/js/templates.js

@@ -0,0 +1,37 @@
+(function() {
+  var template = Handlebars.template, templates = OCA.External.Templates = OCA.External.Templates || {};
+templates['credentialsDialog'] = 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 "<div id=\"files_external_div_form\"><div>\n	<div>"
+    + alias4(((helper = (helper = helpers.credentials_text || (depth0 != null ? depth0.credentials_text : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"credentials_text","hash":{},"data":data}) : helper)))
+    + "</div>\n		<form>\n			<input type=\"text\" name=\"username\" placeholder=\""
+    + alias4(((helper = (helper = helpers.placeholder_username || (depth0 != null ? depth0.placeholder_username : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"placeholder_username","hash":{},"data":data}) : helper)))
+    + "\"/>\n			<input type=\"password\" name=\"password\" placeholder=\""
+    + alias4(((helper = (helper = helpers.placeholder_password || (depth0 != null ? depth0.placeholder_password : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"placeholder_password","hash":{},"data":data}) : helper)))
+    + "\"/>\n		</form>\n	</div>\n</div>\n";
+},"useData":true});
+templates['mountOptionsDropDown'] = 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 "<div class=\"popovermenu open\">\n	<ul>\n		<li class=\"optionRow\">\n			<span class=\"menuitem\">\n				<input id=\"mountOptionsEncrypt\" class=\"checkbox\" name=\"encrypt\" type=\"checkbox\" value=\"true\" checked=\"checked\"/>\n				<label for=\"mountOptionsEncrypt\">"
+    + alias4(((helper = (helper = helpers.mountOptionsEncryptLabel || (depth0 != null ? depth0.mountOptionsEncryptLabel : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"mountOptionsEncryptLabel","hash":{},"data":data}) : helper)))
+    + "</label>\n			</span>\n		</li>\n		<li class=\"optionRow\">\n			<span class=\"menuitem\">\n				<input id=\"mountOptionsPreviews\" class=\"checkbox\" name=\"previews\" type=\"checkbox\" value=\"true\" checked=\"checked\"/>\n				<label for=\"mountOptionsPreviews\">"
+    + alias4(((helper = (helper = helpers.mountOptionsPreviewsLabel || (depth0 != null ? depth0.mountOptionsPreviewsLabel : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"mountOptionsPreviewsLabel","hash":{},"data":data}) : helper)))
+    + "</label>\n			</span>\n		</li>\n		<li class=\"optionRow\">\n			<span class=\"menuitem\">\n				<input id=\"mountOptionsSharing\" class=\"checkbox\" name=\"enable_sharing\" type=\"checkbox\" value=\"true\"/>\n				<label for=\"mountOptionsSharing\">"
+    + alias4(((helper = (helper = helpers.mountOptionsSharingLabel || (depth0 != null ? depth0.mountOptionsSharingLabel : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"mountOptionsSharingLabel","hash":{},"data":data}) : helper)))
+    + "</label>\n			</span>\n		</li>\n		<li class=\"optionRow\">\n			<span class=\"menuitem icon-search\">\n				<label for=\"mountOptionsFilesystemCheck\">"
+    + alias4(((helper = (helper = helpers.mountOptionsFilesystemCheckLabel || (depth0 != null ? depth0.mountOptionsFilesystemCheckLabel : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"mountOptionsFilesystemCheckLabel","hash":{},"data":data}) : helper)))
+    + "</label>\n				<select id=\"mountOptionsFilesystemCheck\" name=\"filesystem_check_changes\" data-type=\"int\">\n					<option value=\"0\">"
+    + alias4(((helper = (helper = helpers.mountOptionsFilesystemCheckOnce || (depth0 != null ? depth0.mountOptionsFilesystemCheckOnce : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"mountOptionsFilesystemCheckOnce","hash":{},"data":data}) : helper)))
+    + "</option>\n					<option value=\"1\" selected=\"selected\">"
+    + alias4(((helper = (helper = helpers.mountOptionsFilesystemCheckDA || (depth0 != null ? depth0.mountOptionsFilesystemCheckDA : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"mountOptionsFilesystemCheckDA","hash":{},"data":data}) : helper)))
+    + "</option>\n				</select>\n			</span>\n		</li>\n		<li class=\"optionRow\">\n			<span class=\"menuitem\">\n				<input id=\"mountOptionsEncoding\" class=\"checkbox\" name=\"encoding_compatibility\" type=\"checkbox\" value=\"true\"/>\n				<label for=\"mountOptionsEncoding\">"
+    + alias4(((helper = (helper = helpers.mountOptionsEncodingLabel || (depth0 != null ? depth0.mountOptionsEncodingLabel : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"mountOptionsEncodingLabel","hash":{},"data":data}) : helper)))
+    + "</label>\n			</span>\n		</li>\n		<li class=\"optionRow\">\n			<span class=\"menuitem\">\n				<input id=\"mountOptionsReadOnly\" class=\"checkbox\" name=\"readonly\" type=\"checkbox\" value=\"true\"/>\n				<label for=\"mountOptionsReadOnly\">"
+    + alias4(((helper = (helper = helpers.mountOptionsReadOnlyLabel || (depth0 != null ? depth0.mountOptionsReadOnlyLabel : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"mountOptionsReadOnlyLabel","hash":{},"data":data}) : helper)))
+    + "</label>\n			</span>\n		</li>\n		<li class=\"optionRow persistent\">\n			<a href=\"#\" class=\"menuitem remove icon-delete\">\n				<span>"
+    + alias4(((helper = (helper = helpers.deleteLabel || (depth0 != null ? depth0.deleteLabel : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"deleteLabel","hash":{},"data":data}) : helper)))
+    + "</span>\n			</a>\n		</li>\n	</ul>\n</div>\n";
+},"useData":true});
+})();

apps/files_external/js/templates/credentialsDialog.handlebars

@@ -0,0 +1,8 @@
+<div id="files_external_div_form"><div>
+	<div>{{credentials_text}}</div>
+		<form>
+			<input type="text" name="username" placeholder="{{placeholder_username}}"/>
+			<input type="password" name="password" placeholder="{{placeholder_password}}"/>
+		</form>
+	</div>
+</div>

apps/files_external/js/templates/mountOptionsDropDown.handlebars

@@ -0,0 +1,48 @@
+<div class="popovermenu open">
+	<ul>
+		<li class="optionRow">
+			<span class="menuitem">
+				<input id="mountOptionsEncrypt" class="checkbox" name="encrypt" type="checkbox" value="true" checked="checked"/>
+				<label for="mountOptionsEncrypt">{{mountOptionsEncryptLabel}}</label>
+			</span>
+		</li>
+		<li class="optionRow">
+			<span class="menuitem">
+				<input id="mountOptionsPreviews" class="checkbox" name="previews" type="checkbox" value="true" checked="checked"/>
+				<label for="mountOptionsPreviews">{{mountOptionsPreviewsLabel}}</label>
+			</span>
+		</li>
+		<li class="optionRow">
+			<span class="menuitem">
+				<input id="mountOptionsSharing" class="checkbox" name="enable_sharing" type="checkbox" value="true"/>
+				<label for="mountOptionsSharing">{{mountOptionsSharingLabel}}</label>
+			</span>
+		</li>
+		<li class="optionRow">
+			<span class="menuitem icon-search">
+				<label for="mountOptionsFilesystemCheck">{{mountOptionsFilesystemCheckLabel}}</label>
+				<select id="mountOptionsFilesystemCheck" name="filesystem_check_changes" data-type="int">
+					<option value="0">{{mountOptionsFilesystemCheckOnce}}</option>
+					<option value="1" selected="selected">{{mountOptionsFilesystemCheckDA}}</option>
+				</select>
+			</span>
+		</li>
+		<li class="optionRow">
+			<span class="menuitem">
+				<input id="mountOptionsEncoding" class="checkbox" name="encoding_compatibility" type="checkbox" value="true"/>
+				<label for="mountOptionsEncoding">{{mountOptionsEncodingLabel}}</label>
+			</span>
+		</li>
+		<li class="optionRow">
+			<span class="menuitem">
+				<input id="mountOptionsReadOnly" class="checkbox" name="readonly" type="checkbox" value="true"/>
+				<label for="mountOptionsReadOnly">{{mountOptionsReadOnlyLabel}}</label>
+			</span>
+		</li>
+		<li class="optionRow persistent">
+			<a href="#" class="menuitem remove icon-delete">
+				<span>{{deleteLabel}}</span>
+			</a>
+		</li>
+	</ul>
+</div>

apps/files_external/list.php

@@ -28,6 +28,7 @@ $tmpl = new OCP\Template('files_external', 'list', '');
 /* Load Status Manager */
 \OCP\Util::addStyle('files_external', 'external');
 \OCP\Util::addScript('files_external', 'statusmanager');
+\OCP\Util::addScript('files_external', 'templates.js');
 \OCP\Util::addScript('files_external', 'rollingqueue');
 
 OCP\Util::addScript('files_external', 'app');

apps/files_external/templates/settings.php

@@ -14,7 +14,10 @@
 	$l->t("Once every direct access");
 	$l->t('Read only');
 
-	script('files_external', 'settings');
+	script('files_external', [
+		'settings',
+		'templates'
+	]);
 	style('files_external', 'settings');
 
 	// load custom JS

build/compile-handlebars-templates.sh

@@ -31,6 +31,9 @@ handlebars -n OCA.WorkflowEngine.Templates apps/workflowengine/js/templates -f a
 # Sharing
 handlebars -n OCA.Sharing.Templates apps/files_sharing/js/templates -f apps/files_sharing/js/templates.js
 
+# Files external
+handlebars -n OCA.External.Templates apps/files_external/js/templates -f apps/files_external/js/templates.js
+
 if [[ $(git diff --name-only) ]]; then
     echo "Please submit your compiled handlebars templates"
     echo