diff --git a/umap/static/umap/js/modules/autocomplete.js b/umap/static/umap/js/modules/autocomplete.js
index 003c82fb..ffc7cdbd 100644
--- a/umap/static/umap/js/modules/autocomplete.js
+++ b/umap/static/umap/js/modules/autocomplete.js
@@ -7,6 +7,7 @@ import {
import { translate } from './i18n.js'
import { Request, ServerRequest } from './request.js'
import { escapeHTML, generateId } from './utils.js'
+import * as Utils from './utils.js'
export class BaseAutocomplete {
constructor(parent, options) {
@@ -291,10 +292,9 @@ class BaseServerAjax extends BaseAjax {
export const SingleMixin = (Base) =>
class extends Base {
initSelectedContainer() {
- return DomUtil.after(
- this.input,
- DomUtil.element({ tagName: 'div', className: 'umap-singleresult' })
- )
+ const el = Utils.loadTemplate('')
+ this.input.parentNode.insertBefore(el, this.input.nextSibling)
+ return el
}
displaySelected(result) {
@@ -322,10 +322,9 @@ export const SingleMixin = (Base) =>
export const MultipleMixin = (Base) =>
class extends Base {
initSelectedContainer() {
- return DomUtil.after(
- this.input,
- DomUtil.element({ tagName: 'ul', className: 'umap-multiresult' })
- )
+ const el = Utils.loadTemplate('')
+ this.input.parentNode.insertBefore(el, this.input.nextSibling)
+ return el
}
displaySelected(result) {
diff --git a/umap/static/umap/js/modules/browser.js b/umap/static/umap/js/modules/browser.js
index ac2fea86..5f7d14e6 100644
--- a/umap/static/umap/js/modules/browser.js
+++ b/umap/static/umap/js/modules/browser.js
@@ -5,6 +5,7 @@ import { translate } from './i18n.js'
import * as Icon from './rendering/icon.js'
import ContextMenu from './ui/contextmenu.js'
import * as Utils from './utils.js'
+import { SCHEMA } from './schema.js'
export default class Browser {
constructor(umap, leafletMap) {
@@ -21,35 +22,24 @@ export default class Browser {
addFeature(feature, parent) {
if (feature.isFiltered()) return
if (this.options.inBbox && !feature.isOnScreen(this.bounds)) return
- const row = DomUtil.create('li', `${feature.getClassName()} feature`)
- const zoom_to = DomUtil.createButtonIcon(
- row,
- 'icon-zoom',
- translate('Bring feature to center')
- )
- const edit = DomUtil.createButtonIcon(
- row,
- 'show-on-edit icon-edit',
- translate('Edit this feature')
- )
- const del = DomUtil.createButtonIcon(
- row,
- 'show-on-edit icon-delete',
- translate('Delete this feature')
- )
- const colorBox = DomUtil.create(
- 'i',
- `icon icon-16 icon-${feature.getClassName()} feature-color`,
- row
- )
- const title = DomUtil.create('span', 'feature-title', row)
+ const template = `
+
+
+
+
+
+
+
+ `
+ const [row, { zoom, edit, remove, colorBox, label }] =
+ Utils.loadTemplateWithRefs(template)
+ label.textContent = label.title = feature.getDisplayName() || '—'
const symbol = feature._getIconUrl
? Icon.formatUrl(feature._getIconUrl(), feature)
: null
- title.textContent = title.title = feature.getDisplayName() || '—'
const bgcolor = feature.getPreviewColor()
colorBox.style.backgroundColor = bgcolor
- if (symbol && symbol !== U.SCHEMA.iconUrl.default) {
+ if (symbol && symbol !== SCHEMA.iconUrl.default) {
const icon = Icon.makeElement(symbol, colorBox)
Icon.setContrast(icon, colorBox, symbol, bgcolor)
} else if (DomUtil.contrastedColor(colorBox, bgcolor)) {
@@ -58,10 +48,10 @@ export default class Browser {
const viewFeature = (e) => {
feature.zoomTo({ ...e, callback: () => feature.view() })
}
- DomEvent.on(zoom_to, 'click', viewFeature)
- DomEvent.on(title, 'click', viewFeature)
- DomEvent.on(edit, 'click', feature.edit, feature)
- DomEvent.on(del, 'click', feature.del, feature)
+ zoom.addEventListener('click', viewFeature)
+ label.addEventListener('click', viewFeature)
+ edit.addEventListener('click', () => feature.edit())
+ remove.addEventListener('click', () => feature.del())
// HOTFIX. Remove when this is released:
// https://github.com/Leaflet/Leaflet/pull/9052
DomEvent.disableClickPropagation(row)
@@ -75,45 +65,51 @@ export default class Browser {
addDataLayer(datalayer, parent) {
let className = `datalayer ${datalayer.getHidableClass()}`
if (this.mode !== 'layers') className += ' show-list'
- const container = DomUtil.create('div', className, parent)
- const headline = DomUtil.create('h5', '', container)
- container.id = this.datalayerId(datalayer)
- const ul = DomUtil.create('ul', '', container)
+ const [container, { headline, toolbox, toggle, label }] =
+ Utils.loadTemplateWithRefs(`
+
+ `)
+ datalayer.renderToolbox(toolbox)
+ parent.appendChild(container)
+ const toggleList = () => parent.classList.toggle('show-list')
+ toggle.addEventListener('click', toggleList)
+ label.addEventListener('click', toggleList)
this.updateDatalayer(datalayer)
}
updateDatalayer(datalayer) {
// Compute once, but use it for each feature later.
this.bounds = this._leafletMap.getBounds()
- const parent = DomUtil.get(this.datalayerId(datalayer))
+ const id = this.datalayerId(datalayer)
+ const parent = document.getElementById(id)
// Panel is not open
if (!parent) return
parent.classList.toggle('off', !datalayer.isVisible())
+ const label = parent.querySelector('.datalayer-name')
const container = parent.querySelector('ul')
- const headline = parent.querySelector('h5')
- const toggleList = () => parent.classList.toggle('show-list')
- headline.innerHTML = ''
- const toggle = DomUtil.create('i', 'icon icon-16 datalayer-toggle-list', headline)
- DomEvent.on(toggle, 'click', toggleList)
- datalayer.renderToolbox(headline)
- const name = DomUtil.create('span', 'datalayer-name', headline)
- name.textContent = name.title = datalayer.options.name
- DomEvent.on(name, 'click', toggleList)
container.innerHTML = ''
datalayer.eachFeature((feature) => this.addFeature(feature, container))
-
+ datalayer.propagate(['properties.name'])
const total = datalayer.count()
if (!total) return
const current = container.querySelectorAll('li').length
const count = total === current ? total : `${current}/${total}`
- const counter = DomUtil.create('span', 'datalayer-counter', headline)
+ const counter = parent.querySelector('.datalayer-counter')
counter.textContent = `(${count})`
counter.title = translate(`Features in this layer: ${count}`)
}
toggleBadge() {
- U.Utils.toggleBadge(this.filtersTitle, this.hasFilters())
- U.Utils.toggleBadge('.umap-control-browse', this.hasFilters())
+ Utils.toggleBadge(this.filtersTitle, this.hasFilters())
+ Utils.toggleBadge('.umap-control-browse', this.hasFilters())
}
onFormChange() {
@@ -157,21 +153,51 @@ export default class Browser {
open(mode) {
// Force only if mode is known, otherwise keep current mode.
if (mode) this.mode = mode
- const container = DomUtil.create('div')
+ const template = `
+
+
${translate('Data browser')}
+
+ ${translate('Filters')}
+
+
+
+
+
+
+
+
+
-
-
-
-
- `)
- container.appendChild(toolbox)
- toggle.addEventListener('click', () => this.toggleLayers())
- fitBounds.addEventListener('click', () => this._umap.fitDataBounds())
- download.addEventListener('click', () => this.downloadVisible(download))
- download.hidden = this._umap.getProperty('embedControl') === false
- }
-
downloadVisible(element) {
const menu = new ContextMenu({ fixed: true })
const items = []
@@ -265,15 +268,13 @@ export default class Browser {
}
static backButton(umap) {
- const button = DomUtil.createButtonIcon(
- DomUtil.create('li', '', undefined),
- 'icon-back',
- translate('Back to browser')
+ const button = Utils.loadTemplate(
+ ``
)
// Fixme: remove me when this is merged and released
// https://github.com/Leaflet/Leaflet/pull/9052
DomEvent.disableClickPropagation(button)
- DomEvent.on(button, 'click', () => umap.openBrowser())
+ button.addEventListener('click', () => umap.openBrowser())
return button
}
}
diff --git a/umap/static/umap/js/modules/data/layer.js b/umap/static/umap/js/modules/data/layer.js
index 41167c17..c3280df1 100644
--- a/umap/static/umap/js/modules/data/layer.js
+++ b/umap/static/umap/js/modules/data/layer.js
@@ -130,6 +130,10 @@ export class DataLayer {
}
render(fields, builder) {
+ // Propagate will remove the fields it has already
+ // processed
+ fields = this.propagate(fields)
+
const impacts = Utils.getImpactsFromSchema(fields)
for (const impact of impacts) {
@@ -153,6 +157,29 @@ export class DataLayer {
}
}
+ // This method does a targeted update of the UI,
+ // it whould be merged with `render`` method and the
+ // SCHEMA at some point
+ propagate(fields = []) {
+ const impacts = {
+ 'properties.name': () => {
+ Utils.eachElement('.datalayer-name', (el) => {
+ if (el.dataset.id === this.id) {
+ el.textContent = this.getName()
+ el.title = this.getName()
+ }
+ })
+ },
+ }
+ for (const [field, impact] of Object.entries(impacts)) {
+ if (!fields.length || fields.includes(field)) {
+ impact()
+ fields = fields.filter((item) => item !== field)
+ }
+ }
+ return fields
+ }
+
showAtLoad() {
return this.autoLoaded() && this.showAtZoom()
}
diff --git a/umap/static/umap/js/modules/rendering/controls.js b/umap/static/umap/js/modules/rendering/controls.js
index 6379b827..c50c1a2d 100644
--- a/umap/static/umap/js/modules/rendering/controls.js
+++ b/umap/static/umap/js/modules/rendering/controls.js
@@ -99,7 +99,10 @@ const BaseButton = Control.extend({
`
const [container, { button }] = Utils.loadTemplateWithRefs(template)
- button.addEventListener('click', () => this.onClick())
+ button.addEventListener('click', (event) => {
+ event.stopPropagation()
+ this.onClick()
+ })
button.addEventListener('dblclick', (event) => {
event.stopPropagation()
})
diff --git a/umap/static/umap/js/modules/rules.js b/umap/static/umap/js/modules/rules.js
index 4ecf3724..5901b1d2 100644
--- a/umap/static/umap/js/modules/rules.js
+++ b/umap/static/umap/js/modules/rules.js
@@ -1,4 +1,4 @@
-import { DomEvent, DomUtil, stamp } from '../../vendors/leaflet/leaflet-src.esm.js'
+import { stamp } from '../../vendors/leaflet/leaflet-src.esm.js'
import { AutocompleteDatalist } from './autocomplete.js'
import { MutatingForm } from './form/builder.js'
import { translate } from './i18n.js'
@@ -119,10 +119,9 @@ class Rule {
'options.smoothFactor',
'options.dashArray',
]
- const container = DomUtil.create('div')
const builder = new MutatingForm(this, options)
- const defaultShapeProperties = DomUtil.add('div', '', container)
- defaultShapeProperties.appendChild(builder.build())
+ const container = document.createElement('div')
+ container.appendChild(builder.build())
const autocomplete = new AutocompleteDatalist(builder.helpers.condition.input)
const properties = this._umap.allProperties()
autocomplete.suggestions = properties
@@ -137,43 +136,45 @@ class Rule {
.map((str) => `${value}${str || ''}`)
}
})
- this._umap.editPanel.open({ content: container, highlight: 'settings' })
+ const backButton = Utils.loadTemplate(`
+ `)
+ backButton.addEventListener('click', () =>
+ this._umap.edit().then(() => {
+ this._umap.editPanel.container.querySelector('details#rules').open = true
+ })
+ )
+
+ this._umap.editPanel.open({
+ content: container,
+ highlight: 'settings',
+ actions: [backButton],
+ })
}
- renderToolbox(row) {
- row.classList.toggle('off', !this.active)
- const toggle = DomUtil.createButtonIcon(
- row,
- 'icon-eye',
- translate('Show/hide layer')
- )
- const edit = DomUtil.createButtonIcon(
- row,
- 'icon-edit show-on-edit',
- translate('Edit')
- )
- const remove = DomUtil.createButtonIcon(
- row,
- 'icon-delete show-on-edit',
- translate('Delete layer')
- )
- DomEvent.on(edit, 'click', this.edit, this)
- DomEvent.on(
- remove,
- 'click',
- function () {
- if (!confirm(translate('Are you sure you want to delete this rule?'))) return
- this._delete()
- this._umap.editPanel.close()
- },
- this
- )
- DomUtil.add('span', '', row, this.condition || translate('empty rule'))
- DomUtil.createIcon(row, 'icon-drag', translate('Drag to reorder'))
- row.dataset.id = stamp(this)
- DomEvent.on(toggle, 'click', () => {
+ renderToolbox(ul) {
+ const template = `
+
+
+
+
+ ${this.condition || translate('empty rule')}
+
+
+ `
+ const [li, { toggle, edit, remove }] = Utils.loadTemplateWithRefs(template)
+ ul.appendChild(li)
+ li.classList.toggle('off', !this.active)
+ edit.addEventListener('click', () => this.edit())
+ remove.addEventListener('click', () => {
+ if (!confirm(translate('Are you sure you want to delete this rule?'))) return
+ this._delete()
+ this._umap.editPanel.close()
+ })
+ toggle.addEventListener('click', () => {
this.active = !this.active
- row.classList.toggle('off', !this.active)
+ li.classList.toggle('off', !this.active)
this._umap.render(['rules'])
})
}
@@ -207,8 +208,9 @@ export default class Rules {
}
onReorder(src, dst, initialIndex, finalIndex) {
- const moved = this.rules.find((rule) => stamp(rule) === src.dataset.id)
- const reference = this.rules.find((rule) => stamp(rule) === dst.dataset.id)
+ const oldRules = Utils.CopyJSON(this._umap.properties.rules || {})
+ const moved = this.rules.find((rule) => stamp(rule) === +src.dataset.id)
+ const reference = this.rules.find((rule) => stamp(rule) === +dst.dataset.id)
const movedIdx = this.rules.indexOf(moved)
let referenceIdx = this.rules.indexOf(reference)
const minIndex = Math.min(movedIdx, referenceIdx)
@@ -222,20 +224,28 @@ export default class Rules {
this.rules.splice(newIdx, 0, moved)
this._umap.render(['rules'])
this.commit()
+ this._umap.sync.update('properties.rules', this._umap.properties.rules, oldRules)
}
edit(container) {
- const body = DomUtil.createFieldset(container, translate('Conditional style rules'))
+ const template = `
+
+ ${translate('Conditional style rules')}
+
+
+ `
+ const [body, { ul, add }] = Utils.loadTemplateWithRefs(template)
if (this.rules.length) {
- const ul = DomUtil.create('ul', '', body)
for (const rule of this.rules) {
- rule.renderToolbox(DomUtil.create('li', 'orderable', ul))
+ rule.renderToolbox(ul)
}
-
const orderable = new Orderable(ul, this.onReorder.bind(this))
}
-
- DomUtil.createButton('umap-add', body, translate('Add rule'), this.addRule, this)
+ add.addEventListener('click', () => this.addRule())
+ container.appendChild(body)
}
addRule() {
diff --git a/umap/static/umap/js/modules/umap.js b/umap/static/umap/js/modules/umap.js
index 747f170b..26c4fe72 100644
--- a/umap/static/umap/js/modules/umap.js
+++ b/umap/static/umap/js/modules/umap.js
@@ -1182,7 +1182,7 @@ export default class Umap {
}
this._advancedActions(container)
- this.editPanel.open({
+ return this.editPanel.open({
content: container,
className: 'dark',
highlight: 'settings',
@@ -1513,12 +1513,17 @@ export default class Umap {
editDatalayers() {
if (!this.editEnabled) return
- const container = DomUtil.create('div')
- DomUtil.createTitle(container, translate('Manage layers'), 'icon-layers')
- const ul = DomUtil.create('ul', '', container)
+ const template = `
+
+
${translate('Manage layers')}
+
+