More idiomatic JavaScript

Author: davidbgk

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

@@ -5,66 +5,85 @@ export default class Importer {
   }
 
   #buildDatalayerOptions(layerSelect) {
-    let option
+    const options = []
     this.map.eachDataLayerReverse((datalayer) => {
       if (datalayer.isLoaded() && !datalayer.isRemoteLayer()) {
-        const id = L.stamp(datalayer)
-        option = L.DomUtil.add('option', '', layerSelect, datalayer.options.name)
-        option.value = id
+        options.push(
+          `<option value="${L.stamp(datalayer)}">${datalayer.options.name}</option>`
+        )
       }
     })
-    L.DomUtil.element(
-      'option',
-      { value: '', textContent: L._('Import in a new layer') },
-      layerSelect
-    )
+    options.push(`<option value="">${L._('Import in a new layer')}</option>`)
+    layerSelect.innerHTML = options.join('')
   }
 
   #buildPresetsOptions(presetSelect) {
-    if (this.presets.length) {
-      const presetBox = this.form.querySelector('#preset-box')
-      presetBox.removeAttribute('hidden')
-      const noPreset = L.DomUtil.create('option', '', presetSelect)
-      noPreset.value = noPreset.textContent = L._('Choose a preset')
-      for (const preset of this.presets) {
-        option = L.DomUtil.create('option', '', presetSelect)
-        option.value = preset.url
-        option.textContent = preset.label
-      }
+    if (!this.presets.length) return
+    const options = []
+    presetSelect.parentElement.removeAttribute('hidden')
+    options.push(
+      `<option value="${L._('Choose a preset')}">${L._('Choose a preset')}</option>`
+    )
+    for (const preset of this.presets) {
+      options.push(`<option value="${preset.url}">${preset.label}</option>`)
     }
+    presetSelect.innerHTML = options.join('')
+  }
+
+  #connectedCallback() {
+    const controller = new AbortController()
+    const signal = controller.signal
+    this.form
+      .querySelector('[name="submit-input"]')
+      .addEventListener('click', this.submit.bind(this), { signal })
+
+    this.fileInput.addEventListener(
+      'change',
+      (e) => {
+        let type = ''
+        let newType
+        for (const file of e.target.files) {
+          newType = L.Util.detectFileType(file)
+          if (!type && newType) {
+            type = newType
+          }
+          if (type && newType !== type) {
+            type = ''
+            break
+          }
+        }
+        this.formatSelect.value = type
+      },
+      { signal }
+    )
+
+    this.map.ui.once(
+      'panel:closed',
+      () => {
+        this.fileInput.value = null
+        controller.abort()
+      },
+      { signal }
+    )
   }
 
   build() {
     const template = document.querySelector('#umap-upload')
     this.form = template.content.firstElementChild.cloneNode(true)
-    this.presetSelect = this.form.querySelector('[name="preset-select"]')
-    this.fileInput = this.form.querySelector('[name="file-input"]')
-    this.map.ui.once('panel:closed', () => (this.fileInput.value = null))
+
     this.typeLabel = this.form.querySelector('#type-label')
     const helpButton = this.typeLabel.querySelector('button')
     this.map.help.button(this.typeLabel, 'importFormats', '', helpButton)
-    this.formatSelect = this.form.querySelector('[name="format"]')
+
     this.layerSelect = this.form.querySelector('[name="datalayer"]')
-    this.submitInput = this.form.querySelector('[name="submit-input"]')
     this.#buildDatalayerOptions(this.layerSelect)
+    this.presetSelect = this.form.querySelector('[name="preset-select"]')
     this.#buildPresetsOptions(this.presetSelect)
 
-    this.submitInput.addEventListener('click', this.submit.bind(this))
-    this.fileInput.addEventListener('change', (e) => {
-      let type = ''
-      let newType
-      for (const file of e.target.files) {
-        newType = L.Util.detectFileType(file)
-        if (!type && newType) {
-          type = newType
-        }
-        if (type && newType !== type) {
-          type = ''
-          break
-        }
-      }
-      this.formatSelect.value = type
-    })
+    this.fileInput = this.form.querySelector('[name="file-input"]')
+    this.formatSelect = this.form.querySelector('[name="format"]')
+
+    this.#connectedCallback()
   }
 
   open() {