mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-29 16:46:08 +03:00
Code Issues Projects Releases Wiki Activity

Another checkpoint, added keyboard navigation to the main viewer

Browse Source
This commit is contained in:
houseofyin 2013-03-16 16:35:33 -04:00
parent 3e2b337a52
commit 80ff8f908a
1 changed files with 85 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/viewer.js
View File

@ -167,30 +167,43 @@ $.Viewer = function( options ) {
this.element = this.element || document.getElementById( this.id ); this.element = this.element || document.getElementById( this.id );
this.canvas = $.makeNeutralElement( "div" ); this.canvas = $.makeNeutralElement( "div" );
this.textAreaToReceiveKeyboardCommands = $.makeNeutralElement( "textarea" );
this.canvas.className = "openseadragon-canvas"; this.canvas.className = "openseadragon-canvas";
(function( canvas ){ (function( style ){
canvas.width = "100%"; style.width = "100%";
canvas.height = "100%"; style.height = "100%";
canvas.overflow = "hidden"; style.overflow = "hidden";
canvas.position = "absolute"; style.position = "absolute";
canvas.top = "0px"; style.top = "0px";
canvas.left = "0px"; style.left = "0px";
}( this.canvas.style )); }( 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 //the container is created through applying the ControlDock constructor above
this.container.className = "openseadragon-container"; this.container.className = "openseadragon-container";
(function( container ){ (function( style ){
container.width = "100%"; style.width = "100%";
container.height = "100%"; style.height = "100%";
container.position = "relative"; style.position = "relative";
container.overflow = "hidden"; style.overflow = "hidden";
container.left = "0px"; style.left = "0px";
container.top = "0px"; style.top = "0px";
container.textAlign = "left"; // needed to protect against style.textAlign = "left"; // needed to protect against
}( this.container.style )); }( this.container.style ));
this.container.insertBefore( this.canvas, this.container.firstChild ); this.container.insertBefore( this.canvas, this.container.firstChild );
this.container.insertBefore( this.textAreaToReceiveKeyboardCommands, this.container.firstChild );
this.element.appendChild( this.container ); this.element.appendChild( this.container );
//Used for toggling between fullscreen and default container size //Used for toggling between fullscreen and default container size
@ -201,6 +214,63 @@ $.Viewer = function( options ) {
this.bodyOverflow = document.body.style.overflow; this.bodyOverflow = document.body.style.overflow;
this.docOverflow = document.documentElement.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({ this.innerTracker = new $.MouseTracker({
element: this.canvas, element: this.canvas,
clickTimeThreshold: this.clickTimeThreshold, clickTimeThreshold: this.clickTimeThreshold,