feat: add a global toolbox in browser

fix #2097
cf #1500

umap/static/umap/js/modules/browser.js

@@ -1,6 +1,7 @@
 import { DomEvent, DomUtil, stamp } from '../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from './i18n.js'
 import * as Icon from './rendering/icon.js'
+import * as Utils from './utils.js'
 
 export default class Browser {
   constructor(map) {
@@ -164,6 +165,7 @@ export default class Browser {
     })
     this.filtersTitle = container.querySelector('summary')
     this.toggleBadge()
+    this.addMainToolbox(container)
     this.dataContainer = DomUtil.create('div', '', container)
 
     let fields = [
@@ -215,6 +217,36 @@ export default class Browser {
     }
   }
 
+  addMainToolbox(container) {
+    const [toolbox, { toggle, fitBounds, download }] = Utils.loadTemplateWithRefs(`
+      <div class="main-toolbox">
+        <i class="icon icon-16 icon-eye" title="${translate('show/hide all layers')}" data-ref="toggle"></i>
+        <i class="icon icon-16 icon-zoom" title="${translate('zoom to data extent')}" data-ref="fitBounds"></i>
+        <i class="icon icon-16 icon-download" title="${translate('download visible data')}" data-ref="download"></i>
+      </div>
+    `)
+    container.appendChild(toolbox)
+    toggle.addEventListener('click', () => this.toggleLayers())
+    fitBounds.addEventListener('click', () => this.map.fitDataBounds())
+    download.addEventListener('click', () => this.map.share.open())
+  }
+
+  toggleLayers() {
+    // If at least one layer is shown, hide it
+    // otherwise show all
+    let allHidden = true
+    this.map.eachBrowsableDataLayer((datalayer) => {
+      if (datalayer.isVisible()) allHidden = false
+    })
+    this.map.eachBrowsableDataLayer((datalayer) => {
+      if (allHidden) {
+        datalayer.show()
+      } else {
+        if (datalayer.isVisible()) datalayer.hide()
+      }
+    })
+  }
+
   static backButton(map) {
     const button = DomUtil.createButtonIcon(
       DomUtil.create('li', '', undefined),

umap/static/umap/map.css

@@ -913,6 +913,12 @@ a.umap-control-caption,
 .umap-caption .umap-map-author {
     padding-inline-start: 31px;
 }
+.umap-browser .main-toolbox {
+    padding-left: 4px; /* Align with toolbox below  */
+}
+.umap-browser .main-toolbox i {
+    cursor: pointer;
+}
 
 
 /* ********************************* */

umap/tests/integration/test_browser.py

@@ -414,3 +414,65 @@ def test_should_have_edit_buttons_in_edit_mode(live_server, openmap, page, boots
     expect(delete_layer).to_be_visible()
     expect(edit_feature).to_have_count(3)
     expect(delete_feature).to_have_count(3)
+
+
+def test_main_toolbox_toggle_all_layers(live_server, map, page):
+    map.settings["properties"]["onLoadPanel"] = "databrowser"
+    map.save()
+    data = {
+        "type": "FeatureCollection",
+        "features": [
+            {
+                "type": "Feature",
+                "properties": {"name": "one point"},
+                "geometry": {"type": "Point", "coordinates": [3.33, 46.92]},
+            },
+        ],
+    }
+    DataLayerFactory(map=map, data=data)
+    data = {
+        "type": "FeatureCollection",
+        "features": [
+            {
+                "type": "Feature",
+                "properties": {"name": "one other point"},
+                "geometry": {"type": "Point", "coordinates": [3.34, 46.94]},
+            },
+        ],
+    }
+    DataLayerFactory(map=map, data=data)
+    data = {
+        "type": "FeatureCollection",
+        "features": [
+            {
+                "type": "Feature",
+                "properties": {"name": "another point"},
+                "geometry": {"type": "Point", "coordinates": [3.35, 46.95]},
+            },
+        ],
+        "_umap_options": {"displayOnLoad": False},
+    }
+    DataLayerFactory(map=map, data=data, settings={"displayOnLoad": False})
+    page.goto(f"{live_server.url}{map.get_absolute_url()}#10/46.93/3.33")
+    markers = page.locator(".leaflet-marker-icon")
+    expect(markers).to_have_count(2)
+    # Only one is off
+    expect(page.locator(".datalayer.off")).to_have_count(1)
+
+    # Click on button
+    page.locator(".umap-browser [data-ref=toggle]").click()
+    # Should have hidden the two other layers
+    expect(page.locator(".datalayer.off")).to_have_count(3)
+    expect(markers).to_have_count(0)
+
+    # Click again
+    page.locator(".umap-browser [data-ref=toggle]").click()
+    # Should shown all layers
+    expect(page.locator(".datalayer.off")).to_have_count(0)
+    expect(markers).to_have_count(3)
+
+    # Click again
+    page.locator(".umap-browser [data-ref=toggle]").click()
+    # Should hidden again all layers
+    expect(page.locator(".datalayer.off")).to_have_count(3)
+    expect(markers).to_have_count(0)