From c4e86c4ab94ff9e62b06c270414a458ac86b9652 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Thu, 14 Mar 2024 20:29:28 +0100 Subject: [PATCH] wip: move panel to a dedicated module --- umap/static/umap/base.css | 41 -------- umap/static/umap/css/panel.css | 120 ++++++++++++++++++++++++ umap/static/umap/js/modules/browser.js | 78 ++------------- umap/static/umap/js/modules/global.js | 5 + umap/static/umap/js/modules/panel.js | 81 ++++++++++++++++ umap/static/umap/js/umap.controls.js | 93 ++++++++++++++---- umap/static/umap/js/umap.features.js | 6 +- umap/static/umap/js/umap.importer.js | 2 +- umap/static/umap/js/umap.js | 23 ++--- umap/static/umap/js/umap.layer.js | 3 +- umap/static/umap/js/umap.permissions.js | 2 +- umap/static/umap/js/umap.popup.js | 4 +- umap/static/umap/js/umap.share.js | 2 +- umap/static/umap/js/umap.ui.js | 67 ------------- umap/static/umap/map.css | 7 +- umap/templates/umap/css.html | 1 + 16 files changed, 311 insertions(+), 224 deletions(-) create mode 100644 umap/static/umap/css/panel.css create mode 100644 umap/static/umap/js/modules/panel.js diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css index 09cb6be0..995f95b7 100644 --- a/umap/static/umap/base.css +++ b/umap/static/umap/base.css @@ -544,7 +544,6 @@ i.info { .permissions-panel, .umap-upload, .umap-share, -.umap-edit-container, .umap-datalayer-container, .umap-layer-properties-container, .umap-browse-data, @@ -711,9 +710,6 @@ input[type=hidden].blur + [type="button"] { .leaflet-right { transition: all .7s; } -.umap-ui .leaflet-right { - right: 400px; -} #umap-panel, #umap-alert-container, #umap-tooltip-container { @@ -941,44 +937,7 @@ input:invalid { /* *********** */ /* Mobile */ /* *********** */ -@media all and (orientation:landscape) { - .umap-edit-enabled #umap-panel { - top: 46px; - } - #umap-panel { - width: 400px; - right: -400px; - top: 0; - } - .umap-ui #umap-panel { - right: 0; - visibility: visible; - } - #umap-panel.condensed { - margin-top: 10px; - margin-right: 10px; - max-height: 500px; - bottom: initial; - width: 390px; - border-radius: 5px; - border: 1px solid var(--color-lightGray); - } -} @media all and (orientation:portrait) { - #umap-panel { - height: 50%; - max-height: 400px; - width: 100%; - bottom: 0; - right: -100%; - } - .umap-ui #umap-panel { - right: 0; - visibility: visible; - } - .umap-ui .leaflet-right { - right: 0; - } #umap-alert-container { width: 100%; left: 0; diff --git a/umap/static/umap/css/panel.css b/umap/static/umap/css/panel.css new file mode 100644 index 00000000..c84c6ef9 --- /dev/null +++ b/umap/static/umap/css/panel.css @@ -0,0 +1,120 @@ +.panel { + /* Added for playwright to consider the element as non visible */ + /* as being out of the visible viewport is not enough */ + visibility: hidden; + position: absolute; + bottom: 20px; + overflow-x: auto; + z-index: 1010; + background-color: #fff; + opacity: 0.98; + cursor: initial; + border-radius: 5px; + border: 1px solid var(--color-lightGray); +} +.panel.dark { + border-left: 1px solid #222; + background-color: var(--color-darkGray); + color: #efefef; +} +.panel.fullwidth { + width: 100%; + right: -100%; + z-index: 10000; + padding-left: 0; + padding-right: 0; +} +.umap-caption-bar-enabled .panel { + bottom: 46px; +} +.panel { + -moz-box-sizing:border-box; + -webkit-box-sizing:border-box; + box-sizing: border-box; +} +.panel .umap-popup-content img { + /* See https://github.com/Leaflet/Leaflet/commit/61d746818b99d362108545c151a27f09d60960ee#commitcomment-6061847 */ + max-width: 99% !important; +} +.panel .umap-popup-content { + max-height: inherit; +} +.panel .body { + clear: both; + height: calc(100% - 32px); /* Minus size of toolbox */ + padding: 10px; +} +.panel .toolbox { + padding: 5px 10px; + overflow: hidden; + display: flex; + flex-direction: row-reverse; + font-size: 10px; + justify-content: flex-start; + gap: 5px; + line-height: 2.2em; +} +.panel.dark .toolbox { + background-color: var(--color-darkGray); + border-bottom: 1px solid #232729; +} +.panel .toolbox li { + cursor: pointer; + display: inline; + padding: 0 2px; + border: 1px solid #b6b6b3; + border-radius: 2px; +} +.panel.dark .toolbox +.panel.dark .toolbox li { + color: #d3dfeb; + border: 1px solid #202425; +} +.panel .toolbox li:hover { + background-color: #d4d4d2; +} +.panel.dark .toolbox li:hover { + background-color: #353c3e; +} +@media all and (orientation:landscape) { + .panel { + top: 0; + margin-top: 10px; + width: 390px; + } + .panel.condensed { + max-height: 500px; + bottom: initial; + } + .panel.right { + margin-right: 10px; + right: -400px; + } + .panel.left { + left: -400px; + } + .panel.left.on { + left: 60px; + visibility: visible; + } + .panel.right.on { + right: 40px; + visibility: visible; + } + .umap-edit-enabled .panel { + top: 46px; + } +} +@media all and (orientation:portrait) { + .panel { + height: 50%; + max-height: 400px; + width: 100%; + bottom: 0; + right: -100%; + } + .panel.on { + right: 0; + visibility: visible; + } +} diff --git a/umap/static/umap/js/modules/browser.js b/umap/static/umap/js/modules/browser.js index 50cc4b11..fe1bc092 100644 --- a/umap/static/umap/js/modules/browser.js +++ b/umap/static/umap/js/modules/browser.js @@ -1,13 +1,10 @@ import { DomUtil, DomEvent } from '../../vendors/leaflet/leaflet-src.esm.js' -import Orderable from './orderable.js' -import {translate} from './i18n.js' +import { translate } from './i18n.js' export default class Browser { constructor(map) { this.map = map this.map.on('moveend', this.onMoveEnd, this) - this.map.on('edit:enabled', this.onEnableEdit, this) - this.map.on('edit:disabled', this.onDisableEdit, this) this.options = { filter: '', inBbox: false, @@ -72,13 +69,9 @@ export default class Browser { } addDataLayer(datalayer, parent) { - let className = `orderable datalayer ${datalayer.getHidableClass()}` - if (this.map.ui.PANEL_MODE !== 'condensed') className += ' show-list' - const container = DomUtil.create( - 'div', - className, - parent - ), + let className = `datalayer ${datalayer.getHidableClass()}` + if (this.map.panel.MODE !== 'condensed') className += ' show-list' + const container = DomUtil.create('div', className, parent), headline = DomUtil.create('h5', '', container) container.id = this.datalayerId(datalayer) const ul = DomUtil.create('ul', '', container) @@ -87,7 +80,6 @@ export default class Browser { this.map.ui.once('panel:closed', () => { datalayer.off('datachanged', this.onDataLayerChanged, this) }) - container.dataset.id = L.stamp(datalayer) } updateDatalayer(datalayer) { @@ -125,7 +117,7 @@ export default class Browser { }) } - isOpen () { + isOpen() { return !!document.querySelector('.umap-browser') } @@ -160,70 +152,19 @@ export default class Browser { }) formContainer.appendChild(builder.build()) - const addButton = L.DomUtil.create('li', 'add-datalayer show-on-edit') - L.DomUtil.create('i', 'umap-icon-16 umap-add', addButton) - const label = L.DomUtil.create('span', '', addButton) - label.textContent = label.title = L._('Add a layer') - const addProperty = function () { - const newName = prompt(L._('Please enter the name of the property')) - if (!newName || !this.validateName(newName)) return - this.datalayer.indexProperty(newName) - this.edit() - } - L.DomEvent.on(addButton, 'click', this.newDataLayer, this) - - - let className = 'umap-browser' - if (this.map.editEnabled) className += ' dark' - this.map.ui.openPanel({ + this.map.panel.open({ data: { html: container }, - className: className, - actions: [addButton] + className: 'umap-browser', }) this.map.eachBrowsableDataLayer((datalayer) => { this.addDataLayer(datalayer, dataContainer) }) - - // After datalayers have been added. - const orderable = new Orderable(dataContainer, L.bind(this.onReorder, this)) } - newDataLayer () { - const datalayer = this.map.createDataLayer({}) - datalayer.edit() - } - - - onReorder(src, dst, initialIndex, finalIndex) { - const layer = this.map.datalayers[src.dataset.id], - other = this.map.datalayers[dst.dataset.id], - minIndex = Math.min(layer.getRank(), other.getRank()), - maxIndex = Math.max(layer.getRank(), other.getRank()) - if (finalIndex === 0) layer.bringToTop() - else if (finalIndex > initialIndex) layer.insertBefore(other) - else layer.insertAfter(other) - this.map.eachDataLayerReverse((datalayer) => { - if (datalayer.getRank() >= minIndex && datalayer.getRank() <= maxIndex) - datalayer.isDirty = true - }) - this.map.indexDatalayers() - } - - onEnableEdit () { - if (!this.isOpen()) return - this.map.ui._panel.classList.add('dark') - } - - onDisableEdit () { - if (!this.isOpen()) return - this.map.ui._panel.classList.remove('dark') - } - - static backButton (map) { + static backButton(map) { const button = L.DomUtil.create('li', '') - L.DomUtil.create('i', 'umap-icon-16 umap-back', button) - const label = L.DomUtil.create('span', '', button) + L.DomUtil.create('i', 'icon icon-16 icon-back', button) button.title = L._('Back to browser') // Fixme: remove me when this is merged and released // https://github.com/Leaflet/Leaflet/pull/9052 @@ -231,5 +172,4 @@ export default class Browser { L.DomEvent.on(button, 'click', map.openBrowser, map) return button } - } diff --git a/umap/static/umap/js/modules/global.js b/umap/static/umap/js/modules/global.js index c432771e..708d9a15 100644 --- a/umap/static/umap/js/modules/global.js +++ b/umap/static/umap/js/modules/global.js @@ -1,8 +1,10 @@ import URLs from './urls.js' import Browser from './browser.js' +import { Panel, EditPanel } from './panel.js' import * as Utils from './utils.js' import { SCHEMA } from './schema.js' import { Request, ServerRequest, RequestError, HTTPError, NOKError } from './request.js' +import Orderable from './orderable.js' // Import modules and export them to the global scope. // For the not yet module-compatible JS out there. @@ -15,6 +17,9 @@ window.U = { HTTPError, NOKError, Browser, + Panel, + EditPanel, Utils, SCHEMA, + Orderable, } diff --git a/umap/static/umap/js/modules/panel.js b/umap/static/umap/js/modules/panel.js new file mode 100644 index 00000000..0e94f0c7 --- /dev/null +++ b/umap/static/umap/js/modules/panel.js @@ -0,0 +1,81 @@ +export class Panel { + MODE = 'condensed' + CLASSNAME = 'left' + + constructor(parent) { + this.parent = parent + this.container = L.DomUtil.create('div', '', this.parent) + L.DomEvent.disableClickPropagation(this.container) + L.DomEvent.on(this.container, 'contextmenu', L.DomEvent.stopPropagation) // Do not activate our custom context menu. + L.DomEvent.on(this.container, 'wheel', L.DomEvent.stopPropagation) + L.DomEvent.on(this.container, 'MozMousePixelScroll', L.DomEvent.stopPropagation) + } + + resetClassName() { + this.container.className = `with-transition panel ${this.CLASSNAME} ${this.MODE}` + } + + open(e) { + //this.fire('panel:open') + // We reset all because we can't know which class has been added + // by previous ui processes... + this.resetClassName() + this.container.innerHTML = '' + const actionsContainer = L.DomUtil.create('ul', 'toolbox', this.container) + const body = L.DomUtil.create('div', 'body', this.container) + if (e.data.html.nodeType && e.data.html.nodeType === 1) + body.appendChild(e.data.html) + else body.innerHTML = e.data.html + const closeLink = L.DomUtil.create('li', 'umap-close-link', actionsContainer) + L.DomUtil.add('i', 'icon icon-16 icon-close', closeLink) + closeLink.title = L._('Close') + const resizeLink = L.DomUtil.create('li', 'umap-resize-link', actionsContainer) + L.DomUtil.add('i', 'icon icon-16 icon-resize', resizeLink) + resizeLink.title = L._('Toggle size') + if (e.actions) { + for (let i = 0; i < e.actions.length; i++) { + actionsContainer.appendChild(e.actions[i]) + } + } + if (e.className) L.DomUtil.addClass(this.container, e.className) + if (L.DomUtil.hasClass(this.container, 'on')) { + // Already open. + //this.fire('panel:ready') + } else { + L.DomEvent.once( + this.container, + 'transitionend', + function (e) { + //this.fire('panel:ready') + }, + this + ) + L.DomUtil.addClass(this.container, 'on') + } + L.DomEvent.on(closeLink, 'click', this.close, this) + L.DomEvent.on(resizeLink, 'click', this.resize, this) + } + + resize() { + if (this.MODE === 'expanded') { + 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') + } + } + + close() { + if (L.DomUtil.hasClass(this.container, 'on')) { + L.DomUtil.removeClass(this.container, 'on') + //this.fire('panel:closed') + } + } +} + +export class EditPanel extends Panel { + CLASSNAME = 'right dark' +} diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index 10c65b14..f7bd5b48 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -29,6 +29,18 @@ U.ImportAction = U.BaseAction.extend({ }, }) +U.EditLayersAction = U.BaseAction.extend({ + options: { + helpMenu: true, + className: 'umap-control-browse dark', + tooltip: L._('See layers'), + }, + + addHooks: function () { + this.map.editDatalayers() + }, +}) + U.EditCaptionAction = U.BaseAction.extend({ options: { helpMenu: true, @@ -280,7 +292,6 @@ U.ContinueLineAction = U.BaseVertexAction.extend({ }) // Leaflet.Toolbar doesn't allow twice same toolbar class… -U.ImportToolbar = L.Toolbar.Control.extend({}) U.SettingsToolbar = L.Toolbar.Control.extend({}) U.DrawToolbar = L.Toolbar.Control.extend({ initialize: function (options) { @@ -316,6 +327,7 @@ U.DrawToolbar = L.Toolbar.Control.extend({ }, }) + U.DropControl = L.Class.extend({ initialize: function (map) { this.map = map @@ -507,7 +519,7 @@ L.Control.Button = L.Control.extend({ U.DataLayersControl = L.Control.Button.extend({ options: { - position: 'topright', + position: 'topleft', className: 'umap-control-browse', title: L._('See layers'), }, @@ -519,8 +531,8 @@ U.DataLayersControl = L.Control.Button.extend({ U.CaptionControl = L.Control.Button.extend({ options: { - position: 'topright', - className: 'umap-control-caption hide-on-edit', + position: 'topleft', + className: 'umap-control-caption', title: L._('About'), }, @@ -614,6 +626,8 @@ const ControlsMixin = { 'search', 'fullscreen', 'embed', + 'datalayers', + 'caption', 'locate', 'measure', 'editinosm', @@ -669,7 +683,7 @@ const ControlsMixin = { }) container.appendChild(builder.build()) - this.ui.openPanel({ data: { html: container } }) + this.panel.open({ data: { html: container } }) }, displayCaption: function () { @@ -749,7 +763,7 @@ const ControlsMixin = { `, urls ) - this.ui.openPanel({ data: { html: container } }) + this.panel.open({ data: { html: container } }) }, renderEditToolbar: function () { @@ -899,6 +913,49 @@ const ControlsMixin = { this ) }, + + editDatalayers: function () { + if (!this.editEnabled) return + const container = L.DomUtil.create('div') + L.DomUtil.createTitle(container, L._('Manage layers'), 'layers') + const ul = L.DomUtil.create('ul', '', container) + this.eachDataLayerReverse((datalayer) => { + const row = L.DomUtil.create('li', 'orderable', ul) + const dragHandle = L.DomUtil.create('i', 'icon icon-16 icon-drag', row) + dragHandle.title = L._('Drag to reorder') + datalayer.renderToolbox(row) + const title = L.DomUtil.add('span', '', row, datalayer.options.name) + L.DomUtil.classIf(row, 'off', !datalayer.isVisible()) + title.textContent = datalayer.options.name + row.dataset.id = L.stamp(datalayer) + }) + const onReorder = (src, dst, initialIndex, finalIndex) => { + const layer = this.datalayers[src.dataset.id], + other = this.datalayers[dst.dataset.id], + minIndex = Math.min(layer.getRank(), other.getRank()), + maxIndex = Math.max(layer.getRank(), other.getRank()) + if (finalIndex === 0) layer.bringToTop() + else if (finalIndex > initialIndex) layer.insertBefore(other) + else layer.insertAfter(other) + this.eachDataLayerReverse((datalayer) => { + if (datalayer.getRank() >= minIndex && datalayer.getRank() <= maxIndex) + datalayer.isDirty = true + }) + this.indexDatalayers() + } + const orderable = new U.Orderable(ul, onReorder) + + const bar = L.DomUtil.create('div', 'button-bar', container) + L.DomUtil.createButton( + 'show-on-edit block add-datalayer button', + bar, + L._('Add a layer'), + this.newDataLayer, + this + ) + + this.editPanel.open({ data: { html: container } }) + }, } /* Used in view mode to define the current tilelayer */ @@ -971,7 +1028,7 @@ U.TileLayerChooser = L.Control.extend({ L.DomUtil.createTitle(container, L._('Change tilelayers'), 'tilelayer') this._tilelayers_container = L.DomUtil.create('ul', '', container) this.buildList(options) - this.map.ui.openPanel({ + this.map.editPanel.open({ data: { html: container }, className: options.className, }) @@ -1201,6 +1258,7 @@ U.SearchControl = L.Control.extend({ }, onAdd: function (map) { + this.map = map const container = L.DomUtil.create('div', 'leaflet-control-search umap-control') L.DomEvent.disableClickPropagation(container) L.DomUtil.createButton( @@ -1209,38 +1267,37 @@ U.SearchControl = L.Control.extend({ L._('Search location'), (e) => { L.DomEvent.stop(e) - this.openPanel(map) + this.open() }, this ) return container }, - openPanel: function (map) { + open: function () { const options = { limit: 10, noResultLabel: L._('No results'), } - if (map.options.photonUrl) options.url = map.options.photonUrl - const container = L.DomUtil.create('div', 'umap-search') + if (this.map.options.photonUrl) options.url = this.map.options.photonUrl + const container = L.DomUtil.create('div', '') - const title = L.DomUtil.create('h3', '', container) - title.textContent = L._('Search location') + L.DomUtil.createTitle(container, L._('Search location'), 'search') const input = L.DomUtil.create('input', 'photon-input', container) const resultsContainer = L.DomUtil.create('div', 'photon-autocomplete', container) - this.search = new U.Search(map, input, options) + this.search = new U.Search(this.map, input, options) const id = Math.random() this.search.on('ajax:send', () => { - map.fire('dataloading', { id: id }) + this.map.fire('dataloading', { id: id }) }) this.search.on('ajax:return', () => { - map.fire('dataload', { id: id }) + this.map.fire('dataload', { id: id }) }) this.search.resultsContainer = resultsContainer - map.ui.once('panel:ready', () => { + this.map.ui.once('panel:ready', () => { input.focus() }) - map.ui.openPanel({ data: { html: container } }) + this.map.panel.open({ data: { html: container } }) }, }) diff --git a/umap/static/umap/js/umap.features.js b/umap/static/umap/js/umap.features.js index 517f321c..34087abb 100644 --- a/umap/static/umap/js/umap.features.js +++ b/umap/static/umap/js/umap.features.js @@ -132,11 +132,7 @@ U.FeatureMixin = { this.appendEditFieldsets(container) const advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions')) this.getAdvancedEditActions(advancedActions) - this.map.ui.openPanel({ - data: { html: container }, - className: 'dark', - actions: [U.Browser.backButton(this.map)], - }) + this.map.editPanel.open({ data: { html: container } }) this.map.editedFeature = this if (!this.isOnScreen()) this.zoomTo(e) }, diff --git a/umap/static/umap/js/umap.importer.js b/umap/static/umap/js/umap.importer.js index 0400cd1c..d3e85df7 100644 --- a/umap/static/umap/js/umap.importer.js +++ b/umap/static/umap/js/umap.importer.js @@ -117,7 +117,7 @@ U.Importer = L.Class.extend({ open: function () { if (!this.container) this.build() - this.map.ui.openPanel({ data: { html: this.container }, className: 'dark' }) + this.map.editPanel.open({ data: { html: this.container } }) }, openFiles: function () { diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js index a1b9ef54..60b13208 100644 --- a/umap/static/umap/js/umap.js +++ b/umap/static/umap/js/umap.js @@ -56,6 +56,8 @@ U.Map = L.Map.extend({ if (geojson.geometry) this.options.center = this.latLng(geojson.geometry) this.urls = new U.URLs(this.options.urls) + this.panel = new U.Panel(this._container) + if (this.hasEditMode()) this.editPanel = new U.EditPanel(this._container) this.ui = new U.UI(this._container) this.ui.on('dataloading', (e) => this.fire('dataloading', e)) this.ui.on('dataload', (e) => this.fire('dataload', e)) @@ -330,15 +332,16 @@ U.Map = L.Map.extend({ new U.EditControl(this).addTo(this) const editActions = [ + U.EditLayersAction, U.EditCaptionAction, U.EditPropertiesAction, U.ChangeTileLayerAction, U.UpdateExtentAction, U.UpdatePermsAction, + U.ImportAction, ] if (this.options.editMode === 'advanced') { new U.SettingsToolbar({ actions: editActions }).addTo(this) - new U.ImportToolbar({ actions: [U.ImportAction] }).addTo(this) } new U.DrawToolbar({ map: this }).addTo(this) @@ -438,8 +441,6 @@ U.Map = L.Map.extend({ L.DomUtil.addClass(control._container, 'display-on-more') else L.DomUtil.removeClass(control._container, 'display-on-more') } - if (this.getOption('datalayersControl')) this._controls.datalayers.addTo(this) - if (this.getOption('captionControl')) this._controls.caption.addTo(this) if (this.getOption('permanentCredit')) this._controls.permanentCredit.addTo(this) if (this.getOption('moreControl')) this._controls.more.addTo(this) if (this.getOption('scaleControl')) this._controls.scale.addTo(this) @@ -775,6 +776,11 @@ U.Map = L.Map.extend({ return new U.DataLayer(this, datalayer) }, + newDataLayer: function () { + const datalayer = this.createDataLayer({}) + datalayer.edit() + }, + getDefaultOption: function (option) { return U.SCHEMA[option] && U.SCHEMA[option].default }, @@ -812,10 +818,6 @@ U.Map = L.Map.extend({ }) }, - manageDatalayers: function () { - if (this._controls.datalayers) this._controls.datalayers.openPanel() - }, - toGeoJSON: function () { let features = [] this.eachDataLayer((datalayer) => { @@ -1061,7 +1063,7 @@ U.Map = L.Map.extend({ else window.location = data.url alert.content = data.info || alert.content this.once('saved', () => this.ui.alert(alert)) - this.ui.closePanel() + this.editPanel.close() this.permissions.save() } }, @@ -1164,7 +1166,6 @@ U.Map = L.Map.extend({ UIFields.push(`options.${this.HIDDABLE_CONTROLS[i]}Control`) } UIFields = UIFields.concat([ - 'options.datalayersControl', 'options.moreControl', 'options.scrollWheelZoom', 'options.miniMap', @@ -1550,7 +1551,7 @@ U.Map = L.Map.extend({ this._editSlideshow(container) this._advancedActions(container) - this.ui.openPanel({ data: { html: container }, className: 'dark' }) + this.editPanel.open({ data: { html: container }, className: 'dark' }) }, enableEdit: function () { @@ -1822,7 +1823,7 @@ U.Map = L.Map.extend({ }, search: function () { - if (this._controls.search) this._controls.search.openPanel(this) + if (this._controls.search) this._controls.search.open() }, getFilterKeys: function () { diff --git a/umap/static/umap/js/umap.layer.js b/umap/static/umap/js/umap.layer.js index 1ebc39e0..93c088ce 100644 --- a/umap/static/umap/js/umap.layer.js +++ b/umap/static/umap/js/umap.layer.js @@ -1379,9 +1379,8 @@ U.DataLayer = L.Evented.extend({ '_blank' ) } - this.map.ui.openPanel({ + this.map.editPanel.open({ data: { html: container }, - className: 'dark', actions: [U.Browser.backButton(this.map)], }) }, diff --git a/umap/static/umap/js/umap.permissions.js b/umap/static/umap/js/umap.permissions.js index 6200a694..871e88fe 100644 --- a/umap/static/umap/js/umap.permissions.js +++ b/umap/static/umap/js/umap.permissions.js @@ -126,7 +126,7 @@ U.MapPermissions = L.Class.extend({ this.map.eachDataLayer((datalayer) => { datalayer.permissions.edit(container) }) - this.map.ui.openPanel({ data: { html: container }, className: 'dark' }) + this.map.editPanel.open({ data: { html: container }, className: 'dark' }) }, attach: async function () { diff --git a/umap/static/umap/js/umap.popup.js b/umap/static/umap/js/umap.popup.js index ced6b1d0..5416a7ea 100644 --- a/umap/static/umap/js/umap.popup.js +++ b/umap/static/umap/js/umap.popup.js @@ -55,7 +55,7 @@ U.Popup.Panel = U.Popup.extend({ }, onAdd: function (map) { - map.ui.openPanel({ + map.panel.open({ data: { html: this._content }, actions: [U.Browser.backButton(map)], }) @@ -71,7 +71,7 @@ U.Popup.Panel = U.Popup.extend({ }, onRemove: function (map) { - map.ui.closePanel() + map.panel.close() // fire events as in base class Popup.js:onRemove map.fire('popupclose', { popup: this }) diff --git a/umap/static/umap/js/umap.share.js b/umap/static/umap/js/umap.share.js index 88a2d033..a4c0a65c 100644 --- a/umap/static/umap/js/umap.share.js +++ b/umap/static/umap/js/umap.share.js @@ -155,7 +155,7 @@ U.Share = L.Class.extend({ open: function () { if (!this.container) this.build() - this.map.ui.openPanel({ data: { html: this.container } }) + this.map.panel.open({ data: { html: this.container } }) }, format: function (mode) { diff --git a/umap/static/umap/js/umap.ui.js b/umap/static/umap/js/umap.ui.js index 8c54e5aa..4f238244 100644 --- a/umap/static/umap/js/umap.ui.js +++ b/umap/static/umap/js/umap.ui.js @@ -5,7 +5,6 @@ U.UI = L.Evented.extend({ ALERTS: Array(), ALERT_ID: null, TOOLTIP_ID: null, - PANEL_MODE: 'condensed', initialize: function (parent) { this.parent = parent @@ -14,78 +13,12 @@ U.UI = L.Evented.extend({ L.DomEvent.on(this.container, 'contextmenu', L.DomEvent.stopPropagation) // Do not activate our custom context menu. L.DomEvent.on(this.container, 'wheel', L.DomEvent.stopPropagation) L.DomEvent.on(this.container, 'MozMousePixelScroll', L.DomEvent.stopPropagation) - this._panel = L.DomUtil.create('div', '', this.container) - this._panel.id = 'umap-panel' this._alert = L.DomUtil.create('div', 'with-transition', this.container) this._alert.id = 'umap-alert-container' this._tooltip = L.DomUtil.create('div', '', this.container) this._tooltip.id = 'umap-tooltip-container' }, - resetPanelClassName: function () { - this._panel.className = `with-transition ${this.PANEL_MODE}` - }, - - openPanel: function (e) { - this.fire('panel:open') - // We reset all because we can't know which class has been added - // by previous ui processes... - this.resetPanelClassName() - this._panel.innerHTML = '' - const actionsContainer = L.DomUtil.create('ul', 'toolbox', this._panel) - const body = L.DomUtil.create('div', 'body', this._panel) - if (e.data.html.nodeType && e.data.html.nodeType === 1) - body.appendChild(e.data.html) - else body.innerHTML = e.data.html - const closeLink = L.DomUtil.create('li', 'umap-close-link', actionsContainer) - L.DomUtil.add('i', 'umap-icon-16 umap-close-icon', closeLink) - closeLink.title = L._('Close') - const resizeLink = L.DomUtil.create('li', 'umap-resize-link', actionsContainer) - L.DomUtil.add('i', 'umap-icon-16 umap-resize-icon', resizeLink) - resizeLink.title = L._('Toggle size') - if (e.actions) { - for (let i = 0; i < e.actions.length; i++) { - actionsContainer.appendChild(e.actions[i]) - } - } - if (e.className) L.DomUtil.addClass(this._panel, e.className) - if (L.DomUtil.hasClass(this.parent, 'umap-ui')) { - // Already open. - this.fire('panel:ready') - } else { - L.DomEvent.once( - this._panel, - 'transitionend', - function (e) { - this.fire('panel:ready') - }, - this - ) - L.DomUtil.addClass(this.parent, 'umap-ui') - } - L.DomEvent.on(closeLink, 'click', this.closePanel, this) - L.DomEvent.on(resizeLink, 'click', this.resizePanel, this) - }, - - resizePanel: function () { - if (this.PANEL_MODE === 'expanded') { - this.PANEL_MODE = 'condensed' - this._panel.classList.remove('expanded') - this._panel.classList.add('condensed') - } else { - this.PANEL_MODE = 'expanded' - this._panel.classList.remove('condensed') - this._panel.classList.add('expanded') - } - }, - - closePanel: function () { - if (L.DomUtil.hasClass(this.parent, 'umap-ui')) { - L.DomUtil.removeClass(this.parent, 'umap-ui') - this.fire('panel:closed') - } - }, - alert: function (e) { if (L.DomUtil.hasClass(this.parent, 'umap-alert')) this.ALERTS.push(e) else this.popAlert(e) diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 051e6844..86640d3c 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -862,6 +862,7 @@ ul.photon-autocomplete { /* ********************************* */ /* Browser panel */ /* ********************************* */ +a.umap-control-browse, .umap-control-browse [type="button"] { background-position: -36px -72px; } @@ -869,12 +870,6 @@ a.umap-control-caption, .umap-control-caption [type="button"] { background-position: -72px -72px; } -.umap-edit-enabled .umap-control-caption [type="button"], -.umap-edit-enabled .umap-control-browse [type="button"] { - background-image: url('./img/24-white.svg'); - background-color: var(--color-darkGray); -} -.search-result-tools i, .leaflet-inplace-toolbar a { background-repeat: no-repeat; background-image: url('./img/16.svg'); diff --git a/umap/templates/umap/css.html b/umap/templates/umap/css.html index 623d1e6d..c121ccd1 100644 --- a/umap/templates/umap/css.html +++ b/umap/templates/umap/css.html @@ -28,4 +28,5 @@ +