More idiomatic JavaScript

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

@@ -1,56 +1,77 @@
 export default class Importer {
   constructor(map) {
     this.map = map
-    this.presets = map.options.importPresets
   }
 
-  #buildDatalayerOptions(layerSelect) {
-    let option
-    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
-      }
+  open() {
+    if (!this.form) this._build()
+    this.map.ui.openPanel({
+      data: { html: this.form },
+      className: 'dark',
     })
-    L.DomUtil.element(
-      'option',
-      { value: '', textContent: L._('Import in a new layer') },
-      layerSelect
-    )
   }
 
-  #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
-      }
-    }
+  openFiles() {
+    this.open()
+    this.fileInput.showPicker()
   }
 
-  build() {
+  _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.#buildPresetsOptions(this.presetSelect)
 
-    this.submitInput.addEventListener('click', this.submit.bind(this))
-    this.fileInput.addEventListener('change', (e) => {
+    this.layerSelect = this.form.querySelector('[name="datalayer"]')
+    this._buildDatalayerOptions(this.layerSelect)
+    this.presetSelect = this.form.querySelector('[name="preset-select"]')
+    this._buildPresetsOptions(this.presetSelect)
+
+    this.fileInput = this.form.querySelector('[name="file-input"]')
+    this.formatSelect = this.form.querySelector('[name="format"]')
+
+    this._connectedCallback()
+  }
+
+  _buildDatalayerOptions(layerSelect) {
+    const options = []
+    this.map.eachDataLayerReverse((datalayer) => {
+      if (datalayer.isLoaded() && !datalayer.isRemoteLayer()) {
+        options.push(
+          `<option value="${L.stamp(datalayer)}">${datalayer.options.name}</option>`
+        )
+      }
+    })
+    options.push(`<option value="">${L._('Import in a new layer')}</option>`)
+    layerSelect.innerHTML = options.join('')
+  }
+
+  _buildPresetsOptions(presetSelect) {
+    const presets = this.map.options.importPresets
+    if (!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 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) {
@@ -64,23 +85,21 @@ export default class Importer {
           }
         }
         this.formatSelect.value = type
-    })
+      },
+      { signal }
+    )
+
+    this.map.ui.once(
+      'panel:closed',
+      () => {
+        this.fileInput.value = null
+        controller.abort()
+      },
+      { signal }
+    )
   }
 
-  open() {
-    if (!this.form) this.build()
-    this.map.ui.openPanel({
-      data: { html: this.form },
-      className: 'dark',
-    })
-  }
-
-  openFiles() {
-    this.open()
-    this.fileInput.showPicker()
-  }
-
-  submit() {
+  _submit() {
     const urlInputValue = this.form.querySelector('[name="url-input"]').value
     const rawInputValue = this.form.querySelector('[name="raw-input"]').value
     const clearFlag = this.form.querySelector('[name="clear"]')