Implement the browser history handling, with HTML5 pushState

tests/tests.js

@@ -113,7 +113,7 @@ define(function (require) {
 		});
 		
 		asyncTest("check readArticle", function(){
-			var callbackFunction = function(htmlArticle) {
+			var callbackFunction = function(title, htmlArticle) {
 				ok(htmlArticle && htmlArticle.length>0,"Article not empty");
 				// Remove new lines
 				htmlArticle = htmlArticle.replace(/[\r\n]/g, " ");

www/index.html

@@ -64,7 +64,6 @@ License:
 	<li>In some cases, the links inside an article do not work, or do not lead to the right article</li>
 	<li>On a real device, reading an article sometimes crashes because it loads too many things in memory</li>
 	<li>It is hardly usable on a device because the buttons and inputs are too small</li>
-	<li>Following the links in an article does not populate the history of the browser, which prevents the use of the back button</li>
 	</ul>
 	<br />
 	<div id="openLocalFiles" style="display: none;">

www/js/app.js

@@ -28,7 +28,10 @@ define(function(require) {
     	searchTitlesFromPrefix($('#prefix').val());
     });
     $('#readData').on('click', function(e) {
-    	findTitleFromTitleIdAndLaunchArticleRead($('#titleList').val());
+    	var titleId = $('#titleList').val();
+    	findTitleFromTitleIdAndLaunchArticleRead(titleId);
+    	var title = evopedia.Title.parseTitleId(localArchive,titleId); 
+    	pushBrowserHistoryState(title.name);
     });
     $('#prefix').on('keyup', function(e) {
     	onKeyUpPrefix(e);
@@ -52,6 +55,12 @@ define(function(require) {
     	displayFileSelect();
     	setLocalArchiveFromFileSelect();
     }
+    
+    // Display the article when the user goes back in the browser history
+    window.onpopstate = function(event) {
+    	var titleName = event.state.titleName;
+    	goToArticle(titleName);
+    };
 
     /**
 	 * Displays the zone to select files from the dump
@@ -112,9 +121,9 @@ define(function(require) {
 	 * and call the function to read the corresponding article
 	 */
 	function findTitleFromTitleIdAndLaunchArticleRead(titleId) {
-		$("#articleContent").html("Loading article from dump...");
 		if (localArchive.dataFiles && localArchive.dataFiles.length>0) {
 			var title = evopedia.Title.parseTitleId(localArchive,titleId);
+			$("#articleContent").html("Loading from dump article " + title.name + " ...");
 			if (title.fileNr == 255) {
 				localArchive.resolveRedirect(title, readArticle);
 			}
@@ -145,7 +154,7 @@ define(function(require) {
 	 * Display the the given HTML article in the web page,
 	 * and convert links to javascript calls
 	 */
-	function displayArticleInForm(htmlArticle) {
+	function displayArticleInForm(title, htmlArticle) {
 		// Display the article inside the web page.		
 		$('#articleContent').html(htmlArticle);
 		
@@ -167,20 +176,32 @@ define(function(require) {
 				// It's a link to another article : add an onclick event to go to this article
 				// instead of following the link
 				$(this).on('click', function(e) {
-					goToArticle(decodeURIComponent($(this).attr("href")));
+					var titleName = decodeURIComponent($(this).attr("href"));
+					pushBrowserHistoryState(titleName);
+					goToArticle(titleName);
 					return false;
 				});
 			}
 		});
 	}
+	
+	/**
+	 * Changes the URL of the browser page
+	 */
+	function pushBrowserHistoryState(titleName) {
+		if (titleName) {
+			var stateObj = { titleName: titleName};
+			window.history.pushState(stateObj,"Wikipedia Article : " + titleName,"#" + titleName);
+		}
+	}
 
 
 	/**
 	 * Replace article content with the one of the given title
 	 */
-	function goToArticle(title) {
-		$("#articleContent").html("Loading article from dump...");
-		localArchive.getTitleByName(title, readArticle);
+	function goToArticle(titleName) {
+		$("#articleContent").html("Loading from dump article " + titleName + " ...");
+		localArchive.getTitleByName(titleName, readArticle);
 	}
 
 });

www/js/lib/evopedia.js

@@ -362,7 +362,7 @@ define(function(require) {
 					htmlArticle = htmlArticle.substring(0, title.articleLength);
 					// Decode UTF-8 encoding
 					htmlArticle = decodeURIComponent(escape(htmlArticle));
-					callbackFunction(htmlArticle);
+					callbackFunction(title, htmlArticle);
 				} else {
 					// TODO : throw exception if we reach the end of the file
 					currentLocalArchiveInstance.readArticleChunk(title, dataFile, reader, readLength + CHUNK_SIZE,