From a585dde182e97dce683ce86f5621859c2212ae73 Mon Sep 17 00:00:00 2001
From: Norbert Renner <norbert.renner@gmx.de>
Date: Sat, 30 Nov 2019 09:38:12 +0100
Subject: [PATCH] Add switch to turn off centering hovered data table entry on
 map (#241)

---
 css/style.css               | 13 +++++++++++++
 index.html                  | 13 ++++++++++---
 js/control/TrackMessages.js | 18 ++++++++++++++++--
 locales/en.json             |  1 +
 4 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/css/style.css b/css/style.css
index 3cb191a..35cccea 100644
--- a/css/style.css
+++ b/css/style.css
@@ -519,6 +519,19 @@ table.dataTable.display tbody tr.even:hover {
     justify-content: center;
 }
 
+/* corresponding to leaflet-sidebar-expand/-close in leaflet-sidebar-v2 */
+.sync-map {
+    float: right;
+    width: 36px;
+    height: 36px;
+    text-align: center;
+    cursor: pointer;
+    color: #333;
+}
+.sync-map.active {
+    color: #0074d9;
+}
+
 /*
  * CodeMirror
  */
diff --git a/index.html b/index.html
index 52a4132..fd8771a 100644
--- a/index.html
+++ b/index.html
@@ -737,9 +737,16 @@
 
                         <div class="leaflet-sidebar-pane" id="tab_data">
                             <h1 class="leaflet-sidebar-header">
-                                <span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span
-                                ><span class="leaflet-sidebar-expand"><i class="fa fa-expand"></i></span
-                                ><span data-i18n="sidebar.data.title">Data</span>
+                                <span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span>
+                                <span class="leaflet-sidebar-expand"><i class="fa fa-expand"></i></span>
+                                <span
+                                    id="data-sync-map"
+                                    class="sync-map active"
+                                    data-i18n="[title]sidebar.data.sync-map"
+                                    title="Synchronize map"
+                                    ><i class="fa fa-exchange"></i
+                                ></span>
+                                <span data-i18n="sidebar.data.title">Data</span>
                             </h1>
                             <table id="datatable" class="mini cell-border hover stripe"></table>
                         </div>
diff --git a/js/control/TrackMessages.js b/js/control/TrackMessages.js
index 5127717..472cae0 100644
--- a/js/control/TrackMessages.js
+++ b/js/control/TrackMessages.js
@@ -4,7 +4,9 @@ BR.TrackMessages = L.Class.extend({
             color: 'yellow',
             opacity: 0.8,
             weight: 8
-        }
+        },
+        // center hovered edge (way segment) on map
+        syncMap: true
     },
 
     // true when tab is shown, false when hidden
@@ -29,6 +31,9 @@ BR.TrackMessages = L.Class.extend({
         var table = document.getElementById('datatable');
         this.tableClassName = table.className;
         this.tableParent = table.parentElement;
+
+        var syncButton = document.getElementById('data-sync-map');
+        L.DomEvent.on(syncButton, 'click', this._toggleSyncMap, this);
     },
 
     update: function(polyline, segments) {
@@ -196,11 +201,20 @@ BR.TrackMessages = L.Class.extend({
             edgeLatLngs = trackLatLngs.slice(startIndex, endIndex + 1);
 
         this._selectedEdge = L.polyline(edgeLatLngs, this.options.edgeStyle).addTo(this._map);
-        this._map.panTo(this._selectedEdge.getBounds().getCenter());
+        if (this.options.syncMap) {
+            this._map.panTo(this._selectedEdge.getBounds().getCenter());
+        }
     },
 
     _handleHoverOut: function(evt) {
         this._map.removeLayer(this._selectedEdge);
         this._selectedEdge = null;
+    },
+
+    _toggleSyncMap: function(evt) {
+        var button = evt.currentTarget;
+
+        button.classList.toggle('active');
+        this.options.syncMap = !this.options.syncMap;
     }
 });
diff --git a/locales/en.json b/locales/en.json
index ede04e4..4e034ab 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -172,6 +172,7 @@
       "title": "Customize profile"
     },
     "data": {
+      "sync-map": "Synchronize map",
       "title": "Data"
     },
     "itinerary": {