map user interface translations

Author: digitaltom

app/javascript/controllers/feature/edit_controller.js

@@ -34,7 +34,7 @@ export default class extends Controller {
     if (dom.isInputElement(e.target)) return // Don't trigger if typing in input
 
     const feature = this.getEditFeature()
-    if (confirm(`Really delete this ${getFeatureTypeName(feature)}?`)) {
+    if (confirm(window.__('Really delete this %{type}?').replace('%{type}', getFeatureTypeName(feature)))) {
       handleDelete({ features: [feature] })
     }
   }
@@ -48,7 +48,7 @@ export default class extends Controller {
       sendMessage('update_feature', feature)
     } catch (error) {
       console.error('Error updating feature:', error.message)
-      status('Error updating feature', 'error')
+      status(window.__('Error updating feature'), 'error')
       document.querySelector('#feature-edit-raw .error').innerHTML = error.message
     }
   }
@@ -63,7 +63,7 @@ export default class extends Controller {
       sendMessage('update_feature', feature)
     } catch (error) {
       console.error('Error updating feature geometry:', error.message)
-      status('Error updating feature geometry', 'error')
+      status(window.__('Error updating feature geometry'), 'error')
       document.querySelector('#feature-edit-raw-geometry .error').innerHTML = error.message
     }
   }
@@ -308,7 +308,7 @@ export default class extends Controller {
 
   addUndo() {
     const feature = this.getEditFeature()
-    addUndoState(window.__('Feature property update'), feature)
+    addUndoState('Feature property update', feature)
   }
 
   getEditFeature () {

app/javascript/controllers/feature/modal_controller.js

@@ -303,7 +303,7 @@ export default class extends Controller {
     document.querySelector('#feature-desc-input').value = this.getSelectedFeature().properties.desc || ''
     easyMDE = new window.EasyMDE({
       element: document.getElementById('feature-desc-input'),
-      placeholder: 'Add a description text',
+      placeholder: window.__('Add a description text'),
       toolbar: ["bold", "italic", "heading", "code", "table", "|", "unordered-list", "horizontal-rule", "|", "link", "image", "preview"],
       minHeight: '4em',
       spellChecker: false,
@@ -324,13 +324,13 @@ export default class extends Controller {
       }
     } catch (error) {
       console.error('Error updating feature:', error.message)
-      status('Error updating feature', 'error')
+      status(window.__('Error updating feature'), 'error')
     }
   }
 
   saveFeature () {
     const feature = this.getSelectedFeature()
-    status('Saving feature ' + feature.id)
+    status(window.__('Saving feature %{id}').replace('%{id}', feature.id))
     // send shallow copy of feature to avoid changes during send
     sendMessage('update_feature', { ...feature })
   }
@@ -394,14 +394,14 @@ export default class extends Controller {
       event.preventDefault()
       event.stopPropagation()
       console.log("Copied feature to clipboard ", feature)
-      status('Feature copied to clipboard')
+      status(window.__('Feature copied to clipboard'))
     }
   }
 
   copyCoordinates(event) {
     event.preventDefault()
     const coords = event.currentTarget.dataset.coords
-    copyToClipboard(coords, "Coordinates copied to clipboard", event.currentTarget)
+    copyToClipboard(coords, window.__('Coordinates copied to clipboard'), event.currentTarget)
   }
 
   toggleCoordFormat(event) {

app/javascript/controllers/map/context_menu_controller.js

@@ -17,12 +17,12 @@ export default class extends Controller {
     const feature = getFeature(target.dataset.featureId, 'geojson')
 
     const vertexIndex = target.dataset.index
-    addUndoState(window.__('Feature update'), feature)
+    addUndoState('Feature update', feature)
     if (feature.geometry.type === 'LineString') { feature.geometry.coordinates.splice(vertexIndex, 1) }
     if (feature.geometry.type === 'Polygon') { feature.geometry.coordinates[0].splice(vertexIndex, 1) }
     applyFeatureUpdate(feature, { resetDraw: true, refreshRouteExtras: true, refreshKmMarkers: true })
     sendMessage('update_feature', { ...feature })
-    status('Point deleted')
+    status(window.__('Point deleted'))
     hideContextMenu()
   }
 
@@ -36,7 +36,7 @@ export default class extends Controller {
     const secondCoords = coords.slice(vertexIndex)
 
     // Keep original feature, shorten it to the first segment
-    addUndoState(window.__('Feature update'), feature)
+    addUndoState('Feature update', feature)
     feature.geometry.coordinates = firstCoords
     if (feature.properties.name) { feature.properties.name = `${feature.properties.name}_1` }
     renderLayers('geojson', true)
@@ -48,11 +48,11 @@ export default class extends Controller {
       geometry: { type: 'LineString', coordinates: secondCoords },
       properties: JSON.parse(JSON.stringify(feature.properties || {}))
     }
-    addUndoState(window.__('Feature added'), secondFeature)
+    addUndoState('Feature added', secondFeature)
     addFeature(secondFeature)
     sendMessage('new_feature', secondFeature)
 
-    status('Line cut into 2 segments')
+    status(window.__('Line cut into 2 segments'))
     hideContextMenu()
   }
 
@@ -63,7 +63,7 @@ export default class extends Controller {
     const feature = getFeature(target.dataset.featureId, 'geojson')
 
     if (feature.geometry.type !== 'LineString') { return }
-    addUndoState(window.__('Feature update'), feature)
+    addUndoState('Feature update', feature)
 
     // Reverse coordinates
     feature.geometry.coordinates.reverse()
@@ -92,7 +92,7 @@ export default class extends Controller {
 
     applyFeatureUpdate(feature, { resetDraw: true, refreshRouteExtras: true, refreshKmMarkers: true })
     sendMessage('update_feature', { ...feature })
-    status('Track reversed')
+    status(window.__('Track reversed'))
     hideContextMenu()
   }
 
@@ -106,7 +106,7 @@ export default class extends Controller {
       return
     }
     addFeature(feature)
-    addUndoState(window.__('Feature added'), feature)
+    addUndoState('Feature added', feature)
     // Geometries might arrive without elevation; fetch it before save
     if (feature.geometry.type === 'LineString' ) {
       updateElevation(feature).finally(() => {
@@ -121,14 +121,14 @@ export default class extends Controller {
   copyFeature(event) {
     const feature = getFeature(event.currentTarget.dataset.featureId, 'geojson')
     if (feature) {
-      copyToClipboard(JSON.stringify(feature), 'Feature copied to clipboard')
+      copyToClipboard(JSON.stringify(feature), window.__('Feature copied to clipboard'))
     }
     hideContextMenu()
   }
 
   deleteFeature(event) {
     const feature = getFeature(event.currentTarget.dataset.featureId, 'geojson')
-    if (feature && confirm(`Really delete this ${getFeatureTypeName(feature)}?`)) {
+    if (feature && confirm(window.__('Really delete this %{type}?').replace('%{type}', getFeatureTypeName(feature)))) {
       handleDelete({ features: [feature] })
     }
     hideContextMenu()

app/javascript/controllers/map/layers_controller.js

@@ -21,7 +21,7 @@ export default class extends Controller {
     const fileSize = (file.size / 1024).toFixed(2) // in KB
 
     if (fileSize > 2500 && !file.type.startsWith('image/')) {
-      status('File exceeds 2.5MB. Please simplify it, for example with mapshaper.org', 'error', 'medium', 8000)
+      status(window.__('File exceeds 2.5MB. Please simplify it, for example with mapshaper.org'), 'error', 'medium', 8000)
       return
     }
 
@@ -71,7 +71,8 @@ export default class extends Controller {
           } else {
             sendMessage('new_feature', feature)
           }
-          status('Added feature ' + i++ + '/' + geoJSON.features.length)
+          status(window.__('Added feature %{index}/%{total}')
+            .replace('%{index}', i++).replace('%{total}', geoJSON.features.length))
         })
 
         // Fly to the center of the imported features.
@@ -99,7 +100,7 @@ export default class extends Controller {
           }
         }
 
-        status('File imported')
+        status(window.__('File imported'))
         initLayersModal()
       }
 
@@ -134,7 +135,7 @@ export default class extends Controller {
       // redraw first geojson layer
       renderLayer(layers.find(l => l.type === 'geojson').id)
       sendMessage('new_feature', { ...feature })
-      status('Added image')
+      status(window.__('Added image'))
       flyToFeature(feature)
     })
   }
@@ -181,7 +182,7 @@ export default class extends Controller {
     const layerElement = event.target.closest('.layer-item')
     const layerId = layerElement.getAttribute('data-layer-id')
     const layer = layers.find(f => f.id === layerId)
-    addUndoState(window.__('Layer updated'), { ...layer.toJSON(), geojson: layer.geojson })
+    addUndoState('Layer updated', { ...layer.toJSON(), geojson: layer.geojson })
 
     layer.query = layerElement.querySelector('.overpass-query').value
     layer.name = layerElement.querySelector('.overpass-name').value
@@ -202,7 +203,7 @@ export default class extends Controller {
     const layerElement = event.target.closest('.layer-item')
     const layerId = layerElement.getAttribute('data-layer-id')
     const layer = layers.find(f => f.id === layerId)
-    addUndoState(window.__('Layer updated'), { ...layer.toJSON(), geojson: layer.geojson })
+    addUndoState('Layer updated', { ...layer.toJSON(), geojson: layer.geojson })
 
     layer.query = layerElement.querySelector('.raster-url').value
     layer.name = layerElement.querySelector('.raster-name').value
@@ -257,7 +258,7 @@ export default class extends Controller {
     const layerId = layerElement.getAttribute('data-layer-id')
     const layer = layers.find(l => l.id === layerId)
     const wasVisible = layer.show !== false
-    if (window.gon.map_mode === "rw") { addUndoState(window.__('Layer updated'), { ...layer.toJSON(), geojson: layer.geojson }) }
+    if (window.gon.map_mode === "rw") { addUndoState('Layer updated', { ...layer.toJSON(), geojson: layer.geojson }) }
 
     layer.show = !wasVisible
     setLayerVisibility(layer.sourceId, layer.show)
@@ -380,7 +381,7 @@ export default class extends Controller {
     let layer = createLayerInstance(layerData)
     layers.push(layer)
 
-    addUndoState(window.__('Layer added'), layerData)
+    addUndoState('Layer added', layerData)
     initLayersModal()
     initializeLayerSources(layerId)
     initializeLayerStyles(layerId)
@@ -390,12 +391,12 @@ export default class extends Controller {
 
   deleteLayer (event) {
     event.preventDefault()
-    if (!confirm('Really delete this layer?')) { return }
+    if (!confirm(window.__('Really delete this layer?'))) { return }
     const layerElement = event.target.closest('.layer-item')
     const layerId = layerElement.getAttribute('data-layer-id')
     const layer = layers.find(f => f.id === layerId)
 
-    addUndoState(window.__('Layer deleted'), { ...layer.toJSON(), geojson: layer.geojson })
+    addUndoState('Layer deleted', { ...layer.toJSON(), geojson: layer.geojson })
     layer.cleanup()
     layers.splice(layers.indexOf(layer), 1)
     removeGeoJSONSource(layer.sourceId)

app/javascript/controllers/map/settings_controller.js

@@ -56,7 +56,7 @@ export default class extends Controller {
         element.addEventListener('click', (event) => {
           const text = event.target.textContent
           if (text && text !== 'auto') {
-            copyToClipboard(text, 'Coordinates copied to clipboard')
+            copyToClipboard(text, window.__('Coordinates copied to clipboard'))
           }
         })
       }
@@ -212,7 +212,7 @@ export default class extends Controller {
     dom.loadStylesheet('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/v4-shims.min.css')
     descEasyMDE = new window.EasyMDE({
       element: document.getElementById('map-description-input'),
-      placeholder: 'Add a description text',
+      placeholder: window.__('Add a description text'),
       toolbar: ["bold", "italic", "heading", "code", "table", "|", "unordered-list", "horizontal-rule", "|", "link", "image", "preview"],
       minHeight: '4em',
       spellChecker: false,

app/javascript/controllers/map/share_controller.js

@@ -47,19 +47,19 @@ export default class extends Controller {
   copyOwnershipLink (e) {
     e.preventDefault()
     const ownershipLink = window.location.origin + document.querySelector('#share-ownership-link a').getAttribute('href')
-    copyToClipboard(ownershipLink, "Ownership link copied", e.currentTarget)
+    copyToClipboard(ownershipLink, window.__('Ownership link copied'), e.currentTarget)
   }
 
   copyEditLink (e) {
     e.preventDefault()
     const editLink = window.location.origin + document.querySelector('#share-edit-link a').getAttribute('href')
-    copyToClipboard(editLink, "Edit link copied", e.currentTarget)
+    copyToClipboard(editLink, window.__('Edit link copied'), e.currentTarget)
   }
 
   copyViewLink (e) {
     e.preventDefault()
     const viewLink = window.location.origin + document.querySelector('#share-view-link a').getAttribute('href')
-    copyToClipboard(viewLink, "View link copied", e.currentTarget)
+    copyToClipboard(viewLink, window.__('View link copied'), e.currentTarget)
   }
 
   nativeShareOwnershipLink (e) {
@@ -98,6 +98,6 @@ export default class extends Controller {
   copyEmbedCode (e) {
     e.preventDefault()
     const embedCode = document.querySelector('#embed-code').value
-    copyToClipboard(embedCode, "Embed code copied", e.currentTarget)
+    copyToClipboard(embedCode, window.__('Embed code copied'), e.currentTarget)
   }
 }

app/javascript/controllers/map_controller.js

@@ -66,7 +66,7 @@ export default class extends Controller {
     if (window.gon.map_mode !== 'rw') { return }
 
     if (!navigator.clipboard || !navigator.clipboard.readText) {
-      status('Clipboard paste requires HTTPS or localhost', 'warning')
+      status(window.__('Clipboard paste requires HTTPS or localhost'), 'warning')
       return
     }
 
@@ -76,7 +76,7 @@ export default class extends Controller {
       if (feature.type === "Feature") {
         feature.id = functions.featureId()
         addFeature(feature)
-        addUndoState(window.__('Feature added'), feature)
+        addUndoState('Feature added', feature)
         sendMessage('new_feature', feature)
       }
     } catch (err) {

app/javascript/controllers/maps_controller.js

@@ -46,7 +46,7 @@ export default class extends Controller {
   }
 
   async loadMaps() {
-    document.getElementById('map-list-count').innerText = 'Loading...'
+    document.getElementById('map-list-count').innerText = window.__('Loading...')
     const url = `${location.pathname}?search=${this.searchValue}&sort=${this.sortValue}&direction=${this.directionValue}`
     const response = await fetch(url, {
       headers: { "Accept": "text/vnd.turbo-stream.html" }

app/javascript/helpers/clipboard.js

@@ -46,7 +46,7 @@ export function fallbackCopyToClipboard (text, successMessage, iconElement = nul
       showCopySuccess(iconElement)
     }
   } catch (err) {
-    status('Failed to copy')
+    status(window.__('Failed to copy'))
     console.error('Fallback copy failed:', err)
   }
 

app/javascript/maplibre/animations.js

@@ -146,7 +146,7 @@ export class AnimatePolygonAnimation extends AnimationManager {
 }
 
 export function animateViewFromProperties () {
-  map.once('moveend', function () { status('Map view updated') })
+  map.once('moveend', function () { status(window.__('Map view updated')) })
   map.flyTo({
     center: mapProperties.center || mapProperties.default_center,
     zoom: mapProperties.zoom || mapProperties.default_zoom,