Merge pull request #104 from nrenner/sidebar-v2

Replace sidebar with customized leaflet-sidebar-v2 and restore old flexbox tabs
This commit is contained in:
Norbert Renner 2018-03-10 12:10:53 +01:00 committed by GitHub
commit 99a37c5a2e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 252 additions and 141 deletions

View file

@ -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,9 +27,9 @@
"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",
"leaflet.editable": "^1.1.0"
"leaflet-sidebar-v2": "nrenner/leaflet-sidebar-v2#dev",
"leaflet.editable": "^1.1.0",
"codemirror": "^5.35.0"
},
"overrides": {
"leaflet": {
@ -103,7 +103,6 @@
}
},
"resolutions": {
"leaflet": "^1.3.1",
"leaflet-sidebar": "master"
"leaflet": "^1.3.1"
}
}

View file

@ -10,7 +10,11 @@ body, #content {
z-index: 1;
}
.flexcolumn {
.flexcolumn,
.leaflet-sidebar-pane.active,
.dataTables_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 */
.dataTables_wrapper,
.dataTables_scroll,
.dataTables_scrollBody,
table.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;
@ -117,7 +133,7 @@ footer {
}
/* track messages (data tab) */
#tab_data, #profile_upload {
#tab_data, .CodeMirror {
font-size: x-small;
}
@ -209,6 +225,11 @@ https://css-tricks.com/svg-line-animation-works/
* DataTables
*/
table.dataTable {
/* avoid getting centered and header misaligned with flex row (sidebar) */
margin: 0;
}
table.dataTable.mini thead th,
table.dataTable.mini thead td {
padding: 3px 13px 3px 2px;
@ -270,3 +291,36 @@ table.dataTable.display tbody tr.even:hover {
.leaflet-tooltip-right:before {
border-right-color: inherit;
}
/*
* leaflet-sidebar-v2
*/
.leaflet-sidebar-pane#tab_profile,
.leaflet-sidebar-pane#tab_data {
/* Full height for content with inner scrolling,
overrides scroll fix for long content in Firefox */
height: 100%;
}
/* layers control as sidebar tab */
#layers-control-wrapper label {
display: block;
font-size: 0.9rem;
line-height: normal;
}
/* hide currently unused bottom tabs container because of touch border artefacts */
.leaflet-sidebar-tabs > ul:last-child {
display: none;
}
/*
* CodeMirror
*/
.CodeMirror {
height: 100%;
border: 1px solid #ddd;
}

View file

@ -138,7 +138,7 @@ gulp.task('log', function() {
gulp.task('inject', function () {
var target = gulp.src('index.html');
var sources = gulp.src(paths.scripts, { base: '.', read: false });
var sources = gulp.src(paths.scripts.concat(paths.styles), { base: '.', read: false });
return target.pipe(inject(sources, { relative: true }))
.pipe(gulp.dest('.'));

View file

@ -7,7 +7,9 @@
<title>BRouter web client</title>
<!-- inject:css -->
<link rel="stylesheet" href="dist/brouter-web.css" />
<!-- endinject -->
</head>
<body class="flexcolumn">
<nav class="navbar navbar-full navbar-dark bg-inverse">
@ -164,17 +166,35 @@
</div>
</div>
<div id="content" class="flexcolumn">
<div id="map"></div>
<div id="message"></div>
<div id="content" class="flexcolumn flexgrow">
<div id="sidebarTabs" class="leaflet-sidebar-tabs collapsed">
<ul role="tablist">
<li><a href="#tab_layers_control" role="tab"><img src="dist/images/layers.png" width="20px"></a></li>
<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="leaflet-sidebar-flex-row flexgrow">
<div id="map" class="leaflet-sidebar-map"></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="sidebar" class="leaflet-sidebar collapsed">
<div class="leaflet-sidebar-content">
<div class="leaflet-sidebar-pane" id="tab_layers_control">
<h1 class="leaflet-sidebar-header">Layers<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
<div id="layers-control-wrapper"></div>
<div class="leaflet-control-layers-separator"></div>
<div>
<button type="button" id="custom_layers_button" class="btn btn-sm pull-right" title="Add or remove custom layers"><span class="fa fa-plus-square"></span> Custom layers</button>
</div>
</div>
<div class="leaflet-sidebar-pane" id="tab_profile">
<h1 class="leaflet-sidebar-header">Custom routing profile<span class="leaflet-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>
@ -182,20 +202,26 @@
<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>
<ul id="tab" class="nav nav-tabs" role="tablist">
</ul>
<div class="tab-content">
<div class="tab-pane hidden" id="tab_itinerary">
<div class="leaflet-sidebar-pane" id="tab_data">
<h1 class="leaflet-sidebar-header">Data<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
<table id="datatable" class="mini cell-border hover stripe"></table>
</div>
<div class="leaflet-sidebar-pane" id="tab_itinerary">
<h1 class="leaflet-sidebar-header">Itinerary<span class="leaflet-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="message"></div>
</div>
<div class="collapse" id="elevation-chart"></div>
<footer>
@ -222,9 +248,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>

View file

@ -111,7 +111,7 @@ BR.Map = {
map.addLayer(firstLayer);
}
layersControl = L.control.layers(baseLayers, overlays).addTo(map);
layersControl = BR.layersTab(baseLayers, overlays).addTo(map);
L.control.locate({
icon: 'fa fa-location-arrow',

View file

@ -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();
},

View file

@ -59,16 +59,9 @@ BR.Layers = L.Class.extend({
}
});
addLayer = L.easyButton(
'fa-plus-square',
function () {
L.DomUtil.get('custom_layers_button').onclick = function () {
$('#custom_layers').modal();
},
'Add or remove custom layers',
{
position: 'topright'
}
).addTo(map);
};
},
_remove: function(evt) {

12
js/control/LayersTab.js Normal file
View file

@ -0,0 +1,12 @@
BR.LayersTab = L.Control.Layers.extend({
addTo: function (map) {
this._map = map;
this.onAdd(map);
L.DomUtil.get('layers-control-wrapper').appendChild(this._form);
return this;
}
});
BR.layersTab = function (baseLayers, overlays, options) {
return new BR.LayersTab(baseLayers, overlays, options);
};

View file

@ -2,10 +2,12 @@ BR.Profile = L.Evented.extend({
cache: {},
initialize: function () {
var textArea = L.DomUtil.get('profile_upload');
this.editor = CodeMirror.fromTextArea(textArea, {});
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
});
@ -15,9 +17,7 @@ BR.Profile = L.Evented.extend({
var button = evt.target || evt.srcElement;
evt.preventDefault();
this.ele.value = null;
this.ele.defaultValue = null;
autosize.update(this.ele);
this._setValue("");
this.fire('clear');
button.blur();
@ -26,11 +26,11 @@ BR.Profile = L.Evented.extend({
update: function(options) {
var profileName = options.profile,
profileUrl,
ele = this.ele,
dirty = ele.defaultValue !== ele.value;
empty = !this.editor.getValue(),
clean = this.editor.isClean();
this.profileName = profileName;
if (profileName && BR.conf.profilesUrl && (!ele.value || !dirty)) {
if (profileName && BR.conf.profilesUrl && (empty || clean)) {
if (!(profileName in this.cache)) {
profileUrl = BR.conf.profilesUrl + profileName + '.brf';
BR.Util.get(profileUrl, L.bind(function(err, profileText) {
@ -43,22 +43,22 @@ BR.Profile = L.Evented.extend({
// don't set when option has changed while loading
if (!this.profileName || this.profileName === profileName) {
ele.value = profileText;
ele.defaultValue = ele.value;
autosize.update(this.ele);
this._setValue(profileText);
}
}, this));
} else {
ele.value = this.cache[profileName];
ele.defaultValue = ele.value;
autosize.update(this.ele);
this._setValue(this.cache[profileName]);
}
}
},
show: function() {
this.editor.refresh();
},
_upload: function(evt) {
var button = evt.target || evt.srcElement,
profile = this.ele.value;
profile = this.editor.getValue();
this.message.hide();
$(button).button('uploading');
@ -71,5 +71,10 @@ BR.Profile = L.Evented.extend({
$(button).blur();
}
});
},
_setValue: function(profileText) {
this.editor.setValue(profileText);
this.editor.markClean();
}
});

View file

@ -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);
}
});

View file

@ -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: []
});

View file

@ -29,9 +29,9 @@
itinerary,
elevation,
download,
tabs,
profile,
trackMessages,
sidebar,
drawButton,
deleteButton,
drawToolbar,
@ -217,22 +217,14 @@
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({
listeningTabs: {
'tab_profile': profile,
'tab_data': trackMessages
}
}).addTo(map);
nogos.addTo(map);
nogos.preventRoutePointOnCreate(routing);
@ -319,6 +311,7 @@
map._onResize();
});
var onHide = function() {
if (this.id && BR.Util.localStorageAvailable()) {
localStorage[this.id] = 'true';
@ -329,13 +322,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 +330,7 @@
$(this).collapse('hide');
}
});
if (BR.Util.localStorageAvailable() && localStorage[sidebar.id] !== 'true') {
toggleSidebar();
}
}
mapContext = BR.Map.initMap();

View file

@ -36,7 +36,7 @@ BR.Elevation = L.Control.Elevation.extend({
addBelow: function(map) {
// waiting for https://github.com/MrMufflon/Leaflet.Elevation/pull/66
// this.width($('#map').outerWidth());
this.options.width = $('#map').outerWidth();
this.options.width = $('#content').outerWidth();
if (this.getContainer() != null) {
this.remove(map);

85
js/plugin/Sidebar.js Normal file
View file

@ -0,0 +1,85 @@
BR.Sidebar = L.Control.Sidebar.extend({
storageId: 'sidebar-control',
options: {
position: 'right',
container: 'sidebar',
tabContainer: 'sidebarTabs',
autopan: false,
// 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();
if (L.Browser.touch && BR.Browser.touchScreenDetectable && !BR.Browser.touchScreen) {
L.DomUtil.removeClass(this._container, 'leaflet-touch');
L.DomUtil.removeClass(this._tabContainer, 'leaflet-touch');
}
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);
};