Turn the importer into a module

umap-project · Feb 19, 2024 · 8c7f80c · 8c7f80c
1 parent 773546d
commit 8c7f80c
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 26 deletions.
diff --git a/umap/static/umap/js/modules/global.js b/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,
+}
diff --git a/umap/static/umap/js/umap.importer.js → umap/static/umap/js/modules/importer.js b/umap/static/umap/js/umap.importer.js → umap/static/umap/js/modules/importer.js
@@ -1,41 +1,41 @@
-U.Importer = L.Class.extend({
-  initialize: function (map) {
+export default class Importer {
+  constructor(map) {
     this.map = map
     this.presets = map.options.importPresets
-  },
+  }
 
-  _buildDatalayerOptions: function (element) {
+  #buildDatalayerOptions(layerSelect) {
     let option
     this.map.eachDataLayerReverse((datalayer) => {
       if (datalayer.isLoaded() && !datalayer.isRemoteLayer()) {
         const id = L.stamp(datalayer)
-        option = L.DomUtil.add('option', '', element, datalayer.options.name)
+        option = L.DomUtil.add('option', '', layerSelect, datalayer.options.name)
         option.value = id
       }
     })
     L.DomUtil.element(
       'option',
       { value: '', textContent: L._('Import in a new layer') },
-      element
+      layerSelect
     )
-  },
+  }
 
-  _buildPresetsOptions: function (element) {
+  #buildPresetsOptions(presetSelect) {
     if (this.presets.length) {
       const presetBox = this.form.querySelector('#preset-box')
       presetBox.removeAttribute('hidden')
-      const noPreset = L.DomUtil.create('option', '', element)
+      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', '', this.presetSelect)
+        option = L.DomUtil.create('option', '', presetSelect)
         option.value = preset.url
         option.textContent = preset.label
       }
     }
-  },
+  }
 
-  build: function () {
-    template = document.querySelector('#umap-upload')
+  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"]')
@@ -46,8 +46,8 @@ U.Importer = L.Class.extend({
     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.#buildDatalayerOptions(this.layerSelect)
+    this.#buildPresetsOptions(this.presetSelect)
 
     this.submitInput.addEventListener('click', this.submit.bind(this))
     this.fileInput.addEventListener('change', (e) => {
@@ -65,22 +65,22 @@ U.Importer = L.Class.extend({
       }
       this.formatSelect.value = type
     })
-  },
+  }
 
-  open: function () {
+  open() {
     if (!this.form) this.build()
     this.map.ui.openPanel({
       data: { html: this.form },
       className: 'dark',
     })
-  },
+  }
 
-  openFiles: function () {
+  openFiles() {
     this.open()
     this.fileInput.showPicker()
-  },
+  }
 
-  submit: function () {
+  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"]')
@@ -120,5 +120,5 @@ U.Importer = L.Class.extend({
           )
       }
     }
-  },
-})
+  }
+}
diff --git a/umap/static/umap/test/index.html b/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>

diff --git a/umap/templates/umap/js.html b/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>