ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Make data row selectable, centers on map, disables hover sync (#241)

Browse source
This commit is contained in:
Norbert Renner 2019-11-30 12:18:15 +01:00
parent a585dde182
commit b57c4f2bf6
1 changed files with 35 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

43
js/control/TrackMessages.js
View file

@ -80,6 +80,7 @@ BR.TrackMessages = L.Class.extend({
// highlight track segment (graph edge) on row hover // highlight track segment (graph edge) on row hover
this._setEdges(polyline, segments); this._setEdges(polyline, segments);
$('#datatable tbody tr').hover(L.bind(this._handleHover, this), L.bind(this._handleHoverOut, this)); $('#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() { show: function() {
@ -192,23 +193,49 @@ BR.TrackMessages = L.Class.extend({
} }
}, },
_handleHover: function(evt) { _getRowEdge: function(tr) {
var tr = $(evt.currentTarget), var row = this._table.row($(tr)),
row = this._table.row(tr),
trackLatLngs = this._track.getLatLngs(), trackLatLngs = this._track.getLatLngs(),
startIndex = row.index() > 0 ? this._edges[row.index() - 1] : 0, startIndex = row.index() > 0 ? this._edges[row.index() - 1] : 0,
endIndex = this._edges[row.index()], endIndex = this._edges[row.index()],
edgeLatLngs = trackLatLngs.slice(startIndex, endIndex + 1); edgeLatLngs = trackLatLngs.slice(startIndex, endIndex + 1);
this._selectedEdge = L.polyline(edgeLatLngs, this.options.edgeStyle).addTo(this._map); return L.polyline(edgeLatLngs, this.options.edgeStyle);
if (this.options.syncMap) { },
this._map.panTo(this._selectedEdge.getBounds().getCenter());
_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) { _handleHoverOut: function(evt) {
this._map.removeLayer(this._selectedEdge); this._map.removeLayer(this._hoveredEdge);
this._selectedEdge = null; 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) { _toggleSyncMap: function(evt) {