jeff/umap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: change DomUtil.element signature

Browse source
This commit is contained in:
Yohan Boniface 2024-05-01 15:22:08 +02:00
parent dccb93c8a8
commit c3516516cd
8 changed files with 190 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
umap/static/umap/js/umap.autocomplete.js
View file

@ -35,27 +35,25 @@ U.AutoComplete = L.Class.extend({
}, },
createInput: function () { createInput: function () {
this.input = L.DomUtil.element( this.input = L.DomUtil.element({
'input', tagName: 'input',
{ type: 'text',
type: 'text', parent: this.el,
placeholder: this.options.placeholder, placeholder: this.options.placeholder,
autocomplete: 'off', autocomplete: 'off',
className: this.options.className, className: this.options.className,
}, })
this.el
)
L.DomEvent.on(this.input, 'keydown', this.onKeyDown, this) L.DomEvent.on(this.input, 'keydown', this.onKeyDown, this)
L.DomEvent.on(this.input, 'keyup', this.onKeyUp, this) L.DomEvent.on(this.input, 'keyup', this.onKeyUp, this)
L.DomEvent.on(this.input, 'blur', this.onBlur, this) L.DomEvent.on(this.input, 'blur', this.onBlur, this)
}, },
createContainer: function () { createContainer: function () {
this.container = L.DomUtil.element( this.container = L.DomUtil.element({
'ul', tagName: 'ul',
{ className: 'umap-autocomplete' }, parent: document.body,
document.body className: 'umap-autocomplete',
) })
}, },
resizeContainer: function () { resizeContainer: function () {
@ -174,8 +172,11 @@ U.AutoComplete = L.Class.extend({
}, },
createResult: function (item) { createResult: function (item) {
const el = L.DomUtil.element('li', {}, this.container) const el = L.DomUtil.element({
el.textContent = item.label tagName: 'li',
parent: this.container,
textContent: item.label,
})
const result = { const result = {
item: item, item: item,
el: el, el: el,
@ -276,15 +277,22 @@ U.AutoComplete.Ajax.SelectMultiple = U.AutoComplete.Ajax.extend({
initSelectedContainer: function () { initSelectedContainer: function () {
return L.DomUtil.after( return L.DomUtil.after(
this.input, this.input,
L.DomUtil.element('ul', { className: 'umap-multiresult' }) L.DomUtil.element({ tagName: 'ul', className: 'umap-multiresult' })
) )
}, },
displaySelected: function (result) { displaySelected: function (result) {
const result_el = L.DomUtil.element('li', {}, this.selected_container) const result_el = L.DomUtil.element({
tagName: 'li',
parent: this.selected_container,
})
result_el.textContent = result.item.label result_el.textContent = result.item.label
const close = L.DomUtil.element('span', { className: 'close' }, result_el) const close = L.DomUtil.element({
close.textContent = '×' tagName: 'span',
parent: result_el,
className: 'close',
textContent: '×',
})
L.DomEvent.on( L.DomEvent.on(
close, close,
'click', 'click',
@ -302,15 +310,22 @@ U.AutoComplete.Ajax.Select = U.AutoComplete.Ajax.extend({
initSelectedContainer: function () { initSelectedContainer: function () {
return L.DomUtil.after( return L.DomUtil.after(
this.input, this.input,
L.DomUtil.element('div', { className: 'umap-singleresult' }) L.DomUtil.element({ tagName: 'div', className: 'umap-singleresult' })
) )
}, },
displaySelected: function (result) { displaySelected: function (result) {
const result_el = L.DomUtil.element('div', {}, this.selected_container) const result_el = L.DomUtil.element({
tagName: 'div',
parent: this.selected_container,
})
result_el.textContent = result.item.label result_el.textContent = result.item.label
const close = L.DomUtil.element('span', { className: 'close' }, result_el) const close = L.DomUtil.element({
close.textContent = '×' tagName: 'span',
parent: result_el,
className: 'close',
textContent: '×',
})
this.input.style.display = 'none' this.input.style.display = 'none'
L.DomEvent.on( L.DomEvent.on(
close, close,

68
umap/static/umap/js/umap.controls.js
View file

@ -669,14 +669,12 @@ const ControlsMixin = {
L.DomUtil.createTitle(container, this.options.name, 'icon-caption') L.DomUtil.createTitle(container, this.options.name, 'icon-caption')
this.permissions.addOwnerLink('h5', container) this.permissions.addOwnerLink('h5', container)
if (this.options.description) { if (this.options.description) {
const description = L.DomUtil.element( const description = L.DomUtil.element({
'div', tagName: 'div',
{ className: 'umap-map-description',
className: 'umap-map-description', safeHTML: U.Utils.toHTML(this.options.description),
safeHTML: U.Utils.toHTML(this.options.description), parent: container,
}, })
container
)
} }
const datalayerContainer = L.DomUtil.create('div', 'datalayer-container', container) const datalayerContainer = L.DomUtil.create('div', 'datalayer-container', container)
this.eachVisibleDataLayer((datalayer) => { this.eachVisibleDataLayer((datalayer) => {
@ -687,11 +685,11 @@ const ControlsMixin = {
datalayer.onceLoaded(function () { datalayer.onceLoaded(function () {
datalayer.renderLegend(legend) datalayer.renderLegend(legend)
if (datalayer.options.description) { if (datalayer.options.description) {
L.DomUtil.element( L.DomUtil.element({
'span', tagName: 'span',
{ safeHTML: U.Utils.toHTML(datalayer.options.description) }, parent: p,
p safeHTML: U.Utils.toHTML(datalayer.options.description),
) })
} }
}) })
datalayer.renderToolbox(headline) datalayer.renderToolbox(headline)
@ -701,13 +699,11 @@ const ControlsMixin = {
credits = L.DomUtil.createFieldset(creditsContainer, L._('Credits')) credits = L.DomUtil.createFieldset(creditsContainer, L._('Credits'))
title = L.DomUtil.add('h5', '', credits, L._('User content credits')) title = L.DomUtil.add('h5', '', credits, L._('User content credits'))
if (this.options.shortCredit || this.options.longCredit) { if (this.options.shortCredit || this.options.longCredit) {
L.DomUtil.element( L.DomUtil.element({
'p', tagName: 'p',
{ parent: credits,
safeHTML: U.Utils.toHTML(this.options.longCredit || this.options.shortCredit), safeHTML: U.Utils.toHTML(this.options.longCredit || this.options.shortCredit),
}, })
credits
)
} }
if (this.options.licence) { if (this.options.licence) {
const licence = L.DomUtil.add( const licence = L.DomUtil.add(
@ -729,16 +725,16 @@ const ControlsMixin = {
title = L.DomUtil.create('h5', '', credits) title = L.DomUtil.create('h5', '', credits)
title.textContent = L._('Map background credits') title.textContent = L._('Map background credits')
const tilelayerCredit = L.DomUtil.create('p', '', credits) const tilelayerCredit = L.DomUtil.create('p', '', credits)
L.DomUtil.element( L.DomUtil.element({
'strong', tagName: 'strong',
{ textContent: `${this.selected_tilelayer.options.name} ` }, parent: tilelayerCredit,
tilelayerCredit textContent: `${this.selected_tilelayer.options.name} `,
) })
L.DomUtil.element( L.DomUtil.element({
'span', tagName: 'span',
{ safeHTML: this.selected_tilelayer.getAttribution() }, parent: tilelayerCredit,
tilelayerCredit safeHTML: this.selected_tilelayer.getAttribution(),
) })
L.DomUtil.create('hr', '', credits) L.DomUtil.create('hr', '', credits)
const urls = { const urls = {
leaflet: 'http://leafletjs.com', leaflet: 'http://leafletjs.com',
@ -756,7 +752,7 @@ const ControlsMixin = {
`, `,
urls urls
) )
L.DomUtil.element('p', { innerHTML: creditHTML }, credits) L.DomUtil.element({ tagName: 'p', innerHTML: creditHTML, parent: credits })
this.panel.open({ content: container }) this.panel.open({ content: container })
}, },
@ -1073,11 +1069,11 @@ U.AttributionControl = L.Control.Attribution.extend({
const shortCredit = this._map.getOption('shortCredit'), const shortCredit = this._map.getOption('shortCredit'),
captionMenus = this._map.getOption('captionMenus') captionMenus = this._map.getOption('captionMenus')
if (shortCredit) { if (shortCredit) {
L.DomUtil.element( L.DomUtil.element({
'span', tagName: 'span',
{ safeHTML: ` — ${U.Utils.toHTML(shortCredit)}` }, parent: container,
container safeHTML: ` — ${U.Utils.toHTML(shortCredit)}`,
) })
} }
if (captionMenus) { if (captionMenus) {
const link = L.DomUtil.add('a', '', container, ` — ${L._('About')}`) const link = L.DomUtil.add('a', '', container, ` — ${L._('About')}`)

26
umap/static/umap/js/umap.core.js
View file

@ -118,19 +118,21 @@ L.DomUtil.createLink = (className, container, content, url, target, title) => {
} }
L.DomUtil.createIcon = (parent, className, title, size = 16) => { L.DomUtil.createIcon = (parent, className, title, size = 16) => {
return L.DomUtil.element( return L.DomUtil.element({
'i', tagName: 'i',
{ className: `icon icon-${size} ${className}`, title: title || '' }, parent: parent,
parent className: `icon icon-${size} ${className}`,
) title: title || '',
})
} }
L.DomUtil.createButtonIcon = (parent, className, title, size = 16) => { L.DomUtil.createButtonIcon = (parent, className, title, size = 16) => {
return L.DomUtil.element( return L.DomUtil.element({
'button', tagName: 'button',
{ className: `icon icon-${size} ${className}`, title: title || '' }, parent: parent,
parent className: `icon icon-${size} ${className}`,
) title: title || '',
})
} }
L.DomUtil.createTitle = (parent, text, className, tag = 'h3') => { L.DomUtil.createTitle = (parent, text, className, tag = 'h3') => {
@ -163,8 +165,8 @@ L.DomUtil.classIf = (el, className, bool) => {
else L.DomUtil.removeClass(el, className) else L.DomUtil.removeClass(el, className)
} }
L.DomUtil.element = (what, attrs, parent) => { L.DomUtil.element = ({ tagName, parent, ...attrs }) => {
const el = document.createElement(what) const el = document.createElement(tagName)
if (attrs.innerHTML) { if (attrs.innerHTML) {
attrs.innerHTML = U.Utils.escapeHTML(attrs.innerHTML) attrs.innerHTML = U.Utils.escapeHTML(attrs.innerHTML)
} else if (attrs.safeHTML) { } else if (attrs.safeHTML) {

26
umap/static/umap/js/umap.forms.js
View file

@ -757,7 +757,10 @@ L.FormBuilder.FacetSearchChoices = L.FormBuilder.Element.extend({
}, },
buildLabel: function () { buildLabel: function () {
this.label = L.DomUtil.element('legend', { textContent: this.options.label }) this.label = L.DomUtil.element({
tagName: 'legend',
textContent: this.options.label,
})
}, },
buildLi: function (value) { buildLi: function (value) {
@ -833,7 +836,10 @@ L.FormBuilder.MinMaxBase = L.FormBuilder.Element.extend({
}, },
buildLabel: function () { buildLabel: function () {
this.label = L.DomUtil.element('legend', { textContent: this.options.label }) this.label = L.DomUtil.element({
tagName: 'legend',
textContent: this.options.label,
})
}, },
toJS: function () { toJS: function () {
@ -982,15 +988,13 @@ L.FormBuilder.Range = L.FormBuilder.FloatInput.extend({
digits digits
)}"></option>` )}"></option>`
} }
const datalist = L.DomUtil.element( const datalist = L.DomUtil.element({
'datalist', tagName: 'datalist',
{ parent: this.getHelpTextParent(),
className: 'umap-field-datalist', className: 'umap-field-datalist',
safeHTML: options, safeHTML: options,
id: id, id: id,
}, })
this.getHelpTextParent()
)
this.input.setAttribute('list', id) this.input.setAttribute('list', id)
L.FormBuilder.Input.prototype.buildHelpText.call(this) L.FormBuilder.Input.prototype.buildHelpText.call(this)
}, },

106
umap/static/umap/js/umap.importer.js
View file

@ -15,21 +15,24 @@ U.Importer = L.Class.extend({
this.presetBox = L.DomUtil.create('div', 'formbox', this.container) this.presetBox = L.DomUtil.create('div', 'formbox', this.container)
this.presetSelect = L.DomUtil.create('select', '', this.presetBox) this.presetSelect = L.DomUtil.create('select', '', this.presetBox)
this.fileBox = L.DomUtil.create('div', 'formbox', this.container) this.fileBox = L.DomUtil.create('div', 'formbox', this.container)
this.fileInput = L.DomUtil.element( this.fileInput = L.DomUtil.element({
'input', tagName: 'input',
{ type: 'file', multiple: 'multiple', autofocus: true }, type: 'file',
this.fileBox parent: this.fileBox,
) multiple: 'multiple',
this.urlInput = L.DomUtil.element( autofocus: true,
'input', })
{ type: 'text', placeholder: L._('Provide an URL here') }, this.urlInput = L.DomUtil.element({
this.container tagName: 'input',
) type: 'text',
this.rawInput = L.DomUtil.element( parent: this.container,
'textarea', placeholder: L._('Provide an URL here'),
{ placeholder: L._('Paste your data here') }, })
this.container this.rawInput = L.DomUtil.element({
) tagName: 'textarea',
parent: this.container,
placeholder: L._('Paste your data here'),
})
this.typeLabel = L.DomUtil.add( this.typeLabel = L.DomUtil.add(
'label', 'label',
'', '',
@ -42,33 +45,43 @@ U.Importer = L.Class.extend({
this.container, this.container,
L._('Choose the layer to import in') L._('Choose the layer to import in')
) )
this.clearLabel = L.DomUtil.element( this.clearLabel = L.DomUtil.element({
'label', tagName: 'label',
{ textContent: L._('Replace layer content'), for: 'datalayer-clear-check' }, parent: this.container,
this.container textContent: L._('Replace layer content'),
) for: 'datalayer-clear-check',
this.submitInput = L.DomUtil.element( })
'input', this.submitInput = L.DomUtil.element({
{ type: 'button', value: L._('Import'), className: 'button' }, tagName: 'input',
this.container type: 'button',
) parent: this.container,
value: L._('Import'),
className: 'button',
})
this.map.help.button(this.typeLabel, 'importFormats') this.map.help.button(this.typeLabel, 'importFormats')
this.typeInput = L.DomUtil.element('select', { name: 'format' }, this.typeLabel) this.typeInput = L.DomUtil.element({
this.layerInput = L.DomUtil.element( tagName: 'select',
'select', name: 'format',
{ name: 'datalayer' }, parent: this.typeLabel,
this.layerLabel })
) this.layerInput = L.DomUtil.element({
this.clearFlag = L.DomUtil.element( tagName: 'select',
'input', name: 'datalayer',
{ type: 'checkbox', name: 'clear', id: 'datalayer-clear-check' }, parent: this.layerLabel,
this.clearLabel })
) this.clearFlag = L.DomUtil.element({
L.DomUtil.element( tagName: 'input',
'option', type: 'checkbox',
{ value: '', textContent: L._('Choose the data format') }, name: 'clear',
this.typeInput id: 'datalayer-clear-check',
) parent: this.clearLabel,
})
L.DomUtil.element({
tagName: 'option',
value: '',
textContent: L._('Choose the data format'),
parent: this.typeInput,
})
for (let i = 0; i < this.TYPES.length; i++) { for (let i = 0; i < this.TYPES.length; i++) {
option = L.DomUtil.create('option', '', this.typeInput) option = L.DomUtil.create('option', '', this.typeInput)
option.value = option.textContent = this.TYPES[i] option.value = option.textContent = this.TYPES[i]
@ -119,11 +132,12 @@ U.Importer = L.Class.extend({
option.value = id option.value = id
} }
}) })
L.DomUtil.element( L.DomUtil.element({
'option', tagName: 'option',
{ value: '', textContent: L._('Import in a new layer') }, value: '',
this.layerInput textContent: L._('Import in a new layer'),
) parent: this.layerInput,
})
}) })
}, },

11
umap/static/umap/js/umap.permissions.js
View file

@ -65,11 +65,12 @@ U.MapPermissions = L.Class.extend({
const helpText = `${L._('Secret edit link:')}<br>${ const helpText = `${L._('Secret edit link:')}<br>${
this.options.anonymous_edit_url this.options.anonymous_edit_url
}` }`
L.DomUtil.element( L.DomUtil.element({
'p', tagName: 'p',
{ className: 'help-text', innerHTML: helpText }, className: 'help-text',
container innerHTML: helpText,
) parent: container,
})
fields.push([ fields.push([
'options.edit_status', 'options.edit_status',
{ {

25
umap/static/umap/js/umap.popup.js
View file

@ -190,7 +190,11 @@ U.PopupTemplate.Table = U.PopupTemplate.BaseWithTitle.extend({
addRow: function (container, key, value) { addRow: function (container, key, value) {
const tr = L.DomUtil.create('tr', '', container) const tr = L.DomUtil.create('tr', '', container)
L.DomUtil.add('th', '', tr, key) L.DomUtil.add('th', '', tr, key)
L.DomUtil.element('td', { innerHTML: this.formatRow(key, value) }, tr) L.DomUtil.element({
tagName: 'td',
parent: tr,
innerHTML: this.formatRow(key, value),
})
}, },
renderBody: function () { renderBody: function () {
@ -281,11 +285,12 @@ U.PopupTemplate.OSM = U.PopupTemplate.Default.extend({
} }
} }
if (props.website) { if (props.website) {
L.DomUtil.element( L.DomUtil.element({
'a', tagName: 'a',
{ href: props.website, textContent: props.website }, parent: container,
container href: props.website,
) textContent: props.website,
})
} }
const phone = props.phone || props['contact:phone'] const phone = props.phone || props['contact:phone']
if (phone) { if (phone) {
@ -293,7 +298,7 @@ U.PopupTemplate.OSM = U.PopupTemplate.Default.extend({
'div', 'div',
'', '',
container, container,
L.DomUtil.element('a', { href: `tel:${phone}`, textContent: phone }) L.DomUtil.element({ tagName: 'a', href: `tel:${phone}`, textContent: phone })
) )
} }
if (props.mobile) { if (props.mobile) {
@ -301,7 +306,8 @@ U.PopupTemplate.OSM = U.PopupTemplate.Default.extend({
'div', 'div',
'', '',
container, container,
L.DomUtil.element('a', { L.DomUtil.element({
tagName: 'a',
href: `tel:${props.mobile}`, href: `tel:${props.mobile}`,
textContent: props.mobile, textContent: props.mobile,
}) })
@ -322,7 +328,8 @@ U.PopupTemplate.OSM = U.PopupTemplate.Default.extend({
'div', 'div',
'osm-link', 'osm-link',
container, container,
L.DomUtil.element('a', { L.DomUtil.element({
tagName: 'a',
href: `https://www.openstreetmap.org/${id}`, href: `https://www.openstreetmap.org/${id}`,
textContent: L._('See on OpenStreetMap'), textContent: L._('See on OpenStreetMap'),
}) })

13
umap/static/umap/js/umap.ui.js
View file

@ -54,18 +54,19 @@ U.UI = L.Evented.extend({
L.DomUtil.create('i', 'umap-close-icon', closeButton) L.DomUtil.create('i', 'umap-close-icon', closeButton)
const label = L.DomUtil.create('span', '', closeButton) const label = L.DomUtil.create('span', '', closeButton)
label.title = label.textContent = L._('Close') label.title = label.textContent = L._('Close')
L.DomUtil.element('div', {innerHTML: e.content}, this._alert) L.DomUtil.element({ tagName: 'div', innerHTML: e.content, parent: this._alert })
if (e.actions) { if (e.actions) {
let action, el, input let action, el, input
const form = L.DomUtil.create('div', 'umap-alert-actions', this._alert) const form = L.DomUtil.create('div', 'umap-alert-actions', this._alert)
for (let i = 0; i < e.actions.length; i++) { for (let i = 0; i < e.actions.length; i++) {
action = e.actions[i] action = e.actions[i]
if (action.input) { if (action.input) {
input = L.DomUtil.element( input = L.DomUtil.element({
'input', tagName: 'input',
{ className: 'umap-alert-input', placeholder: action.input }, parent: form,
form className: 'umap-alert-input',
) placeholder: action.input,
})
} }
el = L.DomUtil.createButton( el = L.DomUtil.createButton(
'umap-action', 'umap-action',