wip: move presets to importer plugins

umap/static/umap/base.css

@@ -475,10 +475,13 @@ input.switch:checked ~ label:after {
 .button-bar.half {
     grid-template-columns: 1fr 1fr;
 }
+.button-bar.by3,
+.button-bar.by5,
 .umap-multiplechoice.by3,
 .umap-multiplechoice.by5 {
     grid-template-columns: 1fr 1fr 1fr;
 }
+.button-bar.by4,
 .umap-multiplechoice.by4 {
     grid-template-columns: 1fr 1fr 1fr 1fr;
 }

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

@@ -4,13 +4,13 @@ import { uMapAlert as Alert } from '../components/alerts/alert.js'
 import Dialog from './ui/dialog.js'
 import { Importer as GeoDataMine } from './importers/geodatamine.js'
 import { Importer as Communes } from './importers/communes.js'
+import { Importer as Presets } from './importers/presets.js'
 
 export default class Importer {
   constructor(map) {
     this.map = map
-    this.presets = map.options.importPresets
     this.TYPES = ['geojson', 'csv', 'gpx', 'kml', 'osm', 'georss', 'umap']
-    this.PLUGINS = [new GeoDataMine(map), new Communes(map)]
+    this.PLUGINS = [new GeoDataMine(map), new Communes(map), new Presets(map)]
     this.dialog = new Dialog(this.map._controlContainer)
   }
 
@@ -21,8 +21,6 @@ export default class Importer {
       translate('Import data'),
       'icon-upload'
     )
-    this.presetBox = DomUtil.create('div', 'formbox', this.container)
-    this.presetSelect = DomUtil.create('select', '', this.presetBox)
     this.fileBox = DomUtil.create('div', 'formbox', this.container)
     this.fileInput = DomUtil.element({
       tagName: 'input',
@@ -49,7 +47,7 @@ export default class Importer {
     })
     const plugins = L.DomUtil.element({
       tagName: 'div',
-      className: 'umap-multiplechoice by2',
+      className: 'button-bar by4',
       parent: this.container,
     })
     for (const plugin of this.PLUGINS) {
@@ -110,17 +108,6 @@ export default class Importer {
       const option = DomUtil.create('option', '', this.typeInput)
       option.value = option.textContent = type
     }
-    if (this.presets.length) {
-      const noPreset = DomUtil.create('option', '', this.presetSelect)
-      noPreset.value = noPreset.textContent = translate('Choose a preset')
-      for (const preset of this.presets) {
-        option = DomUtil.create('option', '', presetSelect)
-        option.value = preset.url
-        option.textContent = preset.label
-      }
-    } else {
-      this.presetBox.style.display = 'none'
-    }
     DomEvent.on(this.submitInput, 'click', this.submit, this)
     DomEvent.on(
       this.fileInput,
@@ -198,11 +185,6 @@ export default class Importer {
         if (!layer) layer = this.map.createDataLayer()
         if (this.rawInput.value) layer.importRaw(this.rawInput.value, type)
         else if (this.urlInput.value) layer.importFromUrl(this.urlInput.value, type)
-        else if (this.presetSelect.selectedIndex > 0)
-          layer.importFromUrl(
-            this.presetSelect[this.presetSelect.selectedIndex].value,
-            type
-          )
       }
     }
   }

umap/static/umap/js/modules/importers/communes.js

@@ -20,7 +20,11 @@ export class Importer {
   async open(importer) {
     const container = DomUtil.create('div')
     DomUtil.createTitle(container, this.name)
-    DomUtil.element({tagName: 'p', parent: container, textContent: 'Importer les contours d\'une commune française.'})
+    DomUtil.element({
+      tagName: 'p',
+      parent: container,
+      textContent: "Importer les contours d'une commune française.",
+    })
     const options = {
       on_select: (choice) => {
         importer.urlInput.value = `https://geo.api.gouv.fr/communes?code=${choice.item.value}&format=geojson&geometry=contour`

umap/static/umap/js/modules/importers/presets.js

@@ -0,0 +1,39 @@
+import { DomUtil } from '../../../vendors/leaflet/leaflet-src.esm.js'
+import { translate } from '../i18n.js'
+
+export class Importer {
+  constructor(map) {
+    this.name = 'Presets'
+    this.presets = map.options.importPresets
+  }
+
+  async open(importer) {
+    const container = DomUtil.create('div', 'formbox')
+    const select = DomUtil.create('select', '', container)
+    const noPreset = DomUtil.element({
+      tagName: 'option',
+      parent: select,
+      value: '',
+      textContent: translate('Choose a preset'),
+    })
+    for (const preset of this.presets) {
+      const option = DomUtil.create('option', '', select)
+      option.value = preset.url
+      option.textContent = preset.label
+      option.dataset.format = preset.format || 'geojson'
+    }
+    const confirm = () => {
+      if (select.value) {
+        importer.urlInput.value = select.value
+        importer.typeInput.value = select.options[select.selectedIndex].dataset.format
+      }
+      importer.dialog.close()
+    }
+    L.DomUtil.createButton('', container, 'OK', confirm)
+
+    importer.dialog.open({
+      content: container,
+      className: 'presets dark',
+    })
+  }
+}