From a419142cb791c1827c55d530fc1ba889b4aecc1b Mon Sep 17 00:00:00 2001
From: Austin Clark <austin.clark@hpe.com>
Date: Wed, 6 Jan 2016 07:12:01 -0700
Subject: [PATCH] Add key-listener to refactored timeline

This change adds a key-listener to navigate between test rectangles on
the timeline. When an out-of-view test is selected, the timeline will
refocus and bring it into view. Functionality for left and right arrow
keys is supported, up and down (to navigate between workers) key are
not supported, but may be added in a future patch.

Change-Id: I4a187a1c048d5e6552316d10db0c677432aa8f7e
---
 app/js/directives/timeline.js | 39 +++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/app/js/directives/timeline.js b/app/js/directives/timeline.js
index 7056d7d..091d2a1 100644
--- a/app/js/directives/timeline.js
+++ b/app/js/directives/timeline.js
@@ -30,6 +30,10 @@ var parseWorker = function(tags) {
  * @ngInject
  */
 function timeline($log, datasetService) {
+
+  /**
+   * @ngInject
+   */
   var controller = function($scope) {
     var self = this;
     self.statusColorMap = statusColorMap;
@@ -130,6 +134,28 @@ function timeline($log, datasetService) {
       $scope.$broadcast('select', null);
     };
 
+    self.selectNextItem = function() {
+      if (self.selection) {
+        var worker = self.selection.item.worker;
+        if (self.selection.index < self.data[worker].values.length - 1) {
+          self.selectIndex(worker, (self.selection.index) + 1);
+          return true;
+        }
+      }
+      return false;
+    };
+
+    self.selectPreviousItem = function() {
+      if (self.selection) {
+        var worker = self.selection.item.worker;
+        if (self.selection.index > 0) {
+          self.selectIndex(worker, (self.selection.index) - 1);
+          return true;
+        }
+      }
+      return false;
+    };
+
     var initData = function(raw) {
       self.dataRaw = raw;
 
@@ -230,6 +256,19 @@ function timeline($log, datasetService) {
 
     scope.$on('windowResize', updateWidth);
     updateWidth();
+
+    d3.select(window)
+      .on("keydown", function() {
+        var code = d3.event.keyCode;
+        if (code == 37) {
+          ctrl.selectPreviousItem();
+        }
+        else if (code == 39) {
+          ctrl.selectNextItem();
+        }
+        scope.$apply();
+      });
+
   };
 
   return {