Move most of javascript in util.js. Enabled paging with arrow keys. Refactor a little. re #73

index.php

@@ -65,35 +65,6 @@
     <link rel="stylesheet" type="text/css" href="<?php echo getUrlWithVersion(getCurrentCss ()) ?>" media="screen" />
     <link rel="stylesheet" type="text/css" href="<?php echo getUrlWithVersion("resources/normalize/normalize.css") ?>" />
     <script type="text/javascript">
-        var template, result;
-    
-        function ajaxifyLinks () {
-            if (history.pushState) {
-                $("a[href^='index']").click (function (event) {
-                    event.preventDefault(); 
-
-                    var url = $(this).attr('href');
-                    jsonurl = url.replace ("index", "getJSON");
-                    $.getJSON(jsonurl, function(data) {
-                        history.pushState(data, "", url);
-                        result = template (data);
-                        document.title = data.title;
-                        $(".container").html (result);
-                        
-                        ajaxifyLinks ();
-                    });
-                });
-            }
-        }
-        
-        window.onpopstate = function(event) {
-            //alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
-            result = template (event.state);
-            document.title = event.state.title;
-            $(".container").html (result);
-                        
-            ajaxifyLinks ();
-        };
     
         $(document).ready(function() {
             // Handler for .ready() called.

templates/default/frontpage.html

@@ -70,9 +70,9 @@
     </div>
     {{? it.isPaginated == 1}}
     <div class="footcenter">
-        {{? it.prevLink != ""}}<a href="{{=it.prevLink}}" ><img src="images/previous.png?v={{=it.version}}" alt="{{=it.i18n.previousAlt}}" /></a>{{?}}
+        {{? it.prevLink != ""}}<a id="prevLink" href="{{=it.prevLink}}" ><img src="images/previous.png?v={{=it.version}}" alt="{{=it.i18n.previousAlt}}" /></a>{{?}}
         <p> {{=it.currentPage}} / {{=it.maxPage}} </p>
-        {{? it.nextLink != ""}}<a href="{{=it.nextLink}}" ><img src="images/next.png?v={{=it.version}}" alt="{{=it.i18n.nextAlt}}" /></a>{{?}}
+        {{? it.nextLink != ""}}<a id="nextLink" href="{{=it.nextLink}}" ><img src="images/next.png?v={{=it.version}}" alt="{{=it.i18n.nextAlt}}" /></a>{{?}}
     </div>
     {{?}}
 </footer>

util.js

@@ -1,3 +1,5 @@
+var template, result;
+
 function htmlEscape(str) {
     return String(str)
             .replace(/&/g, '&')
@@ -5,4 +7,44 @@ function htmlEscape(str) {
             .replace(/'/g, ''')
             .replace(/</g, '&lt;')
             .replace(/>/g, '&gt;');
-}
+}
+
+function navigateTo (url) {
+    jsonurl = url.replace ("index", "getJSON");
+    $.getJSON(jsonurl, function(data) {
+        history.pushState(data, "", url);
+        updatePage (data);
+    });
+}
+
+function updatePage (data) {
+    result = template (data);
+    document.title = data.title;
+    $(".container").html (result);
+    
+    ajaxifyLinks ();
+}
+
+function ajaxifyLinks () {
+    if (history.pushState) {
+        $("a[href^='index']").click (function (event) {
+            event.preventDefault(); 
+
+            var url = $(this).attr('href');
+            navigateTo (url);
+        });
+    }
+}
+
+window.onpopstate = function(event) {
+    updatePage (event.state);
+};
+
+ $(document).keydown(function(e){
+    if (e.keyCode == 37 && $("#prevLink").length > 0) {
+        navigateTo ($("#prevLink").attr('href'));
+    }
+    if (e.keyCode == 39  && $("#nextLink").length > 0) {
+        navigateTo ($("#nextLink").attr('href'));
+    }
+});