Support browser back/forward and URL sharing through pushState.

diff --git a/www/js/book.js b/www/js/book.js
index 2821ae1a00e3de059402d77411b5099a434c4f50..8300be61da3391a1d4c517ab07f2d41c7a7524e1 100644 (file)
--- a/www/js/book.js
+++ b/www/js/book.js
@@ -60,6 +60,12 @@ var update = function() {
        fetch_analysis();
 }
 
+var get_history_url = function() {
+       var history = game.history({ verbose: true }).map(function(x) { return x.san; });
+       history.length = move_override;
+       return '/?' + history.join(',');
+}
+
 var fetch_analysis = function() {
        var fen = current_display_fen();
        $.ajax({
@@ -262,7 +268,7 @@ var set_includetransp = function(value) {
 }
 window['set_includetransp'] = set_includetransp;
 
-var make_move = function(move) {
+var make_move = function(move, do_update) {
        var history = game.history({ verbose: true });
        if (move_override < history.length && history[move_override].san == move) {
                // User effectively only moved forward in history.
@@ -281,7 +287,11 @@ var make_move = function(move) {
                fens.push(game.fen());
                ++move_override;
        }
-       update();
+
+       if (do_update !== false) {
+               update();
+               window.history.pushState(null, null, get_history_url());
+       }
 }
 window['make_move'] = make_move;
 
@@ -289,6 +299,7 @@ var prev_move = function() {
        if (move_override > 0) {
                --move_override;
                update();
+               window.history.replaceState(null, null, get_history_url());
        }
 }
 window['prev_move'] = prev_move;
@@ -297,13 +308,17 @@ var next_move = function() {
        if (move_override < game.history().length) {
                ++move_override;
                update();
+               window.history.replaceState(null, null, get_history_url());
        }
 }
 window['next_move'] = next_move;
 
-var set_move = function(n) {
+var set_move = function(n, do_update) {
        move_override = n;
-       update();
+       if (do_update !== false) {
+               update();
+               window.history.replaceState(null, null, get_history_url());
+       }
 }
 window['set_move'] = set_move;
 
@@ -341,6 +356,29 @@ var onSnapEnd = function(source, target) {
        make_move(pseudogame.history({ verbose: true }).pop().san);
 }
 
+var onpopstate = function() {
+       var old_moves = game.history({ verbose: true }).map(function(x) { return x.san; });
+       var new_moves = document.location.search.replace(/^\?/, "").split(",");
+
+       if (new_moves.length == 1 && new_moves[0] == "") {
+               new_moves = [];
+       }
+
+       var num_shared_moves;
+       for (num_shared_moves = 0; num_shared_moves < Math.min(old_moves.length, new_moves.length); ++num_shared_moves) {
+               if (old_moves[i] != new_moves[i]) {
+                       break;
+               }
+       }
+
+       set_move(num_shared_moves, false);
+       for (var i = num_shared_moves; i < new_moves.length; ++i) {
+               make_move(new_moves[i], false);
+       }
+       update();
+       window.history.replaceState(null, null, get_history_url());
+}
+
 var init = function() {
        // Create board.
        board = new window.ChessBoard('board', {
@@ -350,7 +388,9 @@ var init = function() {
                onDrop: onDrop,
                onSnapEnd: onSnapEnd
        });
-       update();
+
+       window.onpopstate = onpopstate;
+       onpopstate();
 
        $(window).keyup(function(event) {
                if (event.which == 39) {