From 80ff8f908ac7199424101f3251fc0f3e80ed9cf3 Mon Sep 17 00:00:00 2001
From: houseofyin <david_kane@houseofyin.com>
Date: Sat, 16 Mar 2013 16:35:33 -0400
Subject: [PATCH] Another checkpoint, added keyboard navigation to the main
 viewer

---
 src/viewer.js | 100 ++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 85 insertions(+), 15 deletions(-)

diff --git a/src/viewer.js b/src/viewer.js
index 439131f8..a9b11823 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -167,30 +167,43 @@ $.Viewer = function( options ) {
 
     this.element        = this.element || document.getElementById( this.id );
     this.canvas         = $.makeNeutralElement( "div" );
+    this.textAreaToReceiveKeyboardCommands         = $.makeNeutralElement( "textarea" );
 
     this.canvas.className = "openseadragon-canvas";
-    (function( canvas ){
-        canvas.width    = "100%";
-        canvas.height   = "100%";
-        canvas.overflow = "hidden";
-        canvas.position = "absolute";
-        canvas.top      = "0px";
-        canvas.left     = "0px";
+    (function( style ){
+        style.width    = "100%";
+        style.height   = "100%";
+        style.overflow = "hidden";
+        style.position = "absolute";
+        style.top      = "0px";
+        style.left     = "0px";
     }(  this.canvas.style ));
 
+    this.textAreaToReceiveKeyboardCommands.className = "findmetoo";
+    (function( style ){
+        style.width    = "100%";
+        style.height   = "100%";
+        style.overflow = "hidden";
+        style.position = "absolute";
+        style.top      = "0px";
+        style.left     = "0px";
+    }(  this.textAreaToReceiveKeyboardCommands.style ));
+
+
     //the container is created through applying the ControlDock constructor above
     this.container.className = "openseadragon-container";
-    (function( container ){
-        container.width     = "100%";
-        container.height    = "100%";
-        container.position  = "relative";
-        container.overflow  = "hidden";
-        container.left      = "0px";
-        container.top       = "0px";
-        container.textAlign = "left";  // needed to protect against
+    (function( style ){
+        style.width     = "100%";
+        style.height    = "100%";
+        style.position  = "relative";
+        style.overflow  = "hidden";
+        style.left      = "0px";
+        style.top       = "0px";
+        style.textAlign = "left";  // needed to protect against
     }( this.container.style ));
 
     this.container.insertBefore( this.canvas, this.container.firstChild );
+    this.container.insertBefore( this.textAreaToReceiveKeyboardCommands, this.container.firstChild );
     this.element.appendChild( this.container );
 
     //Used for toggling between fullscreen and default container size
@@ -201,6 +214,63 @@ $.Viewer = function( options ) {
     this.bodyOverflow   = document.body.style.overflow;
     this.docOverflow    = document.documentElement.style.overflow;
 
+    this.textAreaToReceiveKeyboardCommands.innerTracker = new $.MouseTracker({
+        _this : this,
+        element:            this.textAreaToReceiveKeyboardCommands,
+        focusHandler:       function(){
+            var point    = $.getElementPosition( this.element );
+            window.scrollTo( 0, point.y );
+        },
+
+        keyHandler:         function(tracker, keyCode, shiftKey){
+            switch( keyCode ){
+                case 61://=|+
+                    _this.viewport.zoomBy(1.1);
+                    _this.viewport.applyConstraints();
+                    return false;
+                case 45://-|_
+                    _this.viewport.zoomBy(0.9);
+                    _this.viewport.applyConstraints();
+                    return false;
+                case 48://0|)
+                    _this.viewport.goHome();
+                    _this.viewport.applyConstraints();
+                    return false;
+                case 119://w
+                case 87://W
+                case 38://up arrow
+                    if (shiftKey)
+                        _this.viewport.zoomBy(1.1);
+                    else
+                        _this.viewport.panBy(new $.Point(0, -0.05));
+                    _this.viewport.applyConstraints();
+                    return false;
+                case 115://s
+                case 83://S
+                case 40://down arrow
+                    if (shiftKey)
+                        _this.viewport.zoomBy(0.9);
+                    else
+                        _this.viewport.panBy(new $.Point(0, 0.05));
+                    _this.viewport.applyConstraints();
+                    return false;
+                case 97://a
+                case 37://left arrow
+                    _this.viewport.panBy(new $.Point(-0.05, 0));
+                    _this.viewport.applyConstraints();
+                    return false;
+                case 100://d
+                case 39://right arrow
+                    _this.viewport.panBy(new $.Point(0.05, 0));
+                    _this.viewport.applyConstraints();
+                    return false;
+                default:
+                    //console.log( 'navigator keycode %s', keyCode );
+                    return true;
+            }
+        }
+    }).setTracking( true ); // default state
+
     this.innerTracker = new $.MouseTracker({
         element:            this.canvas, 
         clickTimeThreshold: this.clickTimeThreshold,