Give more info to the user about the progress of the articles nearby search : geolocation, then looking for titles around

+ better handling if the user canceled the operation (simply by starting doing something else). In this case, we have to ignore the callback of geolocation

www/index.html

@@ -77,7 +77,7 @@
                         Latitude/Longitude/MaxDistance:
                         <input type="text" id="latitude" size="8" /> <input type="text" id="longitude" size="8" /> <input type="text" id="maxDistance" size="8" /><br/>
                     </div>
-                    or <a href="#" id="btnArticlesNearby">Find articles around me</a> (<a href="#" id="btnToggleArticlesNearbyExpertMode">toggle</a> expert mode) or <a href="#" id="btnRandomArticle">Go to a random article</a><br/>
+                    or <a href="#" id="btnArticlesNearby">Find articles around me</a> (toggle <a href="#" id="btnToggleArticlesNearbyExpertMode">expert mode</a>) or <a href="#" id="btnRandomArticle">Go to a random article</a><br/>
                     <div id="searchingForTitles" style="position: relative; z-index: 10; top: 20px; height: 0px; display: none;">
                         <img src="img/spinner.gif" alt="Please wait..." />
                     </div>
@@ -113,7 +113,6 @@
                     <h3>Feedback / helping / contributing</h3>
                     This is a first version of Evopedia. There are many ways this could be enhanced. In particular :
                     <ul>
-                        <li><a href="https://github.com/mossroy/evopedia-html5/issues/9" target="_blank">Issue #9</a> : Some features of the original application still have to be implemented : in particular the "Articles nearby" feature (geolocation)</li>
                         <li><a href="https://github.com/mossroy/evopedia-html5/issues/13" target="_blank">Issue #13</a> : All the user interface is in English : I plan to translate it at least in French. If you feel able to translate it in your language, please <a href="mailto:mossroy@free.fr?subject=%5BEvopedia%5D%20Translating%20Evopedia%20HTML5">contact me by email</a></li>
                         <li><a href="https://github.com/mossroy/evopedia-html5/issues/4" target="_blank">Issue #4</a> : The performance when reading an article can probably be improved. I'm working on it</li>
                     </ul>
@@ -216,6 +215,8 @@
                 <div id="readingArticle" style="display: none;">
                     Reading article <span id="articleName"></span> from archive... Please wait <img src="img/spinner.gif" alt="Please wait..." />
                 </div>
+                <div id="geolocationProgress" style="display: none;">
+                </div>
                 <div id="articleContent">&nbsp;</div>
                 <br />
             </article>

www/js/app.js

@@ -52,6 +52,7 @@ define(function(require) {
         searchTitlesFromPrefix($('#prefix').val());
         $("#welcomeText").hide();
         $("#readingArticle").hide();
+        $('#geolocationProgress').hide();
         if ($('#navbarToggle').is(":visible") && $('#liHomeNav').is(':visible')) {
             $('#navbarToggle').click();
         }
@@ -63,6 +64,7 @@ define(function(require) {
     $('#prefix').on('keyup', function(e) {
         if (localArchive !== null && localArchive.titleFile !== null) {
             onKeyUpPrefix(e);
+            $('#geolocationProgress').hide();
         }
     });
     $("#btnArticlesNearby").on("click", function(e) {
@@ -86,6 +88,8 @@ define(function(require) {
         $("#welcomeText").hide();
         $('#titleList').hide();
         $("#readingArticle").hide();
+        $('#geolocationProgress').hide();
+        $('#searchingForTitles').hide();
         if ($('#navbarToggle').is(":visible") && $('#liHomeNav').is(':visible')) {
             $('#navbarToggle').click();
         }
@@ -124,6 +128,7 @@ define(function(require) {
         $('#prefix').focus();
         $("#titleList").html("");
         $("#readingArticle").hide();
+        $('#geolocationProgress').hide();
         $("#articleContent").html("");
         return false;
     });
@@ -142,6 +147,7 @@ define(function(require) {
         $("#welcomeText").hide();
         $('#titleList').hide();
         $("#readingArticle").hide();
+        $('#geolocationProgress').hide();
         $('#articleContent').hide();
         return false;
     });
@@ -160,6 +166,7 @@ define(function(require) {
         $("#welcomeText").hide();
         $('#titleList').hide();
         $("#readingArticle").hide();
+        $('#geolocationProgress').hide();
         $('#articleContent').hide();
         return false;
     });
@@ -358,6 +365,7 @@ define(function(require) {
         titleListDiv.html(titleListDivHtml);
         $("#titleList a").on("click",handleTitleClick);
         $('#searchingForTitles').hide();
+        $('#geolocationProgress').hide();
         $('#titleList').show();
     }
     
@@ -575,14 +583,16 @@ define(function(require) {
                 if (navigator.geolocation) {
                     var geo_options = {
                         enableHighAccuracy: false,
-                        maximumAge: 1800000, // 30 minutes
+                        maximumAge: 600000, // 10 minutes
-                        timeout: 10000 // 10 seconds
+                        timeout: Infinity 
                     };
 
                     function geo_success(pos) {
                         var crd = pos.coords;
                         
-                        alert("Found your location : latitude=" + crd.latitude + ", longitude=" + crd.longitude);
+                        if ($('#geolocationProgress').is(":visible")) {
+                            $('#geolocationProgress').html("Found your location : latitude=" + crd.latitude + ", longitude=" + crd.longitude
+                                    + "<br/>Now looking for articles around this location...");
 
                             var rectangle = new geometry.rect(
                                     crd.latitude - maxDistance,
@@ -591,17 +601,32 @@ define(function(require) {
                                     maxDistance * 2);
 
                             localArchive.getTitlesInCoords(rectangle, MAX_SEARCH_RESULT_SIZE, populateListOfTitles);
+                        }
+                        else {
+                            // If the geolocationProgress div is not visible, it's because it has been canceled
+                            // So we simply ignore the result
+                        }
                     };
 
                     function geo_error(err) {
+                        if ($('#geolocationProgress').is(":visible")) {
                             alert("Unable to geolocate your device : " + err.code + " : " + err.message);
+                            $('#geolocationProgress').hide();
                             $('#searchingForTitles').hide();
+                        }
+                        else {
+                            // If the geolocationProgress div is not visible, it's because it has been canceled
+                            // So we simply ignore the result
+                        }
                     };
                     
+                    $('#geolocationProgress').html("Trying to geolocate your device...");
+                    $('#geolocationProgress').show();
                     navigator.geolocation.getCurrentPosition(geo_success, geo_error, geo_options);
                 }
                 else {
                     alert("Geolocation is not supported (or disabled) on your device, or on your browser");
+                    $('#searchingForTitles').hide();
                 }
             }
             else {
@@ -612,6 +637,9 @@ define(function(require) {
                         maxDistance * 2,
                         maxDistance * 2);
                         
+                $('#geolocationProgress').html("Looking for articles around the location you gave...");
+                $('#geolocationProgress').show();
+
                 localArchive.getTitlesInCoords(rectangle, MAX_SEARCH_RESULT_SIZE, populateListOfTitles);
             }