Merge pull request #1829 from umap-project/panel-mode

fix: make explicit default panel modes

umap/static/umap/base.css

@@ -466,6 +466,7 @@ input.switch:checked ~ label:after {
 .button-bar {
     grid-gap: 7px;
 }
+.umap-multiplechoice.by2,
 .button-bar.half {
     grid-template-columns: 1fr 1fr;
 }

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

@@ -9,18 +9,7 @@ export default class Browser {
       filter: '',
       inBbox: false,
     }
-    this._mode = 'layers'
+    this.mode = 'layers'
-  }
-
-  set mode(value) {
-    // Store the mode so we can respect it when we redraw
-    if (['data', 'filters'].includes(value)) this.map.panel.mode = 'expanded'
-    else if (value === 'layers') this.map.panel.mode = 'condensed'
-    this._mode = value
-  }
-
-  get mode() {
-    return this._mode
   }
 
   addFeature(feature, parent) {

umap/static/umap/js/modules/panel.js

@@ -6,7 +6,9 @@ export class Panel {
     this.parent = map._controlContainer
     this.map = map
     this.container = DomUtil.create('div', '', this.parent)
-    this.mode = 'condensed'
+    // This will be set once according to the panel configurated at load
+    // or by using panels as popups
+    this.mode = null
     this.classname = 'left'
     DomEvent.disableClickPropagation(this.container)
     DomEvent.on(this.container, 'contextmenu', DomEvent.stopPropagation) // Do not activate our custom context menu.
@@ -14,8 +16,12 @@ export class Panel {
     DomEvent.on(this.container, 'MozMousePixelScroll', DomEvent.stopPropagation)
   }
 
+  setDefaultMode(mode) {
+    if (!this.mode) this.mode = mode
+  }
+
   open({ content, className, actions = [] } = {}) {
-    this.container.className = `with-transition panel ${this.classname} ${this.mode}`
+    this.container.className = `with-transition panel ${this.classname} ${this.mode || ''}`
     this.container.innerHTML = ''
     const actionsContainer = DomUtil.create('ul', 'toolbox', this.container)
     const body = DomUtil.create('div', 'body', this.container)
@@ -40,14 +46,14 @@ export class Panel {
   }
 
   resize() {
-    if (this.mode === 'expanded') {
+    if (this.mode === 'condensed') {
-      this.mode = 'condensed'
-      this.container.classList.remove('expanded')
-      this.container.classList.add('condensed')
-    } else {
       this.mode = 'expanded'
       this.container.classList.remove('condensed')
       this.container.classList.add('expanded')
+    } else {
+      this.mode = 'condensed'
+      this.container.classList.remove('expanded')
+      this.container.classList.add('condensed')
     }
   }
 

umap/static/umap/js/umap.forms.js

@@ -941,7 +941,11 @@ L.FormBuilder.MultiChoice = L.FormBuilder.Element.extend({
     if (!this.container.querySelector(`input[type="radio"][value="${value}"]`)) {
       value = this.options.default !== undefined ? this.options.default : this.default
     }
-    this.container.querySelector(`input[type="radio"][value="${value}"]`).checked = true
+    const choices = this.getChoices().map(([value, label]) => value)
+    if (choices.includes(value)) {
+      this.container.querySelector(`input[type="radio"][value="${value}"]`).checked =
+        true
+    }
   },
 
   value: function () {

umap/static/umap/js/umap.js

@@ -214,14 +214,16 @@ U.Map = L.Map.extend({
       if (L.Util.queryString('share')) {
         this.share.open()
       } else if (this.options.onLoadPanel === 'databrowser') {
+        this.panel.setDefaultMode('expanded')
         this.openBrowser('data')
       } else if (this.options.onLoadPanel === 'datalayers') {
+        this.panel.setDefaultMode('condensed')
         this.openBrowser('layers')
       } else if (this.options.onLoadPanel === 'datafilters') {
-        this.panel.mode = 'expanded'
+        this.panel.setDefaultMode('expanded')
         this.openBrowser('filters')
       } else if (this.options.onLoadPanel === 'caption') {
-        this.panel.mode = 'condensed'
+        this.panel.setDefaultMode('condensed')
         this.openCaption()
       }
       if (L.Util.queryString('edit')) {

umap/static/umap/js/umap.popup.js

@@ -55,6 +55,7 @@ U.Popup.Panel = U.Popup.extend({
   },
 
   onAdd: function (map) {
+    map.panel.setDefaultMode('expanded')
     map.panel.open({
       content: this._content,
       actions: [U.Browser.backButton(map)],

umap/tests/integration/test_browser.py

@@ -1,3 +1,4 @@
+import re
 from copy import deepcopy
 from time import sleep
 
@@ -63,8 +64,9 @@ def bootstrap(map, live_server):
 
 def test_data_browser_should_be_open(live_server, page, bootstrap, map):
     page.goto(f"{live_server.url}{map.get_absolute_url()}")
-    el = page.locator(".umap-browser")
+    panel = page.locator(".panel.left.on")
-    expect(el).to_be_visible()
+    expect(panel).to_have_class(re.compile(".*expanded.*"))
+    expect(panel.locator(".umap-browser")).to_be_visible()
     expect(page.get_by_text("one point in france")).to_be_visible()
     expect(page.get_by_text("one line in new zeland")).to_be_visible()
     expect(page.get_by_text("one polygon in greenland")).to_be_visible()

umap/tests/integration/test_caption.py

@@ -1,3 +1,5 @@
+import re
+
 import pytest
 from playwright.sync_api import expect
 
@@ -15,8 +17,9 @@ def test_caption(live_server, page, map):
     )
     hidden = DataLayerFactory(map=map, name="Hidden", settings={"inCaption": False})
     page.goto(f"{live_server.url}{map.get_absolute_url()}")
-    panel = page.locator(".umap-caption")
+    panel = page.locator(".panel.left.on")
-    expect(panel).to_be_visible()
+    expect(panel).to_have_class(re.compile(".*condensed.*"))
+    expect(panel.locator(".umap-caption")).to_be_visible()
     expect(panel.locator(".datalayer-legend").get_by_text(basic.name)).to_be_visible()
     expect(
         panel.locator(".datalayer-legend .off").get_by_text(non_loaded.name)

umap/tests/integration/test_facets_browser.py

@@ -1,4 +1,5 @@
 import copy
+import re
 
 import pytest
 from playwright.sync_api import expect
@@ -101,7 +102,9 @@ def test_simple_facet_search(live_server, page, map):
     DataLayerFactory(map=map, data=DATALAYER_DATA2)
     DataLayerFactory(map=map, data=DATALAYER_DATA3)
     page.goto(f"{live_server.url}{map.get_absolute_url()}#6/48.948/1.670")
-    panel = page.locator(".umap-browser")
+    panel = page.locator(".panel.left.on")
+    expect(panel).to_have_class(re.compile(".*expanded.*"))
+    expect(panel.locator(".umap-browser")).to_be_visible()
     # From a non browsable datalayer, should not be impacted
     paths = page.locator(".leaflet-overlay-pane path")
     expect(paths).to_be_visible()

umap/tests/integration/test_view_marker.py

@@ -1,3 +1,4 @@
+import re
 from copy import deepcopy
 
 import pytest
@@ -62,3 +63,19 @@ def test_should_display_tooltip_with_variable(live_server, map, page, bootstrap)
     map.save()
     page.goto(f"{live_server.url}{map.get_absolute_url()}")
     expect(page.get_by_text("Foo test marker")).to_be_visible()
+
+
+def test_should_open_popup_panel_on_click(live_server, map, page, bootstrap):
+    map.settings["properties"]["popupShape"] = "Panel"
+    map.save()
+    page.goto(f"{live_server.url}{map.get_absolute_url()}")
+    panel = page.locator(".panel.left.on")
+    expect(panel).to_be_hidden()
+    page.locator(".leaflet-marker-icon").click()
+    expect(panel).to_be_visible()
+    expect(panel).to_have_class(re.compile(".*expanded.*"))
+    expect(panel.get_by_role("heading", name="test marker")).to_be_visible()
+    expect(panel.get_by_text("Some description")).to_be_visible()
+    # Close popup
+    page.locator("#map").click()
+    expect(panel).to_be_hidden()