Update secondary nav active item highlight from js router

[rails.git] / app / assets / javascripts / router.js

diff --git a/app/assets/javascripts/router.js b/app/assets/javascripts/router.js
index c397a44ec4de3eeeb0e338aceaeca557f3a6865c..c4e52417004c5c50871f23fe28edf967596c68b7 100644 (file)
--- a/app/assets/javascripts/router.js
+++ b/app/assets/javascripts/router.js
@@ -101,53 +101,55 @@ OSM.Router = function (map, rts) {
 
   var router = {};
 
-  if (window.history && window.history.pushState) {
-    $(window).on("popstate", function (e) {
-      if (!e.originalEvent.state) return; // Is it a real popstate event or just a hash change?
-      var path = window.location.pathname + window.location.search,
-          route = routes.recognize(path);
-      if (path === currentPath) return;
-      currentRoute.run("unload", null, route === currentRoute);
-      currentPath = path;
-      currentRoute = route;
-      currentRoute.run("popstate", currentPath);
-      map.setState(e.originalEvent.state, { animate: false });
-    });
+  function updateSecondaryNav() {
+    $("header nav.secondary > ul > li > a").each(function () {
+      var active = $(this).attr("href") === window.location.pathname;
 
-    router.route = function (url) {
-      var path = url.replace(/#.*/, ""),
-          route = routes.recognize(path);
-      if (!route) return false;
-      currentRoute.run("unload", null, route === currentRoute);
-      var state = OSM.parseHash(url);
-      map.setState(state);
-      window.history.pushState(state, document.title, url);
-      currentPath = path;
-      currentRoute = route;
-      currentRoute.run("pushstate", currentPath);
-      return true;
-    };
+      $(this)
+        .toggleClass("text-secondary", !active)
+        .toggleClass("text-secondary-emphasis", active);
+    });
+  }
 
-    router.replace = function (url) {
-      window.history.replaceState(OSM.parseHash(url), document.title, url);
-    };
+  $(window).on("popstate", function (e) {
+    if (!e.originalEvent.state) return; // Is it a real popstate event or just a hash change?
+    var path = window.location.pathname + window.location.search,
+        route = routes.recognize(path);
+    if (path === currentPath) return;
+    currentRoute.run("unload", null, route === currentRoute);
+    currentPath = path;
+    currentRoute = route;
+    currentRoute.run("popstate", currentPath);
+    updateSecondaryNav();
+    map.setState(e.originalEvent.state, { animate: false });
+  });
+
+  router.route = function (url) {
+    var path = url.replace(/#.*/, ""),
+        route = routes.recognize(path);
+    if (!route) return false;
+    currentRoute.run("unload", null, route === currentRoute);
+    var state = OSM.parseHash(url);
+    map.setState(state);
+    window.history.pushState(state, document.title, url);
+    currentPath = path;
+    currentRoute = route;
+    currentRoute.run("pushstate", currentPath);
+    updateSecondaryNav();
+    return true;
+  };
 
-    router.stateChange = function (state) {
-      if (state.center) {
-        window.history.replaceState(state, document.title, OSM.formatHash(state));
-      } else {
-        window.history.replaceState(state, document.title, window.location);
-      }
-    };
-  } else {
-    router.route = router.replace = function (url) {
-      window.location.assign(url);
-    };
+  router.replace = function (url) {
+    window.history.replaceState(OSM.parseHash(url), document.title, url);
+  };
 
-    router.stateChange = function (state) {
-      if (state.center) window.location.replace(OSM.formatHash(state));
-    };
-  }
+  router.stateChange = function (state) {
+    if (state.center) {
+      window.history.replaceState(state, document.title, OSM.formatHash(state));
+    } else {
+      window.history.replaceState(state, document.title, window.location);
+    }
+  };
 
   router.updateHash = function () {
     var hash = OSM.formatHash(map);