filter hidden files on the web interface

add checkbox to toggle show/hide hidden files

persist show hidden setting

fix settings menu layout

test ApiController::showHiddenFiles

don't show hidden files by default

Store config in Backbone model and inject it into FileList

Filter files only temporarily when rending the file list

Fix file rename validation

2 files changed, 94 insertions, 3 deletions

diff --git a/apps/files/js/app.js b/apps/files/js/app.js
index 4ed805d2681..eac080a009d 100644
--- a/apps/files/js/app.js
+++ b/apps/files/js/app.js
@@ -11,7 +11,7 @@
  *
  */
 
-/* global dragOptions, folderDropOptions */
+/* global dragOptions, folderDropOptions, OC */
 (function() {
 
 	if (!OCA.Files) {
@@ -41,10 +41,22 @@
 		fileList: null,
 
 		/**
+		 * Backbone model for storing files preferences
+		 */
+		_filesConfig: null,
+
+		/**
 		 * Initializes the files app
 		 */
 		initialize: function() {
 			this.navigation = new OCA.Files.Navigation($('#app-navigation'));
+			this.$showHiddenFiles = $('input#showhiddenfilesToggle');
+			var showHidden = $('#showHiddenFiles').val() === "1";
+			this.$showHiddenFiles.prop('checked', showHidden);
+
+			this._filesConfig = new OC.Backbone.Model({
+				showhidden: showHidden
+			});
 
 			var urlParams = OC.Util.History.parseUrlQuery();
 			var fileActions = new OCA.Files.FileActions();
@@ -76,7 +88,8 @@
 					sorting: {
 						mode: $('#defaultFileSorting').val(),
 						direction: $('#defaultFileSortingDirection').val()
-					}
+					},
+					config: this._filesConfig,
 				}
 			);
 			this.files.initialize();
@@ -90,6 +103,8 @@
 			this._setupEvents();
 			// trigger URL change event handlers
 			this._onPopState(urlParams);
+
+			this._debouncedPersistShowHiddenFilesState = _.debounce(this._persistShowHiddenFilesState, 1200);
 		},
 
 		/**
@@ -144,6 +159,14 @@
 		},
 
 		/**
+		 *
+		 * @returns {Backbone.Model}
+		 */
+		getFilesConfig: function() {
+			return this._filesConfig;
+		},
+
+		/**
 		 * Setup events based on URL changes
 		 */
 		_setupEvents: function() {
@@ -154,6 +177,30 @@
 			$('#app-content').delegate('>div', 'changeViewerMode', _.bind(this._onChangeViewerMode, this));
 
 			$('#app-navigation').on('itemChanged', _.bind(this._onNavigationChanged, this));
+			this.$showHiddenFiles.on('change', _.bind(this._onShowHiddenFilesChange, this));
+		},
+
+		/**
+		 * Toggle showing hidden files according to the settings checkbox
+		 *
+		 * @returns {undefined}
+		 */
+		_onShowHiddenFilesChange: function() {
+			var show = this.$showHiddenFiles.is(':checked');
+			this._filesConfig.set('showhidden', show);
+			this._debouncedPersistShowHiddenFilesState();
+		},
+
+		/**
+		 * Persist show hidden preference on ther server
+		 *
+		 * @returns {undefined}
+		 */
+		_persistShowHiddenFilesState: function() {
+			var show = this._filesConfig.get('showhidden');
+			$.post(OC.generateUrl('/apps/files/api/v1/showhidden'), {
+				show: show
+			});
 		},
 
 		/**
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 7de64f8ade3..79dc42da8f1 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -145,6 +145,11 @@
 		_filter: '',
 
 		/**
+		 * @type Backbone.Model
+		 */
+		_filesConfig: null,
+
+		/**
 		 * Sort attribute
 		 * @type String
 		 */
@@ -198,6 +203,15 @@
 				return;
 			}
 
+			if (options.config) {
+				this._filesConfig = options.config;
+			} else {
+				this._filesConfig = OCA.Files.App.getFilesConfig();
+			}
+			this._filesConfig.on('change:showhidden', function() {
+				self.setFiles(self.files);
+			});
+
 			if (options.dragOptions) {
 				this._dragOptions = options.dragOptions;
 			}
@@ -847,6 +861,10 @@
 		 * @return array of DOM elements of the newly added files
 		 */
 		_nextPage: function(animate) {
+			// Save full files list while rendering
+			var allFiles = this.files;
+			this.files = this._filterHiddenFiles(this.files);
+
 			var index = this.$fileList.children().length,
 				count = this.pageSize(),
 				hidden,
@@ -893,6 +911,10 @@
 					}
 				}, 0);
 			}
+
+			// Restore full files list after rendering
+			this.files = allFiles;
+
 			return newTrs;
 		},
 
@@ -930,18 +952,25 @@
 			// clear "Select all" checkbox
 			this.$el.find('.select-all').prop('checked', false);
 
+			// Save full files list while rendering
+			var allFiles = this.files;
+			this.files = this._filterHiddenFiles(this.files);
+
 			this.isEmpty = this.files.length === 0;
 			this._nextPage();
 
 			this.updateEmptyContent();
 
-			this.fileSummary.calculate(filesArray);
+			this.fileSummary.calculate(this.files);
 
 			this._selectedFiles = {};
 			this._selectionSummary.clear();
 			this.updateSelectionSummary();
 			$(window).scrollTop(0);
 
+			// Restore full files list after rendering
+			this.files = allFiles;
+
 			this.$fileList.trigger(jQuery.Event('updated'));
 			_.defer(function() {
 				self.$el.closest('#app-content').trigger(jQuery.Event('apprendered'));
@@ -949,6 +978,21 @@
 		},
 
 		/**
+		 * Filter hidden files of the given filesArray (dot-files)
+		 *
+		 * @param filesArray files to be filtered
+		 * @returns {array}
+		 */
+		_filterHiddenFiles: function(files) {
+			if (this._filesConfig.get('showhidden')) {
+				return files;
+			}
+			return _.filter(files, function(file) {
+				return file.name.indexOf('.') !== 0;
+			});
+		},
+
+		/**
 		 * Returns the icon URL matching the given file info
 		 *
 		 * @param {OC.Files.FileInfo} fileInfo file info