From bf3c5a683e83c1255a0e2caa16ebec291471f094 Mon Sep 17 00:00:00 2001
From: Gautier Pelloux-Prayer <gautier+git@damsy.net>
Date: Tue, 25 Apr 2017 10:22:39 +0200
Subject: [PATCH] Remember collapsible state in local storage (elevation chart,
 sidebar)

---
 index.html  |  4 ++--
 js/index.js | 29 +++++++++++++++++++++++++++--
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 441ad79..239b0a0 100644
--- a/index.html
+++ b/index.html
@@ -211,7 +211,7 @@
             </div>
     </div>
 
-    <div class="collapse in" id="elevation-chart"></div>
+    <div class="collapse" id="elevation-chart"></div>
 
     <footer>
         <div class="flexrow">
@@ -237,7 +237,7 @@
                 <span class="fa fa-compress"></span>
             </button>
 
-            <button class="btn btn-secondary btn-sm active" type="button" data-toggle="collapse" data-target="#elevation-chart" aria-controls="elevation-chart" id="elevation-btn" aria-expanded="false" aria-label="Toggle elevation chart">
+            <button class="btn btn-secondary btn-sm" type="button" data-toggle="collapse" data-target="#elevation-chart" aria-controls="elevation-chart" id="elevation-btn" aria-expanded="false" aria-label="Toggle elevation chart">
                 <span class="fa fa-area-chart"></span>
             </button>
         </div>
diff --git a/js/index.js b/js/index.js
index ea174fe..60eb42f 100644
--- a/js/index.js
+++ b/js/index.js
@@ -222,6 +222,7 @@
         var sidebar = L.control.sidebar('sidebar', {
             position: 'left'
         });
+        sidebar.id = 'sidebar-control'; //required for persistence in local storage
         map.addControl(sidebar);
 
         nogos.addTo(map);
@@ -266,10 +267,34 @@
             map._onResize();
         });
 
-        $('#sidebar-btn').on('click', function (event) {
+        var onHide = function() {
+            if (this.id && BR.Util.localStorageAvailable()) {
+                localStorage[this.id] = 'true';
+            }
+        };
+        var onShow = function() {
+            if (this.id && BR.Util.localStorageAvailable()) {
+                localStorage.removeItem(this.id);
+            }
+        };
+        var toggleSidebar = function (event) {
             sidebar.toggle();
             $('#sidebar-btn').toggleClass('active');
-        });
+        };
+        $('#sidebar-btn').on('click', toggleSidebar);
+        sidebar.on('shown', onShow);
+        sidebar.on('hidden', onHide);
+        // on page load, we want to restore collapsible elements from previous usage
+        $('.collapse').on('hidden.bs.collapse', onHide)
+                      .on('shown.bs.collapse', onShow)
+                      .each(function() {
+                            if (!(this.id && BR.Util.localStorageAvailable() && localStorage[this.id] === 'true' )) {
+                                $(this).collapse('hide');
+                            }
+                      });
+        if (BR.Util.localStorageAvailable() && localStorage[sidebar.id] !== 'true') {
+            toggleSidebar();
+        }
     }
 
     mapContext = BR.Map.initMap();