Merge pull request #1111 from umap-project/lebab-template

Apply Lebab for template conversions

Makefile

@@ -61,6 +61,7 @@ pretty: ## Apply PrettierJS to all JS files (or specified `filepath`)
 lebab: ## Convert JS `filepath` to modern syntax with Lebab, then prettify
 	./node_modules/lebab/bin/index.js --replace ${filepath} --transform arrow,arrow-return
 	./node_modules/lebab/bin/index.js --replace ${filepath} --transform let
+	./node_modules/lebab/bin/index.js --replace ${filepath} --transform template
 	$(MAKE) pretty filepath=${filepath}
 
 lebab-all: $(jsdir)* ## Convert all JS files to modern syntax with Lebab + prettify

umap/static/umap/js/umap.autocomplete.js

@@ -61,10 +61,10 @@ L.U.AutoComplete = L.Class.extend({
   resizeContainer: function () {
     const l = this.getLeft(this.input)
     const t = this.getTop(this.input) + this.input.offsetHeight
-    this.container.style.left = l + 'px'
+    this.container.style.left = `${l}px`
-    this.container.style.top = t + 'px'
+    this.container.style.top = `${t}px`
     const width = this.options.width ? this.options.width : this.input.offsetWidth - 2
-    this.container.style.width = width + 'px'
+    this.container.style.width = `${width}px`
   },
 
   onKeyDown: function (e) {
@@ -164,7 +164,7 @@ L.U.AutoComplete = L.Class.extend({
       this.clear()
       return
     }
-    if (val + '' === this.CACHE + '') return
+    if (`${val}` === `${this.CACHE}`) return
     else this.CACHE = val
     this._do_search(
       val,
@@ -275,7 +275,7 @@ L.U.AutoComplete.Ajax = L.U.AutoComplete.extend({
 
   _do_search: function (val, callback, context) {
     val = val.toLowerCase()
-    this.xhr.get('/agnocomplete/AutocompleteUser/?q=' + encodeURIComponent(val), {
+    this.xhr.get(`/agnocomplete/AutocompleteUser/?q=${encodeURIComponent(val)}`, {
       callback: callback,
       context: context || this,
     })

umap/static/umap/js/umap.controls.js

@@ -15,7 +15,7 @@ L.U.ImportAction = L.U.BaseAction.extend({
   options: {
     helpMenu: true,
     className: 'upload-data dark',
-    tooltip: L._('Import data') + ' (Ctrl+I)',
+    tooltip: `${L._('Import data')} (Ctrl+I)`,
   },
 
   addHooks: function () {
@@ -320,7 +320,7 @@ L.U.EditControl = L.Control.extend({
       ),
       edit = L.DomUtil.create('a', '', container)
     edit.href = '#'
-    edit.title = L._('Enable editing') + ' (Ctrl+E)'
+    edit.title = `${L._('Enable editing')} (Ctrl+E)`
 
     L.DomEvent.addListener(edit, 'click', L.DomEvent.stop).addListener(
       edit,
@@ -542,7 +542,7 @@ L.U.DataLayersControl = L.Control.extend({
       datalayer.options.name
     )
 
-    datalayerLi.id = 'browse_data_toggle_' + L.stamp(datalayer)
+    datalayerLi.id = `browse_data_toggle_${L.stamp(datalayer)}`
     L.DomUtil.classIf(datalayerLi, 'off', !datalayer.isVisible())
 
     title.textContent = datalayer.options.name
@@ -626,11 +626,11 @@ L.U.DataLayer.include({
   },
 
   getHidableElements: function () {
-    return document.querySelectorAll('.' + this.getHidableClass())
+    return document.querySelectorAll(`.${this.getHidableClass()}`)
   },
 
   getHidableClass: function () {
-    return 'show_with_datalayer_' + L.stamp(this)
+    return `show_with_datalayer_${L.stamp(this)}`
   },
 
   propagateRemote: function () {
@@ -689,7 +689,7 @@ L.U.Map.include({
     filter.value = this.options.filter || ''
 
     const addFeature = (feature) => {
-      const feature_li = L.DomUtil.create('li', feature.getClassName() + ' feature'),
+      const feature_li = L.DomUtil.create('li', `${feature.getClassName()} feature`),
         zoom_to = L.DomUtil.create('i', 'feature-zoom_to', feature_li),
         edit = L.DomUtil.create('i', 'show-on-edit feature-edit', feature_li),
         color = L.DomUtil.create('i', 'feature-color', feature_li),
@@ -702,7 +702,7 @@ L.U.Map.include({
       title.textContent = feature.getDisplayName() || '—'
       color.style.backgroundColor = feature.getOption('color')
       if (symbol) {
-        color.style.backgroundImage = 'url(' + symbol + ')'
+        color.style.backgroundImage = `url(${symbol})`
       }
       L.DomEvent.on(
         zoom_to,
@@ -740,7 +740,7 @@ L.U.Map.include({
           featuresContainer
         ),
         headline = L.DomUtil.create('h5', '', container)
-      container.id = 'browse_data_datalayer_' + datalayer.umap_id
+      container.id = `browse_data_datalayer_${datalayer.umap_id}`
       datalayer.renderToolbox(headline)
       L.DomUtil.add('span', '', headline, datalayer.options.name)
       const ul = L.DomUtil.create('ul', '', container)
@@ -1009,18 +1009,18 @@ L.U.AttributionControl = L.Control.Attribution.extend({
         'span',
         '',
         this._container,
-        ' — ' + L.Util.toHTML(this._map.options.shortCredit)
+        ` — ${L.Util.toHTML(this._map.options.shortCredit)}`
       )
     }
     if (this._map.options.captionMenus) {
-      const link = L.DomUtil.add('a', '', this._container, ' — ' + L._('About'))
+      const link = L.DomUtil.add('a', '', this._container, ` — ${L._('About')}`)
       L.DomEvent.on(link, 'click', L.DomEvent.stop)
         .on(link, 'click', this._map.displayCaption, this._map)
         .on(link, 'dblclick', L.DomEvent.stop)
     }
     if (window.top === window.self && this._map.options.captionMenus) {
       // We are not in iframe mode
-      const home = L.DomUtil.add('a', '', this._container, ' — ' + L._('Home'))
+      const home = L.DomUtil.add('a', '', this._container, ` — ${L._('Home')}`)
       home.href = '/'
     }
   },
@@ -1035,7 +1035,7 @@ L.U.StarControl = L.Control.extend({
     const status = map.options.starred ? ' starred' : ''
     const container = L.DomUtil.create(
         'div',
-        'leaflet-control-star umap-control' + status
+        `leaflet-control-star umap-control${status}`
       ),
       link = L.DomUtil.create('a', '', container)
     link.href = '#'
@@ -1254,21 +1254,14 @@ L.U.IframeExporter = L.Evented.extend({
       delete this.queryString.datalayers
     }
     const currentView = this.options.currentView ? window.location.hash : ''
-    return this.baseUrl + '?' + L.Util.buildQueryString(this.queryString) + currentView
+    return `${this.baseUrl}?${L.Util.buildQueryString(this.queryString)}${currentView}`
   },
 
   build: function () {
     const iframeUrl = this.buildUrl()
-    const code =
+    const code = `<iframe width="${this.dimensions.width}" height="${this.dimensions.height}" frameborder="0" allowfullscreen allow="geolocation" src="${iframeUrl}"></iframe>`
-      '<iframe width="' +
-      this.dimensions.width +
-      '" height="' +
-      this.dimensions.height +
-      '" frameborder="0" allowfullscreen allow="geolocation" src="' +
-      iframeUrl +
-      '"></iframe>'
     if (this.options.includeFullScreenLink) {
-      code += '<p><a href="' + this.baseUrl + '">' + L._('See full screen') + '</a></p>'
+      code += `<p><a href="${this.baseUrl}">${L._('See full screen')}</a></p>`
     }
     return code
   },

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

@@ -70,7 +70,7 @@ L.Util.toHTML = (r) => {
   r = r.replace(/^\*\* (.*)/gm, '<ul><ul><li>$1</li></ul></ul>')
   r = r.replace(/^\* (.*)/gm, '<ul><li>$1</li></ul>')
   for (ii = 0; ii < 3; ii++)
-    r = r.replace(new RegExp('</ul>' + newline + '<ul>', 'g'), newline)
+    r = r.replace(new RegExp(`</ul>${newline}<ul>`, 'g'), newline)
 
   // links
   r = r.replace(/(\[\[http)/g, '[[h_t_t_p') // Escape for avoiding clash between [[http://xxx]] and http://xxx
@@ -107,7 +107,7 @@ L.Util.toHTML = (r) => {
   r = r.replace(/(h_t_t_p)/g, 'http')
 
   // Preserver line breaks
-  if (newline) r = r.replace(new RegExp(newline + '(?=[^]+)', 'g'), '<br>' + newline)
+  if (newline) r = r.replace(new RegExp(`${newline}(?=[^]+)`, 'g'), `<br>${newline}`)
 
   return r
 }
@@ -205,12 +205,12 @@ L.Util.flattenCoordinates = (coords) => {
 L.Util.buildQueryString = (params) => {
   const query_string = []
   for (const key in params) {
-    query_string.push(encodeURIComponent(key) + '=' + encodeURIComponent(params[key]))
+    query_string.push(`${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
   }
   return query_string.join('&')
 }
 
-L.Util.getBaseUrl = () => '//' + window.location.host + window.location.pathname
+L.Util.getBaseUrl = () => `//${window.location.host}${window.location.pathname}`
 
 L.DomUtil.add = (tagName, className, container, content) => {
   const el = L.DomUtil.create(tagName, className, container)
@@ -415,9 +415,9 @@ L.U.Help = L.Class.extend({
     L.DomUtil.add('h3', '', container, 'GeojSON')
     L.DomUtil.add('p', '', container, L._('All properties are imported.'))
     L.DomUtil.add('h3', '', container, 'GPX')
-    L.DomUtil.add('p', '', container, L._('Properties imported:') + 'name, desc')
+    L.DomUtil.add('p', '', container, `${L._('Properties imported:')}name, desc`)
     L.DomUtil.add('h3', '', container, 'KML')
-    L.DomUtil.add('p', '', container, L._('Properties imported:') + 'name, description')
+    L.DomUtil.add('p', '', container, `${L._('Properties imported:')}name, description`)
     L.DomUtil.add('h3', '', container, 'CSV')
     L.DomUtil.add(
       'p',
@@ -493,9 +493,9 @@ L.U.Help = L.Class.extend({
     return container
   },
 
-  formatURL:
+  formatURL: `${L._(
-    L._('Supported variables that will be dynamically replaced') +
+    'Supported variables that will be dynamically replaced'
-    ': {bbox}, {lat}, {lng}, {zoom}, {east}, {north}..., {left}, {top}...',
+  )}: {bbox}, {lat}, {lng}, {zoom}, {east}, {north}..., {left}, {top}...`,
   formatIconSymbol: L._(
     'Symbol can be either a unicode character or an URL. You can use feature properties as variables: ex.: with "http://myserver.org/images/{name}.png", the {name} variable will be replaced by the "name" value of each marker.'
   ),

umap/static/umap/js/umap.features.js

@@ -50,12 +50,9 @@ L.U.FeatureMixin = {
   getPermalink: function () {
     const slug = this.getSlug()
     if (slug)
-      return (
+      return `${L.Util.getBaseUrl()}?${L.Util.buildQueryString({ feature: slug })}${
-        L.Util.getBaseUrl() +
-        '?' +
-        L.Util.buildQueryString({ feature: slug }) +
         window.location.hash
-      )
+      }`
   },
 
   view: function (e) {
@@ -105,7 +102,7 @@ L.U.FeatureMixin = {
       if (L.Util.indexOf(['name', 'description'], property) !== -1) {
         continue
       }
-      properties.push(['properties.' + property, { label: property }])
+      properties.push([`properties.${property}`, { label: property }])
     }
     // We always want name and description for now (properties management to come)
     properties.unshift('properties.description')
@@ -570,7 +567,7 @@ L.U.Marker = L.Marker.extend({
 
   _getIconUrl: function (name) {
     if (typeof name === 'undefined') name = 'icon'
-    return this.getOption(name + 'Url')
+    return this.getOption(`${name}Url`)
   },
 
   getIconClass: function () {

umap/static/umap/js/umap.forms.js

@@ -12,7 +12,7 @@ L.FormBuilder.Element.include({
       className +=
         this.get(true) === undefined ? ' inheritable undefined' : ' inheritable '
     }
-    className += ' umap-field-' + this.name
+    className += ` umap-field-${this.name}`
     this.wrapper = L.DomUtil.create('div', className, this.form)
     this.header = L.DomUtil.create('div', 'header', this.wrapper)
     if (this.options.inheritable) {
@@ -567,12 +567,12 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
   addIconPreview: function (pictogram) {
     const baseClass = 'umap-icon-choice',
       value = pictogram.src,
-      className = value === this.value() ? baseClass + ' selected' : baseClass,
+      className = value === this.value() ? `${baseClass} selected` : baseClass,
       container = L.DomUtil.create('div', className, this.pictogramsContainer),
       img = L.DomUtil.create('img', '', container)
     img.src = value
     if (pictogram.name && pictogram.attribution) {
-      img.title = pictogram.name + ' — © ' + pictogram.attribution
+      img.title = `${pictogram.name} — © ${pictogram.attribution}`
     }
     L.DomEvent.on(
       container,
@@ -668,7 +668,7 @@ L.FormBuilder.Switch = L.FormBuilder.CheckBox.extend({
       this.label = L.DomUtil.create('label', '', this.input.parentNode)
     else this.input.parentNode.appendChild(this.label)
     L.DomUtil.addClass(this.input.parentNode, 'with-switch')
-    const id = (this.builder.options.id || Date.now()) + '.' + this.name
+    const id = `${this.builder.options.id || Date.now()}.${this.name}`
     this.label.setAttribute('for', id)
     L.DomUtil.addClass(this.input, 'switch')
     this.input.id = id
@@ -686,11 +686,9 @@ L.FormBuilder.MultiChoice = L.FormBuilder.Element.extend({
 
   fetch: function () {
     let value = (this.backup = this.toHTML())
-    if (!this.container.querySelector('input[type="radio"][value="' + value + '"]'))
+    if (!this.container.querySelector(`input[type="radio"][value="${value}"]`))
       value = this.default
-    this.container.querySelector(
+    this.container.querySelector(`input[type="radio"][value="${value}"]`).checked = true
-      'input[type="radio"][value="' + value + '"]'
-    ).checked = true
   },
 
   value: function () {
@@ -706,7 +704,7 @@ L.FormBuilder.MultiChoice = L.FormBuilder.Element.extend({
     const choices = this.getChoices()
     this.container = L.DomUtil.create(
       'div',
-      this.className + ' by' + choices.length,
+      `${this.className} by${choices.length}`,
       this.parentNode
     )
     for (let i = 0; i < choices.length; i++) {
@@ -721,7 +719,7 @@ L.FormBuilder.MultiChoice = L.FormBuilder.Element.extend({
     input.type = 'radio'
     input.name = this.name
     input.value = value
-    const id = Date.now() + '.' + this.name + '.' + counter
+    const id = `${Date.now()}.${this.name}.${counter}`
     label.setAttribute('for', id)
     input.id = id
     L.DomEvent.on(input, 'change', this.sync, this)

umap/static/umap/js/umap.icon.js

@@ -18,7 +18,7 @@ L.U.Icon = L.DivIcon.extend({
     let url
     if (this.feature && this.feature._getIconUrl(name))
       url = this.feature._getIconUrl(name)
-    else url = this.options[name + 'Url']
+    else url = this.options[`${name}Url`]
     return this.formatUrl(url, this.feature)
   },
 
@@ -147,13 +147,9 @@ L.U.Icon.Ball = L.U.Icon.Default.extend({
     if (L.Browser.ielt9) {
       background = color
     } else if (L.Browser.webkit) {
-      background =
+      background = `-webkit-gradient( radial, 6 38%, 0, 6 38%, 8, from(white), to(${color}) )`
-        '-webkit-gradient( radial, 6 38%, 0, 6 38%, 8, from(white), to(' + color + ') )'
     } else {
-      background =
+      background = `radial-gradient(circle at 6px 38% , white -4px, ${color} 8px) repeat scroll 0 0 transparent`
-        'radial-gradient(circle at 6px 38% , white -4px, ' +
-        color +
-        ' 8px) repeat scroll 0 0 transparent'
     }
     this.elements.container.style.background = background
   },

umap/static/umap/js/umap.js

@@ -108,7 +108,7 @@ L.U.Map.include({
     for (let i = 0; i < this.HIDDABLE_CONTROLS.length; i++) {
       L.Util.setNullableBooleanFromQueryString(
         this.options,
-        this.HIDDABLE_CONTROLS[i] + 'Control'
+        `${this.HIDDABLE_CONTROLS[i]}Control`
       )
     }
     this.datalayersOnLoad = L.Util.queryString('datalayers')
@@ -359,7 +359,7 @@ L.U.Map.include({
     let name, status, control
     for (let i = 0; i < this.HIDDABLE_CONTROLS.length; i++) {
       name = this.HIDDABLE_CONTROLS[i]
-      status = this.options[name + 'Control']
+      status = this.options[`${name}Control`]
       if (status === false) continue
       control = this._controls[name]
       control.addTo(this)
@@ -582,7 +582,7 @@ L.U.Map.include({
     } catch (e) {
       this.removeLayer(tilelayer)
       this.ui.alert({
-        content: L._('Error in the tilelayer URL') + ': ' + tilelayer._url,
+        content: `${L._('Error in the tilelayer URL')}: ${tilelayer._url}`,
         level: 'error',
       })
       // Users can put tilelayer URLs by hand, and if they add wrong {variable},
@@ -619,7 +619,7 @@ L.U.Map.include({
       this.removeLayer(overlay)
       console.error(e)
       this.ui.alert({
-        content: L._('Error in the overlay URL') + ': ' + overlay._url,
+        content: `${L._('Error in the overlay URL')}: ${overlay._url}`,
         level: 'error',
       })
     }
@@ -685,13 +685,13 @@ L.U.Map.include({
 
   createDataLayer: function (datalayer) {
     datalayer = datalayer || {
-      name: L._('Layer') + ' ' + (this.datalayers_index.length + 1),
+      name: `${L._('Layer')} ${this.datalayers_index.length + 1}`,
     }
     return new L.U.DataLayer(this, datalayer)
   },
 
   getDefaultOption: function (option) {
-    return this.options['default_' + option]
+    return this.options[`default_${option}`]
   },
 
   getOption: function (option) {
@@ -764,7 +764,7 @@ L.U.Map.include({
       'queryString.captionMenus',
     ]
     for (let i = 0; i < this.HIDDABLE_CONTROLS.length; i++) {
-      UIFields.push('queryString.' + this.HIDDABLE_CONTROLS[i] + 'Control')
+      UIFields.push(`queryString.${this.HIDDABLE_CONTROLS[i]}Control`)
     }
     const iframeExporter = new L.U.IframeExporter(this)
     const buildIframeCode = () => {
@@ -1104,7 +1104,7 @@ L.U.Map.include({
         }
       })
       datalayer.renderToolbox(headline)
-      L.DomUtil.add('span', '', headline, datalayer.options.name + ' ')
+      L.DomUtil.add('span', '', headline, `${datalayer.options.name} `)
     })
     const creditsContainer = L.DomUtil.create('div', 'credits-container', container),
       credits = L.DomUtil.createFieldset(creditsContainer, L._('Credits'))
@@ -1122,7 +1122,7 @@ L.U.Map.include({
           'p',
           '',
           credits,
-          L._('Map user content has been published under licence') + ' '
+          `${L._('Map user content has been published under licence')} `
         ),
         link = L.DomUtil.add('a', '', licence, this.options.licence.name)
       link.href = this.options.licence.url
@@ -1135,7 +1135,7 @@ L.U.Map.include({
     const tilelayerCredit = L.DomUtil.create('p', '', credits),
       name = L.DomUtil.create('strong', '', tilelayerCredit),
       attribution = L.DomUtil.create('span', '', tilelayerCredit)
-    name.textContent = this.selected_tilelayer.options.name + ' '
+    name.textContent = `${this.selected_tilelayer.options.name} `
     attribution.innerHTML = this.selected_tilelayer.getAttribution()
     L.DomUtil.create('hr', '', credits)
     const umapCredit = L.DomUtil.create('p', '', credits),
@@ -1440,7 +1440,7 @@ L.U.Map.include({
   _editControls: function (container) {
     let UIFields = []
     for (let i = 0; i < this.HIDDABLE_CONTROLS.length; i++) {
-      UIFields.push('options.' + this.HIDDABLE_CONTROLS[i] + 'Control')
+      UIFields.push(`options.${this.HIDDABLE_CONTROLS[i]}Control`)
     }
     UIFields = UIFields.concat([
       'options.moreControl',
@@ -1598,7 +1598,7 @@ L.U.Map.include({
         'options.tilelayer.url_template',
         {
           handler: 'BlurInput',
-          helpText: L._('Supported scheme') + ': http://{s}.domain.com/{z}/{x}/{y}.png',
+          helpText: `${L._('Supported scheme')}: http://{s}.domain.com/{z}/{x}/{y}.png`,
           placeholder: 'url',
         },
       ],
@@ -1636,7 +1636,7 @@ L.U.Map.include({
         'options.overlay.url_template',
         {
           handler: 'BlurInput',
-          helpText: L._('Supported scheme') + ': http://{s}.domain.com/{z}/{x}/{y}.png',
+          helpText: `${L._('Supported scheme')}: http://{s}.domain.com/{z}/{x}/{y}.png`,
           placeholder: 'url',
           helpText: L._('Background overlay url'),
         },
@@ -1894,7 +1894,7 @@ L.U.Map.include({
         'a',
         'umap-about-link',
         container,
-        ' — ' + L._('About')
+        ` — ${L._('About')}`
       )
       about.href = '#'
       L.DomEvent.on(about, 'click', this.displayCaption, this)
@@ -1902,7 +1902,7 @@ L.U.Map.include({
         'a',
         'umap-open-browser-link',
         container,
-        ' | ' + L._('Browse data')
+        ` | ${L._('Browse data')}`
       )
       browser.href = '#'
       L.DomEvent.on(browser, 'click', L.DomEvent.stop).on(
@@ -1916,7 +1916,7 @@ L.U.Map.include({
           'a',
           'umap-open-filter-link',
           container,
-          ' | ' + L._('Select data')
+          ` | ${L._('Select data')}`
         )
         filter.href = '#'
         L.DomEvent.on(filter, 'click', L.DomEvent.stop).on(
@@ -1943,7 +1943,7 @@ L.U.Map.include({
         'umap-main-edit-toolbox with-transition dark',
         this._controlContainer
       ),
-      title = L.DomUtil.add('h3', '', container, L._('Editing') + '&nbsp;'),
+      title = L.DomUtil.add('h3', '', container, `${L._('Editing')}&nbsp;`),
       name = L.DomUtil.create('a', 'umap-click-to-edit', title),
       setName = function () {
         name.textContent = this.getDisplayName()
@@ -1954,7 +1954,7 @@ L.U.Map.include({
     this.help.button(title, 'edit')
     const save = L.DomUtil.create('a', 'leaflet-control-edit-save button', container)
     save.href = '#'
-    save.title = L._('Save current edits') + ' (Ctrl+S)'
+    save.title = `${L._('Save current edits')} (Ctrl+S)`
     save.textContent = L._('Save')
     const cancel = L.DomUtil.create(
       'a',
@@ -2093,27 +2093,27 @@ L.U.Map.include({
       if (this.editEnabled) {
         if (!this.isDirty) {
           items.push({
-            text: L._('Stop editing') + ' (Ctrl+E)',
+            text: `${L._('Stop editing')} (Ctrl+E)`,
             callback: this.disableEdit,
           })
         }
         if (this.options.enableMarkerDraw) {
           items.push({
-            text: L._('Draw a marker') + ' (Ctrl+M)',
+            text: `${L._('Draw a marker')} (Ctrl+M)`,
             callback: this.startMarker,
             context: this,
           })
         }
         if (this.options.enablePolylineDraw) {
           items.push({
-            text: L._('Draw a polygon') + ' (Ctrl+P)',
+            text: `${L._('Draw a polygon')} (Ctrl+P)`,
             callback: this.startPolygon,
             context: this,
           })
         }
         if (this.options.enablePolygonDraw) {
           items.push({
-            text: L._('Draw a line') + ' (Ctrl+L)',
+            text: `${L._('Draw a line')} (Ctrl+L)`,
             callback: this.startPolyline,
             context: this,
           })
@@ -2127,7 +2127,7 @@ L.U.Map.include({
         })
       } else {
         items.push({
-          text: L._('Start editing') + ' (Ctrl+E)',
+          text: `${L._('Start editing')} (Ctrl+E)`,
           callback: this.enableEdit,
         })
       }

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

@@ -188,7 +188,7 @@ L.U.DataLayer = L.Evented.extend({
     this._propertiesIndex = []
 
     this.parentPane = this.map.getPane('overlayPane')
-    this.pane = this.map.createPane('datalayer' + L.stamp(this), this.parentPane)
+    this.pane = this.map.createPane(`datalayer${L.stamp(this)}`, this.parentPane)
     this.pane.dataset.id = L.stamp(this)
     this.renderer = L.svg({ pane: this.pane })
 
@@ -441,7 +441,7 @@ L.U.DataLayer = L.Evented.extend({
     })
 
     // No browser cache for owners/editors.
-    if (this.map.options.allowEdit) url = url + '?' + Date.now()
+    if (this.map.options.allowEdit) url = `${url}?${Date.now()}`
     return url
   },
 
@@ -559,7 +559,7 @@ L.U.DataLayer = L.Evented.extend({
         const gj = JSON.parse(c)
         callback(gj)
       } catch (err) {
-        this.map.ui.alert({ content: 'Invalid JSON file: ' + err })
+        this.map.ui.alert({ content: `Invalid JSON file: ${err}` })
         return
       }
     }
@@ -974,8 +974,9 @@ L.U.DataLayer = L.Evented.extend({
   buildVersionsFieldset: function (container) {
     const appendVersion = function (data) {
       const date = new Date(parseInt(data.at, 10))
-      const content =
+      const content = `${date.toLocaleDateString(L.locale)} (${
-        date.toLocaleDateString(L.locale) + ' (' + parseInt(data.size) / 1000 + 'Kb)'
+        parseInt(data.size) / 1000
+      }Kb)`
       const el = L.DomUtil.create('div', 'umap-datalayer-version', versionsContainer)
       const a = L.DomUtil.create('a', '', el)
       L.DomUtil.add('span', '', el, content)

umap/static/umap/js/umap.permissions.js

@@ -182,7 +182,7 @@ L.U.MapPermissions = L.Class.extend({
           element,
           'umap-map-owner',
           container,
-          ' ' + L._('by') + ' '
+          ` ${L._('by')} `
         ),
         owner = L.DomUtil.create('a')
       owner.href = this.options.owner.url

umap/static/umap/js/umap.popup.js

@@ -176,7 +176,7 @@ L.U.PopupTemplate.BaseWithTitle = L.U.PopupTemplate.Default.extend({
 L.U.PopupTemplate.Table = L.U.PopupTemplate.BaseWithTitle.extend({
   formatRow: function (key, value) {
     if (value.indexOf('http') === 0) {
-      value = '<a href="' + value + '" target="_blank">' + value + '</a>'
+      value = `<a href="${value}" target="_blank">${value}</a>`
     }
     return value
   },
@@ -215,8 +215,8 @@ L.U.PopupTemplate.GeoRSSImage = L.U.PopupTemplate.BaseWithTitle.extend({
       img.src = this.feature.properties.img
       // Sadly, we are unable to override this from JS the clean way
       // See https://github.com/Leaflet/Leaflet/commit/61d746818b99d362108545c151a27f09d60960ee#commitcomment-6061847
-      img.style.maxWidth = this.options.maxWidth + 'px'
+      img.style.maxWidth = `${this.options.maxWidth}px`
-      img.style.maxHeight = this.options.maxWidth + 'px'
+      img.style.maxHeight = `${this.options.maxWidth}px`
       this.onElementLoaded(img)
     }
     return container

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

@@ -71,7 +71,7 @@ L.U.Slideshow = L.Class.extend({
   timeSpinner: function () {
     const time = parseInt(this.options.delay, 10)
     if (!time) return
-    const css = 'rotation ' + time / 1000 + 's infinite linear',
+    const css = `rotation ${time / 1000}s infinite linear`,
       spinners = document.querySelectorAll('.umap-slideshow-toolbox .play .spinner')
     for (let i = 0; i < spinners.length; i++) {
       spinners[i].style.animation = css

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

@@ -55,7 +55,7 @@ L.U.TableEditor = L.Class.extend({
 
   renderRow: function (feature) {
     const builder = new L.U.FormBuilder(feature, this.field_properties, {
-      id: 'umap-feature-properties_' + L.stamp(feature),
+      id: `umap-feature-properties_${L.stamp(feature)}`,
       className: 'trow',
       callback: feature.resetTooltip,
     })
@@ -71,7 +71,7 @@ L.U.TableEditor = L.Class.extend({
     this.field_properties = []
     for (let i = 0; i < this.properties.length; i++) {
       this.field_properties.push([
-        'properties.' + this.properties[i],
+        `properties.${this.properties[i]}`,
         { wrapper: 'div', wrapperClass: 'tcell' },
       ])
     }

umap/static/umap/js/umap.ui.js

@@ -185,13 +185,13 @@ L.U.UI = L.Evented.extend({
   },
 
   setTooltipPosition: function (coords) {
-    if (coords.left) this._tooltip.style.left = coords.left + 'px'
+    if (coords.left) this._tooltip.style.left = `${coords.left}px`
     else this._tooltip.style.left = 'initial'
-    if (coords.right) this._tooltip.style.right = coords.right + 'px'
+    if (coords.right) this._tooltip.style.right = `${coords.right}px`
     else this._tooltip.style.right = 'initial'
-    if (coords.top) this._tooltip.style.top = coords.top + 'px'
+    if (coords.top) this._tooltip.style.top = `${coords.top}px`
     else this._tooltip.style.top = 'initial'
-    if (coords.bottom) this._tooltip.style.bottom = coords.bottom + 'px'
+    if (coords.bottom) this._tooltip.style.bottom = `${coords.bottom}px`
     else this._tooltip.style.bottom = 'initial'
   },