diff --git a/umap/static/umap/js/modules/panel.js b/umap/static/umap/js/modules/panel.js index 7839f7f0..4268a527 100644 --- a/umap/static/umap/js/modules/panel.js +++ b/umap/static/umap/js/modules/panel.js @@ -5,7 +5,6 @@ export class Panel { MODE = 'condensed' CLASSNAME = 'left' - constructor(parent) { this.parent = parent this.container = DomUtil.create('div', '', this.parent) @@ -16,7 +15,6 @@ export class Panel { } open(e) { - //this.fire('panel:open') this.container.className = `with-transition panel ${this.CLASSNAME} ${this.MODE}` this.container.innerHTML = '' const actionsContainer = DomUtil.create('ul', 'toolbox', this.container) @@ -36,22 +34,18 @@ export class Panel { } } if (e.className) DomUtil.addClass(body, e.className) - if (DomUtil.hasClass(this.container, 'on')) { - // Already open. - //this.fire('panel:ready') - } else { - DomEvent.once( - this.container, - 'transitionend', - function (e) { - //this.fire('panel:ready') - }, - this - ) - DomUtil.addClass(this.container, 'on') - } + const promise = new Promise((resolve, reject) => { + if (DomUtil.hasClass(this.container, 'on')) { + // Already open. + resolve() + } else { + DomEvent.once(this.container, 'transitionend', resolve) + DomUtil.addClass(this.container, 'on') + } + }) DomEvent.on(closeLink, 'click', this.close, this) DomEvent.on(resizeLink, 'click', this.resize, this) + return promise } resize() { @@ -69,7 +63,6 @@ export class Panel { close() { if (DomUtil.hasClass(this.container, 'on')) { DomUtil.removeClass(this.container, 'on') - //this.fire('panel:closed') } } } diff --git a/umap/static/umap/js/modules/request.js b/umap/static/umap/js/modules/request.js index d21759ed..a12d5b76 100644 --- a/umap/static/umap/js/modules/request.js +++ b/umap/static/umap/js/modules/request.js @@ -128,7 +128,6 @@ export class ServerRequest extends Request { const data = await response.json() if (data.info) { this.ui.alert({ content: data.info, level: 'info' }) - this.ui.closePanel() } else if (data.error) { this.ui.alert({ content: data.error, level: 'error' }) return this._onError(new Error(data.error)) diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index b16d6fe3..0b2b4204 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -33,7 +33,7 @@ U.EditLayersAction = U.BaseAction.extend({ options: { helpMenu: true, className: 'umap-control-browse dark', - tooltip: L._('See layers'), + tooltip: L._('Manage layers'), }, addHooks: function () { @@ -1252,7 +1252,7 @@ U.Search = L.PhotonSearch.extend({ onSelected: function (feature) { this.zoomToFeature(feature) - this.map.ui.closePanel() + this.map.panel.close() }, }) diff --git a/umap/static/umap/js/umap.features.js b/umap/static/umap/js/umap.features.js index 34087abb..e5c86887 100644 --- a/umap/static/umap/js/umap.features.js +++ b/umap/static/umap/js/umap.features.js @@ -126,13 +126,13 @@ U.FeatureMixin = { callback: this._redraw, // In case we have dynamic options… }) container.appendChild(builder.build()) - this.map.ui.once('panel:ready', () => { - builder.helpers['properties.name'].input.focus() - }) this.appendEditFieldsets(container) const advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions')) this.getAdvancedEditActions(advancedActions) - this.map.editPanel.open({ data: { html: container } }) + const onLoad = this.map.editPanel.open({ data: { html: container } }) + onLoad.then(() => { + builder.helpers['properties.name'].input.focus() + }) this.map.editedFeature = this if (!this.isOnScreen()) this.zoomTo(e) }, @@ -144,7 +144,7 @@ U.FeatureMixin = { L._('Delete'), function (e) { L.DomEvent.stop(e) - if (this.confirmDelete()) this.map.ui.closePanel() + if (this.confirmDelete()) this.map.editPanel.close() }, this ) @@ -462,7 +462,7 @@ U.FeatureMixin = { this.parentClass.prototype.onRemove.call(this, map) if (this.map.editedFeature === this) { this.endEdit() - this.map.ui.closePanel() + this.map.editPanel.close() } }, @@ -754,7 +754,7 @@ U.PathMixin = { if (this.map.editEnabled) { if (this.editEnabled()) { this.endEdit() - this.map.ui.closePanel() + this.map.editPanel.close() } else { this.edit(e) } diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js index acd10c61..f29460fd 100644 --- a/umap/static/umap/js/umap.forms.js +++ b/umap/static/umap/js/umap.forms.js @@ -1036,6 +1036,6 @@ U.FormBuilder = L.FormBuilder.extend({ }, finish: function () { - this.map.ui.closePanel() + this.map.editPanel.close() }, }) diff --git a/umap/static/umap/js/umap.importer.js b/umap/static/umap/js/umap.importer.js index ff5237b1..ec1aea09 100644 --- a/umap/static/umap/js/umap.importer.js +++ b/umap/static/umap/js/umap.importer.js @@ -20,7 +20,6 @@ U.Importer = L.Class.extend({ { type: 'file', multiple: 'multiple', autofocus: true }, this.fileBox ) - this.map.ui.once('panel:closed', () => (this.fileInput.value = null)) this.urlInput = L.DomUtil.element( 'input', { type: 'text', placeholder: L._('Provide an URL here') }, @@ -121,7 +120,10 @@ U.Importer = L.Class.extend({ open: function () { if (!this.container) this.build() - this.map.editPanel.open({ data: { html: this.container } }) + const onLoad = this.map.editPanel.open({ data: { html: this.container } }) + onLoad.then(() => { + this.fileInput.value = null + }) }, openFiles: function () { diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js index 0ff863d5..997acd13 100644 --- a/umap/static/umap/js/umap.js +++ b/umap/static/umap/js/umap.js @@ -222,12 +222,13 @@ U.Map = L.Map.extend({ if (L.Util.queryString('share')) { this.share.open() } else if (this.options.onLoadPanel === 'databrowser') { + this.panel.MODE = 'expanded' this.openBrowser() } else if (this.options.onLoadPanel === 'datalayers') { - this.ui.PANEL_MODE = 'condensed' + this.panel.MODE = 'condensed' this.openBrowser() } else if (this.options.onLoadPanel === 'caption') { - this.ui.PANEL_MODE = 'condensed' + this.panel.MODE = 'condensed' this.displayCaption() } else if (['facet', 'datafilters'].includes(this.options.onLoadPanel)) { this.openFacet() @@ -528,8 +529,13 @@ U.Map = L.Map.extend({ L.DomEvent.stop(e) this.search() } else if (e.keyCode === U.Keys.ESC) { - if (this.help.visible()) this.help.hide() - else this.ui.closePanel() + if (this.help.visible()) { + this.help.hide() + } else { + this.panel.close() + this.editPanel.close() + this.fullPanel.close() + } } if (!this.hasEditMode()) return @@ -1629,8 +1635,7 @@ U.Map = L.Map.extend({ askForReset: function (e) { if (!confirm(L._('Are you sure you want to cancel your changes?'))) return this.reset() - this.disableEdit(e) - this.ui.closePanel() + this.disableEdit() }, startMarker: function () { diff --git a/umap/static/umap/js/umap.layer.js b/umap/static/umap/js/umap.layer.js index dad7a770..53861317 100644 --- a/umap/static/umap/js/umap.layer.js +++ b/umap/static/umap/js/umap.layer.js @@ -1347,7 +1347,7 @@ U.DataLayer = L.Evented.extend({ L._('Delete'), function () { this._delete() - this.map.ui.closePanel() + this.map.editPanel.close() }, this ) diff --git a/umap/static/umap/js/umap.permissions.js b/umap/static/umap/js/umap.permissions.js index 00a25bd2..cd6aa214 100644 --- a/umap/static/umap/js/umap.permissions.js +++ b/umap/static/umap/js/umap.permissions.js @@ -137,7 +137,7 @@ U.MapPermissions = L.Class.extend({ content: L._('Map has been attached to your account'), level: 'info', }) - this.map.ui.closePanel() + this.map.editPanel.close() } }, diff --git a/umap/static/umap/test/DataLayer.js b/umap/static/umap/test/DataLayer.js index 93cf8a09..26ba7d61 100644 --- a/umap/static/umap/test/DataLayer.js +++ b/umap/static/umap/test/DataLayer.js @@ -126,7 +126,7 @@ describe('U.DataLayer', () => { }) it('should have a new layer button', () => { - newLayerButton = qs('#umap-panel .add-datalayer') + newLayerButton = qs('.panel.right.on .add-datalayer') assert.ok(newLayerButton) }) diff --git a/umap/static/umap/test/TableEditor.js b/umap/static/umap/test/TableEditor.js index 88d828bb..ef53362b 100644 --- a/umap/static/umap/test/TableEditor.js +++ b/umap/static/umap/test/TableEditor.js @@ -34,9 +34,9 @@ describe('L.TableEditor', () => { it('should open table button click', () => { happen.click(button) - expect(qs('#umap-panel div.table')).to.be.ok - expect(qsa('#umap-panel div.table form').length).to.eql(3) // One per feature. - expect(qsa('#umap-panel div.table input').length).to.eql(3) // One per feature and per property. + expect(qs('.panel.full.on div.table')).to.be.ok + expect(qsa('.panel.full.on div.table form').length).to.eql(3) // One per feature. + expect(qsa('.panel.full.on div.table input').length).to.eql(3) // One per feature and per property. }) }) describe('#properties()', () => { @@ -53,10 +53,10 @@ describe('L.TableEditor', () => { } var oldPrompt = window.prompt window.prompt = newPrompt - var button = qs('#umap-panel .add-property') + var button = qs('.panel.full.on .add-property') expect(button).to.be.ok happen.click(button) - expect(qsa('#umap-panel div.table input').length).to.eql(6) // One per feature and per property. + expect(qsa('.panel.full.on div.table input').length).to.eql(6) // One per feature and per property. window.prompt = oldPrompt }) @@ -74,10 +74,10 @@ describe('L.TableEditor', () => { } var oldPrompt = window.prompt window.prompt = newPrompt - var button = qs('#umap-panel div.thead div.tcell:last-of-type .umap-edit') + var button = qs('.panel.full.on div.thead div.tcell:last-of-type .umap-edit') expect(button).to.be.ok happen.click(button) - expect(qsa('#umap-panel div.table input').length).to.eql(6) + expect(qsa('.panel.full.on div.table input').length).to.eql(6) expect(feature.properties.newprop).to.be.undefined expect(feature.properties.newname).to.eql('the value') window.prompt = oldPrompt @@ -91,12 +91,12 @@ describe('L.TableEditor', () => { oldConfirm = window.confirm window.confirm = newConfirm var button = qs( - '#umap-panel div.thead div.tcell:last-of-type .umap-delete' + '.panel.full.on div.thead div.tcell:last-of-type .umap-delete' ) expect(button).to.be.ok happen.click(button) FEATURE = feature - expect(qsa('#umap-panel div.table input').length).to.eql(3) + expect(qsa('.panel.full.on div.table input').length).to.eql(3) expect(feature.properties.newname).to.be.undefined window.confirm = oldConfirm }) diff --git a/umap/tests/integration/test_anonymous_owned_map.py b/umap/tests/integration/test_anonymous_owned_map.py index 70b90972..ad14dc72 100644 --- a/umap/tests/integration/test_anonymous_owned_map.py +++ b/umap/tests/integration/test_anonymous_owned_map.py @@ -114,12 +114,13 @@ def test_anonymous_can_add_marker_on_editable_layer( marker = page.locator(".leaflet-marker-icon") map_el = page.locator("#map") expect(marker).to_have_count(2) - expect(map_el).not_to_have_class(re.compile("umap-ui")) + panel = page.locator('.panel.right.on') + expect(panel).to_be_hidden() add_marker.click() map_el.click(position={"x": 100, "y": 100}) expect(marker).to_have_count(3) # Edit panel is open - expect(map_el).to_have_class(re.compile("umap-ui")) + expect(panel).to_be_visible() datalayer_select = page.locator("select[name='datalayer']") expect(datalayer_select).to_be_visible() options = page.locator("select[name='datalayer'] option") @@ -131,7 +132,7 @@ def test_anonymous_can_add_marker_on_editable_layer( def test_can_change_perms_after_create(tilelayer, live_server, page): page.goto(f"{live_server.url}/en/map/new") # Create a layer - page.get_by_title("See layers").click() + page.get_by_title("Manage layers").click() page.get_by_title("Add a layer").click() page.locator("input[name=name]").fill("Layer 1") save = page.get_by_role("button", name="Save") diff --git a/umap/tests/integration/test_browser.py b/umap/tests/integration/test_browser.py index 5241a548..11a31460 100644 --- a/umap/tests/integration/test_browser.py +++ b/umap/tests/integration/test_browser.py @@ -159,7 +159,7 @@ def test_data_browser_bbox_filter_should_be_persistent( el = page.get_by_text("Current map view") expect(el).to_be_visible() el.click() - browser = page.locator("#umap-panel") + browser = page.locator(".panel.left.on") expect(browser.get_by_text("one point in france")).to_be_visible() expect(browser.get_by_text("one line in new zeland")).to_be_hidden() expect(browser.get_by_text("one polygon in greenland")).to_be_hidden() @@ -184,7 +184,7 @@ def test_data_browser_bbox_filtered_is_clickable(live_server, page, bootstrap, m el = page.get_by_text("Current map view") expect(el).to_be_visible() el.click() - browser = page.locator("#umap-panel") + browser = page.locator(".panel.left.on") expect(browser.get_by_text("one point in france")).to_be_visible() expect(browser.get_by_text("one line in new zeland")).to_be_hidden() expect(browser.get_by_text("one polygon in greenland")).to_be_hidden() @@ -236,7 +236,7 @@ def test_should_redraw_list_on_feature_delete(live_server, openmap, page, bootst page.goto(f"{live_server.url}{openmap.get_absolute_url()}") # Enable edit page.get_by_role("button", name="Edit").click() - buttons = page.locator(".umap-browser .datalayer li .feature-delete") + buttons = page.locator(".umap-browser .datalayer li .icon-delete") expect(buttons).to_have_count(3) page.on("dialog", lambda dialog: dialog.accept()) buttons.nth(0).click() @@ -282,7 +282,7 @@ def test_should_allow_to_toggle_datalayer_visibility(live_server, map, page, boo paths = page.locator(".leaflet-overlay-pane path") expect(markers).to_have_count(1) expect(paths).to_have_count(2) - toggle = page.locator("#umap-ui-container").get_by_title("Show/hide layer") + toggle = page.locator(".umap-browser").get_by_title("Show/hide layer") toggle.click() expect(markers).to_have_count(0) expect(paths).to_have_count(0) @@ -290,7 +290,7 @@ def test_should_allow_to_toggle_datalayer_visibility(live_server, map, page, boo def test_should_have_edit_buttons_in_edit_mode(live_server, openmap, page, bootstrap): page.goto(f"{live_server.url}{openmap.get_absolute_url()}") - browser = page.locator("#umap-ui-container") + browser = page.locator(".umap-browser") edit_layer = browser.get_by_title("Edit", exact=True) in_table = browser.get_by_title("Edit properties in a table") delete_layer = browser.get_by_title("Delete layer") diff --git a/umap/tests/integration/test_edit_datalayer.py b/umap/tests/integration/test_edit_datalayer.py index 824a8327..14242126 100644 --- a/umap/tests/integration/test_edit_datalayer.py +++ b/umap/tests/integration/test_edit_datalayer.py @@ -12,15 +12,13 @@ def test_should_have_fieldset_for_layer_type_properties(page, live_server, tilel page.goto(f"{live_server.url}/en/map/new/") # Open DataLayers list - button = page.get_by_title("See layers") - expect(button).to_be_visible() - button.click() + page.get_by_title("Manage layers").click() # Create a layer page.get_by_title("Add a layer").click() page.locator("input[name=name]").fill("Layer 1") - select = page.locator("#umap-panel .umap-field-type select") + select = page.locator(".panel.on .umap-field-type select") expect(select).to_be_visible() choropleth_header = page.get_by_text("Choropleth: settings") diff --git a/umap/tests/integration/test_import.py b/umap/tests/integration/test_import.py index e780750c..32fb378a 100644 --- a/umap/tests/integration/test_import.py +++ b/umap/tests/integration/test_import.py @@ -1,5 +1,6 @@ import json import re +from time import sleep from pathlib import Path import pytest @@ -12,9 +13,7 @@ pytestmark = pytest.mark.django_db def test_umap_import_from_file(live_server, tilelayer, page): page.goto(f"{live_server.url}/map/new/") - button = page.get_by_title("Import data") - expect(button).to_be_visible() - button.click() + page.get_by_title("Import data").click() file_input = page.locator("input[type='file']") with page.expect_file_chooser() as fc_info: file_input.click() @@ -27,6 +26,9 @@ def test_umap_import_from_file(live_server, tilelayer, page): assert file_input.input_value() # Close the import panel page.keyboard.press("Escape") + # Reopen + page.get_by_title("Import data").click() + sleep(1) # Wait for CSS transition to happen assert not file_input.input_value() expect(page.locator(".umap-main-edit-toolbox .map-name")).to_have_text( "Carte sans nom" diff --git a/umap/tests/integration/test_map.py b/umap/tests/integration/test_map.py index 90b691bc..8ede6547 100644 --- a/umap/tests/integration/test_map.py +++ b/umap/tests/integration/test_map.py @@ -179,7 +179,7 @@ def test_remote_layer_should_not_be_used_as_datalayer_for_created_features( marker = page.locator(".leaflet-marker-icon") expect(marker).to_have_count(0) add_marker.click() - map_el.click(position={"x": 100, "y": 100}) + map_el.click(position={"x": 500, "y": 100}) expect(marker).to_have_count(1) # A new datalayer has been created to host this created feature # given the remote one cannot accept new features @@ -196,9 +196,9 @@ def test_can_hide_datalayer_from_caption(openmap, live_server, datalayer, page): toggle.click() layers = page.locator(".umap-caption .datalayer-legend") expect(layers).to_have_count(1) - found = page.locator("#umap-panel").get_by_text(datalayer.name) + found = page.locator(".panel.left.on").get_by_text(datalayer.name) expect(found).to_be_visible() - hidden = page.locator("#umap-panel").get_by_text(other.name) + hidden = page.locator(".panel.left.on").get_by_text(other.name) expect(hidden).to_be_hidden() diff --git a/umap/tests/integration/test_owned_map.py b/umap/tests/integration/test_owned_map.py index e30b3ba6..7071e556 100644 --- a/umap/tests/integration/test_owned_map.py +++ b/umap/tests/integration/test_owned_map.py @@ -186,7 +186,7 @@ def test_can_change_perms_after_create(tilelayer, live_server, login, user): page = login(user) page.goto(f"{live_server.url}/en/map/new") # Create a layer - page.get_by_title("See layers").click() + page.get_by_title("Manage layers").click() page.get_by_title("Add a layer").click() page.locator("input[name=name]").fill("Layer 1") save = page.get_by_role("button", name="Save") diff --git a/umap/tests/integration/test_picto.py b/umap/tests/integration/test_picto.py index 808a9d04..b8541f8b 100644 --- a/umap/tests/integration/test_picto.py +++ b/umap/tests/integration/test_picto.py @@ -171,7 +171,7 @@ def test_can_use_remote_url_as_picto(openmap, live_server, page, pictos): input_el.blur() expect(marker).to_have_attribute("src", "https://foo.bar/img.jpg") # Now close and reopen the form, it should still be the URL tab - close = page.locator("#umap-panel .toolbox").get_by_title("Close") + close = page.locator(".panel.right.on .toolbox").get_by_title("Close") expect(close).to_be_visible() close.click() edit_settings.click() @@ -210,7 +210,7 @@ def test_can_use_char_as_picto(openmap, live_server, page, pictos): expect(marker).to_have_count(1) expect(marker).to_have_text("♩") # Now close and reopen the form, it should still be the URL tab - close = page.locator("#umap-panel .toolbox").get_by_title("Close") + close = page.locator(".panel.right.on .toolbox").get_by_title("Close") expect(close).to_be_visible() close.click() edit_settings.click() diff --git a/umap/tests/integration/test_querystring.py b/umap/tests/integration/test_querystring.py index 1393a89b..d4199e90 100644 --- a/umap/tests/integration/test_querystring.py +++ b/umap/tests/integration/test_querystring.py @@ -29,8 +29,9 @@ def test_datalayers_control(map, live_server, datalayer, page): page.goto(f"{live_server.url}{map.get_absolute_url()}?datalayersControl=false") expect(control).to_be_hidden() expect(browser).to_be_hidden() + # Retrocompat page.goto(f"{live_server.url}{map.get_absolute_url()}?datalayersControl=expanded") - expect(control).to_be_hidden() + expect(control).to_be_visible() expect(browser).to_be_visible()