[refactor] Use JS modules for client URL routing

Also expose some vendorized libs as modules in `modules/vendors.js`

umap/static/umap/js/modules/index.js

@@ -0,0 +1,6 @@
+import URLs from './urls.js'
+
+// expose the modules to the window.umap global scope
+window.umap = { URLs }
+
+export { URLs }

umap/static/umap/js/modules/urls.js

@@ -0,0 +1,29 @@
+import { Util } from './vendors.js'
+
+export default class URLs {
+  constructor(serverUrls) {
+    this.urls = serverUrls
+  }
+
+  get(urlName, params) {
+    if (typeof this[urlName] === 'function') return this[urlName](params)
+
+    if (this.urls.hasOwnProperty(urlName)) {
+      return Util.template(this.urls[urlName], params)
+    } else {
+      throw `Unable to find a URL for route ${urlName}`
+    }
+  }
+
+  // Update if map_id is passed, create otherwise.
+  map_save({ map_id, ...options }) {
+    if (map_id) return this.get('map_update', { map_id, ...options })
+    return this.get('map_create')
+  }
+
+  // Update the layer if pk is passed, create otherwise.
+  datalayer_save({ map_id, pk }, ...options) {
+    if (pk) return this.get('datalayer_update', { map_id, pk }, ...options)
+    return this.get('datalayer_create', { map_id, pk }, ...options)
+  }
+}

umap/static/umap/js/modules/vendors.js

@@ -0,0 +1,7 @@
+import { Util } from '../../vendors/leaflet/leaflet-src.esm.js'
+
+// expose the modules to the window.vendors global scope
+window.vendors = {
+  Util,
+}
+export { Util }

umap/static/umap/js/umap.js

@@ -95,6 +95,7 @@ L.U.Map.include({
 
     // After calling parent initialize, as we are doing initCenter our-selves
     if (geojson.geometry) this.options.center = this.latLng(geojson.geometry)
+    this.urls = new window.umap.URLs(this.options.urls)
 
     this.ui = new L.U.UI(this._container)
     this.xhr = new L.U.Xhr(this.ui)
@@ -279,10 +280,12 @@ L.U.Map.include({
         url.searchParams.delete('edit')
         history.pushState({}, '', url)
       }
-      if (L.Util.queryString('download'))
+      if (L.Util.queryString('download')) {
-        window.location = L.Util.template(this.options.urls.map_download, {
+        const download_url = this.urls.get('map_download', {
           map_id: this.options.umap_id,
         })
+        window.location = download_url
+      }
     })
 
     window.onbeforeunload = () => this.isDirty || null
@@ -1085,7 +1088,7 @@ L.U.Map.include({
     formData.append('name', this.options.name)
     formData.append('center', JSON.stringify(this.geometry()))
     formData.append('settings', JSON.stringify(geojson))
-    this.post(this.getSaveUrl(), {
+    this.post(this.urls.get('map_save', { map_id: this.options.umap_id }), {
       data: formData,
       context: this,
       callback: function (data) {
@@ -1161,42 +1164,25 @@ L.U.Map.include({
   },
 
   sendEditLink: function () {
-    const url = L.Util.template(this.options.urls.map_send_edit_link, {
+    const input = this.ui._alert.querySelector('input')
-        map_id: this.options.umap_id,
+    const email = input.value
-      }),
-      input = this.ui._alert.querySelector('input'),
-      email = input.value
 
     const formData = new FormData()
     formData.append('email', email)
+
+    const url = this.urls.get('map_send_edit_link', { map_id: this.options.umap_id })
     this.post(url, {
       data: formData,
     })
   },
 
-  getEditUrl: function () {
-    return L.Util.template(this.options.urls.map_update, {
-      map_id: this.options.umap_id,
-    })
-  },
-
-  getCreateUrl: function () {
-    return L.Util.template(this.options.urls.map_create)
-  },
-
-  getSaveUrl: function () {
-    return (this.options.umap_id && this.getEditUrl()) || this.getCreateUrl()
-  },
-
   star: function () {
     if (!this.options.umap_id)
       return this.ui.alert({
         content: L._('Please save the map first'),
         level: 'error',
       })
-    let url = L.Util.template(this.options.urls.map_star, {
+    const url = this.urls.get('map_star', { map_id: this.options.umap_id })
-      map_id: this.options.umap_id,
-    })
     this.post(url, {
       context: this,
       callback: function (data) {
@@ -1804,9 +1790,7 @@ L.U.Map.include({
 
   del: function () {
     if (confirm(L._('Are you sure you want to delete this map?'))) {
-      const url = L.Util.template(this.options.urls.map_delete, {
+      const url = this.urls.get('map_delete', { map_id: this.options.umap_id })
-        map_id: this.options.umap_id,
-      })
       this.post(url)
     }
   },
@@ -1815,9 +1799,7 @@ L.U.Map.include({
     if (
       confirm(L._('Are you sure you want to clone this map and all its datalayers?'))
     ) {
-      const url = L.Util.template(this.options.urls.map_clone, {
+      const url = this.urls.get('map_clone', { map_id: this.options.umap_id })
-        map_id: this.options.umap_id,
-      })
       this.post(url)
     }
   },
@@ -1952,17 +1934,13 @@ L.U.Map.include({
   },
 
   openExternalRouting: function (e) {
-    const url = this.options.urls.routing
+    const url = this.urls.get('routing', {
-    if (url) {
+      lat: e.latlng.lat,
-      const params = {
+      lng: e.latlng.lng,
-        lat: e.latlng.lat,
+      locale: L.locale,
-        lng: e.latlng.lng,
+      zoom: this.getZoom(),
-        locale: L.locale,
+    })
-        zoom: this.getZoom(),
+    if (url) window.open(url)
-      }
-      window.open(L.Util.template(url, params))
-    }
-    return
   },
 
   getMap: function () {

umap/static/umap/js/umap.layer.js

@@ -1069,23 +1069,6 @@ L.U.DataLayer = L.Evented.extend({
     })
   },
 
-  getEditUrl: function () {
-    return L.Util.template(this.map.options.urls.datalayer_update, {
-      map_id: this.map.options.umap_id,
-      pk: this.umap_id,
-    })
-  },
-
-  getCreateUrl: function () {
-    return L.Util.template(this.map.options.urls.datalayer_create, {
-      map_id: this.map.options.umap_id,
-    })
-  },
-
-  getSaveUrl: function () {
-    return (this.umap_id && this.getEditUrl()) || this.getCreateUrl()
-  },
-
   getColor: function () {
     return this.options.color || this.map.getOption('color')
   },
@@ -1577,7 +1560,11 @@ L.U.DataLayer = L.Evented.extend({
     // Filename support is shaky, don't do it for now.
     const blob = new Blob([JSON.stringify(geojson)], { type: 'application/json' })
     formData.append('geojson', blob)
-    this.map.post(this.getSaveUrl(), {
+    const saveUrl = this.map.urls.get('datalayer_save', {
+      map_id: this.map.options.umap_id,
+      pk: this.umap_id,
+    })
+    this.map.post(saveUrl, {
       data: formData,
       callback: function (data, response) {
         // Response contains geojson only if save has conflicted and conflicts have

umap/static/umap/test/URLs.js

@@ -0,0 +1,54 @@
+import URLs from '../js/modules/urls.js'
+
+describe('URLs', () => {
+  // Mock server URLs that will be used for testing
+  const mockServerUrls = {
+    map_create: '/maps/create',
+    map_update: '/maps/{map_id}/update',
+    datalayer_create: '/maps/{map_id}/datalayers/create',
+    datalayer_update: '/maps/{map_id}/datalayers/{pk}/update',
+  }
+
+  let urls = new URLs(mockServerUrls)
+
+  describe('get()', () => {
+    it('should throw an error if the urlName does not exist', () => {
+      expect(() => urls.get('non_existent')).to.throw()
+    })
+
+    it('should return the correct templated URL for known urlNames', () => {
+      expect(urls.get('map_create')).to.be.equal('/maps/create')
+      expect(urls.get('map_update', { map_id: '123' })).to.be.equal('/maps/123/update')
+    })
+
+    it('should return the correct templated URL when provided with parameters', () => {
+      expect(urls.get('datalayer_update', { map_id: '123', pk: '456' })).to.be.equal(
+        '/maps/123/datalayers/456/update'
+      )
+    })
+  })
+
+  describe('map_save()', () => {
+    it('should return the create URL if no map_id is provided', () => {
+      expect(urls.map_save({})).to.be.equal('/maps/create')
+    })
+
+    it('should return the update URL if a map_id is provided', () => {
+      expect(urls.map_save({ map_id: '123' })).to.be.equal('/maps/123/update')
+    })
+  })
+
+  describe('datalayer_save()', () => {
+    it('should return the create URL if no pk is provided', () => {
+      expect(urls.datalayer_save({ map_id: '123' })).to.be.equal(
+        '/maps/123/datalayers/create'
+      )
+    })
+
+    it('should return the update URL if a pk is provided', () => {
+      expect(urls.datalayer_save({ map_id: '123', pk: '456' })).to.be.equal(
+        '/maps/123/datalayers/456/update'
+      )
+    })
+  })
+})

umap/static/umap/test/Util.js

@@ -86,7 +86,7 @@ describe('L.Util', function () {
 
     it('should handle target option', function () {
       assert.equal(
-        L.Util.toHTML('A simple http://osm.org link', {target: 'self'}),
+        L.Util.toHTML('A simple http://osm.org link', { target: 'self' }),
         'A simple <a href="http://osm.org" target="_self">http://osm.org</a> link'
       )
     })
@@ -257,8 +257,8 @@ describe('L.Util', function () {
     it('should accept non ascii chars', function () {
       assert.equal(
         L.Util.greedyTemplate('A phrase with a {Accessibilité} and {переменная}.', {
-          'Accessibilité': 'value',
+          Accessibilité: 'value',
-          'переменная': 'another',
+          переменная: 'another',
         }),
         'A phrase with a value and another.'
       )
@@ -475,70 +475,72 @@ describe('L.Util', function () {
     })
   })
 
-  describe("#normalize()", function () {
+  describe('#normalize()', function () {
-
+    if (
-    if('should remove accents', function () {
+      ('should remove accents',
-      // French é
+      function () {
-      assert.equal(L.Util.normalize('aéroport'), 'aeroport')
+        // French é
-      // American é
+        assert.equal(L.Util.normalize('aéroport'), 'aeroport')
-      assert.equal(L.Util.normalize('aéroport'), 'aeroport')
+        // American é
-    })
+        assert.equal(L.Util.normalize('aéroport'), 'aeroport')
+      })
+    );
   })
 
-  describe("#sortFeatures()", function () {
+  describe('#sortFeatures()', function () {
     let feat1, feat2, feat3
     before(function () {
-      feat1 = {properties: {}}
+      feat1 = { properties: {} }
-      feat2 = {properties: {}}
+      feat2 = { properties: {} }
-      feat3 = {properties: {}}
+      feat3 = { properties: {} }
     })
     it('should sort feature from custom key', function () {
-      feat1.properties.mykey = "13. foo"
+      feat1.properties.mykey = '13. foo'
-      feat2.properties.mykey = "7. foo"
+      feat2.properties.mykey = '7. foo'
-      feat3.properties.mykey = "111. foo"
+      feat3.properties.mykey = '111. foo'
-      let features = L.Util.sortFeatures([feat1, feat2, feat3], "mykey")
+      let features = L.Util.sortFeatures([feat1, feat2, feat3], 'mykey')
       assert.equal(features[0], feat2)
       assert.equal(features[1], feat1)
       assert.equal(features[2], feat3)
     })
     it('should sort feature from multiple keys', function () {
-      feat1.properties.mykey = "13. foo"
+      feat1.properties.mykey = '13. foo'
-      feat2.properties.mykey = "111. foo"
+      feat2.properties.mykey = '111. foo'
-      feat3.properties.mykey = "111. foo"
+      feat3.properties.mykey = '111. foo'
-      feat1.properties.otherkey = "C"
+      feat1.properties.otherkey = 'C'
-      feat2.properties.otherkey = "B"
+      feat2.properties.otherkey = 'B'
-      feat3.properties.otherkey = "A"
+      feat3.properties.otherkey = 'A'
-      let features = L.Util.sortFeatures([feat1, feat2, feat3], "mykey,otherkey")
+      let features = L.Util.sortFeatures([feat1, feat2, feat3], 'mykey,otherkey')
       assert.equal(features[0], feat1)
       assert.equal(features[1], feat3)
       assert.equal(features[2], feat2)
     })
     it('should sort feature from custom key reverse', function () {
-      feat1.properties.mykey = "13. foo"
+      feat1.properties.mykey = '13. foo'
-      feat2.properties.mykey = "7. foo"
+      feat2.properties.mykey = '7. foo'
-      feat3.properties.mykey = "111. foo"
+      feat3.properties.mykey = '111. foo'
-      let features = L.Util.sortFeatures([feat1, feat2, feat3], "-mykey")
+      let features = L.Util.sortFeatures([feat1, feat2, feat3], '-mykey')
       assert.equal(features[0], feat3)
       assert.equal(features[1], feat1)
       assert.equal(features[2], feat2)
     })
     it('should sort feature from multiple keys with reverse', function () {
-      feat1.properties.mykey = "13. foo"
+      feat1.properties.mykey = '13. foo'
-      feat2.properties.mykey = "111. foo"
+      feat2.properties.mykey = '111. foo'
-      feat3.properties.mykey = "111. foo"
+      feat3.properties.mykey = '111. foo'
-      feat1.properties.otherkey = "C"
+      feat1.properties.otherkey = 'C'
-      feat2.properties.otherkey = "B"
+      feat2.properties.otherkey = 'B'
-      feat3.properties.otherkey = "A"
+      feat3.properties.otherkey = 'A'
-      let features = L.Util.sortFeatures([feat1, feat2, feat3], "mykey,-otherkey")
+      let features = L.Util.sortFeatures([feat1, feat2, feat3], 'mykey,-otherkey')
       assert.equal(features[0], feat1)
       assert.equal(features[1], feat2)
       assert.equal(features[2], feat3)
     })
     it('should sort feature with space first', function () {
-      feat1.properties.mykey = "1 foo"
+      feat1.properties.mykey = '1 foo'
-      feat2.properties.mykey = "2 foo"
+      feat2.properties.mykey = '2 foo'
-      feat3.properties.mykey = "1a foo"
+      feat3.properties.mykey = '1a foo'
-      let features = L.Util.sortFeatures([feat1, feat2, feat3], "mykey")
+      let features = L.Util.sortFeatures([feat1, feat2, feat3], 'mykey')
       assert.equal(features[0], feat1)
       assert.equal(features[1], feat3)
       assert.equal(features[2], feat2)

umap/static/umap/test/index.html

@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <title>Umap front Tests</title>
@@ -28,6 +29,7 @@
     <script src="../vendors/tokml/tokml.js"></script>
     <script src="../vendors/simple-statistics/simple-statistics.min.js"></script>
     <script src="../vendors/colorbrewer/colorbrewer.js"></script>
+    <script type="module" src="../js/modules/index.js"></script>
     <script src="../js/umap.core.js"></script>
     <script src="../js/umap.autocomplete.js"></script>
     <script src="../js/umap.popup.js"></script>
@@ -50,8 +52,10 @@
     <link rel="stylesheet" href="../vendors/minimap/Control.MiniMap.css" />
     <link rel="stylesheet" href="../vendors/editinosm/Leaflet.EditInOSM.css" />
     <link rel="stylesheet" href="../vendors/markercluster/MarkerCluster.css" />
-    <link rel="stylesheet" href="../vendors/markercluster/MarkerCluster.Default.css" />
+    <link rel="stylesheet"
-    <link rel="stylesheet" href="../vendors/contextmenu/leaflet.contextmenu.css" />
+          href="../vendors/markercluster/MarkerCluster.Default.css" />
+    <link rel="stylesheet"
+          href="../vendors/contextmenu/leaflet.contextmenu.css" />
     <link rel="stylesheet" href="../vendors/toolbar/leaflet.toolbar.css" />
     <link rel="stylesheet" href="../vendors/measurable/Leaflet.Measurable.css" />
     <link rel="stylesheet" href="../vendors/iconlayers/iconLayers.css" />
@@ -61,7 +65,6 @@
     <link rel="stylesheet" href="../../umap/nav.css" />
     <link rel="stylesheet" href="../../umap/map.css" />
     <link rel="stylesheet" href="../../umap/theme.css" />
-
     <script src="../../../../node_modules/sinon/pkg/sinon.js"></script>
     <script src="../../../../node_modules/mocha/mocha.js"></script>
     <script src="../../../../node_modules/chai/chai.js"></script>
@@ -89,22 +92,24 @@
     <script src="./Controls.js"></script>
     <script src="./Permissions.js"></script>
     <script src="./Choropleth.js"></script>
+    <script type="module" src="./URLs.js"></script>
     <style type="text/css">
-      #mocha {
+        #mocha {
-        position: absolute;
+            position: absolute;
-        top: 0;
+            top: 0;
-        bottom: 0;
+            bottom: 0;
-        left: 0;
+            left: 0;
-        right: 0;
+            right: 0;
-        z-index: 10000;
+            z-index: 10000;
-        background-color: white;
+            background-color: white;
-        box-shadow: 0px 0px 8px 0px black;
+            box-shadow: 0px 0px 8px 0px black;
-        overflow-y: auto;
+            overflow-y: auto;
-        display: none;
+            display: none;
-      }
+        }
-      #mocha-stats {
+
-        position: absolute;
+        #mocha-stats {
-      }
+            position: absolute;
+        }
     </style>
   </head>
   <body>

umap/templates/umap/js.html

@@ -30,6 +30,7 @@
 {% endcompress %}
 {% if locale %}<script src="{{ STATIC_URL }}umap/locale/{{ locale }}.js"></script>{% endif %}
 {% compress js %}
+  <script type="module" src="{{ STATIC_URL }}umap/js/modules/index.js"></script>
   <script src="{{ STATIC_URL }}umap/js/umap.core.js"></script>
   <script src="{{ STATIC_URL }}umap/js/umap.autocomplete.js"></script>
   <script src="{{ STATIC_URL }}umap/js/umap.popup.js"></script>

umap/templates/umap/map_fragment.html

@@ -2,6 +2,9 @@
 <div id="{{ unique_id }}" class="map_fragment"></div>
 <!-- djlint:off -->
 <script type="text/javascript">
-  new L.U.Map("{{ unique_id }}", {{ map_settings|notag|safe }})
+  // Wait for JS modules to be loaded
+  window.addEventListener('load', (event) => {
+    new L.U.Map("{{ unique_id }}", {{ map_settings|notag|safe }})
+  });
 </script>
 <!-- djlint:on -->

umap/templates/umap/map_init.html

@@ -1,7 +1,9 @@
 {% load umap_tags %}
 <div id="map"></div>
 <!-- djlint:off -->
-<script type="text/javascript">
+<script defer type="text/javascript">
-  let MAP = new L.U.Map("map", {{ map_settings|notag|safe }})
+  window.addEventListener('load', (event) => {
+    let MAP = new L.U.Map("map", {{ map_settings|notag|safe }});
+  });
 </script>
 <!-- djlint:on -->