Merge remote-tracking branch 'origin/master' into canvas-detect

Conflicts:
	src/openseadragon.js
This commit is contained in:
Mark Salsbery 2013-11-01 12:22:48 -07:00
commit 85fcf0ec11
3 changed files with 202 additions and 101 deletions

View File

@ -5,7 +5,7 @@ OPENSEADRAGON CHANGELOG
* BREAKING CHANGE: All EventSource and MouseTracker event handler method signatures changed to 'handlerMethod(event)' where event == { eventSource, userData, ... } (#251) (Also fixes #23, #224, #239)
* The new eventSource property in the event object replaces the old eventSource parameter that was passed to handler methods.
* Where the event object duplicated the eventSource value, those properties have been removed. This effects the following events:
* Where the event object duplicated the eventSource value, those properties have been removed. This affects the following events:
* All Button events - 'button' property removed
* All Viewer (Viewer, Drawer, Viewport) events - 'viewer' property removed
* BREAKING CHANGE: Renamed EventHandler to EventSource (#225)
@ -21,6 +21,7 @@ OPENSEADRAGON CHANGELOG
* Button "onBlur" changed to "blur"
* MouseTracker now passes the original event objects to its handler methods (#23)
* MouseTracker now supports an optional 'moveHandler' method for tracking mousemove events (#215)
* Added stopHandler to MouseTracker. (#262)
* Fixed: Element-relative mouse coordinates now correct if the element and/or page is scrolled (using new OpenSeadragon.getElementOffset() method) (#131)
* Fixed: Pinch zoom event issue, regressive issue from previous event system changes (#244)
* Added IIIF Image API 1.1 Tile Source (#230)
@ -34,6 +35,7 @@ OPENSEADRAGON CHANGELOG
* Viewer: 'canvas-release', 'canvas-click', 'canvas-drag', 'canvas-scroll', 'container-enter', 'container-exit', 'container-release'
* Button: 'enter', 'exit', 'press', 'release', 'focus', 'blur', 'click'
* Fixed: IE 10 not reading DZI file correctly in certain circumstances (#218)
* Added support for the 'wheel' DOM mousewheel event (#261)
* Fix for non-canvas tile rendering at large size (#264)
* Drawer now uses an HTML5 canvas element whenever it's available. Can be overridden with the Viewer.useCanvas option (#191)

View File

@ -59,11 +59,14 @@
* A reference to an element or an element id for which the mouse
* events will be monitored.
* @param {Number} options.clickTimeThreshold
* The number of milliseconds within which mutliple mouse clicks
* The number of milliseconds within which multiple mouse clicks
* will be treated as a single event.
* @param {Number} options.clickDistThreshold
* The distance between mouse click within multiple mouse clicks
* will be treated as a single event.
* @param {Number} options.stopDelay
* The number of milliseconds without mouse move before the mouse stop
* event is fired.
* @param {Function} options.enterHandler
* An optional handler for mouse enter.
* @param {Function} options.exitHandler
@ -116,6 +119,7 @@
this.clickTimeThreshold = options.clickTimeThreshold;
this.clickDistThreshold = options.clickDistThreshold;
this.userData = options.userData || null;
this.stopDelay = options.stopDelay || 50;
this.enterHandler = options.enterHandler || null;
this.exitHandler = options.exitHandler || null;
@ -125,6 +129,7 @@
this.scrollHandler = options.scrollHandler || null;
this.clickHandler = options.clickHandler || null;
this.dragHandler = options.dragHandler || null;
this.stopHandler = options.stopHandler || null;
this.keyHandler = options.keyHandler || null;
this.focusHandler = options.focusHandler || null;
this.blurHandler = options.blurHandler || null;
@ -157,8 +162,10 @@
mouseup: function ( event ) { onMouseUp( _this, event, false ); },
mousemove: function ( event ) { onMouseMove( _this, event ); },
click: function ( event ) { onMouseClick( _this, event ); },
DOMMouseScroll: function ( event ) { onMouseWheelSpin( _this, event, false ); },
mousewheel: function ( event ) { onMouseWheelSpin( _this, event, false ); },
wheel: function ( event ) { onWheel( _this, event ); },
mousewheel: function ( event ) { onMouseWheel( _this, event ); },
DOMMouseScroll: function ( event ) { onMouseWheel( _this, event ); },
MozMousePixelScroll: function ( event ) { onMouseWheel( _this, event ); },
mouseupie: function ( event ) { onMouseUpIE( _this, event ); },
mousemovecapturedie: function ( event ) { onMouseMoveCapturedIE( _this, event ); },
mouseupcaptured: function ( event ) { onMouseUpCaptured( _this, event ); },
@ -219,7 +226,7 @@
},
/**
* Implement or assign implmentation to these handlers during or after
* Implement or assign implementation to these handlers during or after
* calling the constructor.
* @function
* @param {Object} event
@ -242,7 +249,7 @@
enterHandler: function () { },
/**
* Implement or assign implmentation to these handlers during or after
* Implement or assign implementation to these handlers during or after
* calling the constructor.
* @function
* @param {Object} event
@ -265,7 +272,7 @@
exitHandler: function () { },
/**
* Implement or assign implmentation to these handlers during or after
* Implement or assign implementation to these handlers during or after
* calling the constructor.
* @function
* @param {Object} event
@ -283,7 +290,7 @@
pressHandler: function () { },
/**
* Implement or assign implmentation to these handlers during or after
* Implement or assign implementation to these handlers during or after
* calling the constructor.
* @function
* @param {Object} event
@ -306,7 +313,7 @@
releaseHandler: function () { },
/**
* Implement or assign implmentation to these handlers during or after
* Implement or assign implementation to these handlers during or after
* calling the constructor.
* @function
* @param {Object} event
@ -324,7 +331,7 @@
moveHandler: function () { },
/**
* Implement or assign implmentation to these handlers during or after
* Implement or assign implementation to these handlers during or after
* calling the constructor.
* @function
* @param {Object} event
@ -346,7 +353,7 @@
scrollHandler: function () { },
/**
* Implement or assign implmentation to these handlers during or after
* Implement or assign implementation to these handlers during or after
* calling the constructor.
* @function
* @param {Object} event
@ -368,7 +375,7 @@
clickHandler: function () { },
/**
* Implement or assign implmentation to these handlers during or after
* Implement or assign implementation to these handlers during or after
* calling the constructor.
* @function
* @param {Object} event
@ -390,7 +397,25 @@
dragHandler: function () { },
/**
* Implement or assign implmentation to these handlers during or after
* Implement or assign implementation to these handlers during or after
* calling the constructor.
* @function
* @param {Object} event
* @param {OpenSeadragon.MouseTracker} event.eventSource
* A reference to the tracker instance.
* @param {OpenSeadragon.Point} event.position
* The position of the event relative to the tracked element.
* @param {Boolean} event.isTouchEvent
* True if the original event is a touch event, otherwise false.
* @param {Object} event.originalEvent
* The original event object.
* @param {Object} event.userData
* Arbitrary user-defined object.
*/
stopHandler: function () { },
/**
* Implement or assign implementation to these handlers during or after
* calling the constructor.
* @function
* @param {Object} event
@ -408,7 +433,7 @@
keyHandler: function () { },
/**
* Implement or assign implmentation to these handlers during or after
* Implement or assign implementation to these handlers during or after
* calling the constructor.
* @function
* @param {Object} event
@ -422,7 +447,7 @@
focusHandler: function () { },
/**
* Implement or assign implmentation to these handlers during or after
* Implement or assign implementation to these handlers during or after
* calling the constructor.
* @function
* @param {Object} event
@ -436,6 +461,14 @@
blurHandler: function () { }
};
/**
* Detect available mouse wheel event.
*/
$.MouseTracker.wheelEventName = ( $.Browser.vendor == $.BROWSERS.IE && $.Browser.version > 8 ) ||
( 'onwheel' in document.createElement( 'div' ) ) ? 'wheel' : // Modern browsers support 'wheel'
document.onmousewheel !== undefined ? 'mousewheel' : // Webkit and IE support at least 'mousewheel'
'DOMMouseScroll'; // Assume old Firefox
/**
* Starts tracking mouse events on this element.
* @private
@ -445,7 +478,7 @@
var events = [
"mouseover", "mouseout", "mousedown", "mouseup", "mousemove",
"click",
"DOMMouseScroll", "mousewheel",
$.MouseTracker.wheelEventName,
"touchstart", "touchmove", "touchend",
"keypress",
"focus", "blur"
@ -454,6 +487,11 @@
event,
i;
// Add 'MozMousePixelScroll' event handler for older Firefox
if( $.MouseTracker.wheelEventName == "DOMMouseScroll" ) {
events.push( "MozMousePixelScroll" );
}
if ( !delegate.tracking ) {
for ( i = 0; i < events.length; i++ ) {
event = events[ i ];
@ -478,7 +516,7 @@
var events = [
"mouseover", "mouseout", "mousedown", "mouseup", "mousemove",
"click",
"DOMMouseScroll", "mousewheel",
$.MouseTracker.wheelEventName,
"touchstart", "touchmove", "touchend",
"keypress",
"focus", "blur"
@ -487,6 +525,11 @@
event,
i;
// Remove 'MozMousePixelScroll' event handler for older Firefox
if( $.MouseTracker.wheelEventName == "DOMMouseScroll" ) {
events.push( "MozMousePixelScroll" );
}
if ( delegate.tracking ) {
for ( i = 0; i < events.length; i++ ) {
event = events[ i ];
@ -1053,8 +1096,29 @@
$.cancelEvent( event );
}
}
if ( tracker.stopHandler ) {
clearTimeout( tracker.stopTimeOut );
tracker.stopTimeOut = setTimeout( function() {
onMouseStop( tracker, event );
}, tracker.stopDelay );
}
}
/**
* @private
* @inner
*/
function onMouseStop( tracker, originalMoveEvent ) {
if ( tracker.stopHandler ) {
tracker.stopHandler( {
eventSource: tracker,
position: getMouseRelative( originalMoveEvent, tracker.element ),
isTouchEvent: false,
originalEvent: originalMoveEvent,
userData: tracker.userData
} );
}
}
/**
* @private
@ -1068,49 +1132,85 @@
/**
* Handler for 'wheel' events
*
* @private
* @inner
*/
function onMouseWheelSpin( tracker, event, isTouch ) {
function onWheel( tracker, event ) {
handleWheelEvent( tracker, event, event, false );
}
/**
* Handler for 'mousewheel', 'DOMMouseScroll', and 'MozMousePixelScroll' events
*
* @private
* @inner
*/
function onMouseWheel( tracker, event ) {
// For legacy IE, access the global (window) event object
event = event || window.event;
// Simulate a 'wheel' event
var simulatedEvent = {
target: event.target || event.srcElement,
type: "wheel",
shiftKey: event.shiftKey || false,
clientX: event.clientX,
clientY: event.clientY,
pageX: event.pageX ? event.pageX : event.clientX,
pageY: event.pageY ? event.pageY : event.clientY,
deltaMode: event.type == "MozMousePixelScroll" ? 0 : 1, // 0=pixel, 1=line, 2=page
deltaX: 0,
deltaZ: 0
};
// Calculate deltaY
if ( $.MouseTracker.wheelEventName == "mousewheel" ) {
simulatedEvent.deltaY = - 1 / $.DEFAULT_SETTINGS.pixelsPerWheelLine * event.wheelDelta;
} else {
simulatedEvent.deltaY = event.detail;
}
handleWheelEvent( tracker, simulatedEvent, event, false );
}
/**
* Handles 'wheel' events.
* The event may be simulated by the legacy mouse wheel event handler (onMouseWheel()) or onTouchMove().
*
* @private
* @inner
*/
function handleWheelEvent( tracker, event, originalEvent, isTouch ) {
var nDelta = 0,
propagate;
isTouch = isTouch || false;
if ( !event ) { // For IE, access the global (window) event object
event = window.event;
}
if ( event.wheelDelta ) { // IE and Opera
nDelta = event.wheelDelta;
if ( window.opera ) { // Opera has the values reversed
nDelta = -nDelta;
}
} else if ( event.detail ) { // Mozilla FireFox
nDelta = -event.detail;
}
//The nDelta variable is gated to provide smooth z-index scrolling
//since the mouse wheel allows for substantial deltas meant for rapid
//y-index scrolling.
nDelta = nDelta > 0 ? 1 : -1;
// The nDelta variable is gated to provide smooth z-index scrolling
// since the mouse wheel allows for substantial deltas meant for rapid
// y-index scrolling.
// event.deltaMode: 0=pixel, 1=line, 2=page
// TODO: Deltas in pixel mode should be accumulated then a scroll value computed after $.DEFAULT_SETTINGS.pixelsPerWheelLine threshold reached
nDelta = event.deltaY < 0 ? 1 : -1;
if ( tracker.scrollHandler ) {
propagate = tracker.scrollHandler(
{
eventSource: tracker,
// Note: Ok to call getMouseRelative on passed event for isTouch==true since
// event.pageX/event.pageY are added to the original touchmove event in
// onTouchMove().
position: getMouseRelative( event, tracker.element ),
scroll: nDelta,
shift: event.shiftKey,
isTouchEvent: isTouch,
originalEvent: event,
userData: tracker.userData
eventSource: tracker,
position: getMouseRelative( event, tracker.element ),
scroll: nDelta,
shift: event.shiftKey,
isTouchEvent: isTouch,
originalEvent: originalEvent,
userData: tracker.userData
}
);
if ( propagate === false ) {
$.cancelEvent( event );
$.cancelEvent( originalEvent );
}
}
}
@ -1229,15 +1329,22 @@
if ( Math.abs( THIS[ tracker.hash ].lastPinchDelta - pinchDelta ) > 75 ) {
//$.console.debug( "pinch delta : " + pinchDelta + " | previous : " + THIS[ tracker.hash ].lastPinchDelta);
// Simulate a mouse wheel scroll event
// Simulate a 'wheel' event
var simulatedEvent = {
shiftKey: event.shiftKey || false,
pageX: THIS[ tracker.hash ].pinchMidpoint.x,
pageY: THIS[ tracker.hash ].pinchMidpoint.y,
detail: ( THIS[ tracker.hash ].lastPinchDelta > pinchDelta ) ? 1 : -1
target: event.target || event.srcElement,
type: "wheel",
shiftKey: event.shiftKey || false,
clientX: THIS[ tracker.hash ].pinchMidpoint.x,
clientY: THIS[ tracker.hash ].pinchMidpoint.y,
pageX: THIS[ tracker.hash ].pinchMidpoint.x,
pageY: THIS[ tracker.hash ].pinchMidpoint.y,
deltaMode: 1, // 0=pixel, 1=line, 2=page
deltaX: 0,
deltaY: ( THIS[ tracker.hash ].lastPinchDelta > pinchDelta ) ? 1 : -1,
deltaZ: 0
};
onMouseWheelSpin( tracker, simulatedEvent, true );
handleWheelEvent( tracker, simulatedEvent, event, true );
THIS[ tracker.hash ].lastPinchDelta = pinchDelta;
}

View File

@ -386,6 +386,44 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
};
/**
* Detect event model and create appropriate _addEvent/_removeEvent methods
*/
if ( window.addEventListener ) {
$._addEvent = function ( element, eventName, handler, useCapture ) {
element = $.getElement( element );
element.addEventListener( eventName, handler, useCapture );
};
} else if ( window.attachEvent ) {
$._addEvent = function ( element, eventName, handler, useCapture ) {
element = $.getElement( element );
element.attachEvent( 'on' + eventName, handler );
if ( useCapture && element.setCapture ) {
element.setCapture();
}
};
} else {
throw new Error( "No known event model." );
}
if ( window.removeEventListener ) {
$._removeEvent = function ( element, eventName, handler, useCapture ) {
element = $.getElement( element );
element.removeEventListener( eventName, handler, useCapture );
};
} else if ( window.detachEvent ) {
$._removeEvent = function( element, eventName, handler, useCapture ) {
element = $.getElement( element );
element.detachEvent( 'on' + eventName, handler );
if ( useCapture && element.releaseCapture ) {
element.releaseCapture();
}
};
} else {
throw new Error( "No known event model." );
}
/*
* Detect canvas support
*/
@ -530,6 +568,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
immediateRender: false,
minZoomImageRatio: 0.9, //-> closer to 0 allows zoom out to infinity
maxZoomPixelRatio: 1.1, //-> higher allows 'over zoom' into pixels
pixelsPerWheelLine: 40,
//DEFAULT CONTROL SETTINGS
showSequenceControl: true, //SEQUENCE
@ -1156,33 +1195,9 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
* @param {String} eventName
* @param {Function} handler
* @param {Boolean} [useCapture]
* @throws {Error}
*/
addEvent: function( element, eventName, handler, useCapture ) {
element = $.getElement( element );
//TODO: Why do this if/else on every method call instead of just
// defining this function once based on the same logic
if ( element.addEventListener ) {
$.addEvent = function( element, eventName, handler, useCapture ){
element = $.getElement( element );
element.addEventListener( eventName, handler, useCapture );
};
} else if ( element.attachEvent ) {
$.addEvent = function( element, eventName, handler, useCapture ){
element = $.getElement( element );
element.attachEvent( "on" + eventName, handler );
if ( useCapture && element.setCapture ) {
element.setCapture();
}
};
} else {
throw new Error(
"Unable to attach event handler, no known technique."
);
}
return $.addEvent( element, eventName, handler, useCapture );
return $._addEvent( element, eventName, handler, useCapture );
},
@ -1195,32 +1210,9 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
* @param {String} eventName
* @param {Function} handler
* @param {Boolean} [useCapture]
* @throws {Error}
*/
removeEvent: function( element, eventName, handler, useCapture ) {
element = $.getElement( element );
//TODO: Why do this if/else on every method call instead of just
// defining this function once based on the same logic
if ( element.removeEventListener ) {
$.removeEvent = function( element, eventName, handler, useCapture ) {
element = $.getElement( element );
element.removeEventListener( eventName, handler, useCapture );
};
} else if ( element.detachEvent ) {
$.removeEvent = function( element, eventName, handler, useCapture ) {
element = $.getElement( element );
element.detachEvent("on" + eventName, handler);
if ( useCapture && element.releaseCapture ) {
element.releaseCapture();
}
};
} else {
throw new Error(
"Unable to detach event handler, no known technique."
);
}
return $.removeEvent( element, eventName, handler, useCapture );
return $._removeEvent( element, eventName, handler, useCapture );
},