Template-based importer (vs. using L.DomUtil)

umap/static/umap/js/modules/global.js

@@ -1,10 +1,20 @@
 import * as L from '../../vendors/leaflet/leaflet-src.esm.js'
 import URLs from './urls.js'
 import Browser from './browser.js'
+import Importer from './importer.js'
 import { Request, ServerRequest, RequestError, HTTPError, NOKError } from './request.js'
 // Import modules and export them to the global scope.
 // For the not yet module-compatible JS out there.
 
 // Copy the leaflet module, it's expected by leaflet plugins to be writeable.
 window.L = { ...L }
-window.U = { URLs, Request, ServerRequest, RequestError, HTTPError, NOKError, Browser }
+window.U = {
+  URLs,
+  Request,
+  ServerRequest,
+  RequestError,
+  HTTPError,
+  NOKError,
+  Browser,
+  Importer,
+}

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

@@ -0,0 +1,143 @@
+export default class Importer {
+  constructor(map) {
+    this.map = map
+  }
+
+  open() {
+    if (!this.form) this._build()
+    this.map.ui.openPanel({
+      data: { html: this.form },
+      className: 'dark',
+    })
+  }
+
+  openFiles() {
+    this.open()
+    this.fileInput.showPicker()
+  }
+
+  _build() {
+    const template = document.querySelector('#umap-upload')
+    this.form = template.content.firstElementChild.cloneNode(true)
+
+    this.typeLabel = this.form.querySelector('#type-label')
+    const helpButton = this.typeLabel.querySelector('button')
+    this.map.help.button(this.typeLabel, 'importFormats', '', helpButton)
+
+    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) {
+          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 }
+    )
+  }
+
+  _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"]')
+    const type = this.formatSelect.value
+    const layerId = this.layerSelect[this.layerSelect.selectedIndex].value
+    let layer
+    if (type === 'umap') {
+      this.map.once('postsync', this.map._setDefaultCenter)
+    }
+    if (layerId) layer = this.map.datalayers[layerId]
+    if (layer && clearFlag.checked) layer.empty()
+    if (this.fileInput.files.length) {
+      for (const file of this.fileInput.files) {
+        this.map.processFileToImport(file, layer, type)
+      }
+    } else {
+      if (!type)
+        return this.map.ui.alert({
+          content: L._('Please choose a format'),
+          level: 'error',
+        })
+      if (rawInputValue && type === 'umap') {
+        try {
+          this.map.importRaw(rawInputValue, type)
+        } catch (e) {
+          this.ui.alert({ content: L._('Invalid umap data'), level: 'error' })
+          console.error(e)
+        }
+      } else {
+        if (!layer) layer = this.map.createDataLayer()
+        if (rawInputValue) layer.importRaw(rawInputValue, type)
+        else if (urlInputValue) layer.importFromUrl(urlInputValue, type)
+        else if (this.presetSelect.selectedIndex > 0)
+          layer.importFromUrl(
+            this.presetSelect[this.presetSelect.selectedIndex].value,
+            type
+          )
+      }
+    }
+  }
+}

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

@@ -598,12 +598,10 @@ U.Help = L.Class.extend({
     return typeof this[name] === 'function' ? this[name]() : this[name]
   },
 
-  button: function (container, entries, classname) {
-    const helpButton = L.DomUtil.createButton(
-      classname || 'umap-help-button',
-      container,
-      L._('Help')
-    )
+  button: function (container, entries, classname, button) {
+    const helpButton =
+      button ||
+      L.DomUtil.createButton(classname || 'umap-help-button', container, L._('Help'))
     if (entries) {
       L.DomEvent.on(helpButton, 'click', L.DomEvent.stop).on(
         helpButton,

umap/static/umap/test/index.html

@@ -44,7 +44,6 @@
     <script src="../js/umap.controls.js" defer></script>
     <script src="../js/umap.slideshow.js" defer></script>
     <script src="../js/umap.tableeditor.js" defer></script>
-    <script src="../js/umap.importer.js" defer></script>
     <script src="../js/umap.share.js" defer></script>
     <script src="../js/umap.js" defer></script>
     <script src="../js/umap.ui.js" defer></script>

umap/templates/umap/js.html

@@ -45,7 +45,6 @@
 <script src="{% static 'umap/js/umap.controls.js' %}" defer></script>
 <script src="{% static 'umap/js/umap.slideshow.js' %}" defer></script>
 <script src="{% static 'umap/js/umap.tableeditor.js' %}" defer></script>
-<script src="{% static 'umap/js/umap.importer.js' %}" defer></script>
 <script src="{% static 'umap/js/umap.share.js' %}" defer></script>
 <script src="{% static 'umap/js/umap.js' %}" defer></script>
 <script src="{% static 'umap/js/umap.ui.js' %}" defer></script>