chore: change DomUtil.element signature

umap/static/umap/js/umap.autocomplete.js

@@ -35,27 +35,25 @@ U.AutoComplete = L.Class.extend({
   },
 
   createInput: function () {
-    this.input = L.DomUtil.element(
-      'input',
-      {
-        type: 'text',
-        placeholder: this.options.placeholder,
-        autocomplete: 'off',
-        className: this.options.className,
-      },
-      this.el
-    )
+    this.input = L.DomUtil.element({
+      tagName: 'input',
+      type: 'text',
+      parent: this.el,
+      placeholder: this.options.placeholder,
+      autocomplete: 'off',
+      className: this.options.className,
+    })
     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,

umap/static/umap/js/umap.controls.js

@@ -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',
-        {
-          className: 'umap-map-description',
-          safeHTML: U.Utils.toHTML(this.options.description),
-        },
-        container
-      )
+      const description = L.DomUtil.element({
+        tagName: 'div',
+        className: 'umap-map-description',
+        safeHTML: U.Utils.toHTML(this.options.description),
+        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',
-        {
-          safeHTML: U.Utils.toHTML(this.options.longCredit || this.options.shortCredit),
-        },
-        credits
-      )
+      L.DomUtil.element({
+        tagName: 'p',
+        parent: credits,
+        safeHTML: U.Utils.toHTML(this.options.longCredit || this.options.shortCredit),
+      })
     }
     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')}`)

umap/static/umap/js/umap.core.js

@@ -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) {

umap/static/umap/js/umap.forms.js

@@ -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',
-      {
-        className: 'umap-field-datalist',
-        safeHTML: options,
-        id: id,
-      },
-      this.getHelpTextParent()
-    )
+    const datalist = L.DomUtil.element({
+      tagName: 'datalist',
+      parent: this.getHelpTextParent(),
+      className: 'umap-field-datalist',
+      safeHTML: options,
+      id: id,
+    })
     this.input.setAttribute('list', id)
     L.FormBuilder.Input.prototype.buildHelpText.call(this)
   },

umap/static/umap/js/umap.importer.js

@@ -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,
+      })
     })
   },
 

umap/static/umap/js/umap.permissions.js

@@ -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',
           {

umap/static/umap/js/umap.popup.js

@@ -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'),
         })

umap/static/umap/js/umap.ui.js

@@ -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',