umap-project 3.4.0b3__py3-none-any.whl → 3.6.0__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

@@ -9,7 +9,7 @@ import TemplateImporter from '../templates.js'
 const TOP_BAR_TEMPLATE = `
 <div class="umap-main-edit-toolbox with-transition dark">
     <div class="umap-left-edit-toolbox" data-ref="left">
-        <div class="logo"><a class="" href="/" title="${translate('Go to the homepage')}">uMap</a></div>
+        <div class="logo"><a class="" href="#" title="${translate('Go to the homepage')}" data-ref="home">uMap</a></div>
         <button class="map-name flat truncate" type="button" data-ref="name"></button>
         <button class="flat truncate" type="button" data-ref="share">
           <i class="icon icon-16 icon-draft show-on-draft"></i><span class="share-status"></span>
@@ -59,6 +59,7 @@ export class TopBar extends WithTemplate {
 
   setup() {
     this.parent.appendChild(this.element)
+    this.elements.home.href = this._umap.urls.get('home')
     this.elements.name.addEventListener('mouseover', () => {
       this._umap.tooltip.open({
         content: translate('Edit the title of the map'),
@@ -236,12 +237,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 +270,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 +288,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 +327,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 +371,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/hash.js

@@ -0,0 +1,36 @@
+export default class Hash {
+  constructor() {
+    document.body.addEventListener('mapview:updated', (event) => {
+      this._updating = true
+      this.update(event.detail)
+    })
+    window.addEventListener('hashchange', () => this.parse())
+  }
+
+  update({ zoom, latlng }) {
+    const [lat, lng] = latlng
+    window.location.hash = `#${zoom}/${lat}/${lng}`
+  }
+
+  parse() {
+    // Do not parse and re-update the map when we change the hash ourselves
+    // after a move from the user.
+    if (this._updating) {
+      this._updating = false
+      return
+    }
+    let hash = window.location.hash
+    if (hash.indexOf('#') === 0) {
+      hash = hash.substr(1)
+    }
+    const args = hash.split('/')
+    if (args.length !== 3) return
+    const zoom = parseInt(args[0], 10)
+    const lat = parseFloat(args[1])
+    const lng = parseFloat(args[2])
+    if (isNaN(zoom) || isNaN(lat) || isNaN(lng)) return
+    document.body.dispatchEvent(
+      new CustomEvent('mapview:update', { detail: { zoom, latlng: [lat, lng] } })
+    )
+  }
+}

umap/static/umap/js/modules/ui/loader.js

@@ -0,0 +1,26 @@
+import { loadTemplate } from '../domutils.js'
+
+export default class Loader {
+  constructor(parent) {
+    this.parent = parent
+    this.element = loadTemplate('<div class="umap-loader"></div>')
+    this.parent.appendChild(this.element)
+    document.body.addEventListener('dataloading', (event) =>
+      this.start(event.detail.id)
+    )
+    document.body.addEventListener('dataload', (event) => this.stop(event.detail.id))
+    this._counter = new Set()
+  }
+
+  start(id) {
+    this._counter.add(id)
+    this.parent.classList.add('umap-loading')
+  }
+
+  stop(id) {
+    this._counter.delete(id)
+    if (!this._counter.size) {
+      this.parent.classList.remove('umap-loading')
+    }
+  }
+}

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

@@ -1,12 +1,14 @@
-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.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
@@ -37,30 +39,33 @@ 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)
@@ -70,11 +75,10 @@ export class Panel {
             // 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
   }
 
@@ -94,6 +98,13 @@ export class Panel {
     document.body.classList.remove(`panel-${this.className.split(' ')[0]}-on`)
     this.container.dataset.highlight = null
     this.onClose()
+    Promise.all(
+      this.container.getAnimations?.().map((animation) => animation.finished)
+    ).then(() => {
+      if (!this.isOpen()) {
+        this.container.innerHTML = ''
+      }
+    })
   }
 
   onClose() {
@@ -102,6 +113,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)