MouseTracker original events in handlers

Implemented "Expose original event in handlers" (#23) for MouseTracker

Added OpenSeadragon.getElementOffset() method. Element-relative mouse
coordinates should be correct even if the element and/or page is
scrolled (#131)

src/button.js

@@ -175,57 +175,59 @@ $.Button = function( options ) {
         clickTimeThreshold: this.clickTimeThreshold,
         clickDistThreshold: this.clickDistThreshold,
 
-        enterHandler: function( tracker, position, buttonDownElement, buttonDownAny ) {
-            if ( buttonDownElement ) {
+        enterHandler: function( tracker, eventData ) {
+            if ( eventData.buttonDownElement ) {
                 inTo( _this, $.ButtonState.DOWN );
                 _this.raiseEvent( "onEnter", _this );
-            } else if ( !buttonDownAny ) {
+            } else if ( !eventData.buttonDownAny ) {
                 inTo( _this, $.ButtonState.HOVER );
             }
         },
 
-        focusHandler: function( tracker, position, buttonDownElement, buttonDownAny ) {
-            this.enterHandler( tracker, position, buttonDownElement, buttonDownAny );
+        // TODO: This didn't match handler signature in MouseTracker. Investigate!
+        focusHandler: function ( tracker, eventData ) { //position, buttonDownElement, buttonDownAny
+            //this.enterHandler( tracker, eventData ); //position, buttonDownElement, buttonDownAny
             _this.raiseEvent( "onFocus", _this );
         },
 
-        exitHandler: function( tracker, position, buttonDownElement, buttonDownAny ) {
+        exitHandler: function( tracker, eventData ) {
             outTo( _this, $.ButtonState.GROUP );
-            if ( buttonDownElement ) {
+            if ( eventData.buttonDownElement ) {
                 _this.raiseEvent( "onExit", _this );
             }
         },
 
-        blurHandler: function( tracker, position, buttonDownElement, buttonDownAny ) {
-            this.exitHandler( tracker, position, buttonDownElement, buttonDownAny );
+        // TODO: This didn't match handler signature in MouseTracker. Investigate!
+        blurHandler: function ( tracker, eventData ) { //position, buttonDownElement, buttonDownAny
+            //this.exitHandler( tracker, eventData ); //position, buttonDownElement, buttonDownAny
             _this.raiseEvent( "onBlur", _this );
         },
 
-        pressHandler: function( tracker, position ) {
+        pressHandler: function ( tracker, eventData ) {
             inTo( _this, $.ButtonState.DOWN );
             _this.raiseEvent( "onPress", _this );
         },
 
-        releaseHandler: function( tracker, position, insideElementPress, insideElementRelease ) {
-            if ( insideElementPress && insideElementRelease ) {
+        releaseHandler: function( tracker, eventData ) {
+            if ( eventData.insideElementPress && eventData.insideElementRelease ) {
                 outTo( _this, $.ButtonState.HOVER );
                 _this.raiseEvent( "onRelease", _this );
-            } else if ( insideElementPress ) {
+            } else if ( eventData.insideElementPress ) {
                 outTo( _this, $.ButtonState.GROUP );
             } else {
                 inTo( _this, $.ButtonState.HOVER );
             }
         },
 
-        clickHandler: function( tracker, position, quick, shift ) {
-            if ( quick ) {
+        clickHandler: function( tracker, eventData ) {
+            if ( eventData.quick ) {
                 _this.raiseEvent("onClick", _this);
             }
         },
 
-        keyHandler: function( tracker, key ){
-            //console.log( "%s : handling key %s!", _this.tooltip, key);
-            if( 13 === key ){
+        keyHandler: function( tracker, eventData ){
+            //console.log( "%s : handling key %s!", _this.tooltip, eventData.keyCode);
+            if( 13 === eventData.keyCode ){
                 _this.raiseEvent( "onClick", _this );
                 _this.raiseEvent( "onRelease", _this );
                 return false;

src/buttongroup.js

@@ -85,29 +85,23 @@ $.ButtonGroup = function( options ) {
         element:            this.element,
         clickTimeThreshold: this.clickTimeThreshold,
         clickDistThreshold: this.clickDistThreshold,
-        enterHandler: function() {
+        enterHandler: function ( tracker, eventData ) {
             var i;
             for ( i = 0; i < _this.buttons.length; i++ ) {
                 _this.buttons[ i ].notifyGroupEnter();
             }
         },
-        exitHandler: function() {
-            var i,
-                buttonDownElement = arguments.length > 2 ?
-                    arguments[ 2 ] :
-                    null;
-            if ( !buttonDownElement ) {
+        exitHandler: function ( tracker, eventData ) {
+            var i;
+            if ( !eventData.buttonDownElement ) {
                 for ( i = 0; i < _this.buttons.length; i++ ) {
                     _this.buttons[ i ].notifyGroupExit();
                 }
             }
         },
-        releaseHandler: function() {
-            var i,
-                insideElementRelease = arguments.length > 3 ?
-                    arguments[ 3 ] :
-                    null;
-            if ( !insideElementRelease ) {
+        releaseHandler: function ( tracker, eventData ) {
+            var i;
+            if ( !eventData.insideElementRelease ) {
                 for ( i = 0; i < _this.buttons.length; i++ ) {
                     _this.buttons[ i ].notifyGroupExit();
                 }

src/eventhandler.js

@@ -55,7 +55,7 @@ $.EventHandler.prototype = {
      * @function
      * @param {String} eventName - Name of event to register.
      * @param {Function} handler - Function to call when event is triggered.
-     * @param {Object} optional userData - Arbitrary object to be passed to the handler.
+     * @param {Object} optional userData - Arbitrary object to be passed unchanged to the handler.
      */
     addHandler: function ( eventName, handler, userData ) {
         var events = this.events[ eventName ];

src/navigator.js

@@ -251,13 +251,13 @@ $.extend( $.Navigator.prototype, $.EventHandler.prototype, $.Viewer.prototype, {
  * @inner
  * @function
  */
-function onCanvasClick( tracker, position, quick, shift ) {
+function onCanvasClick( tracker, eventData ) {
     var newBounds,
         viewerPosition,
         dimensions;
     if (! this.drag) {
         if ( this.viewer.viewport ) {
-            viewerPosition = this.viewport.deltaPointsFromPixels(position);
+            viewerPosition = this.viewport.deltaPointsFromPixels( eventData.position );
             dimensions = this.viewer.viewport.getBounds().getSize();
             newBounds = new $.Rect(
                 viewerPosition.x - dimensions.x/2,
@@ -285,18 +285,18 @@ function onCanvasClick( tracker, position, quick, shift ) {
  * @inner
  * @function
  */
-function onCanvasDrag( tracker, position, delta, shift ) {
+function onCanvasDrag( tracker, eventData ) {
     if ( this.viewer.viewport ) {
         this.drag = true;
         if( !this.panHorizontal ){
-            delta.x = 0;
+            eventData.delta.x = 0;
         }
         if( !this.panVertical ){
-            delta.y = 0;
+            eventData.delta.y = 0;
         }
         this.viewer.viewport.panBy(
             this.viewport.deltaPointsFromPixels(
-                delta
+                eventData.delta
             )
         );
     }
@@ -308,8 +308,8 @@ function onCanvasDrag( tracker, position, delta, shift ) {
  * @inner
  * @function
  */
-function onCanvasRelease( tracker, position, insideElementPress, insideElementRelease ) {
-    if ( insideElementPress && this.viewer.viewport ) {
+function onCanvasRelease( tracker, eventData ) {//position, insideElementPress, insideElementRelease
+    if ( eventData.insideElementPress && this.viewer.viewport ) {
         this.viewer.viewport.applyConstraints();
     }
 }

src/openseadragon.js

@@ -699,6 +699,48 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
         },
 
 
+        /**
+         * Determines the position of the upper-left corner of the element adjusted for current page and/or element scroll.
+         * @function
+         * @name OpenSeadragon.getElementOffset
+         * @param {Element|String} element - the element we want the position for.
+         * @returns {Point} - the position of the upper left corner of the element adjusted for current page and/or element scroll.
+         * Inspired by jQuery.fn.offset() (jquery 1.10.1)
+         */
+        getElementOffset: function( element ) {
+            var doc = element && element.ownerDocument,
+                docElement,
+                win,
+                boundingRect = { top: 0, left: 0 };
+
+            if ( !doc ) {
+                return new $.Point();
+            }
+
+            docElement = doc.documentElement;
+
+            // Make sure it's not a disconnected DOM node
+            //if ( !jQuery.contains( docElement, element ) ) {
+            //    return new $.Point();
+            //}
+
+            if ( typeof element.getBoundingClientRect !== typeof undefined ) {
+                boundingRect = element.getBoundingClientRect();
+            }
+
+            win = ( doc == doc.window ) ?
+                doc :
+                ( doc.nodeType === 9 ) ?
+                    doc.defaultView || doc.parentWindow :
+                    false;
+
+            return new $.Point(
+                boundingRect.left + ( win.pageXOffset || docElement.scrollLeft ) - ( docElement.clientLeft || 0 ),
+                boundingRect.top + ( win.pageYOffset || docElement.scrollTop ) - ( docElement.clientTop || 0 )
+            );
+        },
+
+
         /**
          * Determines the height and width of the given element.
          * @function

src/referencestrip.js

@@ -32,12 +32,12 @@
  * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-(function( $ ){
+(function ( $ ) {
 
-// dictionary from id to private properties
-var THIS = {};
+    // dictionary from id to private properties
+    var THIS = {};
 
-/**
+    /**
     *  The CollectionDrawer is a reimplementation if the Drawer API that
     *  focuses on allowing a viewport to be redefined as a collection
     *  of smaller viewports, defined by a clear number of rows and / or
@@ -56,7 +56,7 @@ var THIS = {};
     *          require better abstraction at those points in order to effeciently
     *          reuse those paradigms.
     */
-$.ReferenceStrip = function( options ){
+    $.ReferenceStrip = function ( options ) {
 
         var _this = this,
         viewer = options.viewer,
@@ -67,7 +67,7 @@ $.ReferenceStrip = function( options ){
 
         //We may need to create a new element and id if they did not
         //provide the id for the existing element
-    if( !options.id ){
+        if ( !options.id ) {
             options.id = 'referencestrip-' + $.now();
             this.element = $.makeNeutralElement( "div" );
             this.element.id = options.id;
@@ -88,11 +88,11 @@ $.ReferenceStrip = function( options ){
             mouseNavEnabled: false,
             showNavigationControl: false,
             showSequenceControl: false
-    });
+        } );
 
         $.extend( this, options );
         //Private state properties
-    THIS[ this.id ] = {
+        THIS[this.id] = {
             "animating": false
         };
 
@@ -112,26 +112,26 @@ $.ReferenceStrip = function( options ){
         $.setElementOpacity( this.element, 0.8 );
 
         this.viewer = viewer;
-    this.innerTracker = new $.MouseTracker({
+        this.innerTracker = new $.MouseTracker( {
             element: this.element,
             dragHandler: $.delegate( this, onStripDrag ),
             scrollHandler: $.delegate( this, onStripScroll ),
             enterHandler: $.delegate( this, onStripEnter ),
             exitHandler: $.delegate( this, onStripExit ),
             keyHandler: $.delegate( this, onKeyPress )
-    }).setTracking( true );
+        } ).setTracking( true );
 
         //Controls the position and orientation of the reference strip and sets the
         //appropriate width and height
-    if( options.width && options.height ){
+        if ( options.width && options.height ) {
             this.element.style.width = options.width + 'px';
             this.element.style.height = options.height + 'px';
             viewer.addControl(
             this.element,
-            {anchor: $.ControlAnchor.BOTTOM_LEFT}
+            { anchor: $.ControlAnchor.BOTTOM_LEFT }
         );
         } else {
-        if( "horizontal" == options.scroll ){
+            if ( "horizontal" == options.scroll ) {
                 this.element.style.width = (
                 viewerSize.x *
                 options.sizeRatio *
@@ -145,9 +145,9 @@ $.ReferenceStrip = function( options ){
 
                 viewer.addControl(
                 this.element,
-                {anchor: $.ControlAnchor.BOTTOM_LEFT}
+                { anchor: $.ControlAnchor.BOTTOM_LEFT }
             );
-        }else {
+            } else {
                 this.element.style.height = (
                 viewerSize.y *
                 options.sizeRatio *
@@ -161,7 +161,7 @@ $.ReferenceStrip = function( options ){
 
                 viewer.addControl(
                 this.element,
-                {anchor: $.ControlAnchor.TOP_LEFT}
+                { anchor: $.ControlAnchor.TOP_LEFT }
             );
 
             }
@@ -172,9 +172,9 @@ $.ReferenceStrip = function( options ){
         this.panels = [];
 
         /*jshint loopfunc:true*/
-    for( i = 0; i < viewer.tileSources.length; i++ ){
+        for ( i = 0; i < viewer.tileSources.length; i++ ) {
 
-        element = $.makeNeutralElement('div');
+            element = $.makeNeutralElement( 'div' );
             element.id = this.element.id + "-" + i;
 
             element.style.width = _this.panelWidth + 'px';
@@ -185,27 +185,27 @@ $.ReferenceStrip = function( options ){
             element.style.styleFloat = 'left'; //IE
             element.style.padding = '2px';
 
-        element.innerTracker = new $.MouseTracker({
+            element.innerTracker = new $.MouseTracker( {
                 element: element,
                 clickTimeThreshold: this.clickTimeThreshold,
                 clickDistThreshold: this.clickDistThreshold,
-            pressHandler: function( tracker ){
+                pressHandler: function ( tracker, eventData ) {
                     tracker.dragging = $.now();
                 },
-            releaseHandler: function( tracker, position, insideElementPress, insideElementRelease ){
+                releaseHandler: function ( tracker, eventData ) {
                     var id = tracker.element.id,
-                    page = Number( id.split( '-' )[ 2 ] ),
+                    page = Number( id.split( '-' )[2] ),
                     now = $.now();
 
-                if ( insideElementPress &&
-                     insideElementRelease &&
+                    if ( eventData.insideElementPress &&
+                     eventData.insideElementRelease &&
                      tracker.dragging &&
-                     ( now - tracker.dragging ) < tracker.clickTimeThreshold ){
+                     ( now - tracker.dragging ) < tracker.clickTimeThreshold ) {
                         tracker.dragging = null;
                         viewer.goToPage( page );
                     }
                 }
-        }).setTracking( true );
+            } ).setTracking( true );
 
             this.element.appendChild( element );
 
@@ -214,49 +214,49 @@ $.ReferenceStrip = function( options ){
             this.panels.push( element );
 
         }
-    loadPanels( this, this.scroll == 'vertical' ? viewerSize.y : viewerSize.y, 0);
+        loadPanels( this, this.scroll == 'vertical' ? viewerSize.y : viewerSize.y, 0 );
         this.setFocus( 0 );
 
-};
+    };
 
-$.extend( $.ReferenceStrip.prototype, $.EventHandler.prototype, $.Viewer.prototype, {
+    $.extend( $.ReferenceStrip.prototype, $.EventHandler.prototype, $.Viewer.prototype, {
 
-    setFocus: function( page ){
+        setFocus: function ( page ) {
             var element = $.getElement( this.element.id + '-' + page ),
             viewerSize = $.getElementSize( this.viewer.canvas ),
-            scrollWidth = Number(this.element.style.width.replace('px','')),
-            scrollHeight = Number(this.element.style.height.replace('px','')),
-            offsetLeft = -Number(this.element.style.marginLeft.replace('px','')),
-            offsetTop = -Number(this.element.style.marginTop.replace('px','')),
+            scrollWidth = Number( this.element.style.width.replace( 'px', '' ) ),
+            scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ),
+            offsetLeft = -Number( this.element.style.marginLeft.replace( 'px', '' ) ),
+            offsetTop = -Number( this.element.style.marginTop.replace( 'px', '' ) ),
             offset;
 
-        if ( this.currentSelected !== element ){
-            if( this.currentSelected ){
+            if ( this.currentSelected !== element ) {
+                if ( this.currentSelected ) {
                     this.currentSelected.style.background = '#000';
                 }
                 this.currentSelected = element;
                 this.currentSelected.style.background = '#999';
 
-            if( 'horizontal' == this.scroll ){
+                if ( 'horizontal' == this.scroll ) {
                     //right left
-                offset = (Number(page)) * ( this.panelWidth + 3 );
-                if( offset > offsetLeft + viewerSize.x - this.panelWidth){
-                    offset = Math.min(offset, (scrollWidth - viewerSize.x));
+                    offset = ( Number( page ) ) * ( this.panelWidth + 3 );
+                    if ( offset > offsetLeft + viewerSize.x - this.panelWidth ) {
+                        offset = Math.min( offset, ( scrollWidth - viewerSize.x ) );
                         this.element.style.marginLeft = -offset + 'px';
                         loadPanels( this, viewerSize.x, -offset );
-                }else if( offset < offsetLeft ){
-                    offset = Math.max(0, offset - viewerSize.x / 2);
+                    } else if ( offset < offsetLeft ) {
+                        offset = Math.max( 0, offset - viewerSize.x / 2 );
                         this.element.style.marginLeft = -offset + 'px';
                         loadPanels( this, viewerSize.x, -offset );
                     }
-            }else{
-                offset = (Number(page) ) * ( this.panelHeight + 3 );
-                if( offset > offsetTop + viewerSize.y - this.panelHeight){
-                    offset = Math.min(offset, (scrollHeight - viewerSize.y));
+                } else {
+                    offset = ( Number( page ) ) * ( this.panelHeight + 3 );
+                    if ( offset > offsetTop + viewerSize.y - this.panelHeight ) {
+                        offset = Math.min( offset, ( scrollHeight - viewerSize.y ) );
                         this.element.style.marginTop = -offset + 'px';
                         loadPanels( this, viewerSize.y, -offset );
-                }else if( offset < offsetTop ){
-                    offset = Math.max(0, offset - viewerSize.y / 2);
+                    } else if ( offset < offsetTop ) {
+                        offset = Math.max( 0, offset - viewerSize.y / 2 );
                         this.element.style.marginTop = -offset + 'px';
                         loadPanels( this, viewerSize.y, -offset );
                     }
@@ -264,124 +264,124 @@ $.extend( $.ReferenceStrip.prototype, $.EventHandler.prototype, $.Viewer.prototy
 
                 this.currentPage = page;
                 $.getElement( element.id + '-displayregion' ).focus();
-            onStripEnter.call( this, this.innerTracker );
+                onStripEnter.call( this, this.innerTracker, {} );
             }
         },
         /**
         * @function
         * @name OpenSeadragon.ReferenceStrip.prototype.update
         */
-    update: function() {
-        if ( THIS[ this.id ].animating ) {
-            $.console.log('image reference strip update');
+        update: function () {
+            if ( THIS[this.id].animating ) {
+                $.console.log( 'image reference strip update' );
                 return true;
             }
             return false;
         }
 
-});
+    } );
 
 
 
 
-/**
+    /**
     * @private
     * @inner
     * @function
     */
-function onStripDrag( tracker, position, delta, shift ) {
+    function onStripDrag( tracker, eventData ) {
 
-    var offsetLeft = Number(this.element.style.marginLeft.replace('px','')),
-        offsetTop = Number(this.element.style.marginTop.replace('px','')),
-        scrollWidth = Number(this.element.style.width.replace('px','')),
-        scrollHeight = Number(this.element.style.height.replace('px','')),
+        var offsetLeft = Number( this.element.style.marginLeft.replace( 'px', '' ) ),
+        offsetTop = Number( this.element.style.marginTop.replace( 'px', '' ) ),
+        scrollWidth = Number( this.element.style.width.replace( 'px', '' ) ),
+        scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ),
         viewerSize = $.getElementSize( this.viewer.canvas );
         this.dragging = true;
         if ( this.element ) {
-        if( 'horizontal' == this.scroll ){
-            if ( -delta.x > 0 ) {
+            if ( 'horizontal' == this.scroll ) {
+                if ( -eventData.delta.x > 0 ) {
                     //forward
-                if( offsetLeft > -(scrollWidth - viewerSize.x)){
-                    this.element.style.marginLeft = ( offsetLeft + (delta.x * 2) ) + 'px';
-                    loadPanels( this, viewerSize.x, offsetLeft + (delta.x * 2) );
+                    if ( offsetLeft > -( scrollWidth - viewerSize.x ) ) {
+                        this.element.style.marginLeft = ( offsetLeft + ( eventData.delta.x * 2 ) ) + 'px';
+                        loadPanels( this, viewerSize.x, offsetLeft + ( eventData.delta.x * 2 ) );
                     }
-            } else if ( -delta.x < 0 ) {
+                } else if ( -eventData.delta.x < 0 ) {
                     //reverse
-                if( offsetLeft < 0 ){
-                    this.element.style.marginLeft = ( offsetLeft + (delta.x * 2) ) + 'px';
-                    loadPanels( this, viewerSize.x, offsetLeft + (delta.x * 2) );
+                    if ( offsetLeft < 0 ) {
+                        this.element.style.marginLeft = ( offsetLeft + ( eventData.delta.x * 2 ) ) + 'px';
+                        loadPanels( this, viewerSize.x, offsetLeft + ( eventData.delta.x * 2 ) );
                     }
                 }
-        }else{
-            if ( -delta.y > 0 ) {
+            } else {
+                if ( -eventData.delta.y > 0 ) {
                     //forward
-                if( offsetTop > -(scrollHeight - viewerSize.y)){
-                    this.element.style.marginTop = ( offsetTop + (delta.y * 2) ) + 'px';
-                    loadPanels( this, viewerSize.y, offsetTop + (delta.y * 2) );
+                    if ( offsetTop > -( scrollHeight - viewerSize.y ) ) {
+                        this.element.style.marginTop = ( offsetTop + ( eventData.delta.y * 2 ) ) + 'px';
+                        loadPanels( this, viewerSize.y, offsetTop + ( eventData.delta.y * 2 ) );
                     }
-            } else if ( -delta.y < 0 ) {
+                } else if ( -eventData.delta.y < 0 ) {
                     //reverse
-                if( offsetTop < 0 ){
-                    this.element.style.marginTop = ( offsetTop + (delta.y * 2) ) + 'px';
-                    loadPanels( this, viewerSize.y, offsetTop + (delta.y * 2) );
+                    if ( offsetTop < 0 ) {
+                        this.element.style.marginTop = ( offsetTop + ( eventData.delta.y * 2 ) ) + 'px';
+                        loadPanels( this, viewerSize.y, offsetTop + ( eventData.delta.y * 2 ) );
                     }
                 }
             }
         }
         return false;
 
-}
+    }
 
 
 
-/**
+    /**
     * @private
     * @inner
     * @function
     */
-function onStripScroll( tracker, position, scroll, shift ) {
-    var offsetLeft = Number(this.element.style.marginLeft.replace('px','')),
-        offsetTop = Number(this.element.style.marginTop.replace('px','')),
-        scrollWidth = Number(this.element.style.width.replace('px','')),
-        scrollHeight = Number(this.element.style.height.replace('px','')),
+    function onStripScroll( tracker, eventData ) {
+        var offsetLeft = Number( this.element.style.marginLeft.replace( 'px', '' ) ),
+        offsetTop = Number( this.element.style.marginTop.replace( 'px', '' ) ),
+        scrollWidth = Number( this.element.style.width.replace( 'px', '' ) ),
+        scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ),
         viewerSize = $.getElementSize( this.viewer.canvas );
         if ( this.element ) {
-        if( 'horizontal' == this.scroll ){
-            if ( scroll > 0 ) {
+            if ( 'horizontal' == this.scroll ) {
+                if ( eventData.scroll > 0 ) {
                     //forward
-                if( offsetLeft > -(scrollWidth - viewerSize.x)){
-                    this.element.style.marginLeft = ( offsetLeft - (scroll * 60) ) + 'px';
-                    loadPanels( this, viewerSize.x, offsetLeft - (scroll * 60) );
+                    if ( offsetLeft > -( scrollWidth - viewerSize.x ) ) {
+                        this.element.style.marginLeft = ( offsetLeft - ( eventData.scroll * 60 ) ) + 'px';
+                        loadPanels( this, viewerSize.x, offsetLeft - ( eventData.scroll * 60 ) );
                     }
-            } else if ( scroll < 0 ) {
+                } else if ( eventData.scroll < 0 ) {
                     //reverse
-                if( offsetLeft < 0 ){
-                    this.element.style.marginLeft = ( offsetLeft - (scroll * 60) ) + 'px';
-                    loadPanels( this, viewerSize.x, offsetLeft - (scroll * 60) );
+                    if ( offsetLeft < 0 ) {
+                        this.element.style.marginLeft = ( offsetLeft - ( eventData.scroll * 60 ) ) + 'px';
+                        loadPanels( this, viewerSize.x, offsetLeft - ( eventData.scroll * 60 ) );
                     }
                 }
-        }else{
-            if ( scroll < 0 ) {
+            } else {
+                if ( eventData.scroll < 0 ) {
                     //scroll up
-                if( offsetTop > viewerSize.y - scrollHeight  ){
-                    this.element.style.marginTop = ( offsetTop + (scroll * 60) ) + 'px';
-                    loadPanels( this, viewerSize.y, offsetTop + (scroll * 60) );
+                    if ( offsetTop > viewerSize.y - scrollHeight ) {
+                        this.element.style.marginTop = ( offsetTop + ( eventData.scroll * 60 ) ) + 'px';
+                        loadPanels( this, viewerSize.y, offsetTop + ( eventData.scroll * 60 ) );
                     }
-            } else if ( scroll > 0 ) {
+                } else if ( eventData.scroll > 0 ) {
                     //scroll dowm
-                if( offsetTop < 0 ){
-                    this.element.style.marginTop = ( offsetTop + (scroll * 60) ) + 'px';
-                    loadPanels( this, viewerSize.y, offsetTop + (scroll * 60) );
+                    if ( offsetTop < 0 ) {
+                        this.element.style.marginTop = ( offsetTop + ( eventData.scroll * 60 ) ) + 'px';
+                        loadPanels( this, viewerSize.y, offsetTop + ( eventData.scroll * 60 ) );
                     }
                 }
             }
         }
         //cancels event
         return false;
-}
+    }
 
 
-function loadPanels(strip, viewerSize, scroll){
+    function loadPanels( strip, viewerSize, scroll ) {
         var panelSize,
         activePanelsStart,
         activePanelsEnd,
@@ -389,22 +389,22 @@ function loadPanels(strip, viewerSize, scroll){
         style,
         i,
         element;
-    if( 'horizontal' == strip.scroll ){
+        if ( 'horizontal' == strip.scroll ) {
             panelSize = strip.panelWidth;
-    }else{
+        } else {
             panelSize = strip.panelHeight;
         }
         activePanelsStart = Math.ceil( viewerSize / panelSize ) + 5;
-    activePanelsEnd = Math.ceil( (Math.abs(scroll) + viewerSize ) / panelSize ) + 1;
+        activePanelsEnd = Math.ceil( ( Math.abs( scroll ) + viewerSize ) / panelSize ) + 1;
         activePanelsStart = activePanelsEnd - activePanelsStart;
         activePanelsStart = activePanelsStart < 0 ? 0 : activePanelsStart;
 
-    for( i = activePanelsStart; i < activePanelsEnd && i < strip.panels.length; i++ ){
-        element = strip.panels[ i ];
-        if ( !element.activePanel ){
+        for ( i = activePanelsStart; i < activePanelsEnd && i < strip.panels.length; i++ ) {
+            element = strip.panels[i];
+            if ( !element.activePanel ) {
                 miniViewer = new $.Viewer( {
                     id: element.id,
-                tileSources:            [ strip.viewer.tileSources[ i ] ],
+                    tileSources: [strip.viewer.tileSources[i]],
                     element: element,
                     navigatorSizeRatio: strip.sizeRatio,
                     showNavigator: false,
@@ -434,33 +434,33 @@ function loadPanels(strip, viewerSize, scroll){
                 style.width = ( strip.panelWidth - 4 ) + 'px';
                 style.height = ( strip.panelHeight - 4 ) + 'px';
 
-            miniViewer.displayRegion.innerTracker = new $.MouseTracker({
+                miniViewer.displayRegion.innerTracker = new $.MouseTracker( {
                     element: miniViewer.displayRegion
-            });
+                } );
 
-            element.getElementsByTagName('form')[ 0 ].appendChild(
+                element.getElementsByTagName( 'form' )[0].appendChild(
                 miniViewer.displayRegion
             );
 
                 element.activePanel = true;
             }
         }
-}
+    }
 
 
-/**
+    /**
     * @private
     * @inner
     * @function
     */
-function onStripEnter( tracker ) {
+    function onStripEnter( tracker, eventData ) {
 
         //$.setElementOpacity(tracker.element, 0.8);
 
         //tracker.element.style.border = '1px solid #555';
         //tracker.element.style.background = '#000';
 
-    if( 'horizontal' == this.scroll ){
+        if ( 'horizontal' == this.scroll ) {
 
             //tracker.element.style.paddingTop = "0px";
             tracker.element.style.marginBottom = "0px";
@@ -472,15 +472,15 @@ function onStripEnter( tracker ) {
 
         }
         return false;
-}
+    }
 
 
-/**
+    /**
     * @private
     * @inner
     * @function
     */
-function onStripExit( tracker ) {
+    function onStripExit( tracker, eventData ) {
         if ( 'horizontal' == this.scroll ) {
 
             //tracker.element.style.paddingTop = "10px";
@@ -489,54 +489,54 @@ function onStripExit( tracker ) {
         } else {
 
             //tracker.element.style.paddingRight = "10px";
-        tracker.element.style.marginLeft = "-" + ( $.getElementSize( tracker.element ).x / 2 )+ "px";
+            tracker.element.style.marginLeft = "-" + ( $.getElementSize( tracker.element ).x / 2 ) + "px";
 
         }
         return false;
-}
+    }
 
 
 
-/**
+    /**
     * @private
     * @inner
     * @function
     */
-function onKeyPress( tracker, keyCode, shiftKey ){
-    //console.log( keyCode );
+    function onKeyPress( tracker, eventData ) {
+        //console.log( eventData.keyCode );
 
-    switch( keyCode ){
-        case 61://=|+
-            onStripScroll.call(this, this.tracker, null, 1, null);
+        switch ( eventData.keyCode ) {
+            case 61: //=|+
+                onStripScroll.call( this, this.tracker, { position: null, scroll: 1, shift: null } );
                 return false;
-        case 45://-|_
-            onStripScroll.call(this, this.tracker, null, -1, null);
+            case 45: //-|_
+                onStripScroll.call( this, this.tracker, { position: null, scroll: -1, shift: null } );
                 return false;
-        case 48://0|)
-        case 119://w
-        case 87://W
-        case 38://up arrow
-            onStripScroll.call(this, this.tracker, null, 1, null);
+            case 48: //0|)
+            case 119: //w
+            case 87: //W
+            case 38: //up arrow
+                onStripScroll.call( this, this.tracker, { position: null, scroll: 1, shift: null } );
                 return false;
-        case 115://s
-        case 83://S
-        case 40://down arrow
-            onStripScroll.call(this, this.tracker, null, -1, null);
+            case 115: //s
+            case 83: //S
+            case 40: //down arrow
+                onStripScroll.call( this, this.tracker, { position: null, scroll: -1, shift: null } );
                 return false;
-        case 97://a
-        case 37://left arrow
-            onStripScroll.call(this, this.tracker, null, -1, null);
+            case 97: //a
+            case 37: //left arrow
+                onStripScroll.call( this, this.tracker, { position: null, scroll: -1, shift: null } );
                 return false;
-        case 100://d
-        case 39://right arrow
-            onStripScroll.call(this, this.tracker, null, 1, null);
+            case 100: //d
+            case 39: //right arrow
+                onStripScroll.call( this, this.tracker, { position: null, scroll: 1, shift: null } );
                 return false;
             default:
-            //console.log( 'navigator keycode %s', keyCode );
+                //console.log( 'navigator keycode %s', eventData.keyCode );
                 return true;
         }
-}
+    }
 
 
 
-}( OpenSeadragon ));
+} ( OpenSeadragon ) );

src/viewer.js

@@ -265,8 +265,8 @@ $.Viewer = function( options ) {
                 window.scrollTo( 0, point.y );
             },
 
-            keyHandler:         function(tracker, keyCode, shiftKey){
-                switch( keyCode ){
+            keyHandler:         function( tracker, eventData ){
+                switch( eventData.keyCode ){
                     case 61://=|+
                         _this.viewport.zoomBy(1.1);
                         _this.viewport.applyConstraints();
@@ -282,7 +282,7 @@ $.Viewer = function( options ) {
                     case 119://w
                     case 87://W
                     case 38://up arrow
-                        if (shiftKey) {
+                        if ( eventData.shift ) {
                             _this.viewport.zoomBy(1.1);
                         } else {
                             _this.viewport.panBy(new $.Point(0, -0.05));
@@ -292,7 +292,7 @@ $.Viewer = function( options ) {
                     case 115://s
                     case 83://S
                     case 40://down arrow
-                        if (shiftKey) {
+                        if ( eventData.shift ) {
                             _this.viewport.zoomBy(0.9);
                         } else {
                             _this.viewport.panBy(new $.Point(0, 0.05));
@@ -310,7 +310,7 @@ $.Viewer = function( options ) {
                         _this.viewport.applyConstraints();
                         return false;
                     default:
-                        //console.log( 'navigator keycode %s', keyCode );
+                        //console.log( 'navigator keycode %s', eventData.keyCode );
                         return true;
                 }
             }
@@ -1426,37 +1426,37 @@ function onBlur(){
 
 }
 
-function onCanvasClick( tracker, position, quick, shift ) {
+function onCanvasClick( tracker, eventData ) {
     var zoomPerClick,
         factor;
-    if ( this.viewport && quick ) {    // ignore clicks where mouse moved
+    if ( this.viewport && eventData.quick ) {    // ignore clicks where mouse moved
         zoomPerClick = this.zoomPerClick;
-        factor = shift ? 1.0 / zoomPerClick : zoomPerClick;
+        factor = eventData.shift ? 1.0 / zoomPerClick : zoomPerClick;
         this.viewport.zoomBy(
             factor,
-            this.viewport.pointFromPixel( position, true )
+            this.viewport.pointFromPixel( eventData.position, true )
         );
         this.viewport.applyConstraints();
     }
     this.raiseEvent( 'canvas-click', {
         tracker: tracker,
-        position: position,
-        quick: quick,
-        shift: shift
+        position: eventData.position,
+        quick: eventData.quick,
+        shift: eventData.shift
     });
 }
 
-function onCanvasDrag( tracker, position, delta, shift ) {
+function onCanvasDrag( tracker, eventData ) {
     if ( this.viewport ) {
         if( !this.panHorizontal ){
-            delta.x = 0;
+            eventData.delta.x = 0;
         }
         if( !this.panVertical ){
-            delta.y = 0;
+            eventData.delta.y = 0;
         }
         this.viewport.panBy(
             this.viewport.deltaPointsFromPixels(
-                delta.negate()
+                eventData.delta.negate()
             )
         );
         if( this.constrainDuringPan ){
@@ -1465,46 +1465,46 @@ function onCanvasDrag( tracker, position, delta, shift ) {
     }
     this.raiseEvent( 'canvas-drag', {
         tracker: tracker,
-        position: position,
-        delta: delta,
-        shift: shift
+        position: eventData.position,
+        delta: eventData.delta,
+        shift: eventData.shift
     });
 }
 
-function onCanvasRelease( tracker, position, insideElementPress, insideElementRelease ) {
-    if ( insideElementPress && this.viewport ) {
+function onCanvasRelease( tracker, eventData ) {
+    if ( eventData.insideElementPress && this.viewport ) {
         this.viewport.applyConstraints();
     }
     this.raiseEvent( 'canvas-release', {
         tracker: tracker,
-        position: position,
-        insideElementPress: insideElementPress,
-        insideElementRelease: insideElementRelease
+        position: eventData.position,
+        insideElementPress: eventData.insideElementPress,
+        insideElementRelease: eventData.insideElementRelease
     });
 }
 
-function onCanvasScroll( tracker, position, scroll, shift ) {
+function onCanvasScroll( tracker, eventData ) {
     var factor;
     if ( this.viewport ) {
-        factor = Math.pow( this.zoomPerScroll, scroll );
+        factor = Math.pow( this.zoomPerScroll, eventData.scroll );
         this.viewport.zoomBy(
             factor,
-            this.viewport.pointFromPixel( position, true )
+            this.viewport.pointFromPixel( eventData.position, true )
         );
         this.viewport.applyConstraints();
     }
     this.raiseEvent( 'canvas-scroll', {
         tracker: tracker,
-        position: position,
-        scroll: scroll,
-        shift: shift
+        position: eventData.position,
+        scroll: eventData.scroll,
+        shift: eventData.shift
     });
     //cancels event
     return false;
 }
 
-function onContainerExit( tracker, position, buttonDownElement, buttonDownAny ) {
-    if ( !buttonDownElement ) {
+function onContainerExit( tracker, eventData ) {
+    if ( !eventData.buttonDownElement ) {
         THIS[ this.hash ].mouseInside = false;
         if ( !THIS[ this.hash ].animating ) {
             beginControlsAutoHide( this );
@@ -1512,14 +1512,14 @@ function onContainerExit( tracker, position, buttonDownElement, buttonDownAny )
     }
     this.raiseEvent( 'container-exit', {
         tracker: tracker,
-        position: position,
-        buttonDownElement: buttonDownElement,
-        buttonDownAny: buttonDownAny
+        position: eventData.position,
+        buttonDownElement: eventData.buttonDownElement,
+        buttonDownAny: eventData.buttonDownAny
     });
 }
 
-function onContainerRelease( tracker, position, insideElementPress, insideElementRelease ) {
-    if ( !insideElementRelease ) {
+function onContainerRelease( tracker, eventData ) {
+    if ( !eventData.insideElementRelease ) {
         THIS[ this.hash ].mouseInside = false;
         if ( !THIS[ this.hash ].animating ) {
             beginControlsAutoHide( this );
@@ -1527,20 +1527,20 @@ function onContainerRelease( tracker, position, insideElementPress, insideElemen
     }
     this.raiseEvent( 'container-release', {
         tracker: tracker,
-        position: position,
-        insideElementPress: insideElementPress,
-        insideElementRelease: insideElementRelease
+        position: eventData.position,
+        insideElementPress: eventData.insideElementPress,
+        insideElementRelease: eventData.insideElementRelease
     });
 }
 
-function onContainerEnter( tracker, position, buttonDownElement, buttonDownAny ) {
+function onContainerEnter( tracker, eventData ) {
     THIS[ this.hash ].mouseInside = true;
     abortControlsAutoHide( this );
     this.raiseEvent( 'container-enter', {
         tracker: tracker,
-        position: position,
-        buttonDownElement: buttonDownElement,
-        buttonDownAny: buttonDownAny
+        position: eventData.position,
+        buttonDownElement: eventData.buttonDownElement,
+        buttonDownAny: eventData.buttonDownAny
     });
 }