kiwix/kiwix-js
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-js.git synced 2025-09-24 04:54:51 -04:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
+ 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
This commit is contained in:
mossroy 2014-03-20 16:37:29 +01:00
parent df77cfdf67
commit 2d4e949367
2 changed files with 917 additions and 888 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
www/index.html
View File

@ -77,7 +77,7 @@
Latitude/Longitude/MaxDistance: 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/> <input type="text" id="latitude" size="8" /> <input type="text" id="longitude" size="8" /> <input type="text" id="maxDistance" size="8" /><br/>
</div> </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;"> <div id="searchingForTitles" style="position: relative; z-index: 10; top: 20px; height: 0px; display: none;">
<img src="img/spinner.gif" alt="Please wait..." /> <img src="img/spinner.gif" alt="Please wait..." />
</div> </div>
@ -113,7 +113,6 @@
<h3>Feedback / helping / contributing</h3> <h3>Feedback / helping / contributing</h3>
This is a first version of Evopedia. There are many ways this could be enhanced. In particular : This is a first version of Evopedia. There are many ways this could be enhanced. In particular :
<ul> <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/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> <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> </ul>
@ -216,6 +215,8 @@
<div id="readingArticle" style="display: none;"> <div id="readingArticle" style="display: none;">
Reading article <span id="articleName"></span> from archive... Please wait <img src="img/spinner.gif" alt="Please wait..." /> Reading article <span id="articleName"></span> from archive... Please wait <img src="img/spinner.gif" alt="Please wait..." />
</div> </div>
<div id="geolocationProgress" style="display: none;">
</div>
<div id="articleContent">&nbsp;</div> <div id="articleContent">&nbsp;</div>
<br /> <br />
</article> </article>

50
www/js/app.js
View File

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