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

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

@@ -482,12 +482,10 @@ L.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/js/umap.importer.js

@@ -1,123 +1,80 @@
 L.U.Importer = L.Class.extend({
- TYPES: ['geojson', 'csv', 'gpx', 'kml', 'osm', 'georss', 'umap'],
  initialize: function (map) {
  this.map = map
  this.presets = map.options.importPresets
  },
 
- build: function () {
- this.container = L.DomUtil.create('div', 'umap-upload')
- this.title = L.DomUtil.add('h4', '', this.container, L._('Import data'))
- this.presetBox = L.DomUtil.create('div', 'formbox', this.container)
- this.presetSelect = L.DomUtil.create('select', '', this.presetBox)
- this.fileBox = L.DomUtil.create('div', 'formbox', this.container)
- this.fileInput = L.DomUtil.element(
- 'input',
- { type: 'file', multiple: 'multiple', autofocus: true },
- this.fileBox
- )
- this.urlInput = L.DomUtil.element(
- 'input',
- { type: 'text', placeholder: L._('Provide an URL here') },
- this.container
- )
- this.rawInput = L.DomUtil.element(
- 'textarea',
- { placeholder: L._('Paste your data here') },
- this.container
- )
- this.typeLabel = L.DomUtil.add(
- 'label',
- '',
- this.container,
- L._('Choose the format of the data to import')
- )
- this.layerLabel = L.DomUtil.add(
- 'label',
- '',
- this.container,
- L._('Choose the layer to import in')
- )
- this.clearLabel = L.DomUtil.add(
- 'label',
- '',
- this.container,
- L._('Replace layer content')
- )
- this.submitInput = L.DomUtil.element(
- 'input',
- { type: 'button', value: L._('Import'), className: 'button' },
- this.container
- )
- this.map.help.button(this.typeLabel, 'importFormats')
- this.typeInput = L.DomUtil.element('select', { name: 'format' }, this.typeLabel)
- this.layerInput = L.DomUtil.element(
- 'select',
- { name: 'datalayer' },
- this.layerLabel
- )
- this.clearFlag = L.DomUtil.element(
- 'input',
- { type: 'checkbox', name: 'clear' },
- this.clearLabel
- )
+ _buildDatalayerOptions: function (element) {
  let option
  this.map.eachDataLayerReverse((datalayer) => {
  if (datalayer.isLoaded() && !datalayer.isRemoteLayer()) {
  const id = L.stamp(datalayer)
- option = L.DomUtil.add('option', '', this.layerInput, datalayer.options.name)
+ option = L.DomUtil.add('option', '', element, datalayer.options.name)
  option.value = id
  }
  })
  L.DomUtil.element(
  'option',
  { value: '', textContent: L._('Import in a new layer') },
- this.layerInput
- )
- L.DomUtil.element(
- 'option',
- { value: '', textContent: L._('Choose the data format') },
- this.typeInput
+ element
  )
- for (let i = 0; i < this.TYPES.length; i++) {
- option = L.DomUtil.create('option', '', this.typeInput)
- option.value = option.textContent = this.TYPES[i]
- }
+ },
+
+ _buildPresetsOptions: function (element) {
  if (this.presets.length) {
- const noPreset = L.DomUtil.create('option', '', this.presetSelect)
+ const presetBox = this.form.querySelector('#preset-box')
+ presetBox.removeAttribute('hidden')
+ const noPreset = L.DomUtil.create('option', '', element)
  noPreset.value = noPreset.textContent = L._('Choose a preset')
- for (let j = 0; j < this.presets.length; j++) {
+ for (const preset of this.presets) {
  option = L.DomUtil.create('option', '', presetSelect)
- option.value = this.presets[j].url
- option.textContent = this.presets[j].label
+ option.value = preset.url
+ option.textContent = preset.label
  }
- } else {
- this.presetBox.style.display = 'none'
  }
- L.DomEvent.on(this.submitInput, 'click', this.submit, this)
- L.DomEvent.on(
- this.fileInput,
- 'change',
- (e) => {
- let type = '',
- newType
- for (let i = 0; i < e.target.files.length; i++) {
- newType = L.Util.detectFileType(e.target.files[i])
- if (!type && newType) type = newType
- if (type && newType !== type) {
- type = ''
- break
- }
+ },
+
+ build: function () {
+ 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.urlInput = this.form.querySelector('[name="url-input"]')
+ this.rawInput = this.form.querySelector('[name="raw-input"]')
+ 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.clearFlag = this.form.querySelector('[name="clear"]')
+ 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) => {
+ let type = ''
+ let newType
+ for (const file of e.target.files) {
+ newType = L.Util.detectFileType(file)
+ if (!type && newType) {
+ type = newType
  }
- this.typeInput.value = type
- },
- this
- )
+ if (type && newType !== type) {
+ type = ''
+ break
+ }
+ }
+ this.formatSelect.value = type
+ })
  },
 
  open: function () {
- if (!this.container) this.build()
- this.map.ui.openPanel({ data: { html: this.container }, className: 'dark' })
+ if (!this.form) this.build()
+ this.map.ui.openPanel({
+ data: { html: this.form },
+ className: 'dark',
+ })
  },
 
  openFiles: function () {
@@ -126,16 +83,16 @@ L.U.Importer = L.Class.extend({
  },
 
  submit: function () {
- let type = this.typeInput.value
- const layerId = this.layerInput[this.layerInput.selectedIndex].value
+ let 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 && this.clearFlag.checked) layer.empty()
  if (this.fileInput.files.length) {
- for (let i = 0, file; (file = this.fileInput.files[i]); i++) {
+ for (const file of this.fileInput.files) {
  this.map.processFileToImport(file, layer, type)
  }
  } else {

umap/templates/umap/map_init.html

@@ -1,5 +1,45 @@
-{% load umap_tags %}
+{% load i18n umap_tags %}
 <div id="map"></div>
+
+<template id="umap-upload">
+ <form class="umap-upload">
+ <h4>{% blocktrans %}Import data{% endblocktrans %}</h4>
+ <div id="preset-box" class="formbox" hidden>
+ <select name="preset-select"></select>
+ </div>
+ <div class="formbox">
+ <input type="file" name="file-input" multiple>
+ </div>
+ <input type="url" name="url-input" placeholder="{% blocktrans %}Provide an URL here{% endblocktrans %}">
+ <textarea name="raw-input" placeholder="{% blocktrans %}Paste your data here{% endblocktrans %}"></textarea>
+
+ <label id="type-label">
+ {% blocktrans %}Choose the format of the data to import{% endblocktrans %}
+ <button class="umap-help-button" type="button">{% blocktrans %}Help{% endblocktrans %}</button>
+ <select name="format">
+ <option value disabled selected>
+ {% blocktrans %}Choose the data format{% endblocktrans %}
+ </option>
+ <option value="geojson">geojson</option>
+ <option value="csv">csv</option>
+ <option value="gpx">gpx</option>
+ <option value="kml">kml</option>
+ <option value="osm">osm</option>
+ <option value="georss">georss</option>
+ <option value="umap">umap</option>
+ </select>
+ </label>
+ <label id="layer-label">
+ {% blocktrans %}Choose the layer to import in{% endblocktrans %}
+ <select name="datalayer"></select>
+ </label>
+ <label>
+ {% blocktrans %}Replace layer content{% endblocktrans %}
+ <input type="checkbox" name="clear">
+ </label>
+ <input type="button" class="button" name="submit-input" value="{% blocktrans %}Import{% endblocktrans %}">
+ </form>
+</template>
 <!-- djlint:off -->
 <script type="text/javascript">
  let MAP = new L.U.Map("map", {{ map_settings|notag|safe }})