Start to make turn-by-turn instructions clickable

diff --git a/app/assets/javascripts/routing.js.erb b/app/assets/javascripts/routing.js.erb
index ed95512528c153873555ffae6bd7b18b1616c835..f496262d2aac30aab377ecdcf8a5d8e0b8085f15 100644 (file)
--- a/app/assets/javascripts/routing.js.erb
+++ b/app/assets/javascripts/routing.js.erb
@@ -95,10 +95,13 @@ OSM.Routing=function(map,name,jqSearch) {
        // (we use OSRM's route_instructions format)
        // *** translations?
        r.setItinerary=function(steps) {
+               // Create base table
                $("#content").removeClass("overlay-sidebar");
                $('#sidebar_content').empty();
                var html='<h2><a class="geolink" href="#" onclick="$(~.close_directions~).click();return false;"><span class="icon close"></span></a>Directions</h2>'.replace(/~/g,"'");
-               html+="<table>";
+               html+="<table id='turnbyturn' />";
+        $('#sidebar_content').html(html);
+               // Add each row
                for (var i=0; i<steps.length; i++) {
                        var step=steps[i];
                        var instCodes=step[0].split('-');
@@ -115,13 +118,17 @@ OSM.Routing=function(map,name,jqSearch) {
                        else if (dist<5000) { dist=Math.round(dist/100)/10+"km"; }
                        else { dist=Math.round(dist/1000)+"km"; }
                        // Add to table
-                       html+="<tr>";
-                       html+="<td class='direction i"+instCodes[0]+"'> ";
-                       html+="<td class='instruction'>"+instText;
-                       html+="<td class='distance'>"+dist;
+                       var row=$("<tr class='turn'/>");
+                       row.append("<td class='direction i"+instCodes[0]+"'> ");
+                       row.append("<td class='instruction'>"+instText);
+                       row.append("<td class='distance'>"+dist);
+                       with ({n: i}) { row.on('click',function(e) { r.clickTurn(n); });
+                       }
+                       $('#turnbyturn').append(row);
                }
-               html+="</table>";
-        $('#sidebar_content').html(html);
+       };
+       r.clickTurn=function(num) {
+               console.log("clicked turn",num);
        };
 
 

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 6e402f3b850ad39733844331a2b6c022c276e837..d0732de746dc9732529d5cb3af3e340cc81d15c9 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -1018,6 +1018,12 @@ td.distance {
     text-align: right;
     font-size: x-small;
 }
+tr.turn {
+    cursor: pointer;
+}
+tr.turn:hover {
+    background: lighten($green, 30%); 
+}
 
 /* Rules for entity history */