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

Add expand/collapse tree buttons

Browse source
This commit is contained in:
Norbert Renner 2019-03-20 18:41:22 +01:00
parent 64957d923b
commit e02be4ca15
3 changed files with 45 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

6
css/style.css
View file

@ -412,7 +412,11 @@ table.dataTable.display tbody tr.even:hover {
} }
#layers-button-group { #layers-button-group {
text-align: right; display: flex;
justify-content: space-between;
}
#tree-button-group {
margin-right: 5px;
} }
#optional-layers-tree { #optional-layers-tree {

10
index.html
View file

@ -282,8 +282,14 @@
<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 id="layers-button-group"> <div id="layers-button-group">
<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> <div hidden id="tree-button-group">
<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> <button type="button" id="expand_tree_button" class="btn btn-sm" data-i18n="[title]sidebar.layers.expand" title="Expand all"><span class="fa fa-plus-square-o"></span></button>
<button type="button" id="collapse_tree_button" class="btn btn-sm" data-i18n="[title]sidebar.layers.collapse" title="Collapse all"><span class="fa fa-minus-square-o"></span></button>
</div>
<div>
<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>
<div hidden id="optional-layers-tree"></div> <div hidden id="optional-layers-tree"></div>
</div> </div>

44
js/control/LayersTab.js
View file

@ -8,6 +8,10 @@ BR.LayersTab = L.Control.Layers.extend({
var layerIndex = BR.layerIndex; var layerIndex = BR.layerIndex;
L.DomUtil.get('layers-control-wrapper').appendChild(this._form);
this.initButtons();
this.addLeafletProvidersLayers(); this.addLeafletProvidersLayers();
var structure = { var structure = {
@ -124,18 +128,6 @@ BR.LayersTab = L.Control.Layers.extend({
this.removeLayer(obj.layer); this.removeLayer(obj.layer);
}; };
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))
@ -164,6 +156,34 @@ BR.LayersTab = L.Control.Layers.extend({
return this; return this;
}, },
initButtons: function () {
var expandTree = function (e) {
this.jstree.open_all();
};
var collapseTree = function (e) {
this.jstree.close_all();
};
var toggleOptionalLayers = function (e) {
var button = L.DomUtil.get('optional_layers_button');
var treeButtons = L.DomUtil.get('tree-button-group');
var div = L.DomUtil.get('optional-layers-tree');
div.hidden = !div.hidden;
treeButtons.hidden = !treeButtons.hidden;
button.classList.toggle('active');
if (div.hidden) {
this.deselectNode();
}
};
L.DomUtil.get('expand_tree_button').onclick = L.bind(expandTree, this);
L.DomUtil.get('collapse_tree_button').onclick = L.bind(collapseTree, this);
L.DomUtil.get('optional_layers_button').onclick = L.bind(toggleOptionalLayers, this);
},
toJsTree: function (layerTree) { toJsTree: function (layerTree) {
var data = []; var data = [];
var self = this; var self = this;