Hash navigation

2 files changed, 22 insertions, 5 deletions

diff --git a/result/index.html b/result/index.html
index e136110..cfd2473 100644
--- a/result/index.html
+++ b/result/index.html
@@ -38,7 +38,7 @@
 
       <ul class="nav nav-tabs" id="tab-menu" role="tablist">
         <li class="nav-item">
-          <a class="nav-link active" id="styles-tab" data-toggle="tab" href="#styles" role="tab" aria-controls="styles" aria-selected="true">
+          <a class="nav-link" id="styles-tab" data-toggle="tab" href="#styles" role="tab" aria-controls="styles" aria-selected="false">
             Rozkład stylów
           </a>
         </li>
@@ -59,7 +59,7 @@
         </li>
       </ul>
       <div class="tab-content" id="tab-content">
-        <div class="tab-pane fade show active" id="styles" role="tabpanel" aria-labelledby="styles-tab">
+        <div class="tab-pane fade" id="styles" role="tabpanel" aria-labelledby="styles-tab">
           <canvas id="styles-chart" width="100%"></canvas>
         </div>
         <div class="tab-pane fade" id="abv-ratings" role="tabpanel" aria-labelledby="abv-ratings-tab">
diff --git a/result/krafcik.js b/result/krafcik.js
index cac3371..ba8ccf9 100644
--- a/result/krafcik.js
+++ b/result/krafcik.js
@@ -1,5 +1,16 @@
 $(document).ready(function() {
 
+    var initTab = function(tab, push) {
+        if (!tab) {
+            tab = location.hash.replace('#', '') || 'styles';
+        }
+        console.log(tab, push);
+        $(`a#${tab}-tab`).tab('show');
+        if (push) {
+            history.pushState({}, '', '#' + tab);
+        }
+    };
+
     $.when(
         $.getJSON('beers.json'),
         $.getJSON('breweries.json'),
@@ -400,13 +411,19 @@ $(document).ready(function() {
             changeTimeout = setTimeout(updateCharts, 500);
         });
 
-        var pageHash = location.hash.replace('#', '') || 'styles';
-        $(`a#${pageHash}-tab`).click().trigger('shown.bs.tab');
+        initTab(false, true);
         updateCharts();
     });
 
     $('#tab-menu a').on('click', function (e) {
         e.preventDefault();
-        $(this).tab('show');
+        e.stopImmediatePropagation();
+        initTab($(this).attr('aria-controls'), true);
+        return false;
     });
+
+    $(window).on('popstate', function(ev) {
+        initTab(false, false);
+    });
+
 });