Fauxton: Set active nav tab

When a nav tab is clicked on that tab is now highlighted.
This fixes COUCHDB-1842

10 files changed, 18 insertions, 6 deletions

diff --git a/src/fauxton/app/addons/config/base.js b/src/fauxton/app/addons/config/base.js
index f589b16e2..6d3261c3f 100644
--- a/src/fauxton/app/addons/config/base.js
+++ b/src/fauxton/app/addons/config/base.js
@@ -21,7 +21,7 @@ define([
 
 function(app, FauxtonAPI, Config) {
   Config.initialize = function() {
-    FauxtonAPI.addHeaderLink({title: "Config", href: "#_config"});
+    FauxtonAPI.addHeaderLink({title: "Config", href: "#_config", id: "config"});
   };
 
   return Config;
diff --git a/src/fauxton/app/addons/config/routes.js b/src/fauxton/app/addons/config/routes.js
index d86715fb8..3f8d7ac6d 100644
--- a/src/fauxton/app/addons/config/routes.js
+++ b/src/fauxton/app/addons/config/routes.js
@@ -30,6 +30,8 @@ function(app, FauxtonAPI, Config) {
 
     roles: ["_admin"],
 
+    selectedHeaderId: "config",
+
     crumbs: [
       {"name": "Config","link": "_config"}
     ],
diff --git a/src/fauxton/app/addons/logs/base.js b/src/fauxton/app/addons/logs/base.js
index c17e159cf..dfecb03f6 100644
--- a/src/fauxton/app/addons/logs/base.js
+++ b/src/fauxton/app/addons/logs/base.js
@@ -21,7 +21,7 @@ define([
 
 function(app, FauxtonAPI, Log) {
   Log.initialize = function() {
-    FauxtonAPI.addHeaderLink({title: "Log", href: "#_log"});
+    FauxtonAPI.addHeaderLink({title: "Log", href: "#_log", id: "log"});
   };
 
   return Log;
diff --git a/src/fauxton/app/addons/logs/routes.js b/src/fauxton/app/addons/logs/routes.js
index 1023ffe52..0961f7b7c 100644
--- a/src/fauxton/app/addons/logs/routes.js
+++ b/src/fauxton/app/addons/logs/routes.js
@@ -32,6 +32,8 @@ function(app, FauxtonAPI, Log) {
       "_log": "showLog"
     },
 
+    selectedHeaderId: "log",
+
     roles: ["_admin"],
 
     apiUrl: function() {
diff --git a/src/fauxton/app/addons/stats/base.js b/src/fauxton/app/addons/stats/base.js
index 4721399dd..ac09437ad 100644
--- a/src/fauxton/app/addons/stats/base.js
+++ b/src/fauxton/app/addons/stats/base.js
@@ -19,7 +19,7 @@ define([
 function(app, FauxtonAPI, Stats) {
 
   Stats.initialize = function() {
-    FauxtonAPI.addHeaderLink({title: "Statistics", href: "#stats"});
+    FauxtonAPI.addHeaderLink({title: "Statistics", href: "#stats", id: "stats"});
   };
 
   return Stats;
diff --git a/src/fauxton/app/addons/stats/routes.js b/src/fauxton/app/addons/stats/routes.js
index 32017c38f..994b4e203 100644
--- a/src/fauxton/app/addons/stats/routes.js
+++ b/src/fauxton/app/addons/stats/routes.js
@@ -26,6 +26,8 @@ function(app, FauxtonAPI, Stats) {
       "_stats": "showStats"
     },
 
+    selectedHeaderId: "stats",
+
     initialize: function () {
       this.stats = new Stats.Collection();
 
diff --git a/src/fauxton/app/api.js b/src/fauxton/app/api.js
index 58c413d30..b54a0809c 100644
--- a/src/fauxton/app/api.js
+++ b/src/fauxton/app/api.js
@@ -256,6 +256,11 @@ function(app, Fauxton) {
       // Only want to redo the template if its a full render
       if (!this.renderedState) {
         masterLayout.setTemplate(this.layout);
+          $('#nav-links li').removeClass('active');
+
+        if (this.selectedHeaderId) {
+          $('#nav-links li#' + this.selectedHeaderId).addClass('active');
+        }
       }
 
       //add page loader. "app-container" shouldn't be overwritten. Even if a new index.underscore is provided in settings.json
diff --git a/src/fauxton/app/modules/databases/routes.js b/src/fauxton/app/modules/databases/routes.js
index 5772ee8c4..88c939f19 100644
--- a/src/fauxton/app/modules/databases/routes.js
+++ b/src/fauxton/app/modules/databases/routes.js
@@ -40,6 +40,8 @@ function(app, FauxtonAPI, Databases, Views) {
       return this.databases.url();
     },
 
+    selectedHeaderId: "database",
+
     initialize: function() {
       this.databases = new Databases.List();
       this.deferred = FauxtonAPI.Deferred();
diff --git a/src/fauxton/app/modules/fauxton/base.js b/src/fauxton/app/modules/fauxton/base.js
index b69f4ae1d..3d7d93d46 100644
--- a/src/fauxton/app/modules/fauxton/base.js
+++ b/src/fauxton/app/modules/fauxton/base.js
@@ -64,11 +64,10 @@ function(app, Backbone) {
     template: "templates/fauxton/nav_bar",
     // TODO: can we generate this list from the router?
     navLinks: [
-      {href:"#/_all_dbs", title:"Databases"}
+      {href:"#/_all_dbs", title:"Databases", id: "database"}
     ],
 
     initialize: function() {
-      this.on("link:add", this.render, this);
     },
 
     serialize: function() {
diff --git a/src/fauxton/app/templates/fauxton/nav_bar.html b/src/fauxton/app/templates/fauxton/nav_bar.html
index ebe57d011..decc07a45 100644
--- a/src/fauxton/app/templates/fauxton/nav_bar.html
+++ b/src/fauxton/app/templates/fauxton/nav_bar.html
@@ -25,7 +25,7 @@ the License.
         <ul id="nav-links" class="nav pull-right">
           <% _.each(navLinks, function(link) { %>
             <% if (!link.view) { %>
-              <li><a href="<%= link.href %>"><%= link.title %></a></li>
+            <li id= "<%= link.id %>" ><a href="<%= link.href %>"><%= link.title %></a></li>
             <% } %>
           <% }); %>
         </ul>