Replace sidebar with sidebar-v2, restore old flexbox tabs (#90) (WIP)
This commit is contained in:
Norbert Renner
parent
1393860148
commit
443ca9c03e
9 changed files with 160 additions and 112 deletions
14
bower.json
14
bower.json
|
|
@ -16,7 +16,7 @@
|
|||
"async": "~0.9.2",
|
||||
"d3": "~3.5.5",
|
||||
"bootstrap": "4.0.0-alpha.5",
|
||||
"DataTables": "~1.10.13",
|
||||
"DataTables": "~1.10.16",
|
||||
"leaflet.elevation": "MrMufflon/Leaflet.Elevation#master",
|
||||
"leaflet-control-geocoder": "~1.5.8",
|
||||
"Leaflet.EasyButton": "*",
|
||||
|
|
@ -27,8 +27,7 @@
|
|||
"leaflet.locatecontrol": "^0.60.0",
|
||||
"font-awesome": "^4.7.0",
|
||||
"bootstrap-select": "hugdx/bootstrap-select#patch-1",
|
||||
"leaflet-sidebar": "Turbo87/leaflet-sidebar#master",
|
||||
"autosize": "^3.0.20",
|
||||
"sidebar-v2": "~0.4.0",
|
||||
"leaflet.editable": "^1.1.0"
|
||||
},
|
||||
"overrides": {
|
||||
|
|
@ -100,10 +99,15 @@
|
|||
"jquery": "*",
|
||||
"bootstrap": "*"
|
||||
}
|
||||
},
|
||||
"sidebar-v2": {
|
||||
"main": [
|
||||
"css/leaflet-sidebar.css",
|
||||
"js/leaflet-sidebar.js"
|
||||
]
|
||||
}
|
||||
},
|
||||
"resolutions": {
|
||||
"leaflet": "^1.3.1",
|
||||
"leaflet-sidebar": "master"
|
||||
"leaflet": "^1.3.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,11 @@ body, #content {
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
.flexcolumn {
|
||||
.flexcolumn,
|
||||
.sidebar-pane.active,
|
||||
#datatable_wrapper,
|
||||
.dataTables_scroll,
|
||||
.dataTables_scrollBody {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -30,7 +34,7 @@ body, #content {
|
|||
flex-direction: row;
|
||||
}
|
||||
|
||||
#content {
|
||||
.flexgrow {
|
||||
-webkit-box-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
|
|
@ -38,6 +42,18 @@ body, #content {
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
/* 'auto' (1 1 auto) instead of '1' (1 1 0) needed for DataTables tab in Firefox */
|
||||
#datatable_wrapper,
|
||||
.dataTables_scroll,
|
||||
.dataTables_scrollBody,
|
||||
#datatable {
|
||||
-webkit-box-flex: auto;
|
||||
-moz-box-flex: auto;
|
||||
-webkit-flex: auto;
|
||||
-ms-flex: auto;
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
footer {
|
||||
-webkit-box-flex: none;
|
||||
-moz-box-flex: none;
|
||||
|
|
@ -270,3 +286,11 @@ table.dataTable.display tbody tr.even:hover {
|
|||
.leaflet-tooltip-right:before {
|
||||
border-right-color: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
* sidebar-v2
|
||||
*/
|
||||
|
||||
.sidebar-pane {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
60
index.html
60
index.html
|
|
@ -164,36 +164,47 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="content" class="flexcolumn">
|
||||
<div id="map"></div>
|
||||
<div id="content" class="flexcolumn flexgrow">
|
||||
<div id="sidebar" class="sidebar collapsed">
|
||||
<div class="sidebar-tabs">
|
||||
<ul role="tablist">
|
||||
<li hidden><a href="#tab_itinerary" role="tab"><i class="fa fa-map-signs"></i></a></li>
|
||||
<li><a href="#tab_profile" role="tab"><i class="fa fa-wrench"></i></a></li>
|
||||
<li><a href="#tab_data" role="tab"><i class="fa fa-table"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sidebar-content">
|
||||
|
||||
<div id="message"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="sidebar">
|
||||
<form>
|
||||
<label for="profile_upload">Custom routing profile</label>
|
||||
<textarea class="form-control" type="text" id="profile_upload" spellcheck="false" wrap="off" placeholder="Write your custom profile here."></textarea>
|
||||
<div id="profile_message"></div>
|
||||
<div class="form-group" id="profile_buttons">
|
||||
<button id="clear" type="button" class="btn btn-sm"><span class="fa fa-eraser"></span> Clear</button>
|
||||
<button id="upload" type="button" class="btn btn-sm" data-uploading-text="Uploading…"><span class="fa fa-cloud-upload"></span> Upload</button>
|
||||
<a href="http://brouter.de/brouter/costfunctions.html" target="_blank" class="btn btn-sm btn-info pull-right"><span class="fa fa-question"></span> Help</a>
|
||||
<div class="sidebar-pane" id="tab_profile">
|
||||
<h1 class="sidebar-header">Custom routing profile<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
|
||||
<form class="flexcolumn flexgrow">
|
||||
<textarea class="form-control flexgrow" id="profile_upload" spellcheck="false" wrap="off" placeholder="Write your custom profile here."></textarea>
|
||||
<div id="profile_message"></div>
|
||||
<div class="form-group" id="profile_buttons">
|
||||
<button id="clear" type="button" class="btn btn-sm"><span class="fa fa-eraser"></span> Clear</button>
|
||||
<button id="upload" type="button" class="btn btn-sm" data-uploading-text="Uploading…"><span class="fa fa-cloud-upload"></span> Upload</button>
|
||||
<a href="http://brouter.de/brouter/costfunctions.html" target="_blank" class="btn btn-sm btn-info pull-right"><span class="fa fa-question"></span> Help</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<ul id="tab" class="nav nav-tabs" role="tablist">
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane hidden" id="tab_itinerary">
|
||||
<div class="sidebar-pane" id="tab_data">
|
||||
<h1 class="sidebar-header">Data<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
|
||||
<table id="datatable" class="table mini cell-border hover stripe"></table>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-pane" id="tab_itinerary">
|
||||
<h1 class="sidebar-header">Itinerary<span class="sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
|
||||
<div id="itinerary">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane" id="tab_data">
|
||||
<table id="datatable" class="table mini cell-border hover stripe"></table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="map" class="sidebar-map"></div>
|
||||
|
||||
<div id="message"></div>
|
||||
</div>
|
||||
|
||||
<div class="collapse" id="elevation-chart"></div>
|
||||
|
|
@ -222,9 +233,6 @@
|
|||
<p class="stats-label"><span id="cost">- (-)</span></p>
|
||||
</li>
|
||||
</ul>
|
||||
<button id="sidebar-btn" class="btn btn-secondary btn-sm" type="button" aria-label="Toggle sidebar">
|
||||
<span class="fa fa-compress"></span>
|
||||
</button>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ BR.Itinerary = L.Class.extend({
|
|||
|
||||
onAdd: function (map) {
|
||||
this._content = document.getElementById('itinerary');
|
||||
L.DomUtil.removeClass(this._content.parentElement, 'hidden');
|
||||
document.getElementById('tab_itinerary').hidden = false;
|
||||
this.update();
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ BR.Profile = L.Evented.extend({
|
|||
L.DomUtil.get('upload').onclick = L.bind(this._upload, this);
|
||||
L.DomUtil.get('clear').onclick = L.bind(this.clear, this);
|
||||
this.ele = L.DomUtil.get('profile_upload');
|
||||
autosize(this.ele);
|
||||
this.message = new BR.Message('profile_message', {
|
||||
alert: true
|
||||
});
|
||||
|
|
@ -17,7 +16,6 @@ BR.Profile = L.Evented.extend({
|
|||
evt.preventDefault();
|
||||
this.ele.value = null;
|
||||
this.ele.defaultValue = null;
|
||||
autosize.update(this.ele);
|
||||
|
||||
this.fire('clear');
|
||||
button.blur();
|
||||
|
|
@ -45,13 +43,11 @@ BR.Profile = L.Evented.extend({
|
|||
if (!this.profileName || this.profileName === profileName) {
|
||||
ele.value = profileText;
|
||||
ele.defaultValue = ele.value;
|
||||
autosize.update(this.ele);
|
||||
}
|
||||
}, this));
|
||||
} else {
|
||||
ele.value = this.cache[profileName];
|
||||
ele.defaultValue = ele.value;
|
||||
autosize.update(this.ele);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,47 +0,0 @@
|
|||
BR.Tabs = BR.Control.extend({
|
||||
options: {
|
||||
divId: 'sidebar',
|
||||
// tab a.hash > instance
|
||||
tabs: {}
|
||||
},
|
||||
|
||||
initialize: function (options) {
|
||||
L.setOptions(this, options);
|
||||
},
|
||||
|
||||
onAdd: function (map) {
|
||||
var tabs = this.options.tabs;
|
||||
|
||||
for (var key in tabs) {
|
||||
$('<li><a href="' + key + '" role="tab">' + tabs[key].options.heading + '</a></li>').appendTo('#tab');
|
||||
|
||||
if (tabs[key].onAdd) {
|
||||
tabs[key].onAdd(map);
|
||||
}
|
||||
}
|
||||
|
||||
$('#tab a').click(function (e) {
|
||||
e.preventDefault();
|
||||
$(this).tab('show');
|
||||
});
|
||||
|
||||
// e.target = activated tab
|
||||
// e.relatedTarget = previous tab
|
||||
$('#tab a').on('shown.bs.tab', L.bind(function (e) {
|
||||
var tab = this.options.tabs[e.target.hash],
|
||||
prevTab = e.relatedTarget ? this.options.tabs[e.relatedTarget.hash] : null;
|
||||
|
||||
if (tab && tab.show) {
|
||||
tab.show();
|
||||
}
|
||||
if (prevTab && prevTab.hide) {
|
||||
prevTab.hide();
|
||||
}
|
||||
}, this));
|
||||
|
||||
// activate first tab (instead of setting 'active' class in html)
|
||||
$('#tab li:not(.hidden) a:first').tab('show');
|
||||
|
||||
return BR.Control.prototype.onAdd.call(this, map);
|
||||
}
|
||||
});
|
||||
|
|
@ -67,6 +67,9 @@ BR.TrackMessages = L.Evented.extend({
|
|||
paging: false,
|
||||
searching: false,
|
||||
info: false,
|
||||
// flexbox workaround: without scrollY height Firefox extends to content height
|
||||
// (^= minimum height with flexbox?)
|
||||
scrollY: 50,
|
||||
scrollX: true,
|
||||
order: []
|
||||
});
|
||||
|
|
|
|||
35
js/index.js
35
js/index.js
|
|
@ -29,9 +29,9 @@
|
|||
itinerary,
|
||||
elevation,
|
||||
download,
|
||||
tabs,
|
||||
profile,
|
||||
trackMessages,
|
||||
sidebar,
|
||||
drawButton,
|
||||
deleteButton,
|
||||
drawToolbar,
|
||||
|
|
@ -217,22 +217,13 @@
|
|||
routing.addTo(map);
|
||||
elevation.addBelow(map);
|
||||
|
||||
tabs = new BR.Tabs({
|
||||
tabs: {
|
||||
'#tab_itinerary': itinerary,
|
||||
'#tab_data': trackMessages
|
||||
}
|
||||
});
|
||||
if (!BR.conf.transit) {
|
||||
delete tabs.options.tabs['#tab_itinerary'];
|
||||
}
|
||||
map.addControl(tabs);
|
||||
trackMessages.onAdd(map);
|
||||
|
||||
var sidebar = L.control.sidebar('sidebar', {
|
||||
position: 'left'
|
||||
});
|
||||
sidebar.id = 'sidebar-control'; //required for persistence in local storage
|
||||
map.addControl(sidebar);
|
||||
sidebar = BR.sidebar('sidebar', {
|
||||
listeningTabs: {
|
||||
'tab_data': trackMessages
|
||||
}
|
||||
}).addTo(map);
|
||||
|
||||
nogos.addTo(map);
|
||||
nogos.preventRoutePointOnCreate(routing);
|
||||
|
|
@ -319,6 +310,7 @@
|
|||
map._onResize();
|
||||
});
|
||||
|
||||
|
||||
var onHide = function() {
|
||||
if (this.id && BR.Util.localStorageAvailable()) {
|
||||
localStorage[this.id] = 'true';
|
||||
|
|
@ -329,13 +321,6 @@
|
|||
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)
|
||||
|
|
@ -344,9 +329,7 @@
|
|||
$(this).collapse('hide');
|
||||
}
|
||||
});
|
||||
if (BR.Util.localStorageAvailable() && localStorage[sidebar.id] !== 'true') {
|
||||
toggleSidebar();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
mapContext = BR.Map.initMap();
|
||||
|
|
|
|||
77
js/plugin/Sidebar.js
Normal file
77
js/plugin/Sidebar.js
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
BR.Sidebar = L.Control.Sidebar.extend({
|
||||
storageId: 'sidebar-control',
|
||||
|
||||
options: {
|
||||
position: 'right',
|
||||
|
||||
// Tabs to be notified when shown or hidden
|
||||
// (tab div id -> object implementing show/hide methods)
|
||||
listeningTabs: {}
|
||||
},
|
||||
|
||||
initialize: function (id, options) {
|
||||
L.Control.Sidebar.prototype.initialize.call(this, id, options);
|
||||
|
||||
this.oldTab = null;
|
||||
},
|
||||
|
||||
addTo: function (map) {
|
||||
L.Control.Sidebar.prototype.addTo.call(this, map);
|
||||
|
||||
this.on('content', this._notifyOnContent, this);
|
||||
this.on('closing', this._notifyOnClose, this);
|
||||
|
||||
this._rememberTabState();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
_rememberTabState: function () {
|
||||
if (BR.Util.localStorageAvailable()) {
|
||||
this.on('content closing', this._storeActiveTab, this);
|
||||
|
||||
var tabId = localStorage.getItem(this.storageId);
|
||||
|
||||
// not set: open sidebar by default for new users
|
||||
// 'true': legacy value for toggling old sidebar
|
||||
if (tabId === null || tabId === 'true') {
|
||||
tabId = 'tab_profile';
|
||||
}
|
||||
if (tabId !== '') {
|
||||
this.open(tabId);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_notifyShow: function (tab) {
|
||||
if (tab && tab.show) {
|
||||
tab.show();
|
||||
}
|
||||
},
|
||||
|
||||
_notifyHide: function (tab) {
|
||||
if (tab && tab.hide) {
|
||||
tab.hide();
|
||||
}
|
||||
},
|
||||
|
||||
_notifyOnContent: function (e) {
|
||||
var tab = this.options.listeningTabs[e.id];
|
||||
this._notifyHide(this.oldTab);
|
||||
this._notifyShow(tab);
|
||||
this.oldTab = tab;
|
||||
},
|
||||
|
||||
_notifyOnClose: function (e) {
|
||||
this._notifyHide(this.oldTab);
|
||||
this.oldTab = null;
|
||||
},
|
||||
|
||||
_storeActiveTab: function (e) {
|
||||
localStorage.setItem(this.storageId, e.id || '');
|
||||
}
|
||||
});
|
||||
|
||||
BR.sidebar = function (divId, options) {
|
||||
return new BR.Sidebar(divId, options);
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue