ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remember collapsible state in local storage (elevation chart, sidebar)

Browse source
This commit is contained in:
Gautier Pelloux-Prayer 2017-04-25 10:22:39 +02:00
parent 3cc0a3b9ee
commit bf3c5a683e
2 changed files with 29 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -211,7 +211,7 @@
</div> </div>
</div> </div>
<div class="collapse in" id="elevation-chart"></div> <div class="collapse" id="elevation-chart"></div>
<footer> <footer>
<div class="flexrow"> <div class="flexrow">
@ -237,7 +237,7 @@
<span class="fa fa-compress"></span> <span class="fa fa-compress"></span>
</button> </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> <span class="fa fa-area-chart"></span>
</button> </button>
</div> </div>

27
js/index.js
View file

@ -222,6 +222,7 @@
var sidebar = L.control.sidebar('sidebar', { var sidebar = L.control.sidebar('sidebar', {
position: 'left' position: 'left'
}); });
sidebar.id = 'sidebar-control'; //required for persistence in local storage
map.addControl(sidebar); map.addControl(sidebar);
nogos.addTo(map); nogos.addTo(map);
@ -266,10 +267,34 @@
map._onResize(); 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.toggle();
$('#sidebar-btn').toggleClass('active'); $('#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(); mapContext = BR.Map.initMap();