Allow keyboard navigation of the log in the demo.

Make the log entries specially focusable (i.e. tabindex=0) and accept
enter key to activate in addition to click. Makes it easier to activate
one commit after another.

Author: yonran

demos/repo-viewer/repo-viewer.js

@@ -33,7 +33,7 @@ RepoViewer = {
   },
 
   attachCommitClickEvents: function() {
-    $(".commit").click(function(e) {
+    function activated(e) {
       e.preventDefault()
       var id = $(e.target).attr("id")
       if (id.split("-")[0] == "commit") {
@@ -47,7 +47,10 @@ RepoViewer = {
         RepoViewer.highlightCommit(sha)
         RepoViewer.clearFileView()
       }
-    })
+    }
+    $(".commit").click(activated).keydown(function(e) {
+      if (13 === e.keyCode) activated(e);
+    });
   },
 
   displayCommitDiffInfo: function(commit) {
@@ -96,10 +99,11 @@ RepoViewer = {
   },
 
   attachMoreCommitsEvents: function() {
-    $(".more-commits").click(function(e) {
+    function activated(e) {
       e.preventDefault()
-      $(e.target).parent().parent().parent().remove()
-      var id = $(e.target).parent().attr("id")
+      var id = $(e.target).closest('[id]').attr("id");
+      $(e.target).closest('tr').prev('tr').find('[tabindex]').focus()
+      $(e.target).closest('tr').remove();
       if (id.split("-")[0] == "more") {
         var sha = id.split("-")[1]
         RepoViewer.repo.getObject(sha, function(err, commit) {
@@ -108,13 +112,16 @@ RepoViewer = {
           })
         })
       }
-    })
+    }
+    $(".more-commits").click(activated).keydown(function(e) {
+      if (13 === e.keyCode) activated(e);
+    });
   },
 
   displayCommit: function(commit) {
     if ($("#commit-" + commit.sha).length == 0) {
       var row = "<tr>"
-      row += "<td class=\"commit\" id=\"commit-" + commit.sha + "\">" + commit.message.split("\n")[0] + "</td>"
+      row += "<td class=\"commit\" id=\"commit-" + commit.sha + "\" tabindex=0>" + commit.message.split("\n")[0] + "</td>"
       row += "<td>" + commit.author.name  + "</td>"
 
       row += "<td>" + commit.author.date.toUTCString() + "</td>"
@@ -127,7 +134,7 @@ RepoViewer = {
     this.displayCommit(commit)
     if (max == 0) {
       this.attachCommitClickEvents()
-      var row = "<tr><td><a class='more-commits' id='more-" + commit.sha + "'><em>More...</em></a></td></tr>"
+      var row = "<tr><td><a class='more-commits' id='more-" + commit.sha + "' tabindex=0><em>More...</em></a></td></tr>"
       $("#commits table").append(row)
       this.attachMoreCommitsEvents()
       if (callback) { callback() }