From 94247b72259e2a14f258af0a044a3ecca44f2c0f Mon Sep 17 00:00:00 2001 From: thatcher Date: Tue, 20 Mar 2012 21:58:23 -0400 Subject: [PATCH] Additional patches for keyboard accessibility --- build.properties | 2 +- openseadragon.js | 46 ++++++++++++++++++++++++++------------------- src/mousetracker.js | 5 +++-- src/navigator.js | 39 ++++++++++++++++++++++---------------- 4 files changed, 54 insertions(+), 38 deletions(-) diff --git a/build.properties b/build.properties index 3ae2ac2e..2fa88b2e 100644 --- a/build.properties +++ b/build.properties @@ -6,7 +6,7 @@ PROJECT: openseadragon BUILD_MAJOR: 0 BUILD_MINOR: 9 -BUILD_ID: 36 +BUILD_ID: 37 BUILD: ${PROJECT}.${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID} VERSION: ${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID} diff --git a/openseadragon.js b/openseadragon.js index 9fdca2eb..a14ef717 100644 --- a/openseadragon.js +++ b/openseadragon.js @@ -1,5 +1,5 @@ /** - * @version OpenSeadragon 0.9.36 + * @version OpenSeadragon 0.9.37 * * @fileOverview *

@@ -2205,13 +2205,14 @@ $.EventHandler.prototype = { * @inner */ function onKeyPress( tracker, event ){ - //console.log( "keypress %s", event.keyCode ); + //console.log( "keypress %s %s %s %s %s", event.keyCode, event.charCode, event.ctrlKey, event.shiftKey, event.altKey ); var propagate; if ( tracker.keyHandler ) { try { propagate = tracker.keyHandler( tracker, - event.keyCode + event.keyCode ? event.keyCode : event.charCode, + event.shiftKey ); if( !propagate ){ $.cancelEvent( event ); @@ -4205,9 +4206,10 @@ $.Navigator = function( options ){ style.position = 'relative'; style.top = '0px'; style.left = '0px'; - style.border = '1px solid #900'; + style.fontSize = '0px'; + style.border = '2px solid #900'; //TODO: IE doesnt like this property being set - //style.outline = '2px auto #900'; + try{ style.outline = '2px auto #900'; }catch(e){/*ignore*/} style.background = 'transparent'; style.float = 'left'; //Webkit style.cssFloat = 'left'; //Firefox @@ -4222,7 +4224,7 @@ $.Navigator = function( options ){ focusHandler: function(){ _this.viewer.setControlsEnabled( true ); (function( style ){ - style.border = '1px solid #437AB2'; + style.border = '2px solid #437AB2'; style.outline = '2px auto #437AB2'; }( this.element.style )); @@ -4230,20 +4232,35 @@ $.Navigator = function( options ){ blurHandler: function(){ _this.viewer.setControlsEnabled( false ); (function( style ){ - style.border = '1px solid #900'; + style.border = '2px solid #900'; style.outline = '2px auto #900'; }( this.element.style )); }, - keyHandler: function(tracker, keyCode){ + keyHandler: function(tracker, keyCode, shiftKey){ //console.log( keyCode ); switch( keyCode ){ + case 61://=|+ + _this.viewer.viewport.zoomBy(1.1); + return false; + case 45://-|_ + _this.viewer.viewport.zoomBy(0.9); + return false; + case 48://0|) + _this.viewer.viewport.goHome(); + return false; case 119://w + case 87://W case 38://up arrow - _this.viewer.viewport.panBy(new $.Point(0, -0.05)); + shiftKey ? + _this.viewer.viewport.zoomBy(1.1): + _this.viewer.viewport.panBy(new $.Point(0, -0.05)); return false; case 115://s + case 83://S case 40://down arrow - _this.viewer.viewport.panBy(new $.Point(0, 0.05)); + shiftKey ? + _this.viewer.viewport.zoomBy(0.9): + _this.viewer.viewport.panBy(new $.Point(0, 0.05)); return false; case 97://a case 37://left arrow @@ -4253,15 +4270,6 @@ $.Navigator = function( options ){ case 39://right arrow _this.viewer.viewport.panBy(new $.Point(0.05, 0)); return false; - case 61://=|+ - _this.viewer.viewport.zoomBy(1.1); - return false; - case 45://-|_ - _this.viewer.viewport.zoomBy(0.9); - return false; - case 48://0|) - _this.viewer.viewport.goHome(); - return false; default: //console.log( 'navigator keycode %s', keyCode ); return true; diff --git a/src/mousetracker.js b/src/mousetracker.js index df26239f..60e23747 100644 --- a/src/mousetracker.js +++ b/src/mousetracker.js @@ -528,13 +528,14 @@ * @inner */ function onKeyPress( tracker, event ){ - //console.log( "keypress %s", event.keyCode ); + //console.log( "keypress %s %s %s %s %s", event.keyCode, event.charCode, event.ctrlKey, event.shiftKey, event.altKey ); var propagate; if ( tracker.keyHandler ) { try { propagate = tracker.keyHandler( tracker, - event.keyCode + event.keyCode ? event.keyCode : event.charCode, + event.shiftKey ); if( !propagate ){ $.cancelEvent( event ); diff --git a/src/navigator.js b/src/navigator.js index 8b1fedf2..96ffdf1d 100644 --- a/src/navigator.js +++ b/src/navigator.js @@ -54,9 +54,10 @@ $.Navigator = function( options ){ style.position = 'relative'; style.top = '0px'; style.left = '0px'; - style.border = '1px solid #900'; + style.fontSize = '0px'; + style.border = '2px solid #900'; //TODO: IE doesnt like this property being set - //style.outline = '2px auto #900'; + try{ style.outline = '2px auto #900'; }catch(e){/*ignore*/} style.background = 'transparent'; style.float = 'left'; //Webkit style.cssFloat = 'left'; //Firefox @@ -71,7 +72,7 @@ $.Navigator = function( options ){ focusHandler: function(){ _this.viewer.setControlsEnabled( true ); (function( style ){ - style.border = '1px solid #437AB2'; + style.border = '2px solid #437AB2'; style.outline = '2px auto #437AB2'; }( this.element.style )); @@ -79,20 +80,35 @@ $.Navigator = function( options ){ blurHandler: function(){ _this.viewer.setControlsEnabled( false ); (function( style ){ - style.border = '1px solid #900'; + style.border = '2px solid #900'; style.outline = '2px auto #900'; }( this.element.style )); }, - keyHandler: function(tracker, keyCode){ + keyHandler: function(tracker, keyCode, shiftKey){ //console.log( keyCode ); switch( keyCode ){ + case 61://=|+ + _this.viewer.viewport.zoomBy(1.1); + return false; + case 45://-|_ + _this.viewer.viewport.zoomBy(0.9); + return false; + case 48://0|) + _this.viewer.viewport.goHome(); + return false; case 119://w + case 87://W case 38://up arrow - _this.viewer.viewport.panBy(new $.Point(0, -0.05)); + shiftKey ? + _this.viewer.viewport.zoomBy(1.1): + _this.viewer.viewport.panBy(new $.Point(0, -0.05)); return false; case 115://s + case 83://S case 40://down arrow - _this.viewer.viewport.panBy(new $.Point(0, 0.05)); + shiftKey ? + _this.viewer.viewport.zoomBy(0.9): + _this.viewer.viewport.panBy(new $.Point(0, 0.05)); return false; case 97://a case 37://left arrow @@ -102,15 +118,6 @@ $.Navigator = function( options ){ case 39://right arrow _this.viewer.viewport.panBy(new $.Point(0.05, 0)); return false; - case 61://=|+ - _this.viewer.viewport.zoomBy(1.1); - return false; - case 45://-|_ - _this.viewer.viewport.zoomBy(0.9); - return false; - case 48://0|) - _this.viewer.viewport.goHome(); - return false; default: //console.log( 'navigator keycode %s', keyCode ); return true;