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

Merge branch 'master' into 1763-a11y-browser-zoom

Browse Source
This commit is contained in:
ronnymikalsen 2021-03-12 10:21:42 +01:00
commit 89d4499c2f
17 changed files with 2028 additions and 1605 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gruntfile.js
View File

@ -202,7 +202,7 @@ module.exports = function(grunt) {
target: sources target: sources
}, },
"git-describe": { "git-describe": {
"options": { options: {
failOnError: false failOnError: false
}, },
build: {} build: {}

28
changelog.txt
View File

@ -1,15 +1,41 @@
OPENSEADRAGON CHANGELOG OPENSEADRAGON CHANGELOG
======================= =======================
2.4.3: (In progress) 2.5.0: (In progress)
* BREAKING CHANGE: Dropped support for older browsers (IE < 11) (#1949 @msalsbery)
* BREAKING CHANGE: Removed deprecated OpenSeadragon.getEvent function (#1949 @msalsbery)
* DEPRECATION: MouseTracker exitHandler deprecated for name change to leaveHandler for consistency with DOM event names (#1872 @msalsbery)
* Now when "simple image" tile sources are removed from the viewer, they free the memory used by the pyramid they create (#1789 @TakumaKira) * Now when "simple image" tile sources are removed from the viewer, they free the memory used by the pyramid they create (#1789 @TakumaKira)
* Documentation fix (#1814 @kenanchristian) * Documentation fix (#1814 @kenanchristian)
* Better cleanup on destruction, to avoid memory leaks (#1832 @JoFrMueller) * Better cleanup on destruction, to avoid memory leaks (#1832 @JoFrMueller)
* Better handle destruction when navigator in custom location (#1884 @woodchuck)
* Miscellaneous code cleanup (#1840 @msalsbery) * Miscellaneous code cleanup (#1840 @msalsbery)
* You can now specify tileSize for the Zoomify Tile Source (#1868 @abrlam) * You can now specify tileSize for the Zoomify Tile Source (#1868 @abrlam)
* Better use of IIIF "max" and "full" URL parameters (#1871 @MImranAsghar) * Better use of IIIF "max" and "full" URL parameters (#1871 @MImranAsghar)
* You can now specify the file format of the tiles in the Zoomify tile source (#1889 @abrlam) * You can now specify the file format of the tiles in the Zoomify tile source (#1889 @abrlam)
* Improved browser sniffing - detect EDGE and CHROMEEDGE browsers (#1872 @msalsbery)
* Improved DOM event model feature detection (#1872 @msalsbery)
* Added support for options parameter on addEvent()/removeEvent (to support passive option) (#1872 @msalsbery)
* Added OpenSeadragon.eventIsCanceled() function for defaultPrevented detection on DOM events (#1872 @msalsbery)
* MouseTracker: better PointerEvent model detection - removed use of deprecated window.navigator.pointerEnabled (#1872 @msalsbery)
* MouseTracker: added overHandler/outHandler options for handling corresponding pointerover/pointerout events (#1872 @msalsbery)
* MouseTracker: changed enterHandler/leaveHandler to use DOM pointerenter/pointerleave events instead of simulating using pointerover/pointerout (#1872 @msalsbery)
* All internal uses of MouseTracker use pointerenter/pointerleave events instead of pointerover/pointerout events for more consistent pointer tracking (#1872 @msalsbery)
* Fixed bug in Button class where two MouseTracker event handlers used an invalid "this" causing issues in some browsers (#1872 @msalsbery)
* Added pointerType property to Viewer container-enter, container-exit, canvas-drag, canvas-drag-end, canvas-pinch events (#1872 @msalsbery)
* MouseTracker: Fire dragEndHandler event even if release point same as initial contact point (#1872 @msalsbery)
* MouseTracker: Pointer capture implemented with capture APIs where available. Only fallback to emulated capture on extremely old browsers (#1872 @msalsbery)
* MouseTracker: Added preProcessEventHandler option to allow MouseTracker instances to control bubbling and default behavior of events on their associated element (#1872 @msalsbery)
* MouseTracker: Improved handling of canceled events (#1872 @msalsbery)
* MouseTracker: Improved releasing of tracked pointers on destroy()/stopTracking() (#1872 @msalsbery)
* Updated Viewer, Button, Drawer, Navigator, ReferenceStrip DOM for proper DOM event handling (#1872 @msalsbery)
* Added OpenSeadragon.setElementPointerEventsNone() for setting pointer-events:'none' on DOM elements (#1872 @msalsbery)
* MouseTracker: added contextMenuHandler option for handling contextmenu events (#1872 @msalsbery)
* Viewer: added a canvas-contextmenu event (#1872 @msalsbery)
* Added additional documentation for the zoomPerSecond viewer option (#1872 @msalsbery)
* MouseTracker: Per #1863, dropped support for Internet Explorer < 11 (#1872 @msalsbery) (#1950 @rmontroy)
* Fixed simulated drag events in navigator tests (#1949 @msalsbery)
2.4.2: 2.4.2:

18
package-lock.json generated
View File

@ -389,9 +389,9 @@
} }
}, },
"bl": { "bl": {
"version": "1.2.2", "version": "1.2.3",
"resolved": "https://registry.npmjs.org/bl/-/bl-1.2.2.tgz", "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.3.tgz",
"integrity": "sha512-e8tQYnZodmebYDWGH7KMRvtzKXaJHx3BbilrgZCfvyLUYdKpK1t5PSPmpkny/SgiTSCnjfLW7v5rlONXVFkQEA==", "integrity": "sha512-pvcNpa0UU69UT341rO6AYy4FVAIkUHuZXRIWbq+zHnsVcRzDDjIAhGuuYoi0d//cwIwtt4pkpKycWEfjdV+vww==",
"dev": true, "dev": true,
"requires": { "requires": {
"readable-stream": "^2.3.5", "readable-stream": "^2.3.5",
@ -2578,9 +2578,9 @@
"dev": true "dev": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.7",
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.7.tgz",
"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "integrity": "sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ==",
"dev": true "dev": true
}, },
"is-accessor-descriptor": { "is-accessor-descriptor": {
@ -4938,9 +4938,9 @@
}, },
"dependencies": { "dependencies": {
"bl": { "bl": {
"version": "4.0.2", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/bl/-/bl-4.0.2.tgz", "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
"integrity": "sha512-j4OH8f6Qg2bGuWfRiltT2HYGx0e1QcBTrK9KAHNMwMZdQnDZFk0ZSYIpADjYCB3U12nicC5tVJwSIhwOWjb4RQ==", "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
"dev": true, "dev": true,
"optional": true, "optional": true,
"requires": { "requires": {

34
src/button.js
View File

@ -77,6 +77,7 @@ $.ButtonState = {
* @param {OpenSeadragon.EventHandler} [options.onExit=null] Event handler callback for {@link OpenSeadragon.Button.event:exit}. * @param {OpenSeadragon.EventHandler} [options.onExit=null] Event handler callback for {@link OpenSeadragon.Button.event:exit}.
* @param {OpenSeadragon.EventHandler} [options.onFocus=null] Event handler callback for {@link OpenSeadragon.Button.event:focus}. * @param {OpenSeadragon.EventHandler} [options.onFocus=null] Event handler callback for {@link OpenSeadragon.Button.event:focus}.
* @param {OpenSeadragon.EventHandler} [options.onBlur=null] Event handler callback for {@link OpenSeadragon.Button.event:blur}. * @param {OpenSeadragon.EventHandler} [options.onBlur=null] Event handler callback for {@link OpenSeadragon.Button.event:blur}.
* @param {Object} [options.userData=null] Arbitrary object to be passed unchanged to any attached handler methods.
*/ */
$.Button = function( options ) { $.Button = function( options ) {
@ -111,7 +112,8 @@ $.Button = function( options ) {
onEnter: null, onEnter: null,
onExit: null, onExit: null,
onFocus: null, onFocus: null,
onBlur: null onBlur: null,
userData: null
}, options ); }, options );
@ -136,6 +138,13 @@ $.Button = function( options ) {
this.imgDown.alt = this.imgDown.alt =
this.tooltip; this.tooltip;
// Allow pointer events to pass through the img elements so implicit
// pointer capture works on touch devices
$.setElementPointerEventsNone( this.imgRest );
$.setElementPointerEventsNone( this.imgGroup );
$.setElementPointerEventsNone( this.imgHover );
$.setElementPointerEventsNone( this.imgDown );
this.element.style.position = "relative"; this.element.style.position = "relative";
$.setElementTouchActionNone( this.element ); $.setElementTouchActionNone( this.element );
@ -203,6 +212,7 @@ $.Button = function( options ) {
*/ */
this.tracker = new $.MouseTracker({ this.tracker = new $.MouseTracker({
userData: 'Button.tracker',
element: this.element, element: this.element,
clickTimeThreshold: this.clickTimeThreshold, clickTimeThreshold: this.clickTimeThreshold,
clickDistThreshold: this.clickDistThreshold, clickDistThreshold: this.clickDistThreshold,
@ -227,7 +237,7 @@ $.Button = function( options ) {
}, },
focusHandler: function ( event ) { focusHandler: function ( event ) {
this.enterHandler( event ); _this.tracker.enterHandler( event );
/** /**
* Raised when the Button element receives focus. * Raised when the Button element receives focus.
* *
@ -241,7 +251,7 @@ $.Button = function( options ) {
_this.raiseEvent( "focus", { originalEvent: event.originalEvent } ); _this.raiseEvent( "focus", { originalEvent: event.originalEvent } );
}, },
exitHandler: function( event ) { leaveHandler: function( event ) {
outTo( _this, $.ButtonState.GROUP ); outTo( _this, $.ButtonState.GROUP );
if ( event.insideElementPressed ) { if ( event.insideElementPressed ) {
/** /**
@ -259,7 +269,7 @@ $.Button = function( options ) {
}, },
blurHandler: function ( event ) { blurHandler: function ( event ) {
this.exitHandler( event ); _this.tracker.leaveHandler( event );
/** /**
* Raised when the Button element loses focus. * Raised when the Button element loses focus.
* *
@ -363,8 +373,8 @@ $.Button = function( options ) {
$.extend( $.Button.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.Button.prototype */{ $.extend( $.Button.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.Button.prototype */{
/** /**
* TODO: Determine what this function is intended to do and if it's actually * Used by a button container element (e.g. a ButtonGroup) to transition the button state
* useful as an API point. * to ButtonState.GROUP.
* @function * @function
*/ */
notifyGroupEnter: function() { notifyGroupEnter: function() {
@ -372,8 +382,8 @@ $.extend( $.Button.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.
}, },
/** /**
* TODO: Determine what this function is intended to do and if it's actually * Used by a button container element (e.g. a ButtonGroup) to transition the button state
* useful as an API point. * to ButtonState.REST.
* @function * @function
*/ */
notifyGroupExit: function() { notifyGroupExit: function() {
@ -399,14 +409,22 @@ $.extend( $.Button.prototype, $.EventSource.prototype, /** @lends OpenSeadragon.
}, },
destroy: function() { destroy: function() {
if (this.imgRest) {
this.element.removeChild(this.imgRest); this.element.removeChild(this.imgRest);
this.imgRest = null; this.imgRest = null;
}
if (this.imgGroup) {
this.element.removeChild(this.imgGroup); this.element.removeChild(this.imgGroup);
this.imgGroup = null; this.imgGroup = null;
}
if (this.imgHover) {
this.element.removeChild(this.imgHover); this.element.removeChild(this.imgHover);
this.imgHover = null; this.imgHover = null;
}
if (this.imgDown) {
this.element.removeChild(this.imgDown); this.element.removeChild(this.imgDown);
this.imgDown = null; this.imgDown = null;
}
this.removeAllHandlers(); this.removeAllHandlers();
this.tracker.destroy(); this.tracker.destroy();
this.element = null; this.element = null;

7
src/buttongroup.js
View File

@ -88,6 +88,7 @@ $.ButtonGroup = function( options ) {
* @memberof OpenSeadragon.ButtonGroup# * @memberof OpenSeadragon.ButtonGroup#
*/ */
this.tracker = new $.MouseTracker({ this.tracker = new $.MouseTracker({
userData: 'ButtonGroup.tracker',
element: this.element, element: this.element,
clickTimeThreshold: this.clickTimeThreshold, clickTimeThreshold: this.clickTimeThreshold,
clickDistThreshold: this.clickDistThreshold, clickDistThreshold: this.clickDistThreshold,
@ -97,7 +98,7 @@ $.ButtonGroup = function( options ) {
_this.buttons[ i ].notifyGroupEnter(); _this.buttons[ i ].notifyGroupEnter();
} }
}, },
exitHandler: function ( event ) { leaveHandler: function ( event ) {
var i; var i;
if ( !event.insideElementPressed ) { if ( !event.insideElementPressed ) {
for ( i = 0; i < _this.buttons.length; i++ ) { for ( i = 0; i < _this.buttons.length; i++ ) {
@ -127,8 +128,8 @@ $.ButtonGroup.prototype = {
* @function * @function
* @private * @private
*/ */
emulateExit: function() { emulateLeave: function() {
this.tracker.exitHandler( { eventSource: this.tracker } ); this.tracker.leaveHandler( { eventSource: this.tracker } );
}, },
destroy: function() { destroy: function() {

2
src/control.js
View File

@ -161,7 +161,9 @@ $.Control.prototype = {
*/ */
destroy: function() { destroy: function() {
this.wrapper.removeChild( this.element ); this.wrapper.removeChild( this.element );
if (this.anchor !== $.ControlAnchor.NONE) {
this.container.removeChild(this.wrapper); this.container.removeChild(this.wrapper);
}
}, },
/** /**

4
src/drawer.js
View File

@ -126,6 +126,10 @@ $.Drawer = function( options ) {
this.canvas.style.height = "100%"; this.canvas.style.height = "100%";
this.canvas.style.position = "absolute"; this.canvas.style.position = "absolute";
$.setElementOpacity( this.canvas, this.opacity, true ); $.setElementOpacity( this.canvas, this.opacity, true );
// Allow pointer events to pass through the canvas element so implicit
// pointer capture works on touch devices
$.setElementPointerEventsNone( this.canvas );
$.setElementTouchActionNone( this.canvas );
// explicit left-align // explicit left-align
this.container.style.textAlign = "left"; this.container.style.textAlign = "left";

2327
src/mousetracker.js
View File

File diff suppressed because it is too large Load Diff

18
src/navigator.js
View File

@ -167,12 +167,16 @@ $.Navigator = function( options ){
style.zIndex = 999999999; style.zIndex = 999999999;
style.cursor = 'default'; style.cursor = 'default';
}( this.displayRegion.style, this.borderWidth )); }( this.displayRegion.style, this.borderWidth ));
$.setElementPointerEventsNone( this.displayRegion );
$.setElementTouchActionNone( this.displayRegion );
this.displayRegionContainer = $.makeNeutralElement("div"); this.displayRegionContainer = $.makeNeutralElement("div");
this.displayRegionContainer.id = this.element.id + '-displayregioncontainer'; this.displayRegionContainer.id = this.element.id + '-displayregioncontainer';
this.displayRegionContainer.className = "displayregioncontainer"; this.displayRegionContainer.className = "displayregioncontainer";
this.displayRegionContainer.style.width = "100%"; this.displayRegionContainer.style.width = "100%";
this.displayRegionContainer.style.height = "100%"; this.displayRegionContainer.style.height = "100%";
$.setElementPointerEventsNone( this.displayRegionContainer );
$.setElementTouchActionNone( this.displayRegionContainer );
viewer.addControl( viewer.addControl(
this.element, this.element,
@ -221,12 +225,22 @@ $.Navigator = function( options ){
// Remove the base class' (Viewer's) innerTracker and replace it with our own // Remove the base class' (Viewer's) innerTracker and replace it with our own
this.innerTracker.destroy(); this.innerTracker.destroy();
this.innerTracker = new $.MouseTracker({ this.innerTracker = new $.MouseTracker({
element: this.element, userData: 'Navigator.innerTracker',
element: this.element, //this.canvas,
dragHandler: $.delegate( this, onCanvasDrag ), dragHandler: $.delegate( this, onCanvasDrag ),
clickHandler: $.delegate( this, onCanvasClick ), clickHandler: $.delegate( this, onCanvasClick ),
releaseHandler: $.delegate( this, onCanvasRelease ), releaseHandler: $.delegate( this, onCanvasRelease ),
scrollHandler: $.delegate( this, onCanvasScroll ) scrollHandler: $.delegate( this, onCanvasScroll )
}); });
this.outerTracker.userData = 'Navigator.outerTracker';
// this.innerTracker is attached to this.element...we need to allow pointer
// events to pass through this Viewer's canvas/container elements so implicit
// pointer capture works on touch devices
//TODO an alternative is to attach the new MouseTracker to this.canvas...not
// sure why it isn't already (see MouseTracker constructor call above)
$.setElementPointerEventsNone( this.canvas );
$.setElementPointerEventsNone( this.container );
this.addHandler("reset-size", function() { this.addHandler("reset-size", function() {
if (_this.viewport) { if (_this.viewport) {
@ -526,7 +540,7 @@ function onCanvasDrag( event ) {
* @property {Boolean} shift - True if the shift key was pressed during this event. * @property {Boolean} shift - True if the shift key was pressed during this event.
* @property {Object} originalEvent - The original DOM event. * @property {Object} originalEvent - The original DOM event.
* @property {?Object} userData - Arbitrary subscriber-defined object. * @property {?Object} userData - Arbitrary subscriber-defined object.
* @property {Boolean} preventDefaultAction - Set to true to prevent default click to zoom behaviour. Default: false. * @property {Boolean} preventDefaultAction - Set to true to prevent default drag to pan behaviour. Default: false.
*/ */
this.viewer.raiseEvent('navigator-drag', canvasDragEventArgs); this.viewer.raiseEvent('navigator-drag', canvasDragEventArgs);

338
src/openseadragon.js
View File

@ -381,7 +381,11 @@
* The "zoom distance" per mouse scroll or touch pinch. <em><strong>Note:</strong> Setting this to 1.0 effectively disables the mouse-wheel zoom feature (also see gestureSettings[Mouse|Touch|Pen].scrollToZoom}).</em> * The "zoom distance" per mouse scroll or touch pinch. <em><strong>Note:</strong> Setting this to 1.0 effectively disables the mouse-wheel zoom feature (also see gestureSettings[Mouse|Touch|Pen].scrollToZoom}).</em>
* *
* @property {Number} [zoomPerSecond=1.0] * @property {Number} [zoomPerSecond=1.0]
* The number of seconds to animate a single zoom event over. * Sets the zoom amount per second when zoomIn/zoomOut buttons are pressed and held.
* The value is a factor of the current zoom, so 1.0 (the default) disables zooming when the zoomIn/zoomOut buttons
* are held. Higher values will increase the rate of zoom when the zoomIn/zoomOut buttons are held. Note that values
* < 1.0 will reverse the operation of the zoomIn/zoomOut buttons (zoomIn button will decrease the zoom, zoomOut will
* increase the zoom).
* *
* @property {Boolean} [showNavigator=false] * @property {Boolean} [showNavigator=false]
* Set to true to make the navigator minimap appear. * Set to true to make the navigator minimap appear.
@ -918,9 +922,62 @@ function OpenSeadragon( options ){
}; };
/** /**
* @returns {Number} Return a ratio comparing the device screen's pixel * True if the browser supports the EventTarget.addEventListener() method
* density to the canvas's backing store pixel density, clamped to a * @member {Boolean} supportsAddEventListener
* minimum of 1. Defaults to 1 if canvas isn't supported by the browser. * @memberof OpenSeadragon
*/
$.supportsAddEventListener = (function () {
return !!(document.documentElement.addEventListener && document.addEventListener);
}());
/**
* True if the browser supports the EventTarget.removeEventListener() method
* @member {Boolean} supportsRemoveEventListener
* @memberof OpenSeadragon
*/
$.supportsRemoveEventListener = (function () {
return !!(document.documentElement.removeEventListener && document.removeEventListener);
}());
/**
* True if the browser supports the newer EventTarget.addEventListener options argument
* @member {Boolean} supportsEventListenerOptions
* @memberof OpenSeadragon
*/
$.supportsEventListenerOptions = (function () {
var supported = 0;
if ( $.supportsAddEventListener ) {
try {
var options = {
get capture() {
supported++;
return false;
},
get once() {
supported++;
return false;
},
get passive() {
supported++;
return false;
}
};
window.addEventListener("test", null, options);
window.removeEventListener("test", null, options);
} catch ( e ) {
supported = 0;
}
}
return supported >= 3;
}());
/**
* A ratio comparing the device screen's pixel density to the canvas's backing store pixel density,
* clamped to a minimum of 1. Defaults to 1 if canvas isn't supported by the browser.
* @member {Number} pixelDensityRatio
* @memberof OpenSeadragon
*/ */
$.getCurrentPixelDensityRatio = function() { $.getCurrentPixelDensityRatio = function() {
if ( $.supportsCanvas ) { if ( $.supportsCanvas ) {
@ -947,7 +1004,7 @@ function OpenSeadragon( options ){
/** /**
* This closure defines all static methods available to the OpenSeadragon * This closure defines all static methods available to the OpenSeadragon
* namespace. Many, if not most, are taked directly from jQuery for use * namespace. Many, if not most, are taken directly from jQuery for use
* to simplify and reduce common programming patterns. More static methods * to simplify and reduce common programming patterns. More static methods
* from jQuery may eventually make their way into this though we are * from jQuery may eventually make their way into this though we are
* attempting to avoid an explicit dependency on jQuery only because * attempting to avoid an explicit dependency on jQuery only because
@ -1320,6 +1377,8 @@ function OpenSeadragon( options ){
* @property {Number} SAFARI * @property {Number} SAFARI
* @property {Number} CHROME * @property {Number} CHROME
* @property {Number} OPERA * @property {Number} OPERA
* @property {Number} EDGE
* @property {Number} CHROMEEDGE
*/ */
BROWSERS: { BROWSERS: {
UNKNOWN: 0, UNKNOWN: 0,
@ -1327,7 +1386,9 @@ function OpenSeadragon( options ){
FIREFOX: 2, FIREFOX: 2,
SAFARI: 3, SAFARI: 3,
CHROME: 4, CHROME: 4,
OPERA: 5 OPERA: 5,
EDGE: 6,
CHROMEEDGE: 7
}, },
@ -1522,29 +1583,6 @@ function OpenSeadragon( options ){
}, },
/**
* Gets the latest event, really only useful internally since its
* specific to IE behavior.
* @function
* @param {Event} [event]
* @returns {Event}
* @deprecated For internal use only
* @private
*/
getEvent: function( event ) {
if( event ){
$.getEvent = function( event ) {
return event;
};
} else {
$.getEvent = function() {
return window.event;
};
}
return $.getEvent( event );
},
/** /**
* Gets the position of the mouse on the screen for a given event. * Gets the position of the mouse on the screen for a given event.
* @function * @function
@ -1557,7 +1595,6 @@ function OpenSeadragon( options ){
$.getMousePosition = function( event ){ $.getMousePosition = function( event ){
var result = new $.Point(); var result = new $.Point();
event = $.getEvent( event );
result.x = event.pageX; result.x = event.pageX;
result.y = event.pageY; result.y = event.pageY;
@ -1567,7 +1604,6 @@ function OpenSeadragon( options ){
$.getMousePosition = function( event ){ $.getMousePosition = function( event ){
var result = new $.Point(); var result = new $.Point();
event = $.getEvent( event );
result.x = result.x =
event.clientX + event.clientX +
document.body.scrollLeft + document.body.scrollLeft +
@ -1803,51 +1839,16 @@ function OpenSeadragon( options ){
/** /**
* Ensures an image is loaded correctly to support alpha transparency. * Ensures an image is loaded correctly to support alpha transparency.
* Generally only IE has issues doing this correctly for formats like
* png.
* @function * @function
* @param {String} src * @param {String} src
* @returns {Element} * @returns {Element}
*/ */
makeTransparentImage: function( src ) { makeTransparentImage: function( src ) {
$.makeTransparentImage = function( src ){
var img = $.makeNeutralElement( "img" ); var img = $.makeNeutralElement( "img" );
img.src = src; img.src = src;
return img; return img;
};
if ( $.Browser.vendor === $.BROWSERS.IE && $.Browser.version < 7 ) {
$.makeTransparentImage = function( src ){
var img = $.makeNeutralElement( "img" ),
element = null;
element = $.makeNeutralElement("span");
element.style.display = "inline-block";
img.onload = function() {
element.style.width = element.style.width || img.width + "px";
element.style.height = element.style.height || img.height + "px";
img.onload = null;
img = null; // to prevent memory leaks in IE
};
img.src = src;
element.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +
src +
"', sizingMethod='scale')";
return element;
};
}
return $.makeTransparentImage( src );
}, },
@ -1898,6 +1899,19 @@ function OpenSeadragon( options ){
}, },
/**
* Sets the specified element's pointer-events style attribute to 'none'.
* @function
* @param {Element|String} element
*/
setElementPointerEventsNone: function( element ) {
element = $.getElement( element );
if ( typeof element.style.pointerEvents !== 'undefined' ) {
element.style.pointerEvents = 'none';
}
},
/** /**
* Add the specified CSS class to the element if not present. * Add the specified CSS class to the element if not present.
* @function * @function
@ -1983,6 +1997,34 @@ function OpenSeadragon( options ){
element.className = newClasses.join(' '); element.className = newClasses.join(' ');
}, },
/**
* Convert passed addEventListener() options to boolean or options object,
* depending on browser support.
* @function
* @param {Boolean|Object} [options] Boolean useCapture, or if [supportsEventListenerOptions]{@link OpenSeadragon.supportsEventListenerOptions}, can be an object
* @param {Boolean} [options.capture]
* @param {Boolean} [options.passive]
* @param {Boolean} [options.once]
* @return {String} The protocol (http:, https:, file:, ftp: ...)
*/
normalizeEventListenerOptions: function (options) {
var opts;
if ( typeof options !== 'undefined' ) {
if ( typeof options === 'boolean' ) {
// Legacy Boolean useCapture
opts = $.supportsEventListenerOptions ? { capture: options } : options;
} else {
// Options object
opts = $.supportsEventListenerOptions ? options :
( ( typeof options.capture !== 'undefined' ) ? options.capture : false );
}
} else {
// No options specified - Legacy optional useCapture argument
// (for IE, first supported on version 9, so we'll pass a Boolean)
opts = $.supportsEventListenerOptions ? { capture: false } : false;
}
return opts;
},
/** /**
* Adds an event listener for the given element, eventName and handler. * Adds an event listener for the given element, eventName and handler.
@ -1990,16 +2032,20 @@ function OpenSeadragon( options ){
* @param {Element|String} element * @param {Element|String} element
* @param {String} eventName * @param {String} eventName
* @param {Function} handler * @param {Function} handler
* @param {Boolean} [useCapture] * @param {Boolean|Object} [options] Boolean useCapture, or if [supportsEventListenerOptions]{@link OpenSeadragon.supportsEventListenerOptions}, can be an object
* @param {Boolean} [options.capture]
* @param {Boolean} [options.passive]
* @param {Boolean} [options.once]
*/ */
addEvent: (function () { addEvent: (function () {
if ( window.addEventListener ) { if ( $.supportsAddEventListener ) {
return function ( element, eventName, handler, useCapture ) { return function ( element, eventName, handler, options ) {
options = $.normalizeEventListenerOptions(options);
element = $.getElement( element ); element = $.getElement( element );
element.addEventListener( eventName, handler, useCapture ); element.addEventListener( eventName, handler, options );
}; };
} else if ( window.attachEvent ) { } else if ( document.documentElement.attachEvent && document.attachEvent ) {
return function ( element, eventName, handler, useCapture ) { return function ( element, eventName, handler ) {
element = $.getElement( element ); element = $.getElement( element );
element.attachEvent( 'on' + eventName, handler ); element.attachEvent( 'on' + eventName, handler );
}; };
@ -2016,16 +2062,18 @@ function OpenSeadragon( options ){
* @param {Element|String} element * @param {Element|String} element
* @param {String} eventName * @param {String} eventName
* @param {Function} handler * @param {Function} handler
* @param {Boolean} [useCapture] * @param {Boolean|Object} [options] Boolean useCapture, or if [supportsEventListenerOptions]{@link OpenSeadragon.supportsEventListenerOptions}, can be an object
* @param {Boolean} [options.capture]
*/ */
removeEvent: (function () { removeEvent: (function () {
if ( window.removeEventListener ) { if ( $.supportsRemoveEventListener ) {
return function ( element, eventName, handler, useCapture ) { return function ( element, eventName, handler, options ) {
options = $.normalizeEventListenerOptions(options);
element = $.getElement( element ); element = $.getElement( element );
element.removeEventListener( eventName, handler, useCapture ); element.removeEventListener( eventName, handler, options );
}; };
} else if ( window.detachEvent ) { } else if ( document.documentElement.detachEvent && document.detachEvent ) {
return function( element, eventName, handler, useCapture ) { return function( element, eventName, handler ) {
element = $.getElement( element ); element = $.getElement( element );
element.detachEvent( 'on' + eventName, handler ); element.detachEvent( 'on' + eventName, handler );
}; };
@ -2042,49 +2090,28 @@ function OpenSeadragon( options ){
* @param {Event} [event] * @param {Event} [event]
*/ */
cancelEvent: function( event ) { cancelEvent: function( event ) {
event = $.getEvent( event );
if ( event.preventDefault ) {
$.cancelEvent = function( event ){
// W3C for preventing default
event.preventDefault(); event.preventDefault();
};
} else {
$.cancelEvent = function( event ){
event = $.getEvent( event );
// legacy for preventing default
event.cancel = true;
// IE for preventing default
event.returnValue = false;
};
}
$.cancelEvent( event );
}, },
/** /**
* Stops the propagation of the event up the DOM. * Returns true if {@link OpenSeadragon.cancelEvent|cancelEvent} has been called on
* the event, otherwise returns false.
* @function
* @param {Event} [event]
*/
eventIsCanceled: function( event ) {
return event.defaultPrevented;
},
/**
* Stops the propagation of the event through the DOM in the capturing and bubbling phases.
* @function * @function
* @param {Event} [event] * @param {Event} [event]
*/ */
stopEvent: function( event ) { stopEvent: function( event ) {
event = $.getEvent( event );
if ( event.stopPropagation ) {
// W3C for stopping propagation
$.stopEvent = function( event ){
event.stopPropagation(); event.stopPropagation();
};
} else {
// IE for stopping propagation
$.stopEvent = function( event ){
event = $.getEvent( event );
event.cancelBubble = true;
};
}
$.stopEvent( event );
}, },
@ -2273,64 +2300,14 @@ function OpenSeadragon( options ){
request.send(null); request.send(null);
} catch (e) { } catch (e) {
var msg = e.message; $.console.log( "%s while making AJAX request: %s", e.name, e.message );
/*
IE < 10 does not support CORS and an XHR request to a different origin will fail as soon
as send() is called. This is particularly easy to miss during development and appear in
production if you use a CDN or domain sharding and the security policy is likely to break
exception handlers since any attempt to access a property of the request object will
raise an access denied TypeError inside the catch block.
To be friendlier, we'll check for this specific error and add a documentation pointer
to point developers in the right direction. We test the exception number because IE's
error messages are localized.
*/
var oldIE = $.Browser.vendor === $.BROWSERS.IE && $.Browser.version < 10;
if ( oldIE && typeof ( e.number ) !== "undefined" && e.number === -2147024891 ) {
msg += "\nSee http://msdn.microsoft.com/en-us/library/ms537505(v=vs.85).aspx#xdomain";
}
$.console.log( "%s while making AJAX request: %s", e.name, msg );
request.onreadystatechange = function(){}; request.onreadystatechange = function(){};
if (window.XDomainRequest) { // IE9 or IE8 might as well try to use XDomainRequest
var xdr = new window.XDomainRequest();
if (xdr) {
xdr.onload = function (e) {
if ( $.isFunction( onSuccess ) ) {
onSuccess({ // Faking an xhr object
responseText: xdr.responseText,
status: 200, // XDomainRequest doesn't support status codes, so we just fake one! :/
statusText: 'OK'
});
}
};
xdr.onerror = function (e) {
if ($.isFunction(onError)) {
onError({ // Faking an xhr object
responseText: xdr.responseText,
status: 444, // 444 No Response
statusText: 'An error happened. Due to an XDomainRequest deficiency we can not extract any information about this error. Upgrade your browser.'
});
}
};
try {
xdr.open('GET', url);
xdr.send();
} catch (e2) {
if ( $.isFunction( onError ) ) { if ( $.isFunction( onError ) ) {
onError( request, e ); onError( request, e );
} }
} }
}
} else {
if ( $.isFunction( onError ) ) {
onError( request, e );
}
}
}
return request; return request;
}, },
@ -2467,16 +2444,7 @@ function OpenSeadragon( options ){
* @returns {Object} * @returns {Object}
*/ */
parseJSON: function(string) { parseJSON: function(string) {
if (window.JSON && window.JSON.parse) {
$.parseJSON = window.JSON.parse; $.parseJSON = window.JSON.parse;
} else {
// Should only be used by IE8 in non standards mode
$.parseJSON = function(string) {
/*jshint evil:true*/
//eslint-disable-next-line no-eval
return eval('(' + string + ')');
};
}
return $.parseJSON(string); return $.parseJSON(string);
}, },
@ -2574,7 +2542,17 @@ function OpenSeadragon( options ){
break; break;
case "Netscape": case "Netscape":
if (window.addEventListener) { if (window.addEventListener) {
if ( ua.indexOf( "Firefox" ) >= 0 ) { if ( ua.indexOf( "Edge" ) >= 0 ) {
$.Browser.vendor = $.BROWSERS.EDGE;
$.Browser.version = parseFloat(
ua.substring( ua.indexOf( "Edge" ) + 5 )
);
} else if ( ua.indexOf( "Edg" ) >= 0 ) {
$.Browser.vendor = $.BROWSERS.CHROMEEDGE;
$.Browser.version = parseFloat(
ua.substring( ua.indexOf( "Edg" ) + 4 )
);
} else if ( ua.indexOf( "Firefox" ) >= 0 ) {
$.Browser.vendor = $.BROWSERS.FIREFOX; $.Browser.vendor = $.BROWSERS.FIREFOX;
$.Browser.version = parseFloat( $.Browser.version = parseFloat(
ua.substring( ua.indexOf( "Firefox" ) + 8 ) ua.substring( ua.indexOf( "Firefox" ) + 8 )
@ -2628,21 +2606,15 @@ function OpenSeadragon( options ){
//determine if this browser supports image alpha transparency //determine if this browser supports image alpha transparency
$.Browser.alpha = !( $.Browser.alpha = !(
( $.Browser.vendor === $.BROWSERS.CHROME && $.Browser.version < 2
$.Browser.vendor === $.BROWSERS.IE &&
$.Browser.version < 9
) || (
$.Browser.vendor === $.BROWSERS.CHROME &&
$.Browser.version < 2
)
); );
//determine if this browser supports element.style.opacity //determine if this browser supports element.style.opacity
$.Browser.opacity = !( $.Browser.opacity = true;
$.Browser.vendor === $.BROWSERS.IE &&
$.Browser.version < 9
);
if ( $.Browser.vendor === $.BROWSERS.IE && $.Browser.version < 11 ) {
$.console.error('Internet Explorer versions < 11 are not supported by OpenSeadragon');
}
})(); })();

116
src/referencestrip.js
View File

@ -85,14 +85,7 @@ $.ReferenceStrip = function ( options ) {
scroll: $.DEFAULT_SETTINGS.referenceStripScroll, scroll: $.DEFAULT_SETTINGS.referenceStripScroll,
clickTimeThreshold: $.DEFAULT_SETTINGS.clickTimeThreshold clickTimeThreshold: $.DEFAULT_SETTINGS.clickTimeThreshold
}, options, { }, options, {
//required overrides element: this.element
element: this.element,
//These need to be overridden to prevent recursion since
//the navigator is a viewer and a viewer has a navigator
showNavigator: false,
mouseNavEnabled: false,
showNavigationControl: false,
showSequenceControl: false
} ); } );
$.extend( this, options ); $.extend( this, options );
@ -119,12 +112,14 @@ $.ReferenceStrip = function ( options ) {
$.setElementOpacity( this.element, 0.8 ); $.setElementOpacity( this.element, 0.8 );
this.viewer = viewer; this.viewer = viewer;
this.innerTracker = new $.MouseTracker( { this.tracker = new $.MouseTracker( {
userData: 'ReferenceStrip.tracker',
element: this.element, element: this.element,
clickHandler: $.delegate( this, onStripClick ),
dragHandler: $.delegate( this, onStripDrag ), dragHandler: $.delegate( this, onStripDrag ),
scrollHandler: $.delegate( this, onStripScroll ), scrollHandler: $.delegate( this, onStripScroll ),
enterHandler: $.delegate( this, onStripEnter ), enterHandler: $.delegate( this, onStripEnter ),
exitHandler: $.delegate( this, onStripExit ), leaveHandler: $.delegate( this, onStripLeave ),
keyDownHandler: $.delegate( this, onKeyDown ), keyDownHandler: $.delegate( this, onKeyDown ),
keyHandler: $.delegate( this, onKeyPress ) keyHandler: $.delegate( this, onKeyPress )
} ); } );
@ -189,34 +184,12 @@ $.ReferenceStrip = function ( options ) {
element.style.width = _this.panelWidth + 'px'; element.style.width = _this.panelWidth + 'px';
element.style.height = _this.panelHeight + 'px'; element.style.height = _this.panelHeight + 'px';
element.style.display = 'inline'; element.style.display = 'inline';
element.style.float = 'left'; //Webkit element.style['float'] = 'left'; //Webkit
element.style.cssFloat = 'left'; //Firefox element.style.cssFloat = 'left'; //Firefox
element.style.styleFloat = 'left'; //IE element.style.styleFloat = 'left'; //IE
element.style.padding = '2px'; element.style.padding = '2px';
$.setElementTouchActionNone( element ); $.setElementTouchActionNone( element );
$.setElementPointerEventsNone( element );
element.innerTracker = new $.MouseTracker( {
element: element,
clickTimeThreshold: this.clickTimeThreshold,
clickDistThreshold: this.clickDistThreshold,
pressHandler: function ( event ) {
event.eventSource.dragging = $.now();
},
releaseHandler: function ( event ) {
var tracker = event.eventSource,
id = tracker.element.id,
page = Number( id.split( '-' )[2] ),
now = $.now();
if ( event.insideElementPressed &&
event.insideElementReleased &&
tracker.dragging &&
( now - tracker.dragging ) < tracker.clickTimeThreshold ) {
tracker.dragging = null;
viewer.goToPage( page );
}
}
} );
this.element.appendChild( element ); this.element.appendChild( element );
@ -230,7 +203,8 @@ $.ReferenceStrip = function ( options ) {
}; };
$.extend( $.ReferenceStrip.prototype, $.EventSource.prototype, $.Viewer.prototype, /** @lends OpenSeadragon.ReferenceStrip.prototype */{ /** @lends OpenSeadragon.ReferenceStrip.prototype */
$.ReferenceStrip.prototype = {
/** /**
* @function * @function
@ -277,7 +251,7 @@ $.extend( $.ReferenceStrip.prototype, $.EventSource.prototype, $.Viewer.prototyp
} }
this.currentPage = page; this.currentPage = page;
onStripEnter.call( this, { eventSource: this.innerTracker } ); onStripEnter.call( this, { eventSource: this.tracker } );
} }
}, },
@ -292,7 +266,6 @@ $.extend( $.ReferenceStrip.prototype, $.EventSource.prototype, $.Viewer.prototyp
return false; return false;
}, },
// Overrides Viewer.destroy
destroy: function() { destroy: function() {
if (this.miniViewers) { if (this.miniViewers) {
for (var key in this.miniViewers) { for (var key in this.miniViewers) {
@ -300,14 +273,34 @@ $.extend( $.ReferenceStrip.prototype, $.EventSource.prototype, $.Viewer.prototyp
} }
} }
this.tracker.destroy();
if (this.element) { if (this.element) {
this.element.parentNode.removeChild(this.element); this.element.parentNode.removeChild(this.element);
} }
} }
} ); };
/**
* @private
* @inner
* @function
*/
function onStripClick( event ) {
if ( event.quick ) {
var page;
if ( 'horizontal' === this.scroll ) {
page = Math.floor(event.position.x / this.panelWidth);
} else {
page = Math.floor(event.position.y / this.panelHeight);
}
this.viewer.goToPage( page );
}
}
/** /**
@ -317,13 +310,14 @@ $.extend( $.ReferenceStrip.prototype, $.EventSource.prototype, $.Viewer.prototyp
*/ */
function onStripDrag( event ) { function onStripDrag( event ) {
this.dragging = true;
if ( this.element ) {
var offsetLeft = Number( this.element.style.marginLeft.replace( 'px', '' ) ), var offsetLeft = Number( this.element.style.marginLeft.replace( 'px', '' ) ),
offsetTop = Number( this.element.style.marginTop.replace( 'px', '' ) ), offsetTop = Number( this.element.style.marginTop.replace( 'px', '' ) ),
scrollWidth = Number( this.element.style.width.replace( 'px', '' ) ), scrollWidth = Number( this.element.style.width.replace( 'px', '' ) ),
scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ), scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ),
viewerSize = $.getElementSize( this.viewer.canvas ); viewerSize = $.getElementSize( this.viewer.canvas );
this.dragging = true;
if ( this.element ) {
if ( 'horizontal' === this.scroll ) { if ( 'horizontal' === this.scroll ) {
if ( -event.delta.x > 0 ) { if ( -event.delta.x > 0 ) {
//forward //forward
@ -366,12 +360,13 @@ function onStripDrag( event ) {
* @function * @function
*/ */
function onStripScroll( event ) { function onStripScroll( event ) {
if ( this.element ) {
var offsetLeft = Number( this.element.style.marginLeft.replace( 'px', '' ) ), var offsetLeft = Number( this.element.style.marginLeft.replace( 'px', '' ) ),
offsetTop = Number( this.element.style.marginTop.replace( 'px', '' ) ), offsetTop = Number( this.element.style.marginTop.replace( 'px', '' ) ),
scrollWidth = Number( this.element.style.width.replace( 'px', '' ) ), scrollWidth = Number( this.element.style.width.replace( 'px', '' ) ),
scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ), scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ),
viewerSize = $.getElementSize( this.viewer.canvas ); viewerSize = $.getElementSize( this.viewer.canvas );
if ( this.element ) {
if ( 'horizontal' === this.scroll ) { if ( 'horizontal' === this.scroll ) {
if ( event.scroll > 0 ) { if ( event.scroll > 0 ) {
//forward //forward
@ -412,7 +407,6 @@ function loadPanels( strip, viewerSize, scroll ) {
activePanelsStart, activePanelsStart,
activePanelsEnd, activePanelsEnd,
miniViewer, miniViewer,
style,
i, i,
element; element;
if ( 'horizontal' === strip.scroll ) { if ( 'horizontal' === strip.scroll ) {
@ -454,34 +448,14 @@ function loadPanels( strip, viewerSize, scroll ) {
ajaxHeaders: strip.viewer.ajaxHeaders, ajaxHeaders: strip.viewer.ajaxHeaders,
useCanvas: strip.useCanvas useCanvas: strip.useCanvas
} ); } );
// Allow pointer events to pass through miniViewer's canvas/container
miniViewer.displayRegion = $.makeNeutralElement( "div" ); // elements so implicit pointer capture works on touch devices
miniViewer.displayRegion.id = element.id + '-displayregion'; $.setElementPointerEventsNone( miniViewer.canvas );
miniViewer.displayRegion.className = 'displayregion'; $.setElementPointerEventsNone( miniViewer.container );
// We'll use event delegation from the reference strip element instead of
style = miniViewer.displayRegion.style; // handling events on every miniViewer
style.position = 'relative'; miniViewer.innerTracker.setTracking( false );
style.top = '0px'; miniViewer.outerTracker.setTracking( false );
style.left = '0px';
style.fontSize = '0px';
style.overflow = 'hidden';
style.float = 'left'; //Webkit
style.cssFloat = 'left'; //Firefox
style.styleFloat = 'left'; //IE
style.zIndex = 999999999;
style.cursor = 'default';
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,
startDisabled: true
} );
element.getElementsByTagName( 'div' )[0].appendChild(
miniViewer.displayRegion
);
strip.miniViewers[element.id] = miniViewer; strip.miniViewers[element.id] = miniViewer;
@ -524,7 +498,7 @@ function onStripEnter( event ) {
* @inner * @inner
* @function * @function
*/ */
function onStripExit( event ) { function onStripLeave( event ) {
var element = event.eventSource.element; var element = event.eventSource.element;
if ( 'horizontal' === this.scroll ) { if ( 'horizontal' === this.scroll ) {

89
src/viewer.js
View File

@ -267,6 +267,7 @@ $.Viewer = function( options ) {
style.top = "0px"; style.top = "0px";
style.textAlign = "left"; // needed to protect against style.textAlign = "left"; // needed to protect against
}( this.container.style )); }( this.container.style ));
$.setElementTouchActionNone( this.container );
this.container.insertBefore( this.canvas, this.container.firstChild ); this.container.insertBefore( this.canvas, this.container.firstChild );
this.element.appendChild( this.container ); this.element.appendChild( this.container );
@ -280,12 +281,14 @@ $.Viewer = function( options ) {
this.docOverflow = document.documentElement.style.overflow; this.docOverflow = document.documentElement.style.overflow;
this.innerTracker = new $.MouseTracker({ this.innerTracker = new $.MouseTracker({
userData: 'Viewer.innerTracker',
element: this.canvas, element: this.canvas,
startDisabled: !this.mouseNavEnabled, startDisabled: !this.mouseNavEnabled,
clickTimeThreshold: this.clickTimeThreshold, clickTimeThreshold: this.clickTimeThreshold,
clickDistThreshold: this.clickDistThreshold, clickDistThreshold: this.clickDistThreshold,
dblClickTimeThreshold: this.dblClickTimeThreshold, dblClickTimeThreshold: this.dblClickTimeThreshold,
dblClickDistThreshold: this.dblClickDistThreshold, dblClickDistThreshold: this.dblClickDistThreshold,
contextMenuHandler: $.delegate( this, onCanvasContextMenu ),
keyDownHandler: $.delegate( this, onCanvasKeyDown ), keyDownHandler: $.delegate( this, onCanvasKeyDown ),
keyHandler: $.delegate( this, onCanvasKeyPress ), keyHandler: $.delegate( this, onCanvasKeyPress ),
clickHandler: $.delegate( this, onCanvasClick ), clickHandler: $.delegate( this, onCanvasClick ),
@ -293,7 +296,7 @@ $.Viewer = function( options ) {
dragHandler: $.delegate( this, onCanvasDrag ), dragHandler: $.delegate( this, onCanvasDrag ),
dragEndHandler: $.delegate( this, onCanvasDragEnd ), dragEndHandler: $.delegate( this, onCanvasDragEnd ),
enterHandler: $.delegate( this, onCanvasEnter ), enterHandler: $.delegate( this, onCanvasEnter ),
exitHandler: $.delegate( this, onCanvasExit ), leaveHandler: $.delegate( this, onCanvasLeave ),
pressHandler: $.delegate( this, onCanvasPress ), pressHandler: $.delegate( this, onCanvasPress ),
releaseHandler: $.delegate( this, onCanvasRelease ), releaseHandler: $.delegate( this, onCanvasRelease ),
nonPrimaryPressHandler: $.delegate( this, onCanvasNonPrimaryPress ), nonPrimaryPressHandler: $.delegate( this, onCanvasNonPrimaryPress ),
@ -303,6 +306,7 @@ $.Viewer = function( options ) {
}); });
this.outerTracker = new $.MouseTracker({ this.outerTracker = new $.MouseTracker({
userData: 'Viewer.outerTracker',
element: this.container, element: this.container,
startDisabled: !this.mouseNavEnabled, startDisabled: !this.mouseNavEnabled,
clickTimeThreshold: this.clickTimeThreshold, clickTimeThreshold: this.clickTimeThreshold,
@ -310,7 +314,7 @@ $.Viewer = function( options ) {
dblClickTimeThreshold: this.dblClickTimeThreshold, dblClickTimeThreshold: this.dblClickTimeThreshold,
dblClickDistThreshold: this.dblClickDistThreshold, dblClickDistThreshold: this.dblClickDistThreshold,
enterHandler: $.delegate( this, onContainerEnter ), enterHandler: $.delegate( this, onContainerEnter ),
exitHandler: $.delegate( this, onContainerExit ) leaveHandler: $.delegate( this, onContainerLeave )
}); });
if( this.toolbar ){ if( this.toolbar ){
@ -403,20 +407,22 @@ $.Viewer = function( options ) {
// Overlay container // Overlay container
this.overlaysContainer = $.makeNeutralElement( "div" ); this.overlaysContainer = $.makeNeutralElement( "div" );
$.setElementPointerEventsNone( this.overlaysContainer );
$.setElementTouchActionNone( this.overlaysContainer );
this.canvas.appendChild( this.overlaysContainer ); this.canvas.appendChild( this.overlaysContainer );
// Now that we have a drawer, see if it supports rotate. If not we need to remove the rotate buttons // Now that we have a drawer, see if it supports rotate. If not we need to remove the rotate buttons
if (!this.drawer.canRotate()) { if (!this.drawer.canRotate()) {
// Disable/remove the rotate left/right buttons since they aren't supported // Disable/remove the rotate left/right buttons since they aren't supported
if (this.rotateLeft) { if (this.rotateLeft) {
i = this.buttons.buttons.indexOf(this.rotateLeft); i = this.buttonGroup.buttons.indexOf(this.rotateLeft);
this.buttons.buttons.splice(i, 1); this.buttonGroup.buttons.splice(i, 1);
this.buttons.element.removeChild(this.rotateLeft.element); this.buttonGroup.element.removeChild(this.rotateLeft.element);
} }
if (this.rotateRight) { if (this.rotateRight) {
i = this.buttons.buttons.indexOf(this.rotateRight); i = this.buttonGroup.buttons.indexOf(this.rotateRight);
this.buttons.buttons.splice(i, 1); this.buttonGroup.buttons.splice(i, 1);
this.buttons.element.removeChild(this.rotateRight.element); this.buttonGroup.element.removeChild(this.rotateRight.element);
} }
} }
@ -777,8 +783,12 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
this.removeAllHandlers(); this.removeAllHandlers();
if (this.buttons) { if (this.buttonGroup) {
this.buttons.destroy(); this.buttonGroup.destroy();
} else if (this.customButtons) {
while (this.customButtons.length) {
this.customButtons.pop().destroy();
}
} }
if (this.paging) { if (this.paging) {
@ -1102,7 +1112,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
THIS[ this.hash ].fullPage = false; THIS[ this.hash ].fullPage = false;
// mouse will likely be outside now // mouse will likely be outside now
$.delegate( this, onContainerExit )( { } ); $.delegate( this, onContainerLeave )( { } );
} }
@ -1866,13 +1876,13 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
} }
if ( useGroup ) { if ( useGroup ) {
this.buttons = new $.ButtonGroup({ this.buttonGroup = new $.ButtonGroup({
buttons: buttons, buttons: buttons,
clickTimeThreshold: this.clickTimeThreshold, clickTimeThreshold: this.clickTimeThreshold,
clickDistThreshold: this.clickDistThreshold clickDistThreshold: this.clickDistThreshold
}); });
this.navControl = this.buttons.element; this.navControl = this.buttonGroup.element;
this.addHandler( 'open', $.delegate( this, lightUp ) ); this.addHandler( 'open', $.delegate( this, lightUp ) );
if( this.toolbar ){ if( this.toolbar ){
@ -1886,6 +1896,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
{anchor: this.navigationControlAnchor || $.ControlAnchor.TOP_LEFT} {anchor: this.navigationControlAnchor || $.ControlAnchor.TOP_LEFT}
); );
} }
} else {
this.customButtons = buttons;
} }
} }
@ -2550,6 +2562,26 @@ function onBlur(){
} }
function onCanvasContextMenu( event ) {
/**
* Raised when a contextmenu event occurs in the {@link OpenSeadragon.Viewer#canvas} element.
*
* @event canvas-contextmenu
* @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 {Object} originalEvent - The original DOM event.
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
this.raiseEvent( 'canvas-contextmenu', {
tracker: event.eventSource,
position: event.position,
originalEvent: event.originalEvent
});
}
function onCanvasKeyDown( event ) { function onCanvasKeyDown( event ) {
var canvasKeyDownEventArgs = { var canvasKeyDownEventArgs = {
originalEvent: event.originalEvent, originalEvent: event.originalEvent,
@ -2799,6 +2831,7 @@ function onCanvasDrag( event ) {
var canvasDragEventArgs = { var canvasDragEventArgs = {
tracker: event.eventSource, tracker: event.eventSource,
pointerType: event.pointerType,
position: event.position, position: event.position,
delta: event.delta, delta: event.delta,
speed: event.speed, speed: event.speed,
@ -2816,13 +2849,14 @@ function onCanvasDrag( event ) {
* @type {object} * @type {object}
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event. * @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.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 {OpenSeadragon.Point} position - The position of the event relative to the tracked element.
* @property {OpenSeadragon.Point} delta - The x,y components of the difference between start drag and end drag. * @property {OpenSeadragon.Point} delta - The x,y components of the difference between start drag and end drag.
* @property {Number} speed - Current computed speed, in pixels per second. * @property {Number} speed - Current computed speed, in pixels per second.
* @property {Number} direction - Current computed direction, expressed as an angle counterclockwise relative to the positive X axis (-pi to pi, in radians). Only valid if speed > 0. * @property {Number} direction - Current computed direction, expressed as an angle counterclockwise relative to the positive X axis (-pi to pi, in radians). Only valid if speed > 0.
* @property {Boolean} shift - True if the shift key was pressed during this event. * @property {Boolean} shift - True if the shift key was pressed during this event.
* @property {Object} originalEvent - The original DOM event. * @property {Object} originalEvent - The original DOM event.
* @property {Boolean} preventDefaultAction - Set to true to prevent default drag behaviour. Default: false. * @property {Boolean} preventDefaultAction - Set to true to prevent default drag to pan behaviour. Default: false.
* @property {?Object} userData - Arbitrary subscriber-defined object. * @property {?Object} userData - Arbitrary subscriber-defined object.
*/ */
this.raiseEvent( 'canvas-drag', canvasDragEventArgs); this.raiseEvent( 'canvas-drag', canvasDragEventArgs);
@ -2895,6 +2929,7 @@ function onCanvasDragEnd( event ) {
* @type {object} * @type {object}
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event. * @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.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 {OpenSeadragon.Point} position - The position of the event relative to the tracked element.
* @property {Number} speed - Speed at the end of a drag gesture, in pixels per second. * @property {Number} speed - Speed at the end of a drag gesture, in pixels per second.
* @property {Number} direction - Direction at the end of a drag gesture, expressed as an angle counterclockwise relative to the positive X axis (-pi to pi, in radians). Only valid if speed > 0. * @property {Number} direction - Direction at the end of a drag gesture, expressed as an angle counterclockwise relative to the positive X axis (-pi to pi, in radians). Only valid if speed > 0.
@ -2904,6 +2939,7 @@ function onCanvasDragEnd( event ) {
*/ */
this.raiseEvent('canvas-drag-end', { this.raiseEvent('canvas-drag-end', {
tracker: event.eventSource, tracker: event.eventSource,
pointerType: event.pointerType,
position: event.position, position: event.position,
speed: event.speed, speed: event.speed,
direction: event.direction, direction: event.direction,
@ -2942,12 +2978,7 @@ function onCanvasEnter( event ) {
}); });
} }
function onCanvasExit( event ) { function onCanvasLeave( event ) {
if (window.location !== window.parent.location){
$.MouseTracker.resetAllMouseTrackers();
}
/** /**
* Raised when a pointer leaves the {@link OpenSeadragon.Viewer#canvas} element. * Raised when a pointer leaves the {@link OpenSeadragon.Viewer#canvas} element.
* *
@ -3126,6 +3157,7 @@ function onCanvasPinch( event ) {
* @type {object} * @type {object}
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event. * @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.MouseTracker} tracker - A reference to the MouseTracker which originated this event.
* @property {String} pointerType - "mouse", "touch", "pen", etc.
* @property {Array.<OpenSeadragon.MouseTracker.GesturePoint>} gesturePoints - Gesture points associated with the gesture. Velocity data can be found here. * @property {Array.<OpenSeadragon.MouseTracker.GesturePoint>} gesturePoints - Gesture points associated with the gesture. Velocity data can be found here.
* @property {OpenSeadragon.Point} lastCenter - The previous center point of the two pinch contact points relative to the tracked element. * @property {OpenSeadragon.Point} lastCenter - The previous center point of the two pinch contact points relative to the tracked element.
* @property {OpenSeadragon.Point} center - The center point of the two pinch contact points relative to the tracked element. * @property {OpenSeadragon.Point} center - The center point of the two pinch contact points relative to the tracked element.
@ -3137,6 +3169,7 @@ function onCanvasPinch( event ) {
*/ */
this.raiseEvent('canvas-pinch', { this.raiseEvent('canvas-pinch', {
tracker: event.eventSource, tracker: event.eventSource,
pointerType: event.pointerType,
gesturePoints: event.gesturePoints, gesturePoints: event.gesturePoints,
lastCenter: event.lastCenter, lastCenter: event.lastCenter,
center: event.center, center: event.center,
@ -3225,6 +3258,7 @@ function onContainerEnter( event ) {
* @type {object} * @type {object}
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event. * @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.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 {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} 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 {Number} pointers - Number of pointers (all types) active in the tracked element.
@ -3235,6 +3269,7 @@ function onContainerEnter( event ) {
*/ */
this.raiseEvent( 'container-enter', { this.raiseEvent( 'container-enter', {
tracker: event.eventSource, tracker: event.eventSource,
pointerType: event.pointerType,
position: event.position, position: event.position,
buttons: event.buttons, buttons: event.buttons,
pointers: event.pointers, pointers: event.pointers,
@ -3244,7 +3279,7 @@ function onContainerEnter( event ) {
}); });
} }
function onContainerExit( event ) { function onContainerLeave( event ) {
if ( event.pointers < 1 ) { if ( event.pointers < 1 ) {
THIS[ this.hash ].mouseInside = false; THIS[ this.hash ].mouseInside = false;
if ( !THIS[ this.hash ].animating ) { if ( !THIS[ this.hash ].animating ) {
@ -3259,6 +3294,7 @@ function onContainerExit( event ) {
* @type {object} * @type {object}
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event. * @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.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 {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} 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 {Number} pointers - Number of pointers (all types) active in the tracked element.
@ -3269,6 +3305,7 @@ function onContainerExit( event ) {
*/ */
this.raiseEvent( 'container-exit', { this.raiseEvent( 'container-exit', {
tracker: event.eventSource, tracker: event.eventSource,
pointerType: event.pointerType,
position: event.position, position: event.position,
buttons: event.buttons, buttons: event.buttons,
pointers: event.pointers, pointers: event.pointers,
@ -3499,8 +3536,10 @@ function doSingleZoomOut() {
function lightUp() { function lightUp() {
this.buttons.emulateEnter(); if (this.buttonGroup) {
this.buttons.emulateExit(); this.buttonGroup.emulateEnter();
this.buttonGroup.emulateLeave();
}
} }
@ -3519,8 +3558,8 @@ function onFullScreen() {
this.setFullScreen( !this.isFullPage() ); this.setFullScreen( !this.isFullPage() );
} }
// correct for no mouseout event on change // correct for no mouseout event on change
if ( this.buttons ) { if ( this.buttonGroup ) {
this.buttons.emulateExit(); this.buttonGroup.emulateLeave();
} }
this.fullPageButton.element.focus(); this.fullPageButton.element.focus();
if ( this.viewport ) { if ( this.viewport ) {

21
test/helpers/legacy.mouse.shim.js
View File

@ -6,20 +6,22 @@
$.MouseTracker.subscribeEvents = [ "click", "dblclick", "keypress", "focus", "blur", $.MouseTracker.wheelEventName ]; $.MouseTracker.subscribeEvents = [ "click", "dblclick", "keypress", "focus", "blur", $.MouseTracker.wheelEventName ];
if( $.MouseTracker.wheelEventName == "DOMMouseScroll" ) { if( $.MouseTracker.wheelEventName === "DOMMouseScroll" ) {
// Older Firefox // Older Firefox
$.MouseTracker.subscribeEvents.push( "MozMousePixelScroll" ); $.MouseTracker.subscribeEvents.push( "MozMousePixelScroll" );
} }
$.MouseTracker.havePointerEvents = false; $.MouseTracker.havePointerEvents = false;
if ( $.Browser.vendor === $.BROWSERS.IE && $.Browser.version < 9 ) { $.MouseTracker.subscribeEvents.push( "mouseenter", "mouseleave", "mouseover", "mouseout", "mousedown", "mouseup", "mousemove" );
$.MouseTracker.subscribeEvents.push( "mouseenter", "mouseleave" ); $.MouseTracker.mousePointerId = "legacy-mouse";
$.MouseTracker.haveMouseEnter = true; // Legacy mouse events capture support (IE/Firefox only?)
} else { $.MouseTracker.havePointerCapture = (function () {
$.MouseTracker.subscribeEvents.push( "mouseover", "mouseout" ); var divElement = document.createElement( 'div' );
$.MouseTracker.haveMouseEnter = false; return $.isFunction( divElement.setCapture ) && $.isFunction( divElement.releaseCapture );
}());
if ( $.MouseTracker.havePointerCapture ) {
$.MouseTracker.subscribeEvents.push( "losecapture" );
} }
$.MouseTracker.subscribeEvents.push( "mousedown", "mouseup", "mousemove" );
if ( 'ontouchstart' in window ) { if ( 'ontouchstart' in window ) {
// iOS, Android, and other W3c Touch Event implementations // iOS, Android, and other W3c Touch Event implementations
// (see http://www.w3.org/TR/touch-events/) // (see http://www.w3.org/TR/touch-events/)
@ -32,8 +34,5 @@
// Subscribe to these to prevent default gesture handling // Subscribe to these to prevent default gesture handling
$.MouseTracker.subscribeEvents.push( "gesturestart", "gesturechange" ); $.MouseTracker.subscribeEvents.push( "gesturestart", "gesturechange" );
} }
$.MouseTracker.mousePointerId = "legacy-mouse";
$.MouseTracker.maxTouchPoints = 10;
}(OpenSeadragon)); }(OpenSeadragon));

4
test/helpers/test.js
View File

@ -37,7 +37,7 @@
}; };
$canvas $canvas
.simulate( OpenSeadragon.MouseTracker.haveMouseEnter ? 'mouseenter' : 'mouseover', event ) .simulate( 'mouseenter', event )
.simulate( 'mousedown', event ); .simulate( 'mousedown', event );
for ( var i = 0; i < args.dragCount; i++ ) { for ( var i = 0; i < args.dragCount; i++ ) {
event.clientX += args.dragDx; event.clientX += args.dragDx;
@ -47,7 +47,7 @@
} }
$canvas $canvas
.simulate( 'mouseup', event ) .simulate( 'mouseup', event )
.simulate( OpenSeadragon.MouseTracker.haveMouseEnter ? 'mouseleave' : 'mouseout', event ); .simulate( 'mouseleave', event );
}, },
// ---------- // ----------

12
test/modules/controls.js vendored
View File

@ -53,9 +53,9 @@
assert.ok(viewer.showZoomControl, 'showZoomControl should be on'); assert.ok(viewer.showZoomControl, 'showZoomControl should be on');
assert.ok(!!viewer.zoomInButton, "zoomIn button should not be null"); assert.ok(!!viewer.zoomInButton, "zoomIn button should not be null");
assert.ok(!!viewer.zoomOutButton, "zoomOut button should not be null"); assert.ok(!!viewer.zoomOutButton, "zoomOut button should not be null");
assert.notEqual(viewer.buttons.buttons.indexOf(viewer.zoomInButton), -1, assert.notEqual(viewer.buttonGroup.buttons.indexOf(viewer.zoomInButton), -1,
"The zoomIn button should be present"); "The zoomIn button should be present");
assert.notEqual(viewer.buttons.buttons.indexOf(viewer.zoomOutButton), -1, assert.notEqual(viewer.buttonGroup.buttons.indexOf(viewer.zoomOutButton), -1,
"The zoomOut button should be present"); "The zoomOut button should be present");
var oldZoom = viewer.viewport.getZoom(); var oldZoom = viewer.viewport.getZoom();
@ -108,7 +108,7 @@
viewer.removeHandler('open', openHandler); viewer.removeHandler('open', openHandler);
assert.ok(viewer.showHomeControl, 'showHomeControl should be on'); assert.ok(viewer.showHomeControl, 'showHomeControl should be on');
assert.ok(!!viewer.homeButton, "Home button should not be null"); assert.ok(!!viewer.homeButton, "Home button should not be null");
assert.notEqual(viewer.buttons.buttons.indexOf(viewer.homeButton), -1, assert.notEqual(viewer.buttonGroup.buttons.indexOf(viewer.homeButton), -1,
"The home button should be present"); "The home button should be present");
viewer.viewport.zoomBy(1.1); viewer.viewport.zoomBy(1.1);
@ -167,7 +167,7 @@
viewer.removeHandler('open', openHandler); viewer.removeHandler('open', openHandler);
assert.ok(viewer.showHomeControl, 'showFullPageControl should be on'); assert.ok(viewer.showHomeControl, 'showFullPageControl should be on');
assert.ok(!!viewer.fullPageButton, "FullPage button should not be null"); assert.ok(!!viewer.fullPageButton, "FullPage button should not be null");
assert.notEqual(viewer.buttons.buttons.indexOf(viewer.fullPageButton), -1, assert.notEqual(viewer.buttonGroup.buttons.indexOf(viewer.fullPageButton), -1,
"The full page button should be present"); "The full page button should be present");
assert.ok(!viewer.isFullPage(), "OSD should not be in full page."); assert.ok(!viewer.isFullPage(), "OSD should not be in full page.");
@ -223,9 +223,9 @@
assert.ok(viewer.drawer, 'Drawer exists'); assert.ok(viewer.drawer, 'Drawer exists');
assert.ok(viewer.drawer.canRotate(), 'drawer.canRotate needs to be true'); assert.ok(viewer.drawer.canRotate(), 'drawer.canRotate needs to be true');
assert.ok(viewer.showRotationControl, 'showRotationControl should be true'); assert.ok(viewer.showRotationControl, 'showRotationControl should be true');
assert.notEqual(viewer.buttons.buttons.indexOf(viewer.rotateLeftButton), -1, assert.notEqual(viewer.buttonGroup.buttons.indexOf(viewer.rotateLeftButton), -1,
"rotateLeft should be found"); "rotateLeft should be found");
assert.notEqual(viewer.buttons.buttons.indexOf(viewer.rotateRightButton), -1, assert.notEqual(viewer.buttonGroup.buttons.indexOf(viewer.rotateRightButton), -1,
"rotateRight should be found"); "rotateRight should be found");
// Now simulate the left/right button clicks. // Now simulate the left/right button clicks.

98
test/modules/events.js
View File

@ -32,7 +32,7 @@
offset = $canvas.offset(), offset = $canvas.offset(),
tracker = viewer.innerTracker, tracker = viewer.innerTracker,
origEnterHandler, origEnterHandler,
origExitHandler, origLeaveHandler,
origPressHandler, origPressHandler,
origReleaseHandler, origReleaseHandler,
origNonPrimaryPressHandler, origNonPrimaryPressHandler,
@ -43,7 +43,7 @@
origDragHandler, origDragHandler,
origDragEndHandler, origDragEndHandler,
enterCount, enterCount,
exitCount, leaveCount,
pressCount, pressCount,
releaseCount, releaseCount,
rightPressCount, rightPressCount,
@ -71,11 +71,11 @@
return true; return true;
} }
}; };
origExitHandler = tracker.exitHandler; origLeaveHandler = tracker.leaveHandler;
tracker.exitHandler = function ( event ) { tracker.leaveHandler = function ( event ) {
exitCount++; leaveCount++;
if (origExitHandler) { if (origLeaveHandler) {
return origExitHandler( event ); return origLeaveHandler( event );
} else { } else {
return true; return true;
} }
@ -182,7 +182,7 @@
var unhookViewerHandlers = function () { var unhookViewerHandlers = function () {
tracker.enterHandler = origEnterHandler; tracker.enterHandler = origEnterHandler;
tracker.exitHandler = origExitHandler; tracker.leaveHandler = origLeaveHandler;
tracker.pressHandler = origPressHandler; tracker.pressHandler = origPressHandler;
tracker.releaseHandler = origReleaseHandler; tracker.releaseHandler = origReleaseHandler;
tracker.moveHandler = origMoveHandler; tracker.moveHandler = origMoveHandler;
@ -195,21 +195,21 @@
var simulateEnter = function (x, y) { var simulateEnter = function (x, y) {
simEvent.clientX = offset.left + x; simEvent.clientX = offset.left + x;
simEvent.clientY = offset.top + y; simEvent.clientY = offset.top + y;
$canvas.simulate( OpenSeadragon.MouseTracker.haveMouseEnter ? 'mouseenter' : 'mouseover', simEvent ); $canvas.simulate( 'mouseenter', simEvent );
}; };
var simulateLeave = function (x, y) { var simulateLeave = function (x, y) {
simEvent.clientX = offset.left + x; simEvent.clientX = offset.left + x;
simEvent.clientY = offset.top + y; simEvent.clientY = offset.top + y;
simEvent.relatedTarget = document.body; simEvent.relatedTarget = document.body;
$canvas.simulate( OpenSeadragon.MouseTracker.haveMouseEnter ? 'mouseleave' : 'mouseout', simEvent ); $canvas.simulate( 'mouseleave', simEvent );
}; };
//var simulateLeaveFrame = function (x, y) { //var simulateLeaveFrame = function (x, y) {
// simEvent.clientX = offset.left + x; // simEvent.clientX = offset.left + x;
// simEvent.clientY = offset.top + y; // simEvent.clientY = offset.top + y;
// simEvent.relatedTarget = document.getElementsByTagName("html")[0]; // simEvent.relatedTarget = document.getElementsByTagName("html")[0];
// $canvas.simulate( OpenSeadragon.MouseTracker.haveMouseEnter ? 'mouseleave' : 'mouseout', simEvent ); // $canvas.simulate( 'mouseleave', simEvent );
//}; //};
var simulateDown = function (x, y) { var simulateDown = function (x, y) {
@ -256,7 +256,7 @@
clientY: offset.top clientY: offset.top
}; };
enterCount = 0; enterCount = 0;
exitCount = 0; leaveCount = 0;
pressCount = 0; pressCount = 0;
releaseCount = 0; releaseCount = 0;
rightPressCount = 0; rightPressCount = 0;
@ -280,8 +280,8 @@
if ('enterCount' in expected) { if ('enterCount' in expected) {
assert.equal( enterCount, expected.enterCount, expected.description + 'enterHandler event count matches expected (' + expected.enterCount + ')' ); assert.equal( enterCount, expected.enterCount, expected.description + 'enterHandler event count matches expected (' + expected.enterCount + ')' );
} }
if ('exitCount' in expected) { if ('leaveCount' in expected) {
assert.equal( exitCount, expected.exitCount, expected.description + 'exitHandler event count matches expected (' + expected.exitCount + ')' ); assert.equal( leaveCount, expected.leaveCount, expected.description + 'leaveHandler event count matches expected (' + expected.leaveCount + ')' );
} }
if ('pressCount' in expected) { if ('pressCount' in expected) {
assert.equal( pressCount, expected.pressCount, expected.description + 'pressHandler event count matches expected (' + expected.pressCount + ')' ); assert.equal( pressCount, expected.pressCount, expected.description + 'pressHandler event count matches expected (' + expected.pressCount + ')' );
@ -355,7 +355,7 @@
assessGestureExpectations({ assessGestureExpectations({
description: 'enter-move-release (release in tracked element, press in unknown element): ', description: 'enter-move-release (release in tracked element, press in unknown element): ',
enterCount: 1, enterCount: 1,
exitCount: 0, leaveCount: 0,
pressCount: 0, pressCount: 0,
releaseCount: 1, releaseCount: 1,
rightPressCount: 0, rightPressCount: 0,
@ -375,16 +375,16 @@
}); });
simulateLeave(-1, -1); // flush tracked pointer simulateLeave(-1, -1); // flush tracked pointer
// enter-move-exit (fly-over) // enter-move-leave (fly-over)
resetForAssessment(); resetForAssessment();
simulateEnter(0, 0); simulateEnter(0, 0);
simulateMove(1, 1, 10); simulateMove(1, 1, 10);
simulateMove(-1, -1, 10); simulateMove(-1, -1, 10);
simulateLeave(-1, -1); simulateLeave(-1, -1);
assessGestureExpectations({ assessGestureExpectations({
description: 'enter-move-exit (fly-over): ', description: 'enter-move-leave (fly-over): ',
enterCount: 1, enterCount: 1,
exitCount: 1, leaveCount: 1,
pressCount: 0, pressCount: 0,
releaseCount: 0, releaseCount: 0,
rightPressCount: 0, rightPressCount: 0,
@ -403,15 +403,15 @@
//quickClick: false //quickClick: false
}); });
// move-exit (fly-over, no enter event) // move-leave (fly-over, no enter event)
resetForAssessment(); resetForAssessment();
simulateMove(1, 1, 10); simulateMove(1, 1, 10);
simulateMove(-1, -1, 10); simulateMove(-1, -1, 10);
simulateLeave(-1, -1); simulateLeave(-1, -1);
assessGestureExpectations({ assessGestureExpectations({
description: 'move-exit (fly-over, no enter event): ', description: 'move-leave (fly-over, no enter event): ',
enterCount: 0, enterCount: 0,
exitCount: 1, leaveCount: 1,
pressCount: 0, pressCount: 0,
releaseCount: 0, releaseCount: 0,
rightPressCount: 0, rightPressCount: 0,
@ -430,7 +430,7 @@
//quickClick: false //quickClick: false
}); });
// enter-press-release-press-release-exit (primary/left double click) // enter-press-release-press-release-leave (primary/left double click)
resetForAssessment(); resetForAssessment();
simulateEnter(0, 0); simulateEnter(0, 0);
simulateDown(0, 0); simulateDown(0, 0);
@ -439,9 +439,9 @@
simulateUp(0, 0); simulateUp(0, 0);
simulateLeave(-1, -1); simulateLeave(-1, -1);
assessGestureExpectations({ assessGestureExpectations({
description: 'enter-press-release-press-release-exit (primary/left double click): ', description: 'enter-press-release-press-release-leave (primary/left double click): ',
enterCount: 1, enterCount: 1,
exitCount: 1, leaveCount: 1,
pressCount: 2, pressCount: 2,
releaseCount: 2, releaseCount: 2,
rightPressCount: 0, rightPressCount: 0,
@ -452,7 +452,7 @@
clickCount: 2, clickCount: 2,
dblClickCount: 1, dblClickCount: 1,
dragCount: 0, dragCount: 0,
dragEndCount: 0, dragEndCount: 2, // v2.5.0+ drag-end event now fired even if pointer didn't move (#1459)
insideElementPressed: true, insideElementPressed: true,
insideElementReleased: true, insideElementReleased: true,
contacts: 0, contacts: 0,
@ -460,16 +460,16 @@
//quickClick: true //quickClick: true
}); });
// enter-press-release-exit (primary/left click) // enter-press-release-leave (primary/left click)
resetForAssessment(); resetForAssessment();
simulateEnter(0, 0); simulateEnter(0, 0);
simulateDown(0, 0); simulateDown(0, 0);
simulateUp(0, 0); simulateUp(0, 0);
simulateLeave(-1, -1); simulateLeave(-1, -1);
assessGestureExpectations({ assessGestureExpectations({
description: 'enter-press-release-exit (primary/left click): ', description: 'enter-press-release-leave (primary/left click): ',
enterCount: 1, enterCount: 1,
exitCount: 1, leaveCount: 1,
pressCount: 1, pressCount: 1,
releaseCount: 1, releaseCount: 1,
rightPressCount: 0, rightPressCount: 0,
@ -480,7 +480,7 @@
clickCount: 1, clickCount: 1,
dblClickCount: 0, dblClickCount: 0,
dragCount: 0, dragCount: 0,
dragEndCount: 0, dragEndCount: 1, // v2.5.0+ drag-end event now fired even if pointer didn't move (#1459)
insideElementPressed: true, insideElementPressed: true,
insideElementReleased: true, insideElementReleased: true,
contacts: 0, contacts: 0,
@ -488,16 +488,16 @@
quickClick: true quickClick: true
}); });
// enter-nonprimarypress-nonprimaryrelease-exit (secondary/right click) // enter-nonprimarypress-nonprimaryrelease-leave (secondary/right click)
resetForAssessment(); resetForAssessment();
simulateEnter(0, 0); simulateEnter(0, 0);
simulateNonPrimaryDown(0, 0, 2); simulateNonPrimaryDown(0, 0, 2);
simulateNonPrimaryUp(0, 0, 2); simulateNonPrimaryUp(0, 0, 2);
simulateLeave(-1, -1); simulateLeave(-1, -1);
assessGestureExpectations({ assessGestureExpectations({
description: 'enter-nonprimarypress-nonprimaryrelease-exit (secondary/right click): ', description: 'enter-nonprimarypress-nonprimaryrelease-leave (secondary/right click): ',
enterCount: 1, enterCount: 1,
exitCount: 1, leaveCount: 1,
pressCount: 0, pressCount: 0,
releaseCount: 0, releaseCount: 0,
rightPressCount: 1, rightPressCount: 1,
@ -516,16 +516,16 @@
//quickClick: true //quickClick: true
}); });
// enter-nonprimarypress-nonprimaryrelease-exit (aux/middle click) // enter-nonprimarypress-nonprimaryrelease-leave (aux/middle click)
resetForAssessment(); resetForAssessment();
simulateEnter(0, 0); simulateEnter(0, 0);
simulateNonPrimaryDown(0, 0, 1); simulateNonPrimaryDown(0, 0, 1);
simulateNonPrimaryUp(0, 0, 1); simulateNonPrimaryUp(0, 0, 1);
simulateLeave(-1, -1); simulateLeave(-1, -1);
assessGestureExpectations({ assessGestureExpectations({
description: 'enter-nonprimarypress-nonprimaryrelease-exit (aux/middle click): ', description: 'enter-nonprimarypress-nonprimaryrelease-leave (aux/middle click): ',
enterCount: 1, enterCount: 1,
exitCount: 1, leaveCount: 1,
pressCount: 0, pressCount: 0,
releaseCount: 0, releaseCount: 0,
rightPressCount: 0, rightPressCount: 0,
@ -544,7 +544,7 @@
//quickClick: true //quickClick: true
}); });
// enter-nonprimarypress-move-nonprimaryrelease-move-exit (secondary/right button drag, release in tracked element) // enter-nonprimarypress-move-nonprimaryrelease-move-leave (secondary/right button drag, release in tracked element)
resetForAssessment(); resetForAssessment();
simulateEnter(0, 0); simulateEnter(0, 0);
simulateNonPrimaryDown(0, 0, 2); simulateNonPrimaryDown(0, 0, 2);
@ -553,9 +553,9 @@
simulateMove(-1, -1, 100); simulateMove(-1, -1, 100);
simulateLeave(-1, -1); simulateLeave(-1, -1);
assessGestureExpectations({ assessGestureExpectations({
description: 'enter-nonprimarypress-move-nonprimaryrelease-move-exit (secondary/right button drag, release in tracked element): ', description: 'enter-nonprimarypress-move-nonprimaryrelease-move-leave (secondary/right button drag, release in tracked element): ',
enterCount: 1, enterCount: 1,
exitCount: 1, leaveCount: 1,
pressCount: 0, pressCount: 0,
releaseCount: 0, releaseCount: 0,
rightPressCount: 1, rightPressCount: 1,
@ -574,7 +574,7 @@
//quickClick: false //quickClick: false
}); });
// enter-press-move-release-move-exit (drag, release in tracked element) // enter-press-move-release-move-leave (drag, release in tracked element)
resetForAssessment(); resetForAssessment();
simulateEnter(0, 0); simulateEnter(0, 0);
simulateDown(0, 0); simulateDown(0, 0);
@ -583,9 +583,9 @@
simulateMove(-1, -1, 100); simulateMove(-1, -1, 100);
simulateLeave(-1, -1); simulateLeave(-1, -1);
assessGestureExpectations({ assessGestureExpectations({
description: 'enter-press-move-release-move-exit (drag, release in tracked element): ', description: 'enter-press-move-release-move-leave (drag, release in tracked element): ',
enterCount: 1, enterCount: 1,
exitCount: 1, leaveCount: 1,
pressCount: 1, pressCount: 1,
releaseCount: 1, releaseCount: 1,
rightPressCount: 0, rightPressCount: 0,
@ -604,7 +604,7 @@
quickClick: false quickClick: false
}); });
// enter-press-move-exit-move-release (drag, release outside tracked element) // enter-press-move-leave-move-release (drag, release outside tracked element)
resetForAssessment(); resetForAssessment();
simulateEnter(0, 0); simulateEnter(0, 0);
simulateDown(0, 0); simulateDown(0, 0);
@ -614,9 +614,9 @@
simulateMove(-1, -1, 5); simulateMove(-1, -1, 5);
simulateUp(-5, -5); simulateUp(-5, -5);
assessGestureExpectations({ assessGestureExpectations({
description: 'enter-press-move-exit-move-release (drag, release outside tracked element): ', description: 'enter-press-move-leave-move-release (drag, release outside tracked element): ',
enterCount: 1, enterCount: 1,
exitCount: 1, leaveCount: 1,
pressCount: 1, pressCount: 1,
releaseCount: 1, releaseCount: 1,
rightPressCount: 0, rightPressCount: 0,
@ -635,7 +635,7 @@
quickClick: false quickClick: false
}); });
//// enter-press-move-exit-move-release-outside (drag, release outside iframe) //// enter-press-move-leave-move-release-outside (drag, release outside iframe)
//resetForAssessment(); //resetForAssessment();
//simulateEnter(0, 0); //simulateEnter(0, 0);
//simulateDown(0, 0); //simulateDown(0, 0);
@ -644,9 +644,9 @@
//simulateLeaveFrame(-1, -1); //simulateLeaveFrame(-1, -1);
//// you don't actually receive the mouseup if you mouseup outside of the document //// you don't actually receive the mouseup if you mouseup outside of the document
//assessGestureExpectations({ //assessGestureExpectations({
// description: 'enter-press-move-exit-move-release-outside (drag, release outside iframe): ', // description: 'enter-press-move-leave-move-release-outside (drag, release outside iframe): ',
// enterCount: 1, // enterCount: 1,
// exitCount: 1, // leaveCount: 1,
// pressCount: 1, // pressCount: 1,
// releaseCount: 1, // releaseCount: 1,
// rightPressCount: 0, // rightPressCount: 0,
@ -953,7 +953,7 @@
dragEndHandler: onMouseTrackerDragEnd, dragEndHandler: onMouseTrackerDragEnd,
releaseHandler: onMouseTrackerRelease, releaseHandler: onMouseTrackerRelease,
clickHandler: onMouseTrackerClick, clickHandler: onMouseTrackerClick,
exitHandler: onMouseTrackerExit leaveHandler: onMouseTrackerLeave
} ); } );
var event = { var event = {
@ -1050,7 +1050,7 @@
checkOriginalEventReceived( event ); checkOriginalEventReceived( event );
}; };
var onMouseTrackerExit = function ( event ) { var onMouseTrackerLeave = function ( event ) {
checkOriginalEventReceived( event ); checkOriginalEventReceived( event );
mouseTracker.destroy(); mouseTracker.destroy();

31
test/modules/navigator.js
View File

@ -216,19 +216,34 @@
clientY: offset.top + locationY clientY: offset.top + locationY
}; };
$canvas $canvas
.simulate(OpenSeadragon.MouseTracker.haveMouseEnter ? 'mouseenter' : 'mouseover', event) .simulate('mouseenter', event)
.simulate('mousedown', event) .simulate('mousedown', event)
.simulate('mouseup', event); .simulate('mouseup', event);
}; };
var simulateNavigatorDrag = function (viewer, distanceX, distanceY) { var simulateNavigatorDrag = function (viewer, distanceX, distanceY) {
var $canvas = $(viewer.element).find('.displayregion'), var $canvas = $(viewer.element).find('.openseadragon-canvas'),
event = { offset = $canvas.offset(),
dx: Math.floor(distanceX), event = {};
dy: Math.floor(distanceY)
}; event.clientX = offset.left + 1;
$canvas event.clientY = offset.top + 1;
.simulate('drag', event); $canvas.simulate( 'mouseenter', event );
event.button = 0;
$canvas.simulate( 'mousedown', event );
event.clientX += distanceX;
event.clientY += distanceY;
$canvas.simulate( 'mousemove', event );
event.button = 0;
$canvas.simulate( 'mouseup', event );
event.clientX = offset.left - 1;
event.clientY = offset.top - 1;
event.relatedTarget = document.body;
$canvas.simulate( 'mouseleave', event );
}; };
var dragNavigatorBackToCenter = function () { var dragNavigatorBackToCenter = function () {