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

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

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

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

@ -669,14 +669,12 @@ const ControlsMixin = {
L.DomUtil.createTitle(container, this.options.name, 'icon-caption')
this.permissions.addOwnerLink('h5', container)
if (this.options.description) {
const description = L.DomUtil.element(
'div',
{
const description = L.DomUtil.element({
tagName: 'div',
className: 'umap-map-description',
safeHTML: U.Utils.toHTML(this.options.description),
},
container
)
parent: container,
})
}
const datalayerContainer = L.DomUtil.create('div', 'datalayer-container', container)
this.eachVisibleDataLayer((datalayer) => {
@ -687,11 +685,11 @@ const ControlsMixin = {
datalayer.onceLoaded(function () {
datalayer.renderLegend(legend)
if (datalayer.options.description) {
L.DomUtil.element(
'span',
{ safeHTML: U.Utils.toHTML(datalayer.options.description) },
p
)
L.DomUtil.element({
tagName: 'span',
parent: p,
safeHTML: U.Utils.toHTML(datalayer.options.description),
})
}
})
datalayer.renderToolbox(headline)
@ -701,13 +699,11 @@ const ControlsMixin = {
credits = L.DomUtil.createFieldset(creditsContainer, L._('Credits'))
title = L.DomUtil.add('h5', '', credits, L._('User content credits'))
if (this.options.shortCredit || this.options.longCredit) {
L.DomUtil.element(
'p',
{
L.DomUtil.element({
tagName: 'p',
parent: credits,
safeHTML: U.Utils.toHTML(this.options.longCredit || this.options.shortCredit),
},
credits
)
})
}
if (this.options.licence) {
const licence = L.DomUtil.add(
@ -729,16 +725,16 @@ const ControlsMixin = {
title = L.DomUtil.create('h5', '', credits)
title.textContent = L._('Map background credits')
const tilelayerCredit = L.DomUtil.create('p', '', credits)
L.DomUtil.element(
'strong',
{ textContent: `${this.selected_tilelayer.options.name} ` },
tilelayerCredit
)
L.DomUtil.element(
'span',
{ safeHTML: this.selected_tilelayer.getAttribution() },
tilelayerCredit
)
L.DomUtil.element({
tagName: 'strong',
parent: tilelayerCredit,
textContent: `${this.selected_tilelayer.options.name} `,
})
L.DomUtil.element({
tagName: 'span',
parent: tilelayerCredit,
safeHTML: this.selected_tilelayer.getAttribution(),
})
L.DomUtil.create('hr', '', credits)
const urls = {
leaflet: 'http://leafletjs.com',
@ -756,7 +752,7 @@ const ControlsMixin = {
`,
urls
)
L.DomUtil.element('p', { innerHTML: creditHTML }, credits)
L.DomUtil.element({ tagName: 'p', innerHTML: creditHTML, parent: credits })
this.panel.open({ content: container })
},
@ -1073,11 +1069,11 @@ U.AttributionControl = L.Control.Attribution.extend({
const shortCredit = this._map.getOption('shortCredit'),
captionMenus = this._map.getOption('captionMenus')
if (shortCredit) {
L.DomUtil.element(
'span',
{ safeHTML: ` — ${U.Utils.toHTML(shortCredit)}` },
container
)
L.DomUtil.element({
tagName: 'span',
parent: container,
safeHTML: ` — ${U.Utils.toHTML(shortCredit)}`,
})
}
if (captionMenus) {
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) => {
return L.DomUtil.element(
'i',
{ className: `icon icon-${size} ${className}`, title: title || '' },
parent
)
return L.DomUtil.element({
tagName: 'i',
parent: parent,
className: `icon icon-${size} ${className}`,
title: title || '',
})
}
L.DomUtil.createButtonIcon = (parent, className, title, size = 16) => {
return L.DomUtil.element(
'button',
{ className: `icon icon-${size} ${className}`, title: title || '' },
parent
)
return L.DomUtil.element({
tagName: 'button',
parent: parent,
className: `icon icon-${size} ${className}`,
title: title || '',
})
}
L.DomUtil.createTitle = (parent, text, className, tag = 'h3') => {
@ -163,8 +165,8 @@ L.DomUtil.classIf = (el, className, bool) => {
else L.DomUtil.removeClass(el, className)
}
L.DomUtil.element = (what, attrs, parent) => {
const el = document.createElement(what)
L.DomUtil.element = ({ tagName, parent, ...attrs }) => {
const el = document.createElement(tagName)
if (attrs.innerHTML) {
attrs.innerHTML = U.Utils.escapeHTML(attrs.innerHTML)
} else if (attrs.safeHTML) {

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

@ -757,7 +757,10 @@ L.FormBuilder.FacetSearchChoices = L.FormBuilder.Element.extend({
},
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) {
@ -833,7 +836,10 @@ L.FormBuilder.MinMaxBase = L.FormBuilder.Element.extend({
},
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 () {
@ -982,15 +988,13 @@ L.FormBuilder.Range = L.FormBuilder.FloatInput.extend({
digits
)}"></option>`
}
const datalist = L.DomUtil.element(
'datalist',
{
const datalist = L.DomUtil.element({
tagName: 'datalist',
parent: this.getHelpTextParent(),
className: 'umap-field-datalist',
safeHTML: options,
id: id,
},
this.getHelpTextParent()
)
})
this.input.setAttribute('list', id)
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.presetSelect = L.DomUtil.create('select', '', this.presetBox)
this.fileBox = L.DomUtil.create('div', 'formbox', this.container)
this.fileInput = L.DomUtil.element(
'input',
{ type: 'file', multiple: 'multiple', autofocus: true },
this.fileBox
)
this.urlInput = L.DomUtil.element(
'input',
{ type: 'text', placeholder: L._('Provide an URL here') },
this.container
)
this.rawInput = L.DomUtil.element(
'textarea',
{ placeholder: L._('Paste your data here') },
this.container
)
this.fileInput = L.DomUtil.element({
tagName: 'input',
type: 'file',
parent: this.fileBox,
multiple: 'multiple',
autofocus: true,
})
this.urlInput = L.DomUtil.element({
tagName: 'input',
type: 'text',
parent: this.container,
placeholder: L._('Provide an URL here'),
})
this.rawInput = L.DomUtil.element({
tagName: 'textarea',
parent: this.container,
placeholder: L._('Paste your data here'),
})
this.typeLabel = L.DomUtil.add(
'label',
'',
@ -42,33 +45,43 @@ U.Importer = L.Class.extend({
this.container,
L._('Choose the layer to import in')
)
this.clearLabel = L.DomUtil.element(
'label',
{ textContent: L._('Replace layer content'), for: 'datalayer-clear-check' },
this.container
)
this.submitInput = L.DomUtil.element(
'input',
{ type: 'button', value: L._('Import'), className: 'button' },
this.container
)
this.clearLabel = L.DomUtil.element({
tagName: 'label',
parent: this.container,
textContent: L._('Replace layer content'),
for: 'datalayer-clear-check',
})
this.submitInput = L.DomUtil.element({
tagName: 'input',
type: 'button',
parent: this.container,
value: L._('Import'),
className: 'button',
})
this.map.help.button(this.typeLabel, 'importFormats')
this.typeInput = L.DomUtil.element('select', { name: 'format' }, this.typeLabel)
this.layerInput = L.DomUtil.element(
'select',
{ name: 'datalayer' },
this.layerLabel
)
this.clearFlag = L.DomUtil.element(
'input',
{ type: 'checkbox', name: 'clear', id: 'datalayer-clear-check' },
this.clearLabel
)
L.DomUtil.element(
'option',
{ value: '', textContent: L._('Choose the data format') },
this.typeInput
)
this.typeInput = L.DomUtil.element({
tagName: 'select',
name: 'format',
parent: this.typeLabel,
})
this.layerInput = L.DomUtil.element({
tagName: 'select',
name: 'datalayer',
parent: this.layerLabel,
})
this.clearFlag = L.DomUtil.element({
tagName: 'input',
type: 'checkbox',
name: 'clear',
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++) {
option = L.DomUtil.create('option', '', this.typeInput)
option.value = option.textContent = this.TYPES[i]
@ -119,11 +132,12 @@ U.Importer = L.Class.extend({
option.value = id
}
})
L.DomUtil.element(
'option',
{ value: '', textContent: L._('Import in a new layer') },
this.layerInput
)
L.DomUtil.element({
tagName: 'option',
value: '',
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>${
this.options.anonymous_edit_url
}`
L.DomUtil.element(
'p',
{ className: 'help-text', innerHTML: helpText },
container
)
L.DomUtil.element({
tagName: 'p',
className: 'help-text',
innerHTML: helpText,
parent: container,
})
fields.push([
'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) {
const tr = L.DomUtil.create('tr', '', container)
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 () {
@ -281,11 +285,12 @@ U.PopupTemplate.OSM = U.PopupTemplate.Default.extend({
}
}
if (props.website) {
L.DomUtil.element(
'a',
{ href: props.website, textContent: props.website },
container
)
L.DomUtil.element({
tagName: 'a',
parent: container,
href: props.website,
textContent: props.website,
})
}
const phone = props.phone || props['contact:phone']
if (phone) {
@ -293,7 +298,7 @@ U.PopupTemplate.OSM = U.PopupTemplate.Default.extend({
'div',
'',
container,
L.DomUtil.element('a', { href: `tel:${phone}`, textContent: phone })
L.DomUtil.element({ tagName: 'a', href: `tel:${phone}`, textContent: phone })
)
}
if (props.mobile) {
@ -301,7 +306,8 @@ U.PopupTemplate.OSM = U.PopupTemplate.Default.extend({
'div',
'',
container,
L.DomUtil.element('a', {
L.DomUtil.element({
tagName: 'a',
href: `tel:${props.mobile}`,
textContent: props.mobile,
})
@ -322,7 +328,8 @@ U.PopupTemplate.OSM = U.PopupTemplate.Default.extend({
'div',
'osm-link',
container,
L.DomUtil.element('a', {
L.DomUtil.element({
tagName: 'a',
href: `https://www.openstreetmap.org/${id}`,
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)
const label = L.DomUtil.create('span', '', closeButton)
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) {
let action, el, input
const form = L.DomUtil.create('div', 'umap-alert-actions', this._alert)
for (let i = 0; i < e.actions.length; i++) {
action = e.actions[i]
if (action.input) {
input = L.DomUtil.element(
'input',
{ className: 'umap-alert-input', placeholder: action.input },
form
)
input = L.DomUtil.element({
tagName: 'input',
parent: form,
className: 'umap-alert-input',
placeholder: action.input,
})
}
el = L.DomUtil.createButton(
'umap-action',