nakarte

commit 7b634cf228baa92db7f713edb6362f12b14f7354
parent 06dad17cfaecde9478ab2a013f522411d8a73ee4
Author: Sergej Orlov <wladimirych@gmail.com>
Date:   Sat,  3 Nov 2018 22:40:00 +0100

highlight track when mouse over track row in controll; show tooltip when mouse over track #135

Diffstat:
M
src/lib/leaflet.control.track-list/track-list.css
 | 
7
++++---
M
src/lib/leaflet.control.track-list/track-list.js
 | 
29
++++++++++++++++++++++++++++-

2 files changed, 32 insertions(+), 4 deletions(-)
diff --git a/src/lib/leaflet.control.track-list/track-list.css b/src/lib/leaflet.control.track-list/track-list.css
@@ -262,10 +262,11 @@
     margin-top: 2px;
 }
 
-.leaflet-control-tracklist .hover td {
+.leaflet-control-tracklist .hover,
+.leaflet-control-tracklist tr:hover {
     background-color: rgb(93%, 93%, 93%);
 }
 
-.leaflet-control-tracklist .edit td {
-    background-color: rgb(217, 232, 255);
+.leaflet-control-tracklist .edit {
+    background-color: rgb(217, 232, 255) !important;
 }
 \ No newline at end of file
diff --git a/src/lib/leaflet.control.track-list/track-list.js b/src/lib/leaflet.control.track-list/track-list.js
@@ -92,7 +92,12 @@ L.Control.TrackList = L.Control.extend({
                 </div>
                 <div class="tracks-rows-wrapper" data-bind="style: {maxHeight: trackListHeight}">
                 <table class="tracks-rows"><tbody data-bind="foreach: {data: tracks, as: 'track'}">
-                    <tr data-bind="event: {contextmenu: $parent.showTrackMenu.bind($parent)}, css: {hover: hover() && $parent.tracks().length > 1, edit: isEdited() && $parent.tracks().length > 1}">
+                    <tr data-bind="event: {
+                                       contextmenu: $parent.showTrackMenu.bind($parent),
+                                       mouseenter: $parent.highLightTrack.bind($parent, track),
+                                       mouseleave: $parent.highLightTrack.bind($parent, null)
+                                   },
+                                   css: {hover: hover() && $parent.tracks().length > 1, edit: isEdited() && $parent.tracks().length > 1}">
                         <td><input type="checkbox" class="visibility-switch" data-bind="checked: track.visible"></td>
                         <td><div class="color-sample" data-bind="style: {backgroundColor: $parent.colors[track.color()]}, click: $parent.onColorSelectorClicked.bind($parent)"></div></td>
                         <td><div class="track-name-wrapper"><div class="track-name" data-bind="text: track.name, attr: {title: track.name}, click: $parent.setViewToTrack.bind($parent)"></div></div></td>
@@ -908,6 +913,7 @@ L.Control.TrackList = L.Control.extend({
             track.visible.subscribe(this.onTrackVisibilityChanged.bind(this, track));
             track.measureTicksShown.subscribe(this.setTrackMeasureTicksVisibility.bind(this, track));
             track.color.subscribe(this.onTrackColorChanged.bind(this, track));
+            track.feature.bindTooltip(() => track.name(), {sticky: true});
 
             //this.onTrackColorChanged(track);
             this.onTrackVisibilityChanged(track);
@@ -917,6 +923,27 @@ L.Control.TrackList = L.Control.extend({
             return track;
         },
 
+        highLightTrack: function(track) {
+            if (this._trackHighlight) {
+                this._trackHighlight.removeFrom(this._map);
+                this._trackHighlight = null;
+            }
+            if (track) {
+                const trackHighlight = L.featureGroup([]);
+
+                track.feature.eachLayer((line) => {
+                    L.polyline(line.getLatLngs()).addTo(trackHighlight);
+                });
+
+                trackHighlight.setStyle({
+                    color: 'yellow',
+                    weight: '15',
+                    opacity: 0.5
+                });
+                trackHighlight.addTo(this._map).bringToBack();
+                this._trackHighlight = trackHighlight;
+            }
+        },
 
         setMarkerIcon: function(marker) {
             var symbol = 'marker',