use history.pushState to switch apps

4 files changed, 27 insertions, 8 deletions

diff --git a/www/index.html b/www/index.html
index 8544b28..e4a462d 100644
--- a/www/index.html
+++ b/www/index.html
@@ -70,9 +70,9 @@
             <span class="brand">Radio Helsinki - Import</span>
             <div class="nav-collapse">
               <ul class="nav">
-                <li id="nav-btn-shows"><a href="#" onclick="apps_select('shows')">Sendungen</a></li>
-                <li id="nav-btn-jingles"><a href="#" onclick="apps_select('jingles')">Jingles</a></li>
-                <li id="nav-btn-musicpools"><a href="#" onclick="apps_select('musicpools')">Musikpools</a></li>
+                <li id="nav-btn-shows"><a href="#shows/" onclick="event.preventDefault(); apps_select('shows')">Sendungen</a></li>
+                <li id="nav-btn-jingles"><a href="#jingles/" onclick="event.preventDefault(); apps_select('jingles')">Jingles</a></li>
+                <li id="nav-btn-musicpools"><a href="#musicpools/" onclick="event.preventDefault(); apps_select('musicpools')">Musikpools</a></li>
               </ul>
               <form id="logoutform" class="navbar-form pull-right">
                 <span class="navbar-text">angmeldet als <strong id="username-field">UNKNOWN</strong></span>&nbsp;&nbsp;
diff --git a/www/js/apps.js b/www/js/apps.js
index 8f30ef0..af5cd6d 100644
--- a/www/js/apps.js
+++ b/www/js/apps.js
@@ -31,6 +31,8 @@ function apps_select(app) {
 
        $('#app-musicpools').show();
        $('#nav-btn-musicpools').addClass('active');
+
+       apps_current = app;
        musicpools_init();
        break;
      case "jingles":
@@ -42,6 +44,7 @@ function apps_select(app) {
        $('#app-jingles').show();
        $('#nav-btn-jingles').addClass('active');
 
+       apps_current = app;
        jingles_init();
        break;
      default:
@@ -53,17 +56,26 @@ function apps_select(app) {
        $('#app-shows').show();
        $('#nav-btn-shows').addClass('active');
 
-       apps_current = 'shows';
+       apps_current = app =  'shows';
        shows_init();
-   }
-   sessionStorage.setItem("apps_current", app);
+  }
+  if (locationHashValue() !== app) {
+    history.pushState(null, null, '/#' + app + '/');
+  }
 }
 
 function apps_init() {
-  apps_current = sessionStorage.getItem("apps_current");
+  apps_current = locationHashValue();
+
   if(auth_token && auth_username) {
     apps_select(apps_current);
   }
+
+  $(window).on('popstate', function(event) {
+    if(auth_token && auth_username) {
+      apps_select(locationHashValue());
+    }
+  });
 }
 
 function apps_cleanup() {
@@ -71,6 +83,8 @@ function apps_cleanup() {
   jingles_cleanup();
   musicpools_cleanup();
 
+  $(window).off('popstate');
+
   sessionStorage.removeItem("apps_current");
   delete apps_current;
 }
diff --git a/www/js/auth.js b/www/js/auth.js
index 8da85c8..5bb7dce 100644
--- a/www/js/auth.js
+++ b/www/js/auth.js
@@ -30,7 +30,7 @@ function auth_loginSuccess(data) {
      auth_token = data.token;
      sessionStorage.setItem("auth_token", auth_token);
 
-     apps_select('shows');
+     apps_select(apps_current);
 
      $('#username-field').html(auth_username);
      $('#loginbox').slideUp();
diff --git a/www/js/utils.js b/www/js/utils.js
index eeebadd..af0b479 100644
--- a/www/js/utils.js
+++ b/www/js/utils.js
@@ -190,3 +190,8 @@ function clock_init() {
 function clock_add_callback(cb) {
   clock.addCallback(cb);
 }
+
+function locationHashValue() {
+  var hash = window.location.hash.match(/#([a-z]+)\/?.*/);
+  return hash ? hash[1] : '';
+}