From e02be4ca15d25eb1e7385110dbcfacff6986471b Mon Sep 17 00:00:00 2001
From: Norbert Renner <norbert.renner@gmx.de>
Date: Wed, 20 Mar 2019 18:41:22 +0100
Subject: [PATCH] Add expand/collapse tree buttons

---
 css/style.css           |  6 +++++-
 index.html              | 10 ++++++++--
 js/control/LayersTab.js | 44 ++++++++++++++++++++++++++++++-----------
 3 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/css/style.css b/css/style.css
index 8c66c5e..b038e0d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -412,7 +412,11 @@ table.dataTable.display tbody tr.even:hover {
 }
 
 #layers-button-group {
-    text-align: right;
+    display: flex;
+    justify-content: space-between;
+}
+#tree-button-group {
+    margin-right: 5px;
 }
 
 #optional-layers-tree {
diff --git a/index.html b/index.html
index 7f139a3..0919c95 100644
--- a/index.html
+++ b/index.html
@@ -282,8 +282,14 @@
                         <div id="layers-control-wrapper"></div>
                         <div class="leaflet-control-layers-separator"></div>
                         <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>
-                            <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 hidden id="tree-button-group">
+                                <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 hidden id="optional-layers-tree"></div>
                     </div>
diff --git a/js/control/LayersTab.js b/js/control/LayersTab.js
index bc19d82..66e49e8 100644
--- a/js/control/LayersTab.js
+++ b/js/control/LayersTab.js
@@ -8,6 +8,10 @@ BR.LayersTab = L.Control.Layers.extend({
 
         var layerIndex = BR.layerIndex;
 
+        L.DomUtil.get('layers-control-wrapper').appendChild(this._form);
+
+        this.initButtons();
+
         this.addLeafletProvidersLayers();
 
         var structure = {
@@ -124,18 +128,6 @@ BR.LayersTab = L.Control.Layers.extend({
             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')
             .on('select_node.jstree', L.bind(onSelectNode, this))
             .on('deselect_node.jstree', L.bind(onDeselectNode, this))
@@ -164,6 +156,34 @@ BR.LayersTab = L.Control.Layers.extend({
         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) {
         var data = [];
         var self = this;