refs #44 fix search placeholder, loading icon when routing

css/style.css

@@ -477,6 +477,9 @@ tr.selected td {
     text-align: center;
 }
 /* Overriden routing/geocoder style */
+.leaflet-routing-reverse-waypoints.icon-loading-small::after {
+    content: '';
+}
 .leaflet-routing-reverse-waypoints,
 .leaflet-routing-add-waypoint {
     width: 25px !important;

js/script.js

@@ -548,7 +548,10 @@
                 },
                 pointMarkerStyle: {radius: 5, color: '#03f', fillColor: 'white', opacity: 1, fillOpacity: 0.7},
                 createMarker: this.createMarker
-            }).on('routingerror', this.onRoutingError);
+            })
+            .on('routingerror', this.onRoutingError)
+            .on('routingstart', this.onRoutingStart)
+            .on('routesfound', this.onRoutingEnd);
             //this.setRouter(this.ghRouter);
             //console.log(this.control);
 
@@ -593,6 +596,17 @@
 
         onRoutingError: function(e) {
             OC.Notification.showTemporary(t('maps', 'Routing error: ') + e.error.target.responseText);
+            routingController.onRoutingEnd();
+        },
+
+        onRoutingStart: function(e) {
+            $('#navigation-routing').addClass('icon-loading-small');
+            $('.leaflet-routing-reverse-waypoints').addClass('icon-loading-small');
+        },
+
+        onRoutingEnd: function(e) {
+            $('#navigation-routing').removeClass('icon-loading-small');
+            $('.leaflet-routing-reverse-waypoints').removeClass('icon-loading-small');
         },
 
         // this has been tested with graphhopper

templates/content/index.php

@@ -46,7 +46,7 @@ style('maps', 'style');
 ?>
 <div id="search">
     <form id="search-form">
-        <input type="text" placehoder="Search..." id="search-term" />
+        <input type="text" placeholder="<?php p($l->t('Search...')); ?>" id="search-term" />
         <input type="submit" id="search-submit" value="" class="icon-search">
     </form>
 </div>