Display spinner icon when asynchronous tasks are done

This commit is contained in:
mossroy 2013-06-06 22:05:58 +02:00
parent ff6072bb26
commit ec5e4cd2f0
3 changed files with 339 additions and 329 deletions

BIN
img/spinner.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 583 B

View File

@ -66,7 +66,7 @@ License:
from the same dump :<br /> <input type="file" id="dataFiles" multiple /> from the same dump :<br /> <input type="file" id="dataFiles" multiple />
</div> </div>
<div id="scanningForArchives" style="display: none;"> <div id="scanningForArchives" style="display: none;">
<br /> Scanning your sdcard for archives... Please wait <br /> Scanning your sdcard for archives... Please wait <img src="img/spinner.gif" />
</div> </div>
<div id="chooseArchiveFromLocalStorage" style="display: none;"> <div id="chooseArchiveFromLocalStorage" style="display: none;">
<br /> Please select the archive you want to use : <select id="archiveList"></select> <br /> Please select the archive you want to use : <select id="archiveList"></select>
@ -74,10 +74,14 @@ License:
<br /> Find titles starting with : <br /> Find titles starting with :
<input type="text" id="prefix" value="" />&nbsp; <input type="text" id="prefix" value="" />&nbsp;
<input type="button" id="searchTitles" value="Search titles" /> <input type="button" id="searchTitles" value="Search titles" />
<img id="searchingForTitles" src="img/spinner.gif" style="display: none;"/>
<br /> Choose a title from the filtered list : <br /> Choose a title from the filtered list :
<select id="titleList"></select> <select id="titleList"></select>
<br /> <br />
<input type="button" id="readData" value="Read article from dump" /> <input type="button" id="readData" value="Read article from dump" />
<div id="readingArticle" style="display: none;">
Reading article from dump... Please wait <img src="img/spinner.gif" />
</div>
<div id="articleContent">&nbsp;</div> <div id="articleContent">&nbsp;</div>
<hr /> <hr />
</div> </div>

View File

@ -124,6 +124,7 @@ define(function(require) {
* with a binary search inside the index file) * with a binary search inside the index file)
*/ */
function searchTitlesFromPrefix(prefix) { function searchTitlesFromPrefix(prefix) {
$('#searchingForTitles').show();
if (localArchive.titleFile) { if (localArchive.titleFile) {
localArchive.findTitlesWithPrefix(prefix.trim(), populateDropDownListOfTitles); localArchive.findTitlesWithPrefix(prefix.trim(), populateDropDownListOfTitles);
} else { } else {
@ -142,6 +143,7 @@ define(function(require) {
var title = titleList[i]; var title = titleList[i];
comboTitleList.options[i] = new Option (title.name, title.toStringId()); comboTitleList.options[i] = new Option (title.name, title.toStringId());
} }
$('#searchingForTitles').hide();
} }
@ -152,7 +154,8 @@ define(function(require) {
function findTitleFromTitleIdAndLaunchArticleRead(titleId) { function findTitleFromTitleIdAndLaunchArticleRead(titleId) {
if (localArchive.dataFiles && localArchive.dataFiles.length>0) { if (localArchive.dataFiles && localArchive.dataFiles.length>0) {
var title = evopedia.Title.parseTitleId(localArchive,titleId); var title = evopedia.Title.parseTitleId(localArchive,titleId);
$("#articleContent").html("Loading from dump article " + title.name + " ..."); $("#readingArticle").show();
$("#articleContent").html("Loading article " + title.name);
if (title.fileNr == 255) { if (title.fileNr == 255) {
localArchive.resolveRedirect(title, readArticle); localArchive.resolveRedirect(title, readArticle);
} }
@ -184,6 +187,8 @@ define(function(require) {
* and convert links to javascript calls * and convert links to javascript calls
*/ */
function displayArticleInForm(title, htmlArticle) { function displayArticleInForm(title, htmlArticle) {
$("#readingArticle").hide();
// Display the article inside the web page. // Display the article inside the web page.
$('#articleContent').html(htmlArticle); $('#articleContent').html(htmlArticle);
@ -229,7 +234,8 @@ define(function(require) {
* Replace article content with the one of the given title * Replace article content with the one of the given title
*/ */
function goToArticle(titleName) { function goToArticle(titleName) {
$("#articleContent").html("Loading from dump article " + titleName + " ..."); $("#readingArticle").show();
$("#articleContent").html("Loading article " + titleName);
localArchive.getTitleByName(titleName, readArticle); localArchive.getTitleByName(titleName, readArticle);
} }