More idiomatic JavaScript

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