Hide sidebar tab headers conditionally

Added canDisplay() in DetailsTabView that should return false if the tab
header of this tab must be hidden

1 files changed, 43 insertions, 10 deletions

diff --git a/apps/files/js/detailsview.js b/apps/files/js/detailsview.js
index bad4be4ceef..f04adcf1292 100644
--- a/apps/files/js/detailsview.js
+++ b/apps/files/js/detailsview.js
@@ -140,16 +140,14 @@
 				}
 				return orderA - orderB;
 			});
-			if (this._tabViews.length > 1) {
-				// only render headers if there is more than one available
-				templateVars.tabHeaders = _.map(this._tabViews, function(tabView, i) {
-					return {
-						tabId: tabView.id,
-						tabIndex: i,
-						label: tabView.getLabel()
-					};
-				});
-			}
+
+			templateVars.tabHeaders = _.map(this._tabViews, function(tabView, i) {
+				return {
+					tabId: tabView.id,
+					tabIndex: i,
+					label: tabView.getLabel()
+				};
+			});
 
 			this.$el.html(this.template(templateVars));
 
@@ -166,6 +164,8 @@
 
 			this.selectTab(this._currentTabId);
 
+			this._updateTabVisibilities();
+
 			this._dirty = false;
 		},
 
@@ -224,6 +224,8 @@
 
 			if (this._dirty) {
 				this.render();
+			} else {
+				this._updateTabVisibilities();
 			}
 
 			if (this._currentTabId) {
@@ -241,6 +243,37 @@
 		},
 
 		/**
+		 * Update tab headers based on the current model
+		 */
+		_updateTabVisibilities: function() {
+			// update tab header visibilities
+			var self = this;
+			var deselect = false;
+			var countVisible = 0;
+			var $tabHeaders = this.$el.find('.tabHeaders li');
+			_.each(this._tabViews, function(tabView) {
+				var isVisible = tabView.canDisplay(self.model);
+				if (isVisible) {
+					countVisible += 1;
+				}
+				if (!isVisible && self._currentTabId === tabView.id) {
+					deselect = true;
+				}
+				$tabHeaders.filterAttr('data-tabid', tabView.id).toggleClass('hidden', !isVisible);
+			});
+
+			// hide the whole container if there is only one tab
+			this.$el.find('.tabHeaders').toggleClass('hidden', countVisible <= 1);
+
+			if (deselect) {
+				// select the first visible tab instead
+				var visibleTabId = this.$el.find('.tabHeader:not(.hidden):first').attr('data-tabid');
+				this.selectTab(visibleTabId);
+			}
+
+		},
+
+		/**
 		 * Returns the file info.
 		 *
 		 * @return {OCA.Files.FileInfoModel} file info