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

Add toggle button for optional layers and make scrollable and expandable

Browse source
This commit is contained in:
Norbert Renner 2019-03-20 13:40:54 +01:00
parent 182edb2ee1
commit 64957d923b
3 changed files with 25 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

9
css/style.css
View file

@ -389,6 +389,11 @@ table.dataTable.display tbody tr.even:hover {
height: 100%; height: 100%;
} }
.leaflet-sidebar-content {
/* for optional-layers-tree */
overflow-x: auto;
}
/* layers control as sidebar tab */ /* layers control as sidebar tab */
#layers-control-wrapper label, #layers-control-wrapper label,
#optional-layers-tree { #optional-layers-tree {
@ -406,6 +411,10 @@ table.dataTable.display tbody tr.even:hover {
height: 23px; height: 23px;
} }
#layers-button-group {
text-align: right;
}
#optional-layers-tree { #optional-layers-tree {
margin-top: 5px; margin-top: 5px;
} }

9
index.html
View file

@ -278,13 +278,14 @@
<div class="leaflet-sidebar-content"> <div class="leaflet-sidebar-content">
<div class="leaflet-sidebar-pane" id="tab_layers_control"> <div class="leaflet-sidebar-pane" id="tab_layers_control">
<h1 class="leaflet-sidebar-header"><span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span><span data-i18n="sidebar.layers.title">Layers</span></h1> <h1 class="leaflet-sidebar-header"><span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span><span class="leaflet-sidebar-expand"><i class="fa fa-expand"></i></span><span data-i18n="sidebar.layers.title">Layers</span></h1>
<div id="layers-control-wrapper"></div> <div id="layers-control-wrapper"></div>
<div class="leaflet-control-layers-separator"></div> <div class="leaflet-control-layers-separator"></div>
<div> <div id="layers-button-group">
<button type="button" id="custom_layers_button" class="btn btn-sm pull-right" data-i18n="[title]sidebar.layers.customize" title="Add or remove custom layers"><span class="fa fa-plus-square"></span> <span data-i18n="sidebar.layers.custom-layers">Custom layers</span></button> <button type="button" id="optional_layers_button" class="btn btn-sm" data-i18n="[title]sidebar.layers.optional" title="Add or remove optional layers"><span class="fa fa-cogs"></span> <span data-i18n="sidebar.layers.optional-layers">More</span></button>
<button type="button" id="custom_layers_button" class="btn btn-sm" data-i18n="[title]sidebar.layers.customize" title="Add or remove custom layers"><span class="fa fa-plus-square"></span> <span data-i18n="sidebar.layers.custom-layers">Custom layers</span></button>
</div> </div>
<div id="optional-layers-tree"></div> <div hidden id="optional-layers-tree"></div>
</div> </div>
<div class="leaflet-sidebar-pane" id="tab_profile"> <div class="leaflet-sidebar-pane" id="tab_profile">

11
js/control/LayersTab.js
View file

@ -125,6 +125,17 @@ BR.LayersTab = L.Control.Layers.extend({
}; };
L.DomUtil.get('layers-control-wrapper').appendChild(this._form); L.DomUtil.get('layers-control-wrapper').appendChild(this._form);
// custom collapse to avoid Bootstrap animation
var toggleOptionalLayers = function(e) {
var button = this;
var div = L.DomUtil.get('optional-layers-tree');
div.hidden = !div.hidden;
button.classList.toggle('active');
};
L.DomUtil.get('optional_layers_button').onclick = toggleOptionalLayers;
$('#optional-layers-tree') $('#optional-layers-tree')
.on('select_node.jstree', L.bind(onSelectNode, this)) .on('select_node.jstree', L.bind(onSelectNode, this))
.on('deselect_node.jstree', L.bind(onDeselectNode, this)) .on('deselect_node.jstree', L.bind(onDeselectNode, this))