Merge branch 'master' into viewport-tests

changelog.txt

@@ -1,7 +1,35 @@
 OPENSEADRAGON CHANGELOG
 =======================
 
-1.2.0: (in progress)
+1.2.2: (in progress)
+
+1.2.1:
+
+* Added preserveOverlays option (#561)
+* Fixed: DZI tilesource was broken on IE8/IE9 (#563)
+* Exposed secondary pointer button (middle, right, etc.) events from MouseTracker and through viewer (#479)
+* MouseTracker - Improved IE 8 compatibility (#562)
+* MouseTracker - Improved IE 9+ compatibility (#564)
+* MouseTracker - Simulated touchenter/touchleave events now bubble to parent element MouseTrackers (#566)
+* MouseTracker - Improved multitouch support in enter/exit event handlers (#566)
+* MouseTracker - orphaned tracked touch pointers removed (fix for #539)
+* MouseTracker - removed touchenter/touchleave event support since the events don't exist on any known platform and have been removed from the W3C specification (#566)
+* Removed Viewer onContainerPress/onContainerRelease handlers (and the associated 'container-release' event ) that were never fired due to the canvas (child) element capturing the DOM events (#566)
+* Added 'canvas-enter', 'canvas-exit', and 'canvas-press' events to Viewer (#566)
+* ButtonGroup - removed obsolete MouseTracker event handlers (#566)
+* MouseTracker - added keydown and keyup handlers (#568)
+* Modifier keys ignored in keyboard navigation handlers (#503)
+* Requesting keyboard focus when viewer is clicked (#537)
+* Arrow key navigation fixed across platforms (#565)
+* Removed textarea element from viewer DOM. Viewer.canvas now handles keyboard navigation (#569)
+* Removed 'position' property from MouseTracker keyDownHandler/keyUpHandler/keyHandler functions (#573)
+* Fixed pointer event model detection for IE 10 and IE 11 (#571)
+* Added setMouseNavEnabled() support to Navigator (#572)
+* MouseTracker now defaults to tracking on (#558)
+* Removed Viewer focusHandler/onCanvasFocus (#577)
+* Added tabIndex option to viewer (#577)
+
+1.2.0:
 
 * New combined IIIF TileSource for 1.0 through 2.0 (#441)
     * BREAKING CHANGE: Removed IIIF1_1TileSource (now that IIIFTileSource supports all versions)
@@ -18,8 +46,9 @@ OPENSEADRAGON CHANGELOG
 * Viewport.setRotation now allows all rotation angles (#466)
 * Pinch rotate is now available (defaults to off) (#468)
 * Added option for home button to fill viewer (#474)
-* Now handling iframe/frame mouseouts properly (#481)
 * Better handling of mid-update image loaded callbacks (#409)
+* Tracked pointers are now cleaned up when Viewer.setMouseNavEnabled(false) is called (#518)
+* Added explicit pointer capture for touch event model touchstart events (#552)
 
 1.1.1:
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "OpenSeadragon",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "description": "Provides a smooth, zoomable user interface for HTML/Javascript.",
   "devDependencies": {
     "grunt": "^0.4.5",

src/button.js

@@ -355,7 +355,7 @@ $.Button = function( options ) {
             return true;
         }
 
-    }).setTracking( true );
+    });
 
     outTo( this, $.ButtonState.REST );
 };

src/buttongroup.js

@@ -105,23 +105,7 @@ $.ButtonGroup = function( options ) {
                 }
             }
         },
-        pressHandler: function ( event ) {
+    });
-            if ( event.pointerType === 'touch' && !$.MouseTracker.haveTouchEnter ) {
-                var i;
-                for ( i = 0; i < _this.buttons.length; i++ ) {
-                    _this.buttons[ i ].notifyGroupEnter();
-                }
-            }
-        },
-        releaseHandler: function ( event ) {
-            var i;
-            if ( !event.insideElementReleased || ( event.pointerType === 'touch' && !$.MouseTracker.haveTouchEnter ) ) {
-                for ( i = 0; i < _this.buttons.length; i++ ) {
-                    _this.buttons[ i ].notifyGroupExit();
-                }
-            }
-        }
-    }).setTracking( true );
 };
 
 $.ButtonGroup.prototype = /** @lends OpenSeadragon.ButtonGroup.prototype */{

src/dzitilesource.js

@@ -107,9 +107,11 @@ $.extend( $.DziTileSource.prototype, $.TileSource.prototype, /** @lends OpenSead
         var ns;
         if ( data.Image ) {
             ns = data.Image.xmlns;
-        } else if ( data.documentElement && "Image" == data.documentElement.localName ) {
+        } else if ( data.documentElement) {
+            if ("Image" == data.documentElement.localName || "Image" == data.documentElement.tagName) {
                 ns = data.documentElement.namespaceURI;
             }
+        }
 
         return ( "http://schemas.microsoft.com/deepzoom/2008" == ns ||
             "http://schemas.microsoft.com/deepzoom/2009" == ns );
@@ -221,7 +223,7 @@ function configureFromXML( tileSource, xmlDoc ){
     }
 
     var root           = xmlDoc.documentElement,
-        rootName       = root.localName,
+        rootName       = root.localName || root.tagName,
         ns             = xmlDoc.documentElement.namespaceURI,
         configuration  = null,
         displayRects   = [],
@@ -234,7 +236,10 @@ function configureFromXML( tileSource, xmlDoc ){
     if ( rootName == "Image" ) {
 
         try {
+            sizeNode = root.getElementsByTagName("Size" )[ 0 ];
+            if (sizeNode === undefined) {
                 sizeNode = root.getElementsByTagNameNS(ns, "Size" )[ 0 ];
+            }
 
             configuration = {
                 Image: {
@@ -257,11 +262,17 @@ function configureFromXML( tileSource, xmlDoc ){
                 );
             }
 
-            dispRectNodes = root.getElementsByTagNameNS(ns, "DisplayRect" );
+            dispRectNodes = root.getElementsByTagName("DisplayRect" );
+            if (dispRectNodes === undefined) {
+                dispRectNodes = root.getElementsByTagNameNS(ns, "DisplayRect" )[ 0 ];
+            }
 
             for ( i = 0; i < dispRectNodes.length; i++ ) {
                 dispRectNode = dispRectNodes[ i ];
+                rectNode     = dispRectNode.getElementsByTagName("Rect" )[ 0 ];
+                if (rectNode === undefined) {
                     rectNode = dispRectNode.getElementsByTagNameNS(ns, "Rect" )[ 0 ];
+                }
 
                 displayRects.push({
                     Rect: {

src/navigator.js

@@ -52,8 +52,7 @@ $.Navigator = function( options ){
     var viewer      = options.viewer,
         _this = this,
         viewerSize,
-        navigatorSize,
+        navigatorSize;
-        unneededElement;
 
     //We may need to create a new element and id if they did not
     //provide the id for the existing element
@@ -99,6 +98,7 @@ $.Navigator = function( options ){
         sizeRatio:     $.DEFAULT_SETTINGS.navigatorSizeRatio
     }, options, {
         element:                this.element,
+        tabIndex:               -1, // No keyboard navigation, omit from tab order
         //These need to be overridden to prevent recursion since
         //the navigator is a viewer and a viewer has a navigator
         showNavigator:          false,
@@ -168,24 +168,6 @@ $.Navigator = function( options ){
     this.displayRegionContainer.style.width = "100%";
     this.displayRegionContainer.style.height = "100%";
 
-    this.element.innerTracker = new $.MouseTracker({
-        element:         this.element,
-        dragHandler:     $.delegate( this, onCanvasDrag ),
-        clickHandler:    $.delegate( this, onCanvasClick ),
-        releaseHandler:  $.delegate( this, onCanvasRelease ),
-        scrollHandler:   $.delegate( this, onCanvasScroll )
-    }).setTracking( true );
-
-    /*this.displayRegion.outerTracker = new $.MouseTracker({
-        element:            this.container,
-        clickTimeThreshold: this.clickTimeThreshold,
-        clickDistThreshold: this.clickDistThreshold,
-        enterHandler:       $.delegate( this, onContainerEnter ),
-        exitHandler:        $.delegate( this, onContainerExit ),
-        releaseHandler:     $.delegate( this, onContainerRelease )
-    }).setTracking( this.mouseNavEnabled ? true : false ); // always tracking*/
-
-
     viewer.addControl(
         this.element,
         options.controlOptions
@@ -211,10 +193,6 @@ $.Navigator = function( options ){
 
     this.displayRegionContainer.appendChild(this.displayRegion);
     this.element.getElementsByTagName('div')[0].appendChild(this.displayRegionContainer);
-    unneededElement = this.element.getElementsByTagName('textarea')[0];
-    if (unneededElement) {
-        unneededElement.parentNode.removeChild(unneededElement);
-    }
 
     if (options.navigatorRotate)
     {
@@ -223,8 +201,18 @@ $.Navigator = function( options ){
             _setTransformRotate(_this.displayRegion, -args.degrees);
             _this.viewport.setRotation(args.degrees);
         });
-
     }
+
+    // Remove the base class' (Viewer's) innerTracker and replace it with our own
+    this.innerTracker.destroy();
+    this.innerTracker = new $.MouseTracker({
+        element:         this.element,
+        dragHandler:     $.delegate( this, onCanvasDrag ),
+        clickHandler:    $.delegate( this, onCanvasClick ),
+        releaseHandler:  $.delegate( this, onCanvasRelease ),
+        scrollHandler:   $.delegate( this, onCanvasScroll )
+    });
+
 };
 
 $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /** @lends OpenSeadragon.Navigator.prototype */{

src/openseadragon.js

@@ -126,6 +126,10 @@
   *     The element to append the viewer's container element to. If not provided, the 'id' property must be provided.
   *     If both the element and id properties are specified, the viewer is appended to the element provided in the element property.
   *
+  * @property {Number} [tabIndex=0]
+  *     Tabbing order index to assign to the viewer element. Positive values are selected in increasing order. When tabIndex is 0 
+  *     source order is used. A negative value omits the viewer from the tabbing order.
+  *
   * @property {Array|String|Function|Object[]|Array[]|String[]|Function[]} [tileSources=null]
   *     As an Array, the tileSource can hold either Objects or mixed
   *     types of Arrays of Objects, Strings, or Functions. When a value is a String,
@@ -515,10 +519,18 @@
   *
   * @property {Boolean} [preserveViewport=false]
   *     If the viewer has been configured with a sequence of tile sources, then
-  *     normally navigating to through each image resets the viewport to 'home'
+  *     normally navigating through each image resets the viewport to 'home'
   *     position.  If preserveViewport is set to true, then the viewport position
   *     is preserved when navigating between images in the sequence.
   *
+  * @property {Boolean} [preserveOverlays=false]
+  *     If the viewer has been configured with a sequence of tile sources, then
+  *     normally navigating through each image resets the overlays.
+  *     If preserveOverlays is set to true, then the overlays
+  *     are preserved when navigating between images in the sequence.
+  *     Note: setting preserveOverlays overrides any overlays specified in the
+  *     "overlays" property.
+  *
   * @property {Boolean} [showReferenceStrip=false]
   *     If the viewer has been configured with a sequence of tile sources, then
   *     display a scrolling strip of image thumbnails for navigating through the images.
@@ -945,6 +957,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
             showSequenceControl:     true,  //SEQUENCE
             sequenceControlAnchor:   null,  //SEQUENCE
             preserveViewport:        false, //SEQUENCE
+            preserveOverlays:        false, //SEQUENCE
             navPrevNextWrap:         false, //SEQUENCE
             showNavigationControl:   true,  //ZOOM/HOME/FULL/ROTATION
             navigationControlAnchor: null,  //ZOOM/HOME/FULL/ROTATION

src/referencestrip.js

@@ -125,8 +125,9 @@ $.ReferenceStrip = function ( options ) {
         scrollHandler:  $.delegate( this, onStripScroll ),
         enterHandler:   $.delegate( this, onStripEnter ),
         exitHandler:    $.delegate( this, onStripExit ),
+        keyDownHandler: $.delegate( this, onKeyDown ),
         keyHandler:     $.delegate( this, onKeyPress )
-    } ).setTracking( true );
+    } );
 
     //Controls the position and orientation of the reference strip and sets the
     //appropriate width and height
@@ -214,7 +215,7 @@ $.ReferenceStrip = function ( options ) {
                     viewer.goToPage( page );
                 }
             }
-        } ).setTracking( true );
+        } );
 
         this.element.appendChild( element );
 
@@ -446,8 +447,10 @@ function loadPanels( strip, viewerSize, scroll ) {
             style.width         = ( strip.panelWidth - 4 ) + 'px';
             style.height        = ( strip.panelHeight - 4 ) + 'px';
 
+            // TODO: What is this for? Future keyboard navigation support?
             miniViewer.displayRegion.innerTracker = new $.MouseTracker( {
-                element: miniViewer.displayRegion
+                element: miniViewer.displayRegion,
+                startDisabled: true
             } );
 
             element.getElementsByTagName( 'div' )[0].appendChild(
@@ -511,6 +514,37 @@ function onStripExit( event ) {
 }
 
 
+/**
+ * @private
+ * @inner
+ * @function
+ */
+function onKeyDown( event ) {
+    //console.log( event.keyCode );
+
+    if ( !event.preventDefaultAction && !event.ctrl && !event.alt && !event.meta ) {
+        switch ( event.keyCode ) {
+            case 38: //up arrow
+                onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } );
+                return false;
+            case 40: //down arrow
+                onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } );
+                return false;
+            case 37: //left arrow
+                onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } );
+                return false;
+            case 39: //right arrow
+                onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } );
+                return false;
+            default:
+                //console.log( 'navigator keycode %s', event.keyCode );
+                return true;
+        }
+    } else {
+        return true;
+    }
+}
+
 
 /**
  * @private
@@ -520,6 +554,7 @@ function onStripExit( event ) {
 function onKeyPress( event ) {
     //console.log( event.keyCode );
 
+    if ( !event.preventDefaultAction && !event.ctrl && !event.alt && !event.meta ) {
         switch ( event.keyCode ) {
             case 61: //=|+
                 onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } );
@@ -530,26 +565,25 @@ function onKeyPress( event ) {
             case 48: //0|)
             case 119: //w
             case 87: //W
-        case 38: //up arrow
                 onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } );
                 return false;
             case 115: //s
             case 83: //S
-        case 40: //down arrow
                 onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } );
                 return false;
             case 97: //a
-        case 37: //left arrow
                 onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } );
                 return false;
             case 100: //d
-        case 39: //right arrow
                 onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } );
                 return false;
             default:
                 //console.log( 'navigator keycode %s', event.keyCode );
                 return true;
         }
+    } else {
+        return true;
+    }
 }
 
 

src/viewer.js

@@ -108,14 +108,6 @@ $.Viewer = function( options ) {
          * @memberof OpenSeadragon.Viewer#
          */
         container:      null,
-        /**
-         * A &lt;textarea&gt; element, the element where keyboard events are handled.<br><br>
-         * Child element of {@link OpenSeadragon.Viewer#container},
-         * positioned below {@link OpenSeadragon.Viewer#canvas}. 
-         * @member {Element} keyboardCommandArea
-         * @memberof OpenSeadragon.Viewer#
-         */
-        keyboardCommandArea: null,
         /**
          * A &lt;div&gt; element, the element where user-input events are handled for panning and zooming.<br><br>
          * Child element of {@link OpenSeadragon.Viewer#container},
@@ -263,7 +255,6 @@ $.Viewer = function( options ) {
 
     this.element              = this.element || document.getElementById( this.id );
     this.canvas               = $.makeNeutralElement( "div" );
-    this.keyboardCommandArea  = $.makeNeutralElement( "textarea" );
     this.drawersContainer     = $.makeNeutralElement( "div" );
     this.overlaysContainer    = $.makeNeutralElement( "div" );
 
@@ -277,6 +268,7 @@ $.Viewer = function( options ) {
         style.left     = "0px";
     }(this.canvas.style));
     $.setElementTouchActionNone( this.canvas );
+    this.canvas.tabIndex = options.tabIndex || 0;
 
     //the container is created through applying the ControlDock constructor above
     this.container.className = "openseadragon-container";
@@ -290,19 +282,7 @@ $.Viewer = function( options ) {
         style.textAlign = "left";  // needed to protect against
     }( this.container.style ));
 
-    this.keyboardCommandArea.className = "keyboard-command-area";
-    (function( style ){
-        style.width    = "100%";
-        style.height   = "100%";
-        style.overflow = "hidden";
-        style.position = "absolute";
-        style.top      = "0px";
-        style.left     = "0px";
-        style.resize   = "none";
-    }(  this.keyboardCommandArea.style ));
-
     this.container.insertBefore( this.canvas, this.container.firstChild );
-    this.container.insertBefore( this.keyboardCommandArea, this.container.firstChild );
     this.element.appendChild( this.container );
     this.canvas.appendChild( this.drawersContainer );
     this.canvas.appendChild( this.overlaysContainer );
@@ -315,96 +295,39 @@ $.Viewer = function( options ) {
     this.bodyOverflow   = document.body.style.overflow;
     this.docOverflow    = document.documentElement.style.overflow;
 
-    this.keyboardCommandArea.innerTracker = new $.MouseTracker({
-            _this : this,
-            element:            this.keyboardCommandArea,
-            focusHandler:       function( event ){
-                if ( !event.preventDefaultAction ) {
-                    var point    = $.getElementPosition( this.element );
-                    window.scrollTo( 0, point.y );
-                }
-            },
-
-            keyHandler:         function( event ){
-                if ( !event.preventDefaultAction ) {
-                    switch( event.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 ( event.shift ) {
-                                _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 ( event.shift ) {
-                                _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', event.keyCode );
-                            return true;
-                    }
-                }
-            }
-        }).setTracking( true ); // default state
-
-
     this.innerTracker = new $.MouseTracker({
         element:                  this.canvas,
+        startDisabled:            this.mouseNavEnabled ? false : true,
         clickTimeThreshold:       this.clickTimeThreshold,
         clickDistThreshold:       this.clickDistThreshold,
         dblClickTimeThreshold:    this.dblClickTimeThreshold,
         dblClickDistThreshold:    this.dblClickDistThreshold,
+        keyDownHandler:           $.delegate( this, onCanvasKeyDown ),
+        keyHandler:               $.delegate( this, onCanvasKeyPress ),
         clickHandler:             $.delegate( this, onCanvasClick ),
         dblClickHandler:          $.delegate( this, onCanvasDblClick ),
         dragHandler:              $.delegate( this, onCanvasDrag ),
         dragEndHandler:           $.delegate( this, onCanvasDragEnd ),
+        enterHandler:             $.delegate( this, onCanvasEnter ),
+        exitHandler:              $.delegate( this, onCanvasExit ),
+        pressHandler:             $.delegate( this, onCanvasPress ),
         releaseHandler:           $.delegate( this, onCanvasRelease ),
+        nonPrimaryPressHandler:   $.delegate( this, onCanvasNonPrimaryPress ),
+        nonPrimaryReleaseHandler: $.delegate( this, onCanvasNonPrimaryRelease ),
         scrollHandler:            $.delegate( this, onCanvasScroll ),
         pinchHandler:             $.delegate( this, onCanvasPinch )
-    }).setTracking( this.mouseNavEnabled ? true : false ); // default state
+    });
 
     this.outerTracker = new $.MouseTracker({
         element:               this.container,
+        startDisabled:         this.mouseNavEnabled ? false : true,
         clickTimeThreshold:    this.clickTimeThreshold,
         clickDistThreshold:    this.clickDistThreshold,
         dblClickTimeThreshold: this.dblClickTimeThreshold,
         dblClickDistThreshold: this.dblClickDistThreshold,
         enterHandler:          $.delegate( this, onContainerEnter ),
-        exitHandler:           $.delegate( this, onContainerExit ),
+        exitHandler:           $.delegate( this, onContainerExit )
-        pressHandler:          $.delegate( this, onContainerPress ),
+    });
-        releaseHandler:        $.delegate( this, onContainerRelease )
-    }).setTracking( this.mouseNavEnabled ? true : false ); // always tracking
 
     if( this.toolbar ){
         this.toolbar = new $.ControlDock({ element: this.toolbar });
@@ -539,9 +462,13 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
             this.navigator.close();
         }
 
+        if( ! this.preserveOverlays)
+        {
             this.clearOverlays();
-        this.drawersContainer.innerHTML = "";
             this.overlaysContainer.innerHTML = "";
+        }
+
+        this.drawersContainer.innerHTML = "";
 
         if ( this.drawer ) {
             this.drawer.destroy();
@@ -605,9 +532,6 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
         }
 
         // destroy the mouse trackers
-        if (this.keyboardCommandArea){
-            this.keyboardCommandArea.innerTracker.destroy();
-        }
         if (this.innerTracker){
             this.innerTracker.destroy();
         }
@@ -620,7 +544,6 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
 
         // clear all our references to dom objects
         this.canvas = null;
-        this.keyboardCommandArea = null;
         this.container = null;
 
         // clear our reference to the main element - they will need to pass it in again, creating a new viewer
@@ -1968,6 +1891,10 @@ function openTileSource( viewer, source ) {
         _this.viewport.resetContentSize( _this.source.dimensions );
     }
 
+    if( _this.preserveOverlays ){
+        _this.overlays = _this.currentOverlays;
+    }
+
     _this.source.overlays = _this.source.overlays || [];
 
     _this.drawer = new $.Drawer({
@@ -2262,9 +2189,102 @@ function onBlur(){
 
 }
 
+function onCanvasKeyDown( event ) {
+    if ( !event.preventDefaultAction && !event.ctrl && !event.alt && !event.meta ) {
+        switch( event.keyCode ){
+            case 38://up arrow
+                if ( event.shift ) {
+                    this.viewport.zoomBy(1.1);
+                } else {
+                    this.viewport.panBy(new $.Point(0, -0.05));
+                }
+                this.viewport.applyConstraints();
+                return false;
+            case 40://down arrow
+                if ( event.shift ) {
+                    this.viewport.zoomBy(0.9);
+                } else {
+                    this.viewport.panBy(new $.Point(0, 0.05));
+                }
+                this.viewport.applyConstraints();
+                return false;
+            case 37://left arrow
+                this.viewport.panBy(new $.Point(-0.05, 0));
+                this.viewport.applyConstraints();
+                return false;
+            case 39://right arrow
+                this.viewport.panBy(new $.Point(0.05, 0));
+                this.viewport.applyConstraints();
+                return false;
+            default:
+                //console.log( 'navigator keycode %s', event.keyCode );
+                return true;
+        }
+    } else {
+        return true;
+    }
+}
+
+function onCanvasKeyPress( event ) {
+    if ( !event.preventDefaultAction && !event.ctrl && !event.alt && !event.meta ) {
+        switch( event.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
+                if ( event.shift ) {
+                    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
+                if ( event.shift ) {
+                    this.viewport.zoomBy(0.9);
+                } else {
+                    this.viewport.panBy(new $.Point(0, 0.05));
+                }
+                this.viewport.applyConstraints();
+                return false;
+            case 97://a
+                this.viewport.panBy(new $.Point(-0.05, 0));
+                this.viewport.applyConstraints();
+                return false;
+            case 100://d
+                this.viewport.panBy(new $.Point(0.05, 0));
+                this.viewport.applyConstraints();
+                return false;
+            default:
+                //console.log( 'navigator keycode %s', event.keyCode );
+                return true;
+        }
+    } else {
+        return true;
+    }
+}
+
 function onCanvasClick( event ) {
     var gestureSettings;
 
+    var haveKeyboardFocus = document.activeElement == this.canvas;
+
+    // If we don't have keyboard focus, request it.
+    if ( !haveKeyboardFocus ) {
+        this.canvas.focus();
+    }
+
     if ( !event.preventDefaultAction && this.viewport && event.quick ) {
         gestureSettings = this.gestureSettingsByDeviceType( event.pointerType );
         if ( gestureSettings.clickToZoom ) {
@@ -2420,15 +2440,102 @@ function onCanvasDragEnd( event ) {
     });
 }
 
+function onCanvasEnter( event ) {
+    /**
+     * Raised when a pointer enters the {@link OpenSeadragon.Viewer#canvas} element.
+     *
+     * @event canvas-enter
+     * @memberof OpenSeadragon.Viewer
+     * @type {object}
+     * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
+     * @property {OpenSeadragon.MouseTracker} tracker - A reference to the MouseTracker which originated this event.
+     * @property {String} pointerType - "mouse", "touch", "pen", etc.
+     * @property {OpenSeadragon.Point} position - The position of the event relative to the tracked element.
+     * @property {Number} buttons - Current buttons pressed. A combination of bit flags 0: none, 1: primary (or touch contact), 2: secondary, 4: aux (often middle), 8: X1 (often back), 16: X2 (often forward), 32: pen eraser.
+     * @property {Number} pointers - Number of pointers (all types) active in the tracked element.
+     * @property {Boolean} insideElementPressed - True if the left mouse button is currently being pressed and was initiated inside the tracked element, otherwise false.
+     * @property {Boolean} buttonDownAny - Was the button down anywhere in the screen during the event. <span style="color:red;">Deprecated. Use buttons instead.</span>
+     * @property {Object} originalEvent - The original DOM event.
+     * @property {?Object} userData - Arbitrary subscriber-defined object.
+     */
+    this.raiseEvent( 'canvas-enter', {
+        tracker: event.eventSource,
+        pointerType: event.pointerType,
+        position: event.position,
+        buttons: event.buttons,
+        pointers: event.pointers,
+        insideElementPressed: event.insideElementPressed,
+        buttonDownAny: event.buttonDownAny,
+        originalEvent: event.originalEvent
+    });
+}
+
+function onCanvasExit( event ) {
+    /**
+     * Raised when a pointer leaves the {@link OpenSeadragon.Viewer#canvas} element.
+     *
+     * @event canvas-exit
+     * @memberof OpenSeadragon.Viewer
+     * @type {object}
+     * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
+     * @property {OpenSeadragon.MouseTracker} tracker - A reference to the MouseTracker which originated this event.
+     * @property {String} pointerType - "mouse", "touch", "pen", etc.
+     * @property {OpenSeadragon.Point} position - The position of the event relative to the tracked element.
+     * @property {Number} buttons - Current buttons pressed. A combination of bit flags 0: none, 1: primary (or touch contact), 2: secondary, 4: aux (often middle), 8: X1 (often back), 16: X2 (often forward), 32: pen eraser.
+     * @property {Number} pointers - Number of pointers (all types) active in the tracked element.
+     * @property {Boolean} insideElementPressed - True if the left mouse button is currently being pressed and was initiated inside the tracked element, otherwise false.
+     * @property {Boolean} buttonDownAny - Was the button down anywhere in the screen during the event. <span style="color:red;">Deprecated. Use buttons instead.</span>
+     * @property {Object} originalEvent - The original DOM event.
+     * @property {?Object} userData - Arbitrary subscriber-defined object.
+     */
+    this.raiseEvent( 'canvas-exit', {
+        tracker: event.eventSource,
+        pointerType: event.pointerType,
+        position: event.position,
+        buttons: event.buttons,
+        pointers: event.pointers,
+        insideElementPressed: event.insideElementPressed,
+        buttonDownAny: event.buttonDownAny,
+        originalEvent: event.originalEvent
+    });
+}
+
+function onCanvasPress( event ) {
+    /**
+     * Raised when the primary mouse button is pressed or touch starts on the {@link OpenSeadragon.Viewer#canvas} element.
+     *
+     * @event canvas-press
+     * @memberof OpenSeadragon.Viewer
+     * @type {object}
+     * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
+     * @property {OpenSeadragon.MouseTracker} tracker - A reference to the MouseTracker which originated this event.
+     * @property {String} pointerType - "mouse", "touch", "pen", etc.
+     * @property {OpenSeadragon.Point} position - The position of the event relative to the tracked element.
+     * @property {Boolean} insideElementPressed - True if the left mouse button is currently being pressed and was initiated inside the tracked element, otherwise false.
+     * @property {Boolean} insideElementReleased - True if the cursor still inside the tracked element when the button was released.
+     * @property {Object} originalEvent - The original DOM event.
+     * @property {?Object} userData - Arbitrary subscriber-defined object.
+     */
+    this.raiseEvent( 'canvas-press', {
+        tracker: event.eventSource,
+        pointerType: event.pointerType,
+        position: event.position,
+        insideElementPressed: event.insideElementPressed,
+        insideElementReleased: event.insideElementReleased,
+        originalEvent: event.originalEvent
+    });
+}
+
 function onCanvasRelease( event ) {
     /**
-     * Raised when the mouse button is released or touch ends on the {@link OpenSeadragon.Viewer#canvas} element.
+     * Raised when the primary mouse button is released or touch ends on the {@link OpenSeadragon.Viewer#canvas} element.
      *
      * @event canvas-release
      * @memberof OpenSeadragon.Viewer
      * @type {object}
      * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
      * @property {OpenSeadragon.MouseTracker} tracker - A reference to the MouseTracker which originated this event.
+     * @property {String} pointerType - "mouse", "touch", "pen", etc.
      * @property {OpenSeadragon.Point} position - The position of the event relative to the tracked element.
      * @property {Boolean} insideElementPressed - True if the left mouse button is currently being pressed and was initiated inside the tracked element, otherwise false.
      * @property {Boolean} insideElementReleased - True if the cursor still inside the tracked element when the button was released.
@@ -2437,6 +2544,7 @@ function onCanvasRelease( event ) {
      */
     this.raiseEvent( 'canvas-release', {
         tracker: event.eventSource,
+        pointerType: event.pointerType,
         position: event.position,
         insideElementPressed: event.insideElementPressed,
         insideElementReleased: event.insideElementReleased,
@@ -2444,6 +2552,62 @@ function onCanvasRelease( event ) {
     });
 }
 
+function onCanvasNonPrimaryPress( event ) {
+    /**
+     * Raised when any non-primary pointer button is pressed on the {@link OpenSeadragon.Viewer#canvas} element.
+     *
+     * @event canvas-nonprimary-press
+     * @memberof OpenSeadragon.Viewer
+     * @type {object}
+     * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
+     * @property {OpenSeadragon.MouseTracker} tracker - A reference to the MouseTracker which originated this event.
+     * @property {OpenSeadragon.Point} position - The position of the event relative to the tracked element.
+     * @property {String} pointerType - "mouse", "touch", "pen", etc.
+     * @property {Number} button - Button which caused the event.
+     *      -1: none, 0: primary/left, 1: aux/middle, 2: secondary/right, 3: X1/back, 4: X2/forward, 5: pen eraser.
+     * @property {Number} buttons - Current buttons pressed.
+     *      Combination of bit flags 0: none, 1: primary (or touch contact), 2: secondary, 4: aux (often middle), 8: X1 (often back), 16: X2 (often forward), 32: pen eraser.
+     * @property {Object} originalEvent - The original DOM event.
+     * @property {?Object} userData - Arbitrary subscriber-defined object.
+     */
+    this.raiseEvent( 'canvas-nonprimary-press', {
+        tracker: event.eventSource,
+        position: event.position,
+        pointerType: event.pointerType,
+        button: event.button,
+        buttons: event.buttons,
+        originalEvent: event.originalEvent
+    });
+}
+
+function onCanvasNonPrimaryRelease( event ) {
+    /**
+     * Raised when any non-primary pointer button is released on the {@link OpenSeadragon.Viewer#canvas} element.
+     *
+     * @event canvas-nonprimary-release
+     * @memberof OpenSeadragon.Viewer
+     * @type {object}
+     * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
+     * @property {OpenSeadragon.MouseTracker} tracker - A reference to the MouseTracker which originated this event.
+     * @property {OpenSeadragon.Point} position - The position of the event relative to the tracked element.
+     * @property {String} pointerType - "mouse", "touch", "pen", etc.
+     * @property {Number} button - Button which caused the event.
+     *      -1: none, 0: primary/left, 1: aux/middle, 2: secondary/right, 3: X1/back, 4: X2/forward, 5: pen eraser.
+     * @property {Number} buttons - Current buttons pressed.
+     *      Combination of bit flags 0: none, 1: primary (or touch contact), 2: secondary, 4: aux (often middle), 8: X1 (often back), 16: X2 (often forward), 32: pen eraser.
+     * @property {Object} originalEvent - The original DOM event.
+     * @property {?Object} userData - Arbitrary subscriber-defined object.
+     */
+    this.raiseEvent( 'canvas-nonprimary-release', {
+        tracker: event.eventSource,
+        position: event.position,
+        pointerType: event.pointerType,
+        button: event.button,
+        buttons: event.buttons,
+        originalEvent: event.originalEvent
+    });
+}
+
 function onCanvasPinch( event ) {
     var gestureSettings,
         centerPt,
@@ -2546,8 +2710,38 @@ function onCanvasScroll( event ) {
     return false;
 }
 
+function onContainerEnter( event ) {
+    THIS[ this.hash ].mouseInside = true;
+    abortControlsAutoHide( this );
+    /**
+     * Raised when the cursor enters the {@link OpenSeadragon.Viewer#container} element.
+     *
+     * @event container-enter
+     * @memberof OpenSeadragon.Viewer
+     * @type {object}
+     * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
+     * @property {OpenSeadragon.MouseTracker} tracker - A reference to the MouseTracker which originated this event.
+     * @property {OpenSeadragon.Point} position - The position of the event relative to the tracked element.
+     * @property {Number} buttons - Current buttons pressed. A combination of bit flags 0: none, 1: primary (or touch contact), 2: secondary, 4: aux (often middle), 8: X1 (often back), 16: X2 (often forward), 32: pen eraser.
+     * @property {Number} pointers - Number of pointers (all types) active in the tracked element.
+     * @property {Boolean} insideElementPressed - True if the left mouse button is currently being pressed and was initiated inside the tracked element, otherwise false.
+     * @property {Boolean} buttonDownAny - Was the button down anywhere in the screen during the event. <span style="color:red;">Deprecated. Use buttons instead.</span>
+     * @property {Object} originalEvent - The original DOM event.
+     * @property {?Object} userData - Arbitrary subscriber-defined object.
+     */
+    this.raiseEvent( 'container-enter', {
+        tracker: event.eventSource,
+        position: event.position,
+        buttons: event.buttons,
+        pointers: event.pointers,
+        insideElementPressed: event.insideElementPressed,
+        buttonDownAny: event.buttonDownAny,
+        originalEvent: event.originalEvent
+    });
+}
+
 function onContainerExit( event ) {
-    if ( !event.insideElementPressed ) {
+    if ( event.pointers < 1 ) {
         THIS[ this.hash ].mouseInside = false;
         if ( !THIS[ this.hash ].animating ) {
             beginControlsAutoHide( this );
@@ -2563,6 +2757,7 @@ function onContainerExit( event ) {
      * @property {OpenSeadragon.MouseTracker} tracker - A reference to the MouseTracker which originated this event.
      * @property {OpenSeadragon.Point} position - The position of the event relative to the tracked element.
      * @property {Number} buttons - Current buttons pressed. A combination of bit flags 0: none, 1: primary (or touch contact), 2: secondary, 4: aux (often middle), 8: X1 (often back), 16: X2 (often forward), 32: pen eraser.
+     * @property {Number} pointers - Number of pointers (all types) active in the tracked element.
      * @property {Boolean} insideElementPressed - True if the left mouse button is currently being pressed and was initiated inside the tracked element, otherwise false.
      * @property {Boolean} buttonDownAny - Was the button down anywhere in the screen during the event. <span style="color:red;">Deprecated. Use buttons instead.</span>
      * @property {Object} originalEvent - The original DOM event.
@@ -2572,71 +2767,7 @@ function onContainerExit( event ) {
         tracker: event.eventSource,
         position: event.position,
         buttons: event.buttons,
-        insideElementPressed: event.insideElementPressed,
+        pointers: event.pointers,
-        buttonDownAny: event.buttonDownAny,
-        originalEvent: event.originalEvent
-    });
-}
-
-function onContainerPress( event ) {
-    if ( event.pointerType === 'touch' && !$.MouseTracker.haveTouchEnter ) {
-        THIS[ this.hash ].mouseInside = true;
-        abortControlsAutoHide( this );
-    }
-}
-
-function onContainerRelease( event ) {
-    if ( !event.insideElementReleased || ( event.pointerType === 'touch' && !$.MouseTracker.haveTouchEnter ) ) {
-        THIS[ this.hash ].mouseInside = false;
-        if ( !THIS[ this.hash ].animating ) {
-            beginControlsAutoHide( this );
-        }
-    }
-    /**
-     * Raised when the mouse button is released or touch ends on the {@link OpenSeadragon.Viewer#container} element.
-     *
-     * @event container-release
-     * @memberof OpenSeadragon.Viewer
-     * @type {object}
-     * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
-     * @property {OpenSeadragon.MouseTracker} tracker - A reference to the MouseTracker which originated this event.
-     * @property {OpenSeadragon.Point} position - The position of the event relative to the tracked element.
-     * @property {Boolean} insideElementPressed - True if the left mouse button is currently being pressed and was initiated inside the tracked element, otherwise false.
-     * @property {Boolean} insideElementReleased - True if the cursor still inside the tracked element when the button was released.
-     * @property {Object} originalEvent - The original DOM event.
-     * @property {?Object} userData - Arbitrary subscriber-defined object.
-     */
-    this.raiseEvent( 'container-release', {
-        tracker: event.eventSource,
-        position: event.position,
-        insideElementPressed: event.insideElementPressed,
-        insideElementReleased: event.insideElementReleased,
-        originalEvent: event.originalEvent
-    });
-}
-
-function onContainerEnter( event ) {
-    THIS[ this.hash ].mouseInside = true;
-    abortControlsAutoHide( this );
-    /**
-     * Raised when the cursor enters the {@link OpenSeadragon.Viewer#container} element.
-     *
-     * @event container-enter
-     * @memberof OpenSeadragon.Viewer
-     * @type {object}
-     * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
-     * @property {OpenSeadragon.MouseTracker} tracker - A reference to the MouseTracker which originated this event.
-     * @property {OpenSeadragon.Point} position - The position of the event relative to the tracked element.
-     * @property {Number} buttons - Current buttons pressed. A combination of bit flags 0: none, 1: primary (or touch contact), 2: secondary, 4: aux (often middle), 8: X1 (often back), 16: X2 (often forward), 32: pen eraser.
-     * @property {Boolean} insideElementPressed - True if the left mouse button is currently being pressed and was initiated inside the tracked element, otherwise false.
-     * @property {Boolean} buttonDownAny - Was the button down anywhere in the screen during the event. <span style="color:red;">Deprecated. Use buttons instead.</span>
-     * @property {Object} originalEvent - The original DOM event.
-     * @property {?Object} userData - Arbitrary subscriber-defined object.
-     */
-    this.raiseEvent( 'container-enter', {
-        tracker: event.eventSource,
-        position: event.position,
-        buttons: event.buttons,
         insideElementPressed: event.insideElementPressed,
         buttonDownAny: event.buttonDownAny,
         originalEvent: event.originalEvent

test/events.js

@@ -35,6 +35,8 @@
             origExitHandler,
             origPressHandler,
             origReleaseHandler,
+            origNonPrimaryPressHandler,
+            origNonPrimaryReleaseHandler,
             origMoveHandler,
             origClickHandler,
             origDblClickHandler,
@@ -44,6 +46,10 @@
             exitCount,
             pressCount,
             releaseCount,
+            rightPressCount,
+            rightReleaseCount,
+            middlePressCount,
+            middleReleaseCount,
             moveCount,
             clickCount,
             dblClickCount,
@@ -94,6 +100,36 @@
                     return true;
                 }
             };
+            origNonPrimaryPressHandler = tracker.nonPrimaryPressHandler;
+            tracker.nonPrimaryPressHandler = function ( event ) {
+                if (event.button === 0) {
+                    pressCount++;
+                } else if (event.button === 1) {
+                    middlePressCount++;
+                } else if (event.button === 2) {
+                    rightPressCount++;
+                }
+                if (origNonPrimaryPressHandler) {
+                    return origNonPrimaryPressHandler( event );
+                } else {
+                    return true;
+                }
+            };
+            origNonPrimaryReleaseHandler = tracker.nonPrimaryReleaseHandler;
+            tracker.nonPrimaryReleaseHandler = function ( event ) {
+                if (event.button === 0) {
+                    releaseCount++;
+                } else if (event.button === 1) {
+                    middleReleaseCount++;
+                } else if (event.button === 2) {
+                    rightReleaseCount++;
+                }
+                if (origNonPrimaryReleaseHandler) {
+                    return origNonPrimaryReleaseHandler( event );
+                } else {
+                    return true;
+                }
+            };
             origMoveHandler = tracker.moveHandler;
             tracker.moveHandler = function ( event ) {
                 moveCount++;
@@ -168,20 +204,37 @@
             simEvent.relatedTarget = document.body;
             $canvas.simulate( OpenSeadragon.MouseTracker.haveMouseEnter ? 'mouseleave' : 'mouseout', simEvent );
         };
-        var simulateLeaveFrame = function (x, y) {
+
-            simEvent.clientX = offset.left + x;
+        //var simulateLeaveFrame = function (x, y) {
-            simEvent.clientY = offset.top  + y;
+        //    simEvent.clientX = offset.left + x;
-            simEvent.relatedTarget = document.getElementsByTagName("html")[0];
+        //    simEvent.clientY = offset.top  + y;
-            $canvas.simulate( OpenSeadragon.MouseTracker.haveMouseEnter ? 'mouseleave' : 'mouseout', simEvent );
+        //    simEvent.relatedTarget = document.getElementsByTagName("html")[0];
-        };
+        //    $canvas.simulate( OpenSeadragon.MouseTracker.haveMouseEnter ? 'mouseleave' : 'mouseout', simEvent );
+        //};
 
         var simulateDown = function (x, y) {
+            simEvent.button = 0;
             simEvent.clientX = offset.left + x;
             simEvent.clientY = offset.top  + y;
             $canvas.simulate( 'mousedown', simEvent );
         };
 
         var simulateUp = function (x, y) {
+            simEvent.button = 0;
+            simEvent.clientX = offset.left + x;
+            simEvent.clientY = offset.top  + y;
+            $canvas.simulate( 'mouseup', simEvent );
+        };
+
+        var simulateNonPrimaryDown = function (x, y, button) {
+            simEvent.button = button;
+            simEvent.clientX = offset.left + x;
+            simEvent.clientY = offset.top  + y;
+            $canvas.simulate( 'mousedown', simEvent );
+        };
+
+        var simulateNonPrimaryUp = function (x, y, button) {
+            simEvent.button = button;
             simEvent.clientX = offset.left + x;
             simEvent.clientY = offset.top  + y;
             $canvas.simulate( 'mouseup', simEvent );
@@ -198,6 +251,7 @@
 
         var resetForAssessment = function () {
             simEvent = {
+                button: 0,
                 clientX: offset.left,
                 clientY: offset.top
             };
@@ -205,6 +259,10 @@
             exitCount = 0;
             pressCount = 0;
             releaseCount = 0;
+            rightPressCount = 0;
+            rightReleaseCount = 0;
+            middlePressCount = 0;
+            middleReleaseCount = 0;
             moveCount = 0;
             clickCount = 0;
             dblClickCount = 0;
@@ -231,6 +289,18 @@
             if ('releaseCount' in expected) {
                 equal( releaseCount, expected.releaseCount, expected.description + 'releaseHandler event count matches expected (' + expected.releaseCount + ')' );
             }
+            if ('rightPressCount' in expected) {
+                equal( rightPressCount, expected.rightPressCount, expected.description + 'nonPrimaryPressHandler event count (secondary/right button) matches expected (' + expected.rightPressCount + ')' );
+            }
+            if ('rightReleaseCount' in expected) {
+                equal( rightReleaseCount, expected.rightReleaseCount, expected.description + 'nonPrimaryReleaseHandler event count (secondary/right button) matches expected (' + expected.rightReleaseCount + ')' );
+            }
+            if ('middlePressCount' in expected) {
+                equal( middlePressCount, expected.middlePressCount, expected.description + 'nonPrimaryPressHandler event count (aux/middle button) matches expected (' + expected.middlePressCount + ')' );
+            }
+            if ('middleReleaseCount' in expected) {
+                equal( middleReleaseCount, expected.middleReleaseCount, expected.description + 'nonPrimaryReleaseHandler event count (aux/middle button) matches expected (' + expected.middleReleaseCount + ')' );
+            }
             if ('moveCount' in expected) {
                 equal( moveCount, expected.moveCount, expected.description + 'moveHandler event count matches expected (' + expected.moveCount + ')' );
             }
@@ -290,6 +360,10 @@
                 exitCount:             0,
                 pressCount:            0,
                 releaseCount:          1,
+                rightPressCount:       0,
+                rightReleaseCount:     0,
+                middlePressCount:      0,
+                middleReleaseCount:    0,
                 moveCount:             20,
                 clickCount:            0,
                 dblClickCount:         0,
@@ -315,6 +389,10 @@
                 exitCount:             1,
                 pressCount:            0,
                 releaseCount:          0,
+                rightPressCount:       0,
+                rightReleaseCount:     0,
+                middlePressCount:      0,
+                middleReleaseCount:    0,
                 moveCount:             20,
                 clickCount:            0,
                 dblClickCount:         0,
@@ -338,6 +416,10 @@
                 exitCount:             1,
                 pressCount:            0,
                 releaseCount:          0,
+                rightPressCount:       0,
+                rightReleaseCount:     0,
+                middlePressCount:      0,
+                middleReleaseCount:    0,
                 moveCount:             20,
                 clickCount:            0,
                 dblClickCount:         0,
@@ -350,7 +432,7 @@
                 //quickClick:            false
             });
 
-            // enter-press-release-press-release-exit (double click)
+            // enter-press-release-press-release-exit (primary/left double click)
             resetForAssessment();
             simulateEnter(0, 0);
             simulateDown(0, 0);
@@ -359,11 +441,15 @@
             simulateUp(0, 0);
             simulateLeave(-1, -1);
             assessGestureExpectations({
-                description:           'enter-press-release-press-release-exit (double click):  ',
+                description:           'enter-press-release-press-release-exit (primary/left double click):  ',
                 enterCount:            1,
                 exitCount:             1,
                 pressCount:            2,
                 releaseCount:          2,
+                rightPressCount:       0,
+                rightReleaseCount:     0,
+                middlePressCount:      0,
+                middleReleaseCount:    0,
                 moveCount:             0,
                 clickCount:            2,
                 dblClickCount:         1,
@@ -376,18 +462,22 @@
                 //quickClick:            true
             });
 
-            // enter-press-release-exit (click)
+            // enter-press-release-exit (primary/left click)
             resetForAssessment();
             simulateEnter(0, 0);
             simulateDown(0, 0);
             simulateUp(0, 0);
             simulateLeave(-1, -1);
             assessGestureExpectations({
-                description:           'enter-press-release-exit (click):  ',
+                description:           'enter-press-release-exit (primary/left click):  ',
                 enterCount:            1,
                 exitCount:             1,
                 pressCount:            1,
                 releaseCount:          1,
+                rightPressCount:       0,
+                rightReleaseCount:     0,
+                middlePressCount:      0,
+                middleReleaseCount:    0,
                 moveCount:             0,
                 clickCount:            1,
                 dblClickCount:         0,
@@ -400,6 +490,92 @@
                 quickClick:            true
             });
 
+            // enter-nonprimarypress-nonprimaryrelease-exit (secondary/right click)
+            resetForAssessment();
+            simulateEnter(0, 0);
+            simulateNonPrimaryDown(0, 0, 2);
+            simulateNonPrimaryUp(0, 0, 2);
+            simulateLeave(-1, -1);
+            assessGestureExpectations({
+                description:           'enter-nonprimarypress-nonprimaryrelease-exit (secondary/right click):  ',
+                enterCount:            1,
+                exitCount:             1,
+                pressCount:            0,
+                releaseCount:          0,
+                rightPressCount:       1,
+                rightReleaseCount:     1,
+                middlePressCount:      0,
+                middleReleaseCount:    0,
+                moveCount:             0,
+                clickCount:            0,
+                dblClickCount:         0,
+                dragCount:             0,
+                dragEndCount:          0,
+                //insideElementPressed:  true,
+                //insideElementReleased: true,
+                contacts:              0,
+                trackedPointers:       0,
+                //quickClick:            true
+            });
+
+            // enter-nonprimarypress-nonprimaryrelease-exit (aux/middle click)
+            resetForAssessment();
+            simulateEnter(0, 0);
+            simulateNonPrimaryDown(0, 0, 1);
+            simulateNonPrimaryUp(0, 0, 1);
+            simulateLeave(-1, -1);
+            assessGestureExpectations({
+                description:           'enter-nonprimarypress-nonprimaryrelease-exit (aux/middle click):  ',
+                enterCount:            1,
+                exitCount:             1,
+                pressCount:            0,
+                releaseCount:          0,
+                rightPressCount:       0,
+                rightReleaseCount:     0,
+                middlePressCount:      1,
+                middleReleaseCount:    1,
+                moveCount:             0,
+                clickCount:            0,
+                dblClickCount:         0,
+                dragCount:             0,
+                dragEndCount:          0,
+                //insideElementPressed:  true,
+                //insideElementReleased: true,
+                contacts:              0,
+                trackedPointers:       0,
+                //quickClick:            true
+            });
+
+            // enter-nonprimarypress-move-nonprimaryrelease-move-exit (secondary/right button drag, release in tracked element)
+            resetForAssessment();
+            simulateEnter(0, 0);
+            simulateNonPrimaryDown(0, 0, 2);
+            simulateMove(1, 1, 100);
+            simulateNonPrimaryUp(10, 10, 2);
+            simulateMove(-1, -1, 100);
+            simulateLeave(-1, -1);
+            assessGestureExpectations({
+                description:           'enter-nonprimarypress-move-nonprimaryrelease-move-exit (secondary/right button drag, release in tracked element):  ',
+                enterCount:            1,
+                exitCount:             1,
+                pressCount:            0,
+                releaseCount:          0,
+                rightPressCount:       1,
+                rightReleaseCount:     1,
+                middlePressCount:      0,
+                middleReleaseCount:    0,
+                moveCount:             200,
+                clickCount:            0,
+                dblClickCount:         0,
+                dragCount:             0,
+                dragEndCount:          0,
+                //insideElementPressed:  true,
+                //insideElementReleased: true,
+                contacts:              0,
+                trackedPointers:       0,
+                //quickClick:            false
+            });
+
             // enter-press-move-release-move-exit (drag, release in tracked element)
             resetForAssessment();
             simulateEnter(0, 0);
@@ -414,6 +590,10 @@
                 exitCount:             1,
                 pressCount:            1,
                 releaseCount:          1,
+                rightPressCount:       0,
+                rightReleaseCount:     0,
+                middlePressCount:      0,
+                middleReleaseCount:    0,
                 moveCount:             200,
                 clickCount:            1,
                 dblClickCount:         0,
@@ -441,6 +621,10 @@
                 exitCount:             1,
                 pressCount:            1,
                 releaseCount:          1,
+                rightPressCount:       0,
+                rightReleaseCount:     0,
+                middlePressCount:      0,
+                middleReleaseCount:    0,
                 moveCount:             15,
                 clickCount:            0,
                 dblClickCount:         0,
@@ -453,32 +637,36 @@
                 quickClick:            false
             });
 
+            //// enter-press-move-exit-move-release-outside (drag, release outside iframe)
+            //resetForAssessment();
+            //simulateEnter(0, 0);
+            //simulateDown(0, 0);
+            //simulateMove(1, 1, 5);
+            //simulateMove(-1, -1, 5);
+            //simulateLeaveFrame(-1, -1);
+            //// you don't actually receive the mouseup if you mouseup outside of the document
+            //assessGestureExpectations({
+            //    description:           'enter-press-move-exit-move-release-outside (drag, release outside iframe):  ',
+            //    enterCount:            1,
+            //    exitCount:             1,
+            //    pressCount:            1,
+            //    releaseCount:          1,
+            //    rightPressCount:       0,
+            //    rightReleaseCount:     0,
+            //    middlePressCount:      0,
+            //    middleReleaseCount:    0,
+            //    moveCount:             10,
+            //    clickCount:            0,
+            //    dblClickCount:         0,
+            //    dragCount:             10,
+            //    dragEndCount:          1,
+            //    insideElementPressed:  true,
+            //    insideElementReleased: false,
+            //    contacts:              0,
+            //    trackedPointers:       0,
+            //    quickClick:            false
+            //});
 
-            // enter-press-move-exit-move-release-outside (drag, release outside iframe)
-            resetForAssessment();
-            simulateEnter(0, 0);
-            simulateDown(0, 0);
-            simulateMove(1, 1, 5);
-            simulateMove(-1, -1, 5);
-            simulateLeaveFrame(-1, -1);
-            // you don't actually receive the mouseup if you mouseup outside of the document
-            assessGestureExpectations({
-                description:           'enter-press-move-exit-move-release-outside (drag, release outside iframe):  ',
-                enterCount:            1,
-                exitCount:             1,
-                pressCount:            1,
-                releaseCount:          1,
-                moveCount:             10,
-                clickCount:            0,
-                dblClickCount:         0,
-                dragCount:             10,
-                dragEndCount:          1,
-                insideElementPressed:  true,
-                insideElementReleased: false,
-                contacts:              0,
-                trackedPointers:       0,
-                quickClick:            false
-            });
             unhookViewerHandlers();
 
             viewer.close();
@@ -602,7 +790,7 @@
                 releaseHandler: onMouseTrackerRelease,
                 clickHandler: onMouseTrackerClick,
                 exitHandler: onMouseTrackerExit
-            } ).setTracking( true );
+            } );
 
             var event = {
                 clientX:1,

test/legacy.mouse.shim.js

@@ -11,26 +11,29 @@
         $.MouseTracker.subscribeEvents.push( "MozMousePixelScroll" );
     }
 
-    $.MouseTracker.subscribeEvents.push( "mouseover", "mouseout", "mousedown", "mouseup", "mousemove" );
+    $.MouseTracker.havePointerEvents = false;
+    if ( $.Browser.vendor === $.BROWSERS.IE && $.Browser.version < 9 ) {
+        $.MouseTracker.subscribeEvents.push( "mouseenter", "mouseleave" );
+        $.MouseTracker.haveMouseEnter = true;
+    } else {
+        $.MouseTracker.subscribeEvents.push( "mouseover", "mouseout" );
         $.MouseTracker.haveMouseEnter = false;
-    if ( 'ontouchstart' in window ) {
-        // iOS, Android, and other W3c Touch Event implementations (see http://www.w3.org/TR/2011/WD-touch-events-20110505)
-        $.MouseTracker.subscribeEvents.push( "touchstart", "touchend", "touchmove", "touchcancel" );
-        if ( 'ontouchenter' in window ) {
-            $.MouseTracker.subscribeEvents.push( "touchenter", "touchleave" );
-            $.MouseTracker.haveTouchEnter = true;
-        } else {
-            $.MouseTracker.haveTouchEnter = false;
     }
-    } else {
+    $.MouseTracker.subscribeEvents.push( "mousedown", "mouseup", "mousemove" );
-        $.MouseTracker.haveTouchEnter = false;
+    if ( 'ontouchstart' in window ) {
+        // iOS, Android, and other W3c Touch Event implementations
+        //    (see http://www.w3.org/TR/touch-events/)
+        //    (see https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html)
+        //    (see https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html)
+        $.MouseTracker.subscribeEvents.push( "touchstart", "touchend", "touchmove", "touchcancel" );
     }
     if ( 'ongesturestart' in window ) {
-        // iOS (see https://developer.apple.com/library/safari/documentation/UserExperience/Reference/GestureEventClassReference/GestureEvent/GestureEvent.html)
+        // iOS (see https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html)
         //   Subscribe to these to prevent default gesture handling
         $.MouseTracker.subscribeEvents.push( "gesturestart", "gesturechange" );
     }
     $.MouseTracker.mousePointerId = "legacy-mouse";
     $.MouseTracker.maxTouchPoints = 10;
 
+
 }(OpenSeadragon));