hootsuite · boxed · Apr 6, 2014
diff --git a/demo/load.js b/demo/load.js
@@ -73,4 +73,7 @@ $(function() {
     e.preventDefault();
     DemoGrid.resize(Math.max(1, DemoGrid.currentSize - 1));
   });
+
+  var grid = $('#grid').data('_gridList').gridList.grid;
+  grid[current_pos_x][current_pos_y].$element.addClass('focus');
 });
diff --git a/demo/style.css b/demo/style.css
@@ -43,7 +43,7 @@ body {
     bottom: 10px;
     left: 10px;
     right: 0;
-    -webkit-transition: background 3s;
+    /*-webkit-transition: background 3s;*/
   }
   .grid li.changed .inner {
     background: #ffff66;
@@ -118,3 +118,8 @@ body {
     .header a:hover {
       text-decoration: underline;
     }
+
+
+.grid li.focus div {
+    background-color: cornflowerblue;
+}
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
   <script src="src/gridList.js"></script>
   <script src="src/jquery.gridList.js"></script>
   <script src="demo/load.js"></script>
+  <script src="src/grid_navigation.js"></script>
 </head>
 <body>
   <div class="header">

diff --git a/src/grid_navigation.js b/src/grid_navigation.js
@@ -0,0 +1,75 @@
+var current_pos_x = 0;
+var current_pos_y = 0;
+
+function set_focus(x, y) {
+    var grid = $('#grid').data('_gridList').gridList.grid;
+
+    if (x < 0 || x >= grid.length || y < 0 || y >= grid[current_pos_x].length) {
+        return;
+    }
+    var diff_x = x - current_pos_x;
+    var diff_y = y - current_pos_y;
+    while (grid[current_pos_x][current_pos_y] == grid[x][y] || grid[x][y] == null) {
+        x += diff_x;
+        y += diff_y;
+        if (diff_x == 0 && diff_y == 0) {
+            return;
+        }
+        if (x < 0 || x >= grid.length || y < 0 || y >= grid[current_pos_x].length) {
+            return;
+        }
+    }
+
+    grid[current_pos_x][current_pos_y].$element.removeClass('focus');
+    current_pos_x = x;
+    current_pos_y = y;
+    grid[x][y].$element.addClass('focus');
+
+//    $(grid[x][y]).intoViewport();
+}
+
+function current_cell() {
+    var grid = $('#grid').data('_gridList').gridList.grid;
+
+    if (current_pos_x >= 0 && current_pos_x < grid.length && current_pos_y >= 0 && current_pos_y < grid[current_pos_x].length) {
+        return grid[current_pos_x][current_pos_y];
+    }
+    return false;
+}
+
+function get_x_y_of(cell) {
+    for (var x = 0; x != grid.length; x++) {
+        for (var y = 0; y != grid[x].length; y++) {
+            if (cell == grid[x][y]) {
+                return [x, y]
+            }
+        }
+    }
+    return null;
+}
+
+$(function(){
+    $(document).keydown(function(e) {
+        switch (e.keyCode) {
+            case 39: // right arrow
+                set_focus(current_pos_x+1, current_pos_y);
+                e.preventDefault();
+                return false;
+            case 40: // down arrow
+                set_focus(current_pos_x, current_pos_y+1);
+                e.preventDefault();
+                return false;
+            case 37: // left arrow
+                set_focus(current_pos_x-1, current_pos_y);
+                e.preventDefault();
+                return false;
+            case 38: // up arrow
+                set_focus(current_pos_x, current_pos_y-1);
+                e.preventDefault();
+                return false;
+            default:
+                break;
+        }
+        return true;
+    });
+});