Added ext storage mount options GUI

Added option to disable autoscan of external storages
Mount option file system scan is now an int
Move priority field to avoid undefined field in storage options

All input elements inside the storage options block get parsed into
storage options.

Moving the priority field outside prevents it to appear in the storage
config, as expected. It is still parsed by special code.

1 files changed, 176 insertions, 3 deletions

diff --git a/apps/files_external/js/settings.js b/apps/files_external/js/settings.js
index 254bab30c56..ae3aef4ef35 100644
--- a/apps/files_external/js/settings.js
+++ b/apps/files_external/js/settings.js
@@ -7,8 +7,27 @@
  * See the COPYING-README file.
  *
  */
+
 (function(){
 
+// TODO: move to a separate file
+var MOUNT_OPTIONS_DROPDOWN_TEMPLATE =
+	'<div class="drop dropdown mountOptionsDropdown">' +
+	// FIXME: options are hard-coded for now
+	'	<div class="optionRow">' +
+	'		<label for="mountOptionsPreviews">{{t "files_external" "Enable previews"}}</label>' +
+	'		<input id="mountOptionsPreviews" name="previews" type="checkbox" value="true" checked="checked"/>' +
+	'	</div>' +
+	'	<div class="optionRow">' +
+	'		<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>' +
+	'			<option value="2">{{t "files_external" "Every time the filesystem is used"}}</option>' +
+	'		</select>' +
+	'	</div>' +
+	'</div>';
+
 /**
  * Returns the selection of applicable users in the given configuration row
  *
@@ -219,7 +238,8 @@ StorageConfig.prototype = {
 		$.ajax({
 			type: method,
 			url: url,
-			data: this.getData(),
+			contentType: 'application/json',
+			data: JSON.stringify(this.getData()),
 			success: function(result) {
 				self.id = result.id;
 				if (_.isFunction(options.success)) {
@@ -285,7 +305,6 @@ StorageConfig.prototype = {
 			}
 			return;
 		}
-		var self = this;
 		$.ajax({
 			type: 'DELETE',
 			url: OC.generateUrl(this._url + '/{id}', {id: this.id}),
@@ -379,6 +398,110 @@ UserStorageConfig.prototype = _.extend({}, StorageConfig.prototype,
 });
 
 /**
+ * @class OCA.External.Settings.MountOptionsDropdown
+ *
+ * @classdesc Dropdown for mount options
+ *
+ * @param {Object} $container container DOM object
+ */
+var MountOptionsDropdown = function() {
+};
+/**
+ * @memberof OCA.External.Settings
+ */
+MountOptionsDropdown.prototype = {
+	/**
+	 * Dropdown element
+	 *
+	 * @var Object
+	 */
+	$el: null,
+
+	/**
+	 * Show dropdown
+	 *
+	 * @param {Object} $container container
+	 * @param {Object} mountOptions mount options
+	 */
+	show: function($container, mountOptions) {
+		if (MountOptionsDropdown._last) {
+			MountOptionsDropdown._last.hide();
+		}
+
+		var template = MountOptionsDropdown._template;
+		if (!template) {
+			template = Handlebars.compile(MOUNT_OPTIONS_DROPDOWN_TEMPLATE);
+			MountOptionsDropdown._template = template;
+		}
+
+		var $el = $(template());
+		this.$el = $el;
+		$el.addClass('hidden');
+
+		this.setOptions(mountOptions);
+
+		this.$el.appendTo($container);
+		MountOptionsDropdown._last = this;
+
+		this.$el.trigger('show');
+	},
+
+	hide: function() {
+		if (this.$el) {
+			this.$el.trigger('hide');
+			this.$el.remove();
+			this.$el = null;
+			MountOptionsDropdown._last = null;
+		}
+	},
+
+	/**
+	 * Returns the mount options from the dropdown controls
+	 *
+	 * @return {Object} options mount options
+	 */
+	getOptions: function() {
+		var options = {};
+
+		this.$el.find('input, select').each(function() {
+			var $this = $(this);
+			var key = $this.attr('name');
+			var value = null;
+			if ($this.attr('type') === 'checkbox') {
+				value = $this.prop('checked');
+			} else {
+				value = $this.val();
+			}
+			if ($this.attr('data-type') === 'int') {
+				value = parseInt(value, 10);
+			}
+			options[key] = value;
+		});
+		return options;
+	},
+
+	/**
+	 * Sets the mount options to the dropdown controls
+	 *
+	 * @param {Object} options mount options
+	 */
+	setOptions: function(options) {
+		var $el = this.$el;
+		_.each(options, function(value, key) {
+			var $optionEl = $el.find('input, select').filterAttr('name', key);
+			if ($optionEl.attr('type') === 'checkbox') {
+				if (_.isString(value)) {
+					value = (value === 'true');
+				}
+				$optionEl.prop('checked', !!value);
+			} else {
+				$optionEl.val(value);
+			}
+		});
+	}
+};
+
+/**
  * @class OCA.External.Settings.MountConfigListView
  *
  * @classdesc Mount configuration list view
@@ -503,12 +626,20 @@ MountConfigListView.prototype = {
 			self.deleteStorageConfig($(this).closest('tr'));
 		});
 
+		this.$el.on('click', 'td.mountOptionsToggle>img', function() {
+			self._showMountOptionsDropdown($(this).closest('tr'));
+		});
+
 		this.$el.on('change', '.selectBackend', _.bind(this._onSelectBackend, this));
 	},
 
 	_onChange: function(event) {
 		var self = this;
 		var $target = $(event.target);
+		if ($target.closest('.dropdown').length) {
+			// ignore dropdown events
+			return;
+		}
 		highlightInput($target);
 		var $tr = $target.closest('tr');
 
@@ -569,6 +700,7 @@ MountConfigListView.prototype = {
 			}
 		});
 		$tr.find('td').last().attr('class', 'remove');
+		$tr.find('td.mountOptionsToggle').removeClass('hidden');
 		$tr.find('td').last().removeAttr('style');
 		$tr.removeAttr('id');
 		$target.remove();
@@ -643,7 +775,7 @@ MountConfigListView.prototype = {
 			storage.applicableUsers = users;
 			storage.applicableGroups = groups;
 
-			storage.priority = $tr.find('input.priority').val();
+			storage.priority = parseInt($tr.find('input.priority').val() || '100', 10);
 		}
 
 		var mountOptions = $tr.find('input.mountOptions').val();
@@ -786,6 +918,47 @@ MountConfigListView.prototype = {
 			}
 		}
 		return defaultMountPoint + append;
+	},
+	
+	/**
+	 * Toggles the mount options dropdown
+	 *
+	 * @param {Object} $tr configuration row
+	 */	
+	_showMountOptionsDropdown: function($tr) {
+		if (this._preventNextDropdown) {
+			// prevented because the click was on the toggle
+			this._preventNextDropdown = false;
+			return;
+		}
+		var self = this;
+		var storage = this.getStorageConfig($tr);
+		var $toggle = $tr.find('.mountOptionsToggle');
+		var dropDown = new MountOptionsDropdown();
+		dropDown.show($toggle, storage.mountOptions || []);
+
+		$('body').on('mouseup.mountOptionsDropdown', function(event) {
+			var $target = $(event.target);
+			if ($toggle.has($target).length) {
+				// why is it always so hard to make dropdowns behave ?
+				// this prevents the click on the toggle to cause
+				// the dropdown to reopen itself
+				// (preventDefault doesn't work here because the click
+				// event is already in the queue and cannot be cancelled)
+				self._preventNextDropdown = true;
+			}
+			if ($target.closest('.dropdown').length) {
+				return;
+			}
+			dropDown.hide();
+		});
+
+		dropDown.$el.on('hide', function() {
+			var mountOptions = dropDown.getOptions();
+			$('body').off('mouseup.mountOptionsDropdown');
+			$tr.find('input.mountOptions').val(JSON.stringify(mountOptions));
+			self.saveStorageConfig($tr);
+		});
 	}
 };