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,