From a585dde182e97dce683ce86f5621859c2212ae73 Mon Sep 17 00:00:00 2001 From: Norbert Renner Date: Sat, 30 Nov 2019 09:38:12 +0100 Subject: [PATCH 1/4] 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 3cb191af..35cccea6 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 52a41323..fd8771ab 100644 --- a/index.html +++ b/index.html @@ -737,9 +737,16 @@

- Data + + + + Data

diff --git a/js/control/TrackMessages.js b/js/control/TrackMessages.js index 51277171..472cae05 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 ede04e4e..4e034ab8 100644 --- a/locales/en.json +++ b/locales/en.json @@ -172,6 +172,7 @@ "title": "Customize profile" }, "data": { + "sync-map": "Synchronize map", "title": "Data" }, "itinerary": { From b57c4f2bf65553dde1057be3f240b7c622078439 Mon Sep 17 00:00:00 2001 From: Norbert Renner Date: Sat, 30 Nov 2019 12:18:15 +0100 Subject: [PATCH 2/4] Make data row selectable, centers on map, disables hover sync (#241) --- js/control/TrackMessages.js | 43 ++++++++++++++++++++++++++++++------- 1 file changed, 35 insertions(+), 8 deletions(-) diff --git a/js/control/TrackMessages.js b/js/control/TrackMessages.js index 472cae05..22450e60 100644 --- a/js/control/TrackMessages.js +++ b/js/control/TrackMessages.js @@ -80,6 +80,7 @@ BR.TrackMessages = L.Class.extend({ // highlight track segment (graph edge) on row hover this._setEdges(polyline, segments); $('#datatable tbody tr').hover(L.bind(this._handleHover, this), L.bind(this._handleHoverOut, this)); + $('#datatable tbody').on('click', 'tr', L.bind(this._toggleSelected, this)); }, show: function() { @@ -192,23 +193,49 @@ BR.TrackMessages = L.Class.extend({ } }, - _handleHover: function(evt) { - var tr = $(evt.currentTarget), - row = this._table.row(tr), + _getRowEdge: function(tr) { + var row = this._table.row($(tr)), trackLatLngs = this._track.getLatLngs(), startIndex = row.index() > 0 ? this._edges[row.index() - 1] : 0, endIndex = this._edges[row.index()], edgeLatLngs = trackLatLngs.slice(startIndex, endIndex + 1); - this._selectedEdge = L.polyline(edgeLatLngs, this.options.edgeStyle).addTo(this._map); - if (this.options.syncMap) { - this._map.panTo(this._selectedEdge.getBounds().getCenter()); + return L.polyline(edgeLatLngs, this.options.edgeStyle); + }, + + _handleHover: function(evt) { + var tr = evt.currentTarget; + + this._hoveredEdge = this._getRowEdge(tr).addTo(this._map); + if (this.options.syncMap && !this._selectedEdge) { + this._map.panTo(this._hoveredEdge.getBounds().getCenter()); } }, _handleHoverOut: function(evt) { - this._map.removeLayer(this._selectedEdge); - this._selectedEdge = null; + this._map.removeLayer(this._hoveredEdge); + this._hoveredEdge = null; + }, + + _toggleSelected: function(evt) { + var tr = evt.currentTarget; + + if (tr.classList.toggle('selected')) { + if (this._selectedEdge) { + // no multi-select, remove selection of other row + // (simpler to implement and to use?) + this._map.removeLayer(this._selectedEdge); + this._selectedRow.classList.remove('selected'); + } + this._selectedEdge = this._getRowEdge(tr).addTo(this._map); + this._selectedRow = tr; + + this._map.panTo(this._selectedEdge.getCenter()); + } else { + this._map.removeLayer(this._selectedEdge); + this._selectedEdge = null; + this._selectedRow = null; + } }, _toggleSyncMap: function(evt) { From 0781bb85dc35aeebd86524e98c83b32044ccdcad Mon Sep 17 00:00:00 2001 From: Norbert Renner Date: Sat, 30 Nov 2019 12:27:26 +0100 Subject: [PATCH 3/4] Use Polyline.getCenter instead of bounds to center hover on map (#241) Returns point on line at half distance instead of centroid of bounds, which can be far off the line for curved lines and not show line at high zooms. --- js/control/TrackMessages.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/control/TrackMessages.js b/js/control/TrackMessages.js index 22450e60..f834af49 100644 --- a/js/control/TrackMessages.js +++ b/js/control/TrackMessages.js @@ -208,7 +208,7 @@ BR.TrackMessages = L.Class.extend({ this._hoveredEdge = this._getRowEdge(tr).addTo(this._map); if (this.options.syncMap && !this._selectedEdge) { - this._map.panTo(this._hoveredEdge.getBounds().getCenter()); + this._map.panTo(this._hoveredEdge.getCenter()); } }, From 57fea5e2569460f911e5a5bd906e92ee23bd27bf Mon Sep 17 00:00:00 2001 From: Norbert Renner Date: Tue, 3 Dec 2019 11:29:02 +0100 Subject: [PATCH 4/4] Set different hover background color for selected data row --- css/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css/style.css b/css/style.css index 35cccea6..1f1ae29e 100644 --- a/css/style.css +++ b/css/style.css @@ -388,6 +388,10 @@ table.dataTable.display tbody tr.odd:hover, table.dataTable.display tbody tr.even:hover { background-color: rgba(255, 255, 0, 0.2); } +table.dataTable.hover tbody tr:hover.selected, +table.dataTable.display tbody tr:hover.selected { + background-color: #bcc8b8; +} /* * No-go areas