Make file actions work from sidebar

The favorite icon in the sidebar now triggers the file action and also
updates itself according to the model's state when triggered from the
file row.

The thumbnail triggers the default action.

Currently only one FileInfoModel is used for the selection and state
synchronization between views.

FileList reload now auto-closes the sidebar.

1 files changed, 15 insertions, 60 deletions

diff --git a/apps/files/js/detailtabview.js b/apps/files/js/detailtabview.js
index b9b1dda2ccc..b2e02971fb4 100644
--- a/apps/files/js/detailtabview.js
+++ b/apps/files/js/detailtabview.js
@@ -17,23 +17,10 @@
 	 * Base class for tab views to display file information.
 	 *
 	 */
-	var DetailTabView = function(id) {
-		this.initialize(id);
-	};
+	var DetailTabView = OC.Backbone.View.extend({
+		tag: 'div',
 
-	/**
-	 * @memberof OCA.Files
-	 */
-	DetailTabView.prototype = {
-		/**
-		 * jQuery element
-		 */
-		$el: null,
-
-		/**
-		 * Tab id
-		 */
-		_id: null,
+		className: 'tab',
 
 		/**
 		 * Tab label
@@ -42,52 +29,20 @@
 
 		_template: null,
 
-		/**
-		 * Currently displayed file info
-		 *
-		 * @type OCA.Files.FileInfo
-		 */
-		_fileInfo: null,
-
-		/**
-		 * Initialize the details view
-		 *
-		 * @param {string} id tab id
-		 */
-		initialize: function(id) {
-			if (!id) {
-				throw 'Argument "id" is required';
-			}
-			this._id = id;
-			this.$el = $('<div class="tab"></div>');
-			this.$el.attr('data-tabid', id);
-		},
-
-		/**
-		 * Destroy / uninitialize this instance.
-		 */
-		destroy: function() {
-			if (this.$el) {
-				this.$el.remove();
+		initialize: function() {
+			if (!this.id) {
+				this.id = 'detailTabView' + DetailTabView._TAB_COUNT;
+				DetailTabView._TAB_COUNT++;
 			}
 		},
 
 		/**
-		 * Returns the tab element id
-		 *
-		 * @return {string} tab id
-		 */
-		getId: function() {
-			return this._id;
-		},
-
-		/**
 		 * Returns the tab label
 		 *
 		 * @return {String} label
 		 */
 		getLabel: function() {
-			return 'Tab ' + this._id;
+			return 'Tab ' + this.id;
 		},
 
 		/**
@@ -107,29 +62,29 @@
 		render: function() {
 			// to be implemented in subclass
 			// FIXME: code is only for testing
-			this.$el.empty();
-			this.$el.append('<div>Hello ' + this._id + '</div>');
+			this.$el.html('<div>Hello ' + this.id + '</div>');
 		},
 
 		/**
 		 * Sets the file info to be displayed in the view
 		 *
-		 * @param {OCA.Files.FileInfo} fileInfo file info to set
+		 * @param {OCA.Files.FileInfoModel} fileInfo file info to set
 		 */
 		setFileInfo: function(fileInfo) {
-			this._fileInfo = fileInfo;
+			this.model = fileInfo;
 			this.render();
 		},
 
 		/**
 		 * Returns the file info.
 		 *
-		 * @return {OCA.Files.FileInfo} file info
+		 * @return {OCA.Files.FileInfoModel} file info
 		 */
 		getFileInfo: function() {
-			return this._fileInfo;
+			return this.model;
 		}
-	};
+	});
+	DetailTabView._TAB_COUNT = 0;
 
 	OCA.Files.DetailTabView = DetailTabView;
 })();