umap-project 3.4.0b1__py3-none-any.whl → 3.4.2__py3-none-any.whl

umap/static/umap/js/modules/share.js

@@ -1,4 +1,3 @@
-import { DomUtil } from '../../vendors/leaflet/leaflet-src.esm.js'
 import { MutatingForm } from './form/builder.js'
 import { EXPORT_FORMATS } from './formatter.js'
 import { translate } from './i18n.js'
@@ -11,39 +10,35 @@ export default class Share {
   }
 
   build() {
-    this.container = DomUtil.create('div', '')
-    this.title = DomUtil.createTitle(
-      this.container,
-      translate('Share and download'),
-      'icon-share'
-    )
-
-    DOMUtils.copiableInput(
-      this.container,
-      translate('Link to view the map'),
-      window.location.protocol + Utils.getBaseUrl()
-    )
-
+    const downloadUrl = this._umap.urls.get('map_download', {
+      map_id: this._umap.id,
+    })
+    const [container, { shortUrl, list, customLink, textarea, iframeOptionsWrapper }] =
+      DOMUtils.loadTemplateWithRefs(`
+      <div>
+        <h3><i class="icon icon-16 icon-share"></i> ${translate('Share and download')}</h3>
+        <h4>${translate('Share')}</h4>
+        <copiable-input data-label="${translate('Link to view the map')}" data-value="${window.location.protocol + Utils.getBaseUrl()}"></copiable-input>
+        <copiable-input data-label="${translate('Short link')}" data-value="${this._umap.properties.shortUrl}" data-ref="shortUrl" hidden></copiable-input>
+        <copiable-textarea data-label="${translate('Customized link')}" data-ref="customLink"></copiable-textarea>
+        <copiable-textarea data-label="${translate('Iframe')}" data-ref="textarea"></copiable-textarea>
+        <div data-ref="iframeOptionsWrapper"></div>
+        <hr>
+        <h4>${translate('Download')}</h4>
+        <h5>${translate("Only visible layers' data")}</h5>
+        <ul data-ref="list" class="downloads"></ul>
+        <h5>${translate('All data and settings of the map')}</h5>
+        <p>
+          <a href="${downloadUrl}" download="backup.umap">
+            <i class="icon icon-16 icon-backup"></i>${translate('full backup')}
+          </a>
+        </p>
+      </div>
+    `)
+    this.container = container
     if (this._umap.properties.shortUrl) {
-      DOMUtils.copiableInput(
-        this.container,
-        translate('Short link'),
-        this._umap.properties.shortUrl
-      )
+      shortUrl.hidden = false
     }
-
-    DomUtil.create('hr', '', this.container)
-
-    DomUtil.add('h4', '', this.container, translate('Download'))
-    DomUtil.add(
-      'small',
-      'label',
-      this.container,
-      translate("Only visible layers' data")
-    )
-    const list = document.createElement('ul')
-    list.classList.add('downloads')
-    this.container.appendChild(list)
     for (const format of Object.keys(EXPORT_FORMATS).concat('jpg', 'png')) {
       const button = Utils.loadTemplate(`
         <li>
@@ -55,38 +50,7 @@ export default class Share {
       button.addEventListener('click', () => this.download(format))
       list.appendChild(button)
     }
-    DomUtil.create('div', 'vspace', this.container)
-    DomUtil.add(
-      'small',
-      'label',
-      this.container,
-      translate('All data and settings of the map')
-    )
-    const downloadUrl = this._umap.urls.get('map_download', {
-      map_id: this._umap.id,
-    })
-    const link = Utils.loadTemplate(`
-      <div>
-        <a href="${downloadUrl}">
-          <i class="icon icon-16 icon-backup"></i>${translate('full backup')}
-        </a>
-      </div>
-    `)
-    this.container.appendChild(link)
-    // File will be named by back-office
-    link.setAttribute('download', 'backup.umap')
-    DomUtil.create('hr', '', this.container)
 
-    const embedTitle = DomUtil.add('h4', '', this.container, translate('Embed the map'))
-    const iframe = DomUtil.create('textarea', 'umap-share-iframe', this.container)
-    const urlTitle = DomUtil.add('h4', '', this.container, translate('Direct link'))
-    const exportUrl = DOMUtils.copiableInput(
-      this.container,
-      translate('Share this link to open a customized map view'),
-      ''
-    )
-
-    exportUrl.type = 'text'
     const UIFields = [
       ['dimensions.width', { handler: 'Input', label: translate('width') }],
       ['dimensions.height', { handler: 'Input', label: translate('height') }],
@@ -123,14 +87,17 @@ export default class Share {
     }
     const iframeExporter = new IframeExporter(this._umap)
     const buildIframeCode = () => {
-      iframe.textContent = iframeExporter.build()
-      exportUrl.value = window.location.protocol + iframeExporter.buildUrl()
+      textarea.setAttribute('value', iframeExporter.build())
+      customLink.setAttribute(
+        'value',
+        window.location.protocol + iframeExporter.buildUrl()
+      )
     }
     buildIframeCode()
     const builder = new MutatingForm(iframeExporter, UIFields)
     builder.on('set', buildIframeCode)
-    const iframeOptions = DomUtil.createFieldset(
-      this.container,
+    const iframeOptions = DOMUtils.createFieldset(
+      iframeOptionsWrapper,
       translate('Embed and link options')
     )
     iframeOptions.appendChild(builder.build())
@@ -222,13 +189,13 @@ class IframeExporter {
       delete this.queryString.datalayers
     }
     const currentView = this.options.currentView ? window.location.hash : ''
-    const queryString = L.extend({}, this.queryString, options)
+    const queryString = Object.assign({}, this.queryString, options)
     return `${this.baseUrl}?${Utils.buildQueryString(queryString)}${currentView}`
   }
 
   build() {
     const iframeUrl = this.buildUrl()
-    let code = `<iframe width="${this.dimensions.width}" height="${this.dimensions.height}" frameborder="0" allowfullscreen allow="geolocation" src="${iframeUrl}"></iframe>`
+    let code = `<iframe style="width: ${this.dimensions.width}; height: ${this.dimensions.height}; border: 0;" allowfullscreen allow="geolocation" src="${iframeUrl}"></iframe>`
     if (this.options.includeFullScreenLink) {
       const fullUrl = this.buildUrl({ scrollWheelZoom: true })
       code += `<p><a href="${fullUrl}">${translate('See full screen')}</a></p>`

umap/static/umap/js/modules/slideshow.js

@@ -89,8 +89,8 @@ export default class Slideshow extends WithTemplate {
   play() {
     if (this._id) return
     if (this._umap.editEnabled || !this.isEnabled()) return
-    L.DomUtil.addClass(document.body, this.CLASSNAME)
-    this._id = window.setInterval(L.bind(this.loop, this), this.properties.delay)
+    document.body.classList.add(this.CLASSNAME)
+    this._id = window.setInterval(() => this.loop(), this.properties.delay)
     this.startSpinner()
     this.loop()
   }
@@ -103,7 +103,7 @@ export default class Slideshow extends WithTemplate {
   pause() {
     if (this._id) {
       this.stopSpinner()
-      L.DomUtil.removeClass(document.body, this.CLASSNAME)
+      document.body.classList.remove(this.CLASSNAME)
       window.clearInterval(this._id)
       this._id = null
     }

umap/static/umap/js/modules/tableeditor.js

@@ -1,4 +1,3 @@
-import { DomEvent, DomUtil } from '../../vendors/leaflet/leaflet-src.esm.js'
 import { MutatingForm } from './form/builder.js'
 import { translate } from './i18n.js'
 import ContextMenu from './ui/contextmenu.js'

umap/static/umap/js/modules/ui/bar.js

@@ -236,12 +236,18 @@ export class BottomBar extends WithTemplate {
     this.elements.layers.addEventListener('change', () => {
       const select = this.elements.layers
       const selected = select.options[select.selectedIndex].value
-      if (!selected) return
-      this._umap.datalayers.active().map((datalayer) => {
+      for (const datalayer of this._umap.datalayers.active()) {
         if (datalayer.properties.inCaption !== false) {
-          datalayer.toggle(datalayer.id === selected)
+          if (!selected) {
+            datalayer.autoVisibility = true
+            if (datalayer.showAtZoom() && !datalayer.isVisible()) {
+              datalayer.show()
+            }
+          } else {
+            datalayer.toggle(datalayer.id === selected)
+          }
         }
-      })
+      }
     })
   }
 
@@ -263,7 +269,9 @@ export class BottomBar extends WithTemplate {
     if (datalayers.length < 2) {
       this.elements.layers.hidden = true
     } else {
-      this.elements.layers.appendChild(Utils.loadTemplate(`<option value=""></option>`))
+      this.elements.layers.appendChild(
+        Utils.loadTemplate(`<option value="">${translate('All layers')}</option>`)
+      )
       this.elements.layers.hidden = !this._umap.getProperty('layerSwitcher')
       const visible = datalayers.filter((datalayer) => datalayer.isVisible())
       for (const datalayer of datalayers) {
@@ -279,27 +287,30 @@ export class BottomBar extends WithTemplate {
 }
 
 const EDIT_BAR_TEMPLATE = `
-  <ul class="umap-edit-bar dark with-transition">
-    <li data-ref="marker"><button type="button" data-getstarted><i class="icon icon-24 icon-marker"></i></button></li>
-    <li data-ref="polyline"><button type="button" data-getstarted><i class="icon icon-24 icon-polyline"></i></button></li>
-    <li data-ref="multiline" hidden>
-      <button type="button" title="${translate('Add a line to the current multi')}"><i class="icon icon-24 icon-multiline"></i></button>
-    </li>
-    <li data-ref="polygon"><button type="button" data-getstarted><i class="icon icon-24 icon-polygon"></i></button></li>
-    <li data-ref="multipolygon" hidden>
-      <button type="button" title="${translate('Add a polygon to the current multi')}"><i class="icon icon-24 icon-multipolygon"></i></button>
-    </li>
-    <li data-ref="route" hidden><button type="button" data-getstarted title="${translate('Draw along routes')}"><i class="icon icon-24 icon-route"></i></button></li>
-    <hr>
-    <li data-ref="caption" hidden><button data-getstarted type="button" title="${translate('Edit map name and caption')}"><i class="icon icon-24 icon-info"></i></button></li>
-    <li data-ref="import" hidden><button type="button"><i class="icon icon-24 icon-upload"></i></button></li>
-    <li data-ref="templates" hidden><button type="button" title="${translate('Load template')}" data-getstarted><i class="icon icon-24 icon-template"></i></button></li>
-    <li data-ref="layers" hidden><button type="button" title="${translate('Manage layers')}"><i class="icon icon-24 icon-layers"></i></button></li>
-    <li data-ref="tilelayers" hidden><button type="button" title="${translate('Change tilelayers')}"><i class="icon icon-24 icon-tilelayer"></i></button></li>
-    <li data-ref="center" hidden><button type="button"><i class="icon icon-24 icon-center"></i></button></li>
-    <li data-ref="permissions" hidden><button type="button" title="${translate('Update permissions and editors')}"><i class="icon icon-24 icon-key"></i></button></li>
-    <li data-ref="settings" hidden><button data-getstarted type="button" title="${translate('Map advanced properties')}"><i class="icon icon-24 icon-settings"></i></button></li>
-  </ul>
+  <div class="umap-edit-bar dark with-transition">
+    <ul>
+      <li data-ref="marker"><button class="drawing-tool" type="button" data-getstarted><i class="icon icon-24 icon-marker"></i></button></li>
+      <li data-ref="polyline"><button class="drawing-tool" type="button" data-getstarted><i class="icon icon-24 icon-polyline"></i></button></li>
+      <li data-ref="multiline" hidden>
+        <button class="drawing-tool" type="button" title="${translate('Add a line to the current multi')}"><i class="icon icon-24 icon-multiline"></i></button>
+      </li>
+      <li data-ref="polygon"><button class="drawing-tool" type="button" data-getstarted><i class="icon icon-24 icon-polygon"></i></button></li>
+      <li data-ref="multipolygon" hidden>
+        <button class="drawing-tool" type="button" title="${translate('Add a polygon to the current multi')}"><i class="icon icon-24 icon-multipolygon"></i></button>
+      </li>
+      <li data-ref="route" hidden><button class="drawing-tool" type="button" data-getstarted title="${translate('Draw along routes')}"><i class="icon icon-24 icon-route"></i></button></li>
+    </ul>
+    <ul>
+      <li data-ref="caption" hidden><button data-getstarted type="button" title="${translate('Edit map name and caption')}"><i class="icon icon-24 icon-info"></i></button></li>
+      <li data-ref="import" hidden><button type="button"><i class="icon icon-24 icon-upload"></i></button></li>
+      <li data-ref="templates" hidden><button type="button" title="${translate('Load template')}" data-getstarted><i class="icon icon-24 icon-template"></i></button></li>
+      <li data-ref="layers" hidden><button type="button" title="${translate('Manage layers')}"><i class="icon icon-24 icon-layers"></i></button></li>
+      <li data-ref="tilelayers" hidden><button type="button" title="${translate('Change tilelayers')}"><i class="icon icon-24 icon-tilelayer"></i></button></li>
+      <li data-ref="center" hidden><button type="button"><i class="icon icon-24 icon-center"></i></button></li>
+      <li data-ref="permissions" hidden><button type="button" title="${translate('Update permissions and editors')}"><i class="icon icon-24 icon-key"></i></button></li>
+      <li data-ref="settings" hidden><button data-getstarted type="button" title="${translate('Map advanced properties')}"><i class="icon icon-24 icon-settings"></i></button></li>
+    </ul>
+  </div>
 `
 
 export class EditBar extends WithTemplate {
@@ -315,12 +326,12 @@ export class EditBar extends WithTemplate {
   setup() {
     this.parent.appendChild(this.element)
     DomEvent.disableClickPropagation(this.element)
-    this._onClick('marker', () => this._leafletMap.editTools.startMarker())
-    this._onClick('polyline', () => this._leafletMap.editTools.startPolyline())
-    this._onClick('multiline', () => this._umap.editedFeature.ui.editor.newShape())
-    this._onClick('polygon', () => this._leafletMap.editTools.startPolygon())
-    this._onClick('multipolygon', () => this._umap.editedFeature.ui.editor.newShape())
-    this._onClick('route', () => this._leafletMap.editTools.startRoute())
+    this._onDrawing('marker', () => this._leafletMap.editTools.startMarker())
+    this._onDrawing('polyline', () => this._leafletMap.editTools.startPolyline())
+    this._onDrawing('multiline', () => this._umap.editedFeature.ui.editor.newShape())
+    this._onDrawing('polygon', () => this._leafletMap.editTools.startPolygon())
+    this._onDrawing('multipolygon', () => this._umap.editedFeature.ui.editor.newShape())
+    this._onDrawing('route', () => this._leafletMap.editTools.startRoute())
     this._onClick('caption', () => this._umap.editCaption())
     this._onClick('import', () => this._umap.importer.open())
     this._onClick('templates', () => this.templateIimporter.open())
@@ -359,6 +370,14 @@ export class EditBar extends WithTemplate {
     )
   }
 
+  _onDrawing(ref, realAction) {
+    const action = (event) => {
+      event.target.closest('button').classList.add('on')
+      realAction(event)
+    }
+    this._onClick(ref, action)
+  }
+
   _onClick(ref, action) {
     // Put the click on the button, not on the li, but keep the data-ref on the li
     // so to hide/show it when needed.

umap/static/umap/js/modules/ui/dialog.js

@@ -161,7 +161,16 @@ export default class Dialog extends WithTemplate {
 
   accept() {
     this.dialog.returnValue = 'accept'
-    this.close()
+    return new Promise((resolve) => {
+      this.dialog.addEventListener(
+        'close',
+        () => {
+          resolve()
+        },
+        { once: true }
+      )
+      this.close()
+    })
   }
 
   waitForUser() {

umap/static/umap/js/modules/ui/panel.js

@@ -1,13 +1,15 @@
-import { DomEvent, DomUtil } from '../../../vendors/leaflet/leaflet-src.esm.js'
+import { DomEvent } from '../../../vendors/leaflet/leaflet-src.esm.js'
 import { translate } from '../i18n.js'
+import * as DOMUtils from '../domutils.js'
 
 export class Panel {
   constructor(umap, leafletMap) {
     this.parent = leafletMap._controlContainer
     this._umap = umap
     this._leafletMap = leafletMap
-    this.container = DomUtil.create('div', '', this.parent)
-    // This will be set once according to the panel configurated at load
+    this.container = document.createElement('div')
+    this.parent.appendChild(this.container)
+    // This will be set once according to the panel configured at load
     // or by using panels as popups
     this.mode = null
     this.className = 'left'
@@ -37,44 +39,46 @@ export class Panel {
     }
     document.body.classList.add(`panel-${this.className.split(' ')[0]}-on`)
     this.container.innerHTML = ''
-    const actionsContainer = DomUtil.create('ul', 'buttons', this.container)
-    const body = DomUtil.create('div', 'body', this.container)
+    const template = `
+      <div>
+        <ul class="buttons" data-ref="buttons">
+          <li><button class="icon icon-16 icon-close" data-ref="close" title="${translate('Close')}"></button></li>
+          <li><button class="icon icon-16 icon-resize" data-ref="resize" title="${translate('Toggle size')}"></button></li>
+        </ul>
+        <div class="body" data-ref="body">
+        </div>
+      </div>
+    `
+    const [root, { close, resize, body, buttons }] =
+      DOMUtils.loadTemplateWithRefs(template)
     body.appendChild(content)
-    const closeButton = DomUtil.createButtonIcon(
-      DomUtil.create('li', '', actionsContainer),
-      'icon-close',
-      translate('Close')
-    )
-    const resizeButton = DomUtil.createButtonIcon(
-      DomUtil.create('li', '', actionsContainer),
-      'icon-resize',
-      translate('Toggle size')
-    )
+    this.container.appendChild(root)
     for (const action of actions) {
-      const element = DomUtil.element({ tagName: 'li', parent: actionsContainer })
-      element.appendChild(action)
+      const li = document.createElement('li')
+      li.appendChild(action)
+      buttons.appendChild(li)
     }
-    if (className) DomUtil.addClass(body, className)
+    if (className) body.classList.add(className)
     const promise = new Promise((resolve, reject) => {
       if (isOpen) {
         resolve(this)
       } else {
+        this.container.classList.add('on')
         Promise.all(
-          this.container.getAnimations().map((animation) => animation.finished)
+          this.container.getAnimations?.().map((animation) => animation.finished)
         )
           .then(() => {
             resolve(this)
           })
           .catch(() => {
             // Panel has been removed, so the DOM has changed, so the animations
-            // were cancelled, we want the new panel callabck to be called anyway.
+            // were cancelled, we want the new panel callback to be called anyway.
             resolve(this)
           })
-        this.container.classList.add('on')
       }
     })
-    DomEvent.on(closeButton, 'click', this.close, this)
-    DomEvent.on(resizeButton, 'click', this.resize, this)
+    close.addEventListener('click', () => this.close())
+    resize.addEventListener('click', () => this.resize())
     return promise
   }
 
@@ -102,6 +106,7 @@ export class Panel {
       this._leafletMap.invalidateSize({ pan: false })
     }
   }
+
   scrollTo(selector) {
     const fieldset = this.container.querySelector(selector)
     if (!fieldset) return

umap/static/umap/js/modules/ui/tooltip.js

@@ -27,7 +27,7 @@ export default class Tooltip extends Positioned {
       this.parent.appendChild(this.container)
       this.openAt(opts)
     }
-    this.TOOLTIP_ID = window.setTimeout(L.bind(showIt, this), opts.delay || 0)
+    this.TOOLTIP_ID = window.setTimeout(() => showIt(), opts.delay || 0)
     const id = this.TOOLTIP_ID
     const closeIt = () => {
       this.close(id)