Add version info, improve UI layout, and hide directions pane by default (#404)

DennisOSRM · Copilot · web-flow · commit 47db963c4734 · 2026-04-10T21:08:44.000+02:00
* Add version info, improve UI layout, and hide directions pane by default - Add build timestamp to hamburger menu via new version.js module - Inject timestamp at compile time using webpack DefinePlugin - Move scale widget to bottom-right (350px from right edge) - Hide directions pane by default, show when route is computed - Hide pane when waypoints are cleared - Update styling for version info display with white text Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> * Address PR #404 review feedback - version.js: replace try/catch with isNaN(date.getTime()) check so invalid date strings fall back to the raw timestamp correctly - tools.js: use this._local['Build'] for the version label so the tools menu remains fully translatable - i18n/*.js: add 'Build' translation key to all 13 locale files - index.js (routesfound): re-query .leaflet-routing-container inside the event handler instead of capturing it once at startup - index.js (waypointschanged): hide pane only when fewer than 2 valid waypoints exist, avoiding flicker during partial edits - css/site.css: remove unused #version-info rule (JS uses .leaflet-osrm-tools-version class) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
diff --git a/bundle.js b/bundle.js
diff --git a/bundle.js.map b/bundle.js.map
diff --git a/bundle.raw.js b/bundle.raw.js
diff --git a/css/site.css b/css/site.css
@@ -52,8 +52,8 @@
 /* Scale position */
 .leaflet-control-scale {
   position: absolute;
-  left: 320px;
   bottom: 1px;
+  right: 350px;
 }
 
 /* Zoom control position */
@@ -920,3 +920,22 @@ td.distance {
     margin-right: -400px !important;
     transition: 0.5s;
 }
+
+.leaflet-osrm-tools-version {
+    padding: 12px 8px;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    margin-top: 8px;
+    font-size: 12px;
+    color: #fff;
+}
+
+.leaflet-osrm-tools-version-label {
+    font-weight: bold;
+    margin-right: 4px;
+    color: #fff;
+}
+
+.leaflet-osrm-tools-version-value {
+    cursor: help;
+    color: #fff;
+}
diff --git a/i18n/da.js b/i18n/da.js
@@ -15,5 +15,6 @@ module.exports = {
   'Via point - press enter to drop marker': 'Via - tryk for at placere delmålspunkt',
   'Bike': 'Cykel',
   'Car': 'Bil',
-  'Foot': 'Til fods'
+  'Foot': 'Til fods',
+  'Build': 'Bygget: '
 };
diff --git a/i18n/de.js b/i18n/de.js
@@ -15,5 +15,6 @@ module.exports = {
   'Via point - press enter to drop marker': 'Zwischenstop - drücken um einen Marker zu plazieren',
   'Bike': 'Fahrrad',
   'Car': 'Auto',
-  'Foot': 'Fussgänger'
+  'Foot': 'Fussgänger',
+  'Build': 'Build: '
 };
diff --git a/i18n/en.js b/i18n/en.js
@@ -15,5 +15,6 @@ module.exports = {
   'Via point - press enter to drop marker': 'Via point - press enter to drop marker',
   'Bike': 'Bike',
   'Car': 'Car',
-  'Foot': 'Foot'
+  'Foot': 'Foot',
+  'Build': 'Build: '
 };
diff --git a/i18n/es.js b/i18n/es.js
@@ -15,5 +15,6 @@ module.exports = {
   'Via point - press enter to drop marker': 'Punto en la vía - presione enter para colocar un marcador',
   'Bike': 'Bicicleta',
   'Car': 'Coche',
-  'Foot': 'Peatón'
+  'Foot': 'Peatón',
+  'Build': 'Compilación: '
 };
diff --git a/i18n/fa.js b/i18n/fa.js
@@ -9,5 +9,6 @@ module.exports = {
   'Select language': 'انتخاب زبان',
   'Start - press enter to drop marker': 'شروع - برای درج نشانه روی نقشه اینتر بزنید',
   'End - press enter to drop marker': 'پایان - برای درج نشانه روی نقشه اینتر بزنید',
-  'Via point - press enter to drop marker': 'مسیر میانه - برای درج نشانه روی نقشه اینتر بزنید'
+  'Via point - press enter to drop marker': 'مسیر میانه - برای درج نشانه روی نقشه اینتر بزنید',
+  'Build': 'بیلد: '
 };
diff --git a/i18n/fr.js b/i18n/fr.js
@@ -15,5 +15,6 @@ module.exports = {
   'Via point - press enter to drop marker': 'Étape intermédiaire - appuyez sur Entrée pour placer le marqueur',
   'Bike': 'Vélo',
   'Car': 'Voiture',
-  'Foot': 'Piéton'
+  'Foot': 'Piéton',
+  'Build': 'Build : '
 };
diff --git a/i18n/hu.js b/i18n/hu.js
@@ -9,5 +9,6 @@
   'Select language': 'Nyelv kiválasztása',
   'Start - press enter to drop marker': 'Start - nyomjon entert a kezdőpont kijelöléséhez',
   'End - press enter to drop marker': 'Cél - nyomjon entert a cél kijelöléséhez',
-  'Via point - press enter to drop marker': 'Köztes megálló - nyomjon entert a köztes pont kijelöléséhez'
+  'Via point - press enter to drop marker': 'Köztes megálló - nyomjon entert a köztes pont kijelöléséhez',
+  'Build': 'Build: '
 };
diff --git a/i18n/it.js b/i18n/it.js
@@ -15,5 +15,6 @@ module.exports = {
   'Via point - press enter to drop marker': 'Punto di passaggio - premere invio per rilasciare un marcatore',
   'Bike': 'Bicicletta',
   'Car': 'Auto',
-  'Foot': 'A piedi'
+  'Foot': 'A piedi',
+  'Build': 'Build: '
 };
diff --git a/i18n/ja.js b/i18n/ja.js
@@ -9,5 +9,6 @@ module.exports = {
   'Select language': '言語を選択',
   'Start - press enter to drop marker': '出発地 – ピンを置くにはEnterを押して下さい',
   'End - press enter to drop marker': '目的地 - ピンを置くにはEnterを押して下さい',
-  'Via point - press enter to drop marker': '経由地 - ピンを置くにはEnterを押してください'
+  'Via point - press enter to drop marker': '経由地 - ピンを置くにはEnterを押してください',
+  'Build': 'ビルド: '
 };
diff --git a/i18n/pt-BR.js b/i18n/pt-BR.js
@@ -9,5 +9,6 @@ module.exports = {
   'Select language': 'Selecione a linguagem',
   'Start - press enter to drop marker': 'Início - pressione enter para posicionar o marcador',
   'End - press enter to drop marker': 'Fim - pressione enter para posicionar o marcador',
-  'Via point - press enter to drop marker': 'Via point - pressione enter para posicionar o marcador'
+  'Via point - press enter to drop marker': 'Via point - pressione enter para posicionar o marcador',
+  'Build': 'Build: '
 };
diff --git a/i18n/ru.js b/i18n/ru.js
@@ -9,5 +9,6 @@ module.exports = {
   'Select language': 'Выбрать язык',
   'Start - press enter to drop marker': 'Начало - нажмите Enter, чтобы удалить маркер',
   'End - press enter to drop marker': 'Конец - нажмите Enter, чтобы удалить маркер',
-  'Via point - press enter to drop marker': 'Промежуточная точка - нажмите Enter, чтобы удалить маркер'
+  'Via point - press enter to drop marker': 'Промежуточная точка - нажмите Enter, чтобы удалить маркер',
+  'Build': 'Сборка: '
 };
diff --git a/i18n/sv.js b/i18n/sv.js
@@ -9,5 +9,6 @@ module.exports = {
   'Select language': 'Välj språk',
   'Start - press enter to drop marker': 'Start - tryck för att placera startpunkt',
   'End - press enter to drop marker': 'Mål - tryck för att placera slutpunkt',
-  'Via point - press enter to drop marker': 'Via - tryck för att placera delmålspunkt'
+  'Via point - press enter to drop marker': 'Via - tryck för att placera delmålspunkt',
+  'Build': 'Build: '
 };
diff --git a/i18n/vi.js b/i18n/vi.js
@@ -9,5 +9,6 @@ module.exports = {
   'Select language': 'Chọn ngôn ngữ',
   'Start - press enter to drop marker': 'Khởi hành – bấm Enter để thả ghim',
   'End - press enter to drop marker': 'Đến – bấm Enter để thả ghim',
-  'Via point - press enter to drop marker': 'Qua – bấm Enter để thả ghim'
+  'Via point - press enter to drop marker': 'Qua – bấm Enter để thả ghim',
+  'Build': 'Build: '
 };
diff --git a/i18n/zh-Hans.js b/i18n/zh-Hans.js
@@ -9,5 +9,6 @@ module.exports = {
   'Select language': 'Select language',
   'Start - press enter to drop marker': 'Start - press enter to drop marker',
   'End - press enter to drop marker': 'End - press enter to drop marker',
-  'Via point - press enter to drop marker': 'Via point - press enter to drop marker'
+  'Via point - press enter to drop marker': 'Via point - press enter to drop marker',
+  'Build': '构建: '
 };
diff --git a/src/index.js b/src/index.js
@@ -50,7 +50,7 @@ L.control.layers(mapLayer, overlay, {
   position: 'bottomleft'
 }).addTo(map);
 
-L.control.scale().addTo(map);
+L.control.scale({ position: 'bottomright' }).addTo(map);
 
 /* Store User preferences */
 // store baselayer changes
@@ -186,6 +186,20 @@ var lrmControl = L.Routing.control(Object.assign(controlOptions, {
 var toolsControl = tools.control(localization.get(mergedOptions.language), localization.getLanguages(), options.tools).addTo(map);
 var state = state(map, lrmControl, toolsControl, mergedOptions);
 
+// Hide directions pane by default
+var routingContainer = document.querySelector('.leaflet-routing-container');
+if (routingContainer) {
+  routingContainer.classList.add('leaflet-routing-container-hide');
+}
+
+// Show pane when route is computed
+lrmControl.on('routesfound', function(e) {
+  var container = document.querySelector('.leaflet-routing-container');
+  if (container) {
+    container.classList.remove('leaflet-routing-container-hide');
+  }
+});
+
 plan.on('waypointgeocoded', function(e) {
   if (plan._waypoints.filter(function(wp) {
     return !!wp.latLng; 
@@ -250,15 +264,19 @@ lrmControl.on('routeselected', function(e) {
   toolsControl.setRouteGeoJSON(routeGeoJSON);
 });
 plan.on('waypointschanged', function(e) {
-  if (!e.waypoints ||
-      e.waypoints.filter(function(wp) {
-        return !wp.latLng; 
-      }).length > 0) {
+  var validCount = e.waypoints ? e.waypoints.filter(function(wp) {
+    return !!wp.latLng;
+  }).length : 0;
+  if (validCount < 2) {
     toolsControl.setRouteGeoJSON(null);
+    var container = document.querySelector('.leaflet-routing-container');
+    if (container) {
+      container.classList.add('leaflet-routing-container-hide');
+    }
   }
 });
 
-locate.locate({
+L.control.locate({
   follow: false,
   setView: true,
   remainActive: false,
diff --git a/src/tools.js b/src/tools.js
@@ -3,6 +3,7 @@
 var L = require('leaflet');
 var FileSaver = require('file-saver');
 var buildGPX = require('./gpx');
+var version = require('./version');
 var Control = L.Control.extend({
   includes: L.Mixin.Events,
   options: {
@@ -60,6 +61,7 @@ var Control = L.Control.extend({
     L.DomEvent.on(gpxButton, 'click', this._downloadGPX, this);
     this._localizationContainer = L.DomUtil.create('div', 'leaflet-osrm-tools-localization', this._container);
     this._createLocalizationList(this._localizationContainer);
+    this._createVersionInfo(this._container);
     return this._container;
   },
 
@@ -145,6 +147,16 @@ var Control = L.Control.extend({
         option.setAttribute('selected', '');
       }
     });
+  },
+
+  _createVersionInfo: function(container) {
+    var versionInfo = version.getVersionInfo();
+    var versionContainer = L.DomUtil.create('div', 'leaflet-osrm-tools-version', container);
+    var versionLabel = L.DomUtil.create('span', 'leaflet-osrm-tools-version-label', versionContainer);
+    versionLabel.textContent = this._local['Build'] || 'Build: ';
+    var versionValue = L.DomUtil.create('span', 'leaflet-osrm-tools-version-value', versionContainer);
+    versionValue.textContent = versionInfo.formatted;
+    versionValue.setAttribute('title', versionInfo.timestamp);
   }
 });
 
diff --git a/src/version.js b/src/version.js
@@ -0,0 +1,19 @@
+'use strict';
+
+module.exports = {
+  buildTimestamp: typeof __BUILD_TIMESTAMP__ !== 'undefined' ? __BUILD_TIMESTAMP__ : 'unknown',
+  getVersionInfo: function() {
+    return {
+      timestamp: this.buildTimestamp,
+      formatted: this.formatTimestamp(this.buildTimestamp)
+    };
+  },
+  formatTimestamp: function(timestamp) {
+    if (timestamp === 'unknown') return 'unknown';
+    var date = new Date(timestamp);
+    if (isNaN(date.getTime())) {
+      return timestamp;
+    }
+    return date.toLocaleString();
+  }
+};
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,6 +1,7 @@
 'use strict';
 
 const path = require('path');
+const webpack = require('webpack');
 
 module.exports = {
   entry: './src/index.js',
@@ -25,5 +26,10 @@ module.exports = {
       stream: false,
       buffer: false
     }
-  }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      __BUILD_TIMESTAMP__: JSON.stringify(new Date().toISOString())
+    })
+  ]
 };
