Add shortcuts to toggle sidebar and switch tabs
The 'T' key will show/hide the most recent sidebar tab. Pressing 'Shift+T' will switch to the next sidebar tab, possibly wrapping around to the first tab. If the Itinerary tab is hidden, it will be skipped.
This commit is contained in:
Henrik Fehlauer
parent
e56d213931
commit
844a9038ee
3 changed files with 71 additions and 10 deletions
27
index.html
27
index.html
|
|
@ -543,7 +543,12 @@
|
|||
<div id="sidebarTabs" class="leaflet-sidebar-tabs collapsed">
|
||||
<ul role="tablist">
|
||||
<li>
|
||||
<a href="#tab_layers_control" role="tab" data-i18n="[title]sidebar.layers.title" title="Layers">
|
||||
<a
|
||||
href="#tab_layers_control"
|
||||
role="tab"
|
||||
data-i18n="[title]sidebar.layers.tooltip"
|
||||
title="Select layers"
|
||||
>
|
||||
<!--
|
||||
https://github.com/feathericons/feather/blob/0dc2bf5c9d01759e47485d9498aefc02cac1d845/icons/layers.svg
|
||||
MIT License: https://github.com/feathericons/feather/blob/master/LICENSE
|
||||
|
|
@ -567,7 +572,11 @@
|
|||
</a>
|
||||
</li>
|
||||
<li hidden>
|
||||
<a href="#tab_itinerary" role="tab" data-i18n="[title]sidebar.itinerary.title" title="Itinerary"
|
||||
<a
|
||||
href="#tab_itinerary"
|
||||
role="tab"
|
||||
data-i18n="[title]sidebar.itinerary.tooltip"
|
||||
title="Show Itinerary"
|
||||
><i class="fa fa-map-signs"></i
|
||||
></a>
|
||||
</li>
|
||||
|
|
@ -575,18 +584,26 @@
|
|||
<a
|
||||
href="#tab_profile"
|
||||
role="tab"
|
||||
data-i18n="[title]sidebar.customize-profile.title"
|
||||
data-i18n="[title]sidebar.customize-profile.tooltip"
|
||||
title="Customize profile"
|
||||
><i class="fa fa-wrench"></i
|
||||
></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#tab_data" role="tab" data-i18n="[title]sidebar.data.title" title="Data"
|
||||
<a
|
||||
href="#tab_data"
|
||||
role="tab"
|
||||
data-i18n="[title]sidebar.data.tooltip"
|
||||
title="Show detailed route data table"
|
||||
><i class="fa fa-table"></i
|
||||
></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#tab_statistics" role="tab" data-i18n="[title]sidebar.analysis.title" title="Analysis"
|
||||
<a
|
||||
href="#tab_statistics"
|
||||
role="tab"
|
||||
data-i18n="[title]sidebar.analysis.tooltip"
|
||||
title="Analyse route"
|
||||
><i class="fa fa-pie-chart"></i
|
||||
></a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@ BR.Sidebar = L.Control.Sidebar.extend({
|
|||
autopan: false,
|
||||
defaultTabId: '',
|
||||
|
||||
shortcut: {
|
||||
toggleTabs: 84 // char code for 't'
|
||||
},
|
||||
|
||||
// Tabs to be notified when shown or hidden
|
||||
// (tab div id -> object implementing show/hide methods)
|
||||
listeningTabs: {}
|
||||
|
|
@ -17,6 +21,8 @@ BR.Sidebar = L.Control.Sidebar.extend({
|
|||
L.Control.Sidebar.prototype.initialize.call(this, id, options);
|
||||
|
||||
this.oldTab = null;
|
||||
|
||||
L.DomEvent.addListener(document, 'keydown', this._keydownListener, this);
|
||||
},
|
||||
|
||||
addTo: function(map) {
|
||||
|
|
@ -34,6 +40,15 @@ BR.Sidebar = L.Control.Sidebar.extend({
|
|||
this
|
||||
);
|
||||
|
||||
this.recentTab = this.options.defaultTabId;
|
||||
this.on(
|
||||
'content',
|
||||
function(tab) {
|
||||
this.recentTab = tab.id;
|
||||
},
|
||||
this
|
||||
);
|
||||
|
||||
this._rememberTabState();
|
||||
|
||||
if (L.Browser.touch && BR.Browser.touchScreenDetectable && !BR.Browser.touchScreen) {
|
||||
|
|
@ -103,6 +118,30 @@ BR.Sidebar = L.Control.Sidebar.extend({
|
|||
|
||||
_storeActiveTab: function(e) {
|
||||
localStorage.setItem(this.storageId, e.id || '');
|
||||
},
|
||||
|
||||
_keydownListener: function(e) {
|
||||
if (BR.Util.keyboardShortcutsAllowed(e) && e.keyCode === this.options.shortcut.toggleTabs) {
|
||||
if ($('#sidebarTabs > ul > li[class=active]').length) {
|
||||
// sidebar is currently open
|
||||
if (e.shiftKey) {
|
||||
// try to find next tab
|
||||
var nextTab = $('#sidebarTabs > ul > li[class=active] ~ li:not([hidden]) > a');
|
||||
if (!nextTab.length) {
|
||||
// wrap around to first tab
|
||||
nextTab = $('#sidebarTabs > ul > li:not([hidden]) > a');
|
||||
}
|
||||
// switch to next or first tab
|
||||
this.open(nextTab.attr('href').slice(1));
|
||||
} else {
|
||||
// close current tab
|
||||
this.close();
|
||||
}
|
||||
} else {
|
||||
// sidebar is currently closed, open recent or default tab
|
||||
this.open(this.recentTab);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -190,17 +190,21 @@
|
|||
"total_known": "Total Known:",
|
||||
"unknown": "Unknown"
|
||||
},
|
||||
"title": "Analysis"
|
||||
"title": "Analysis",
|
||||
"tooltip": "Analyse route\n(T key to toggle, Shift+T to switch to next tab)"
|
||||
},
|
||||
"customize-profile": {
|
||||
"title": "Customize profile"
|
||||
"title": "Customize profile",
|
||||
"tooltip": "Customize profile\n(T key to toggle, Shift+T to switch to next tab)"
|
||||
},
|
||||
"data": {
|
||||
"sync-map": "Synchronize map",
|
||||
"title": "Data"
|
||||
"title": "Data",
|
||||
"tooltip": "Show detailed route data table\n(T key to toggle, Shift+T to switch to next tab)"
|
||||
},
|
||||
"itinerary": {
|
||||
"title": "Itinerary"
|
||||
"title": "Itinerary",
|
||||
"tooltip": "Show itinerary\n(T key to toggle, Shift+T to switch to next tab)"
|
||||
},
|
||||
"layers": {
|
||||
"category": {
|
||||
|
|
@ -226,7 +230,8 @@
|
|||
"name": "Name",
|
||||
"type": "Type"
|
||||
},
|
||||
"title": "Layers"
|
||||
"title": "Layers",
|
||||
"tooltip": "Select layers\n(T key to toggle, Shift+T to switch to next tab)"
|
||||
},
|
||||
"profile": {
|
||||
"apply": "Apply",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue