mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2025-02-18 07:43:13 +03:00
Code Issues Projects Releases Wiki Activity

MouseTracker original events in handlers

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

Added OpenSeadragon.getElementOffset() method. Element-relative mouse
coordinates should be correct even if the element and/or page is
scrolled (#131)
This commit is contained in:
Mark Salsbery 2013-09-05 17:20:17 -07:00
parent 0bbf6bc58a
commit b3fa8f1184
8 changed files with 1166 additions and 967 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/button.js
View File

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

20
src/buttongroup.js
View File

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

2
src/eventhandler.js
View File

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

375
src/mousetracker.js
View File

@ -72,12 +72,20 @@
* An optional handler for mouse press. * An optional handler for mouse press.
* @param {Function} options.releaseHandler * @param {Function} options.releaseHandler
* An optional handler for mouse release. * An optional handler for mouse release.
* @param {Function} options.moveHandler
* An optional handler for mouse move.
* @param {Function} options.scrollHandler * @param {Function} options.scrollHandler
* An optional handler for mouse scroll. * An optional handler for mouse scroll.
* @param {Function} options.clickHandler * @param {Function} options.clickHandler
* An optional handler for mouse click. * An optional handler for mouse click.
* @param {Function} options.dragHandler * @param {Function} options.dragHandler
* An optional handler for mouse drag. * An optional handler for mouse drag.
* @param {Function} options.keyHandler
* An optional handler for keypress.
* @param {Function} options.focusHandler
* An optional handler for focus.
* @param {Function} options.blurHandler
* An optional handler for blur.
* @property {Number} hash * @property {Number} hash
* An unique hash for this tracker. * An unique hash for this tracker.
* @property {Element} element * @property {Element} element
@ -88,6 +96,8 @@
* @property {Number} clickDistThreshold * @property {Number} clickDistThreshold
* The distance between mouse click within multiple mouse clicks * The distance between mouse click within multiple mouse clicks
* will be treated as a single event. * will be treated as a single event.
* @property {Object} optional userData
* Arbitrary object to be passed unchanged to any attached handler methods.
*/ */
$.MouseTracker = function ( options ) { $.MouseTracker = function ( options ) {
@ -105,12 +115,13 @@
this.element = $.getElement( options.element ); this.element = $.getElement( options.element );
this.clickTimeThreshold = options.clickTimeThreshold; this.clickTimeThreshold = options.clickTimeThreshold;
this.clickDistThreshold = options.clickDistThreshold; this.clickDistThreshold = options.clickDistThreshold;
this.userData = options.userData || null;
this.enterHandler = options.enterHandler || null; this.enterHandler = options.enterHandler || null;
this.exitHandler = options.exitHandler || null; this.exitHandler = options.exitHandler || null;
this.pressHandler = options.pressHandler || null; this.pressHandler = options.pressHandler || null;
this.releaseHandler = options.releaseHandler || null; this.releaseHandler = options.releaseHandler || null;
this.moveHandler = options.moveHandler || null;
this.scrollHandler = options.scrollHandler || null; this.scrollHandler = options.scrollHandler || null;
this.clickHandler = options.clickHandler || null; this.clickHandler = options.clickHandler || null;
this.dragHandler = options.dragHandler || null; this.dragHandler = options.dragHandler || null;
@ -127,7 +138,7 @@
* Are we currently tracking mouse events. * Are we currently tracking mouse events.
* @property {Boolean} capturing * @property {Boolean} capturing
* Are we curruently capturing mouse events. * Are we curruently capturing mouse events.
* @property {Boolean} buttonDown * @property {Boolean} buttonDownElement
* True if the left mouse button is currently being pressed and was * True if the left mouse button is currently being pressed and was
* initiated inside the tracked element, otherwise false. * initiated inside the tracked element, otherwise false.
* @property {Boolean} insideElement * @property {Boolean} insideElement
@ -140,17 +151,18 @@
* Position of last mouse down * Position of last mouse down
*/ */
THIS[this.hash] = { THIS[this.hash] = {
mouseover: function( event ){ onMouseOver( _this, event ); }, mouseover: function ( event ) { onMouseOver( _this, event, false ); },
mouseout: function( event ){ onMouseOut( _this, event ); }, mouseout: function ( event ) { onMouseOut( _this, event, false ); },
mousedown: function ( event ) { onMouseDown( _this, event ); }, mousedown: function ( event ) { onMouseDown( _this, event ); },
mouseup: function( event ){ onMouseUp( _this, event ); }, mouseup: function ( event ) { onMouseUp( _this, event, false ); },
mousemove: function ( event ) { onMouseMove( _this, event ); },
click: function ( event ) { onMouseClick( _this, event ); }, click: function ( event ) { onMouseClick( _this, event ); },
DOMMouseScroll: function( event ){ onMouseWheelSpin( _this, event ); }, DOMMouseScroll: function ( event ) { onMouseWheelSpin( _this, event, false ); },
mousewheel: function( event ){ onMouseWheelSpin( _this, event ); }, mousewheel: function ( event ) { onMouseWheelSpin( _this, event, false ); },
mouseupie: function ( event ) { onMouseUpIE( _this, event ); }, mouseupie: function ( event ) { onMouseUpIE( _this, event ); },
mousemoveie: function ( event ) { onMouseMoveIE( _this, event ); }, mousemoveie: function ( event ) { onMouseMoveIE( _this, event ); },
mouseupwindow: function ( event ) { onMouseUpWindow( _this, event ); }, mouseupwindow: function ( event ) { onMouseUpWindow( _this, event ); },
mousemove: function( event ){ onMouseMove( _this, event ); }, mousemovewindow: function ( event ) { onMouseMoveWindow( _this, event, false ); },
touchstart: function ( event ) { onTouchStart( _this, event ); }, touchstart: function ( event ) { onTouchStart( _this, event ); },
touchmove: function ( event ) { onTouchMove( _this, event ); }, touchmove: function ( event ) { onTouchMove( _this, event ); },
touchend: function ( event ) { onTouchEnd( _this, event ); }, touchend: function ( event ) { onTouchEnd( _this, event ); },
@ -159,7 +171,7 @@
blur: function ( event ) { onBlur( _this, event ); }, blur: function ( event ) { onBlur( _this, event ); },
tracking: false, tracking: false,
capturing: false, capturing: false,
buttonDown: false, buttonDownElement: false,
insideElement: false, insideElement: false,
lastPoint: null, lastPoint: null,
lastMouseDownTime: null, lastMouseDownTime: null,
@ -212,13 +224,15 @@
* @function * @function
* @param {OpenSeadragon.MouseTracker} tracker * @param {OpenSeadragon.MouseTracker} tracker
* A reference to the tracker instance. * A reference to the tracker instance.
* @param {OpenSeadragon.Point} position * @param {Object} eventData
* The poistion of the event on the screen. * {
* @param {Boolean} buttonDown * position: The position of the event relative to the tracked element.
* True if the left mouse button is currently being pressed and was * buttonDownElement: True if the left mouse button is currently being pressed and was initiated inside the tracked element, otherwise false.
* initiated inside the tracked element, otherwise false. * buttonDownAny: Was the button down anywhere in the screen during the event.
* @param {Boolean} buttonDownAny * isTouchEvent: True if the original event is a touch event, otherwise false.
* Was the button down anywhere in the screen during the event. * originalEvent: The original event object.
* userData: Arbitrary user-defined object.
* }
*/ */
enterHandler: function () { }, enterHandler: function () { },
@ -228,13 +242,15 @@
* @function * @function
* @param {OpenSeadragon.MouseTracker} tracker * @param {OpenSeadragon.MouseTracker} tracker
* A reference to the tracker instance. * A reference to the tracker instance.
* @param {OpenSeadragon.Point} position * @param {Object} eventData
* The poistion of the event on the screen. * {
* @param {Boolean} buttonDown * position: The position of the event relative to the tracked element.
* True if the left mouse button is currently being pressed and was * buttonDownElement: True if the left mouse button is currently being pressed and was initiated inside the tracked element, otherwise false.
* initiated inside the tracked element, otherwise false. * buttonDownAny: Was the button down anywhere in the screen during the event.
* @param {Boolean} buttonDownAny * isTouchEvent: True if the original event is a touch event, otherwise false.
* Was the button down anywhere in the screen during the event. * originalEvent: The original event object.
* userData: Arbitrary user-defined object.
* }
*/ */
exitHandler: function () { }, exitHandler: function () { },
@ -244,8 +260,13 @@
* @function * @function
* @param {OpenSeadragon.MouseTracker} tracker * @param {OpenSeadragon.MouseTracker} tracker
* A reference to the tracker instance. * A reference to the tracker instance.
* @param {OpenSeadragon.Point} position * @param {Object} eventData
* The poistion of the event on the screen. * {
* position: The position of the event relative to the tracked element.
* isTouchEvent: True if the original event is a touch event, otherwise false.
* originalEvent: The original event object.
* userData: Arbitrary user-defined object.
* }
*/ */
pressHandler: function () { }, pressHandler: function () { },
@ -255,14 +276,15 @@
* @function * @function
* @param {OpenSeadragon.MouseTracker} tracker * @param {OpenSeadragon.MouseTracker} tracker
* A reference to the tracker instance. * A reference to the tracker instance.
* @param {OpenSeadragon.Point} position * @param {Object} eventData
* The poistion of the event on the screen. * {
* @param {Boolean} buttonDown * position: The position of the event relative to the tracked element.
* True if the left mouse button is currently being pressed and was * insideElementPress: True if the left mouse button is currently being pressed and was initiated inside the tracked element, otherwise false.
* initiated inside the tracked element, otherwise false. * insideElementRelease: Was the mouse still inside the tracked element when the button was released.
* @param {Boolean} insideElementRelease * isTouchEvent: True if the original event is a touch event, otherwise false.
* Was the mouse still inside the tracked element when the button * originalEvent: The original event object.
* was released. * userData: Arbitrary user-defined object.
* }
*/ */
releaseHandler: function () { }, releaseHandler: function () { },
@ -272,12 +294,31 @@
* @function * @function
* @param {OpenSeadragon.MouseTracker} tracker * @param {OpenSeadragon.MouseTracker} tracker
* A reference to the tracker instance. * A reference to the tracker instance.
* @param {OpenSeadragon.Point} position * @param {Object} eventData
* The poistion of the event on the screen. * {
* @param {Number} scroll * position: The position of the event relative to the tracked element.
* The scroll delta for the event. * isTouchEvent: True if the original event is a touch event, otherwise false.
* @param {Boolean} shift * originalEvent: The original event object.
* Was the shift key being pressed during this event? * userData: Arbitrary user-defined object.
* }
*/
moveHandler: function () { },
/**
* Implement or assign implmentation to these handlers during or after
* calling the constructor.
* @function
* @param {OpenSeadragon.MouseTracker} tracker
* A reference to the tracker instance.
* @param {Object} eventData
* {
* position: The position of the event relative to the tracked element.
* scroll: The scroll delta for the event.
* shift: Was the shift key being pressed during this event?
* isTouchEvent: True if the original event is a touch event, otherwise false.
* originalEvent: The original event object.
* userData: Arbitrary user-defined object.
* }
*/ */
scrollHandler: function () { }, scrollHandler: function () { },
@ -287,13 +328,15 @@
* @function * @function
* @param {OpenSeadragon.MouseTracker} tracker * @param {OpenSeadragon.MouseTracker} tracker
* A reference to the tracker instance. * A reference to the tracker instance.
* @param {OpenSeadragon.Point} position * @param {Object} eventData
* The poistion of the event on the screen. * {
* @param {Boolean} quick * position: The position of the event relative to the tracked element.
* True only if the clickDistThreshold and clickDeltaThreshold are * quick: True only if the clickDistThreshold and clickDeltaThreshold are both pased. Useful for ignoring events.
* both pased. Useful for ignoring events. * shift: Was the shift key being pressed during this event?
* @param {Boolean} shift * isTouchEvent: True if the original event is a touch event, otherwise false.
* Was the shift key being pressed during this event? * originalEvent: The original event object.
* userData: Arbitrary user-defined object.
* }
*/ */
clickHandler: function () { }, clickHandler: function () { },
@ -303,13 +346,15 @@
* @function * @function
* @param {OpenSeadragon.MouseTracker} tracker * @param {OpenSeadragon.MouseTracker} tracker
* A reference to the tracker instance. * A reference to the tracker instance.
* @param {OpenSeadragon.Point} position * @param {Object} eventData
* The poistion of the event on the screen. * {
* @param {OpenSeadragon.Point} delta * position: The position of the event relative to the tracked element.
* The x,y components of the difference between start drag and * delta: The x,y components of the difference between start drag and end drag. Usefule for ignoring or weighting the events.
* end drag. Usefule for ignoring or weighting the events. * shift: Was the shift key being pressed during this event?
* @param {Boolean} shift * isTouchEvent: True if the original event is a touch event, otherwise false.
* Was the shift key being pressed during this event? * originalEvent: The original event object.
* userData: Arbitrary user-defined object.
* }
*/ */
dragHandler: function () { }, dragHandler: function () { },
@ -319,15 +364,45 @@
* @function * @function
* @param {OpenSeadragon.MouseTracker} tracker * @param {OpenSeadragon.MouseTracker} tracker
* A reference to the tracker instance. * A reference to the tracker instance.
* @param {Number} keyCode * @param {Object} eventData
* The key code that was pressed. * {
* @param {Boolean} shift * keyCode: The key code that was pressed.
* Was the shift key being pressed during this event? * shift: Was the shift key being pressed during this event?
* isTouchEvent: True if the original event is a touch event, otherwise false.
* originalEvent: The original event object.
* userData: Arbitrary user-defined object.
* }
*/ */
keyHandler: function () { }, keyHandler: function () { },
/**
* Implement or assign implmentation to these handlers during or after
* calling the constructor.
* @function
* @param {OpenSeadragon.MouseTracker} tracker
* A reference to the tracker instance.
* @param {Object} eventData
* {
* isTouchEvent: True if the original event is a touch event, otherwise false.
* originalEvent: The original event object.
* userData: Arbitrary user-defined object.
* }
*/
focusHandler: function () { }, focusHandler: function () { },
/**
* Implement or assign implmentation to these handlers during or after
* calling the constructor.
* @function
* @param {OpenSeadragon.MouseTracker} tracker
* A reference to the tracker instance.
* @param {Object} eventData
* {
* isTouchEvent: True if the original event is a touch event, otherwise false.
* originalEvent: The original event object.
* userData: Arbitrary user-defined object.
* }
*/
blurHandler: function () { } blurHandler: function () { }
}; };
@ -338,7 +413,7 @@
*/ */
function startTracking( tracker ) { function startTracking( tracker ) {
var events = [ var events = [
"mouseover", "mouseout", "mousedown", "mouseup", "mouseover", "mouseout", "mousedown", "mouseup", "mousemove",
"click", "click",
"DOMMouseScroll", "mousewheel", "DOMMouseScroll", "mousewheel",
"touchstart", "touchmove", "touchend", "touchstart", "touchmove", "touchend",
@ -371,7 +446,7 @@
*/ */
function stopTracking( tracker ) { function stopTracking( tracker ) {
var events = [ var events = [
"mouseover", "mouseout", "mousedown", "mouseup", "mouseover", "mouseout", "mousedown", "mouseup", "mousemove",
"click", "click",
"DOMMouseScroll", "mousewheel", "DOMMouseScroll", "mousewheel",
"touchstart", "touchmove", "touchend", "touchstart", "touchmove", "touchend",
@ -445,7 +520,7 @@
$.addEvent( $.addEvent(
window, window,
"mousemove", "mousemove",
delegate.mousemove, delegate.mousemovewindow,
true true
); );
} }
@ -486,7 +561,7 @@
$.removeEvent( $.removeEvent(
window, window,
"mousemove", "mousemove",
delegate.mousemove, delegate.mousemovewindow,
true true
); );
$.removeEvent( $.removeEvent(
@ -505,11 +580,11 @@
* @private * @private
* @inner * @inner
*/ */
function triggerOthers( tracker, handler, event ) { function triggerOthers( tracker, handler, event, isTouch ) {
var otherHash; var otherHash;
for ( otherHash in ACTIVE ) { for ( otherHash in ACTIVE ) {
if ( ACTIVE.hasOwnProperty( otherHash ) && tracker.hash != otherHash ) { if ( ACTIVE.hasOwnProperty( otherHash ) && tracker.hash != otherHash ) {
handler( ACTIVE[ otherHash ], event ); handler( ACTIVE[otherHash], event, isTouch );
} }
} }
} }
@ -525,7 +600,11 @@
if ( tracker.focusHandler ) { if ( tracker.focusHandler ) {
propagate = tracker.focusHandler( propagate = tracker.focusHandler(
tracker, tracker,
event {
isTouchEvent: false,
originalEvent: event,
userData: tracker.userData
}
); );
if ( propagate === false ) { if ( propagate === false ) {
$.cancelEvent( event ); $.cancelEvent( event );
@ -544,7 +623,11 @@
if ( tracker.blurHandler ) { if ( tracker.blurHandler ) {
propagate = tracker.blurHandler( propagate = tracker.blurHandler(
tracker, tracker,
event {
isTouchEvent: false,
originalEvent: event,
userData: tracker.userData
}
); );
if ( propagate === false ) { if ( propagate === false ) {
$.cancelEvent( event ); $.cancelEvent( event );
@ -563,8 +646,14 @@
if ( tracker.keyHandler ) { if ( tracker.keyHandler ) {
propagate = tracker.keyHandler( propagate = tracker.keyHandler(
tracker, tracker,
event.keyCode ? event.keyCode : event.charCode, {
event.shiftKey position: getMouseRelative( event, tracker.element ),
keyCode: event.keyCode ? event.keyCode : event.charCode,
shift: event.shiftKey,
isTouchEvent: false,
originalEvent: event,
userData: tracker.userData
}
); );
if ( !propagate ) { if ( !propagate ) {
$.cancelEvent( event ); $.cancelEvent( event );
@ -577,11 +666,13 @@
* @private * @private
* @inner * @inner
*/ */
function onMouseOver( tracker, event ) { function onMouseOver( tracker, event, isTouch ) {
var delegate = THIS[tracker.hash], var delegate = THIS[tracker.hash],
propagate; propagate;
isTouch = ( isTouch !== undefined ) ? isTouch : false;
event = $.getEvent( event ); event = $.getEvent( event );
if ( $.Browser.vendor == $.BROWSERS.IE && if ( $.Browser.vendor == $.BROWSERS.IE &&
@ -589,7 +680,7 @@
delegate.capturing && delegate.capturing &&
!isChild( event.srcElement, tracker.element ) ) { !isChild( event.srcElement, tracker.element ) ) {
triggerOthers( tracker, onMouseOver, event ); triggerOthers( tracker, onMouseOver, event, isTouch );
} }
var to = event.target ? var to = event.target ?
@ -609,9 +700,14 @@
if ( tracker.enterHandler ) { if ( tracker.enterHandler ) {
propagate = tracker.enterHandler( propagate = tracker.enterHandler(
tracker, tracker,
getMouseRelative( event, tracker.element ), {
delegate.buttonDown, position: getMouseRelative( event, tracker.element ),
IS_BUTTON_DOWN buttonDownElement: delegate.buttonDownElement,
buttonDownAny: IS_BUTTON_DOWN,
isTouchEvent: isTouch,
originalEvent: event,
userData: tracker.userData
}
); );
if ( propagate === false ) { if ( propagate === false ) {
$.cancelEvent( event ); $.cancelEvent( event );
@ -624,10 +720,12 @@
* @private * @private
* @inner * @inner
*/ */
function onMouseOut( tracker, event ) { function onMouseOut( tracker, event, isTouch ) {
var delegate = THIS[tracker.hash], var delegate = THIS[tracker.hash],
propagate; propagate;
isTouch = ( isTouch !== undefined ) ? isTouch : false;
event = $.getEvent( event ); event = $.getEvent( event );
if ( $.Browser.vendor == $.BROWSERS.IE && if ( $.Browser.vendor == $.BROWSERS.IE &&
@ -635,7 +733,7 @@
delegate.capturing && delegate.capturing &&
!isChild( event.srcElement, tracker.element ) ) { !isChild( event.srcElement, tracker.element ) ) {
triggerOthers( tracker, onMouseOut, event ); triggerOthers( tracker, onMouseOut, event, isTouch );
} }
@ -656,9 +754,14 @@
if ( tracker.exitHandler ) { if ( tracker.exitHandler ) {
propagate = tracker.exitHandler( propagate = tracker.exitHandler(
tracker, tracker,
getMouseRelative( event, tracker.element ), {
delegate.buttonDown, position: getMouseRelative( event, tracker.element ),
IS_BUTTON_DOWN buttonDownElement: delegate.buttonDownElement,
buttonDownAny: IS_BUTTON_DOWN,
isTouchEvent: isTouch,
originalEvent: event,
userData: tracker.userData
}
); );
if ( propagate === false ) { if ( propagate === false ) {
@ -672,17 +775,19 @@
* @private * @private
* @inner * @inner
*/ */
function onMouseDown( tracker, event, noCapture ) { function onMouseDown( tracker, event, noCapture, isTouch ) {
var delegate = THIS[tracker.hash], var delegate = THIS[tracker.hash],
propagate; propagate;
isTouch = ( isTouch !== undefined ) ? isTouch : false;
event = $.getEvent( event ); event = $.getEvent( event );
if ( event.button == 2 ) { if ( event.button == 2 ) {
return; return;
} }
delegate.buttonDown = true; delegate.buttonDownElement = true;
delegate.lastPoint = getMouseAbsolute( event ); delegate.lastPoint = getMouseAbsolute( event );
delegate.lastMouseDownPoint = delegate.lastPoint; delegate.lastMouseDownPoint = delegate.lastPoint;
@ -691,7 +796,12 @@
if ( tracker.pressHandler ) { if ( tracker.pressHandler ) {
propagate = tracker.pressHandler( propagate = tracker.pressHandler(
tracker, tracker,
getMouseRelative( event, tracker.element ) {
position: getMouseRelative( event, tracker.element ),
isTouchEvent: isTouch,
originalEvent: event,
userData: tracker.userData
}
); );
if ( propagate === false ) { if ( propagate === false ) {
$.cancelEvent( event ); $.cancelEvent( event );
@ -731,10 +841,10 @@
event.changedTouches.length == 1 ) { event.changedTouches.length == 1 ) {
THIS[tracker.hash].lastTouch = event.touches[0]; THIS[tracker.hash].lastTouch = event.touches[0];
onMouseOver( tracker, event.changedTouches[ 0 ] ); onMouseOver( tracker, event.changedTouches[0], true );
// call with no capture as the onMouseMove will // call with no capture as the onMouseMoveWindow will
// be triggered by onTouchMove // be triggered by onTouchMove
onMouseDown( tracker, event.touches[ 0 ], true ); onMouseDown( tracker, event.touches[0], true, true );
} }
if ( event.touches.length == 2 ) { if ( event.touches.length == 2 ) {
@ -759,28 +869,35 @@
* @private * @private
* @inner * @inner
*/ */
function onMouseUp( tracker, event ) { function onMouseUp( tracker, event, isTouch ) {
var delegate = THIS[tracker.hash], var delegate = THIS[tracker.hash],
//were we inside the tracked element when we were pressed //were we inside the tracked element when we were pressed
insideElementPress = delegate.buttonDown, insideElementPress = delegate.buttonDownElement,
//are we still inside the tracked element when we released //are we still inside the tracked element when we released
insideElementRelease = delegate.insideElement, insideElementRelease = delegate.insideElement,
propagate; propagate;
isTouch = ( isTouch !== undefined ) ? isTouch : false;
event = $.getEvent( event ); event = $.getEvent( event );
if ( event.button == 2 ) { if ( event.button == 2 ) {
return; return;
} }
delegate.buttonDown = false; delegate.buttonDownElement = false;
if ( tracker.releaseHandler ) { if ( tracker.releaseHandler ) {
propagate = tracker.releaseHandler( propagate = tracker.releaseHandler(
tracker, tracker,
getMouseRelative( event, tracker.element ), {
insideElementPress, position: getMouseRelative( event, tracker.element ),
insideElementRelease insideElementPress: insideElementPress,
insideElementRelease: insideElementRelease,
isTouchEvent: isTouch,
originalEvent: event,
userData: tracker.userData
}
); );
if ( propagate === false ) { if ( propagate === false ) {
$.cancelEvent( event ); $.cancelEvent( event );
@ -808,7 +925,7 @@
// call with no release, as the mouse events are // call with no release, as the mouse events are
// not registered in onTouchStart // not registered in onTouchStart
onMouseUpWindow( tracker, event.changedTouches[0], true ); onMouseUpWindow( tracker, event.changedTouches[0], true );
onMouseOut( tracker, event.changedTouches[ 0 ] ); onMouseOut( tracker, event.changedTouches[0], true );
} }
if ( event.touches.length + event.changedTouches.length == 2 ) { if ( event.touches.length + event.changedTouches.length == 2 ) {
THIS[tracker.hash].lastPinchDelta = null; THIS[tracker.hash].lastPinchDelta = null;
@ -842,7 +959,7 @@
for ( i = 0; i < CAPTURING.length; i++ ) { for ( i = 0; i < CAPTURING.length; i++ ) {
othertracker = CAPTURING[i]; othertracker = CAPTURING[i];
if ( !hasMouse( othertracker ) ) { if ( !hasMouse( othertracker ) ) {
onMouseUp( othertracker, event ); onMouseUp( othertracker, event, false );
} }
} }
@ -868,7 +985,7 @@
*/ */
function onMouseUpWindow( tracker, event, noRelease ) { function onMouseUpWindow( tracker, event, noRelease ) {
if ( !THIS[tracker.hash].insideElement ) { if ( !THIS[tracker.hash].insideElement ) {
onMouseUp( tracker, event ); onMouseUp( tracker, event, false );
} }
if ( noRelease ) { if ( noRelease ) {
@ -879,6 +996,30 @@
} }
/**
* @private
* @inner
*/
function onMouseMove( tracker, event ) {
if ( tracker.moveHandler ) {
event = $.getEvent( event );
var propagate = tracker.moveHandler(
tracker,
{
position: getMouseRelative( event, tracker.element ),
isTouchEvent: false,
originalEvent: event,
userData: tracker.userData
}
);
if ( propagate === false ) {
$.cancelEvent( event );
}
}
}
/** /**
* @private * @private
* @inner * @inner
@ -894,10 +1035,12 @@
* @private * @private
* @inner * @inner
*/ */
function onMouseWheelSpin( tracker, event ) { function onMouseWheelSpin( tracker, event, isTouch ) {
var nDelta = 0, var nDelta = 0,
propagate; propagate;
isTouch = ( isTouch !== undefined ) ? isTouch : false;
if ( !event ) { // For IE, access the global (window) event object if ( !event ) { // For IE, access the global (window) event object
event = window.event; event = window.event;
} }
@ -918,9 +1061,14 @@
if ( tracker.scrollHandler ) { if ( tracker.scrollHandler ) {
propagate = tracker.scrollHandler( propagate = tracker.scrollHandler(
tracker, tracker,
getMouseRelative( event, tracker.element ), {
nDelta, position: getMouseRelative( event, tracker.element ),
event.shiftKey scroll: nDelta,
shift: event.shiftKey,
isTouchEvent: isTouch,
originalEvent: event,
userData: tracker.userData
}
); );
if ( propagate === false ) { if ( propagate === false ) {
$.cancelEvent( event ); $.cancelEvent( event );
@ -952,9 +1100,14 @@
if ( tracker.clickHandler ) { if ( tracker.clickHandler ) {
propagate = tracker.clickHandler( propagate = tracker.clickHandler(
tracker, tracker,
getMouseRelative( event, tracker.element ), {
quick, position: getMouseRelative( event, tracker.element ),
event.shiftKey quick: quick,
shift: event.shiftKey,
isTouchEvent: false,
originalEvent: event,
userData: tracker.userData
}
); );
if ( propagate === false ) { if ( propagate === false ) {
$.cancelEvent( event ); $.cancelEvent( event );
@ -967,12 +1120,14 @@
* @private * @private
* @inner * @inner
*/ */
function onMouseMove( tracker, event ) { function onMouseMoveWindow( tracker, event, isTouch ) {
var delegate = THIS[tracker.hash], var delegate = THIS[tracker.hash],
delta, delta,
propagate, propagate,
point; point;
isTouch = ( isTouch !== undefined ) ? isTouch : false;
event = $.getEvent( event ); event = $.getEvent( event );
point = getMouseAbsolute( event ); point = getMouseAbsolute( event );
delta = point.minus( delegate.lastPoint ); delta = point.minus( delegate.lastPoint );
@ -982,9 +1137,14 @@
if ( tracker.dragHandler ) { if ( tracker.dragHandler ) {
propagate = tracker.dragHandler( propagate = tracker.dragHandler(
tracker, tracker,
getMouseRelative( event, tracker.element ), {
delta, position: getMouseRelative( event, tracker.element ),
event.shiftKey delta: delta,
shift: event.shiftKey,
isTouchEvent: isTouch,
originalEvent: event,
userData: tracker.userData
}
); );
if ( propagate === false ) { if ( propagate === false ) {
$.cancelEvent( event ); $.cancelEvent( event );
@ -1011,7 +1171,7 @@
event.changedTouches.length === 1 && event.changedTouches.length === 1 &&
THIS[tracker.hash].lastTouch.identifier === event.touches[0].identifier ) { THIS[tracker.hash].lastTouch.identifier === event.touches[0].identifier ) {
onMouseMove( tracker, event.touches[ 0 ] ); onMouseMoveWindow( tracker, event.touches[0], true );
} else if ( event.touches.length === 2 ) { } else if ( event.touches.length === 2 ) {
@ -1027,12 +1187,13 @@
onMouseWheelSpin( tracker, { onMouseWheelSpin( tracker, {
shift: false, shift: false,
shiftKey: false,
pageX: THIS[tracker.hash].pinchMidpoint.x, pageX: THIS[tracker.hash].pinchMidpoint.x,
pageY: THIS[tracker.hash].pinchMidpoint.y, pageY: THIS[tracker.hash].pinchMidpoint.y,
detail: ( detail: (
THIS[tracker.hash].lastPinchDelta > pinchDelta THIS[tracker.hash].lastPinchDelta > pinchDelta
) ? 1 : -1 ) ? 1 : -1
}); }, true );
THIS[tracker.hash].lastPinchDelta = pinchDelta; THIS[tracker.hash].lastPinchDelta = pinchDelta;
} }
@ -1052,7 +1213,7 @@
function onMouseMoveIE( tracker, event ) { function onMouseMoveIE( tracker, event ) {
var i; var i;
for ( i = 0; i < CAPTURING.length; i++ ) { for ( i = 0; i < CAPTURING.length; i++ ) {
onMouseMove( CAPTURING[ i ], event ); onMouseMoveWindow( CAPTURING[i], event, false );
} }
$.stopEvent( event ); $.stopEvent( event );
@ -1072,7 +1233,7 @@
*/ */
function getMouseRelative( event, element ) { function getMouseRelative( event, element ) {
var mouse = $.getMousePosition( event ), var mouse = $.getMousePosition( event ),
offset = $.getElementPosition( element ); offset = $.getElementOffset( element );
return mouse.minus( offset ); return mouse.minus( offset );
} }

16
src/navigator.js
View File

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

42
src/openseadragon.js
View File

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

86
src/referencestrip.js
View File

@ -189,16 +189,16 @@ $.ReferenceStrip = function( options ){
element: element, element: element,
clickTimeThreshold: this.clickTimeThreshold, clickTimeThreshold: this.clickTimeThreshold,
clickDistThreshold: this.clickDistThreshold, clickDistThreshold: this.clickDistThreshold,
pressHandler: function( tracker ){ pressHandler: function ( tracker, eventData ) {
tracker.dragging = $.now(); tracker.dragging = $.now();
}, },
releaseHandler: function( tracker, position, insideElementPress, insideElementRelease ){ releaseHandler: function ( tracker, eventData ) {
var id = tracker.element.id, var id = tracker.element.id,
page = Number( id.split( '-' )[2] ), page = Number( id.split( '-' )[2] ),
now = $.now(); now = $.now();
if ( insideElementPress && if ( eventData.insideElementPress &&
insideElementRelease && eventData.insideElementRelease &&
tracker.dragging && tracker.dragging &&
( now - tracker.dragging ) < tracker.clickTimeThreshold ) { ( now - tracker.dragging ) < tracker.clickTimeThreshold ) {
tracker.dragging = null; tracker.dragging = null;
@ -264,7 +264,7 @@ $.extend( $.ReferenceStrip.prototype, $.EventHandler.prototype, $.Viewer.prototy
this.currentPage = page; this.currentPage = page;
$.getElement( element.id + '-displayregion' ).focus(); $.getElement( element.id + '-displayregion' ).focus();
onStripEnter.call( this, this.innerTracker ); onStripEnter.call( this, this.innerTracker, {} );
} }
}, },
/** /**
@ -289,7 +289,7 @@ $.extend( $.ReferenceStrip.prototype, $.EventHandler.prototype, $.Viewer.prototy
* @inner * @inner
* @function * @function
*/ */
function onStripDrag( tracker, position, delta, shift ) { function onStripDrag( tracker, eventData ) {
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', '' ) ),
@ -299,31 +299,31 @@ function onStripDrag( tracker, position, delta, shift ) {
this.dragging = true; this.dragging = true;
if ( this.element ) { if ( this.element ) {
if ( 'horizontal' == this.scroll ) { if ( 'horizontal' == this.scroll ) {
if ( -delta.x > 0 ) { if ( -eventData.delta.x > 0 ) {
//forward //forward
if ( offsetLeft > -( scrollWidth - viewerSize.x ) ) { if ( offsetLeft > -( scrollWidth - viewerSize.x ) ) {
this.element.style.marginLeft = ( offsetLeft + (delta.x * 2) ) + 'px'; this.element.style.marginLeft = ( offsetLeft + ( eventData.delta.x * 2 ) ) + 'px';
loadPanels( this, viewerSize.x, offsetLeft + (delta.x * 2) ); loadPanels( this, viewerSize.x, offsetLeft + ( eventData.delta.x * 2 ) );
} }
} else if ( -delta.x < 0 ) { } else if ( -eventData.delta.x < 0 ) {
//reverse //reverse
if ( offsetLeft < 0 ) { if ( offsetLeft < 0 ) {
this.element.style.marginLeft = ( offsetLeft + (delta.x * 2) ) + 'px'; this.element.style.marginLeft = ( offsetLeft + ( eventData.delta.x * 2 ) ) + 'px';
loadPanels( this, viewerSize.x, offsetLeft + (delta.x * 2) ); loadPanels( this, viewerSize.x, offsetLeft + ( eventData.delta.x * 2 ) );
} }
} }
} else { } else {
if ( -delta.y > 0 ) { if ( -eventData.delta.y > 0 ) {
//forward //forward
if ( offsetTop > -( scrollHeight - viewerSize.y ) ) { if ( offsetTop > -( scrollHeight - viewerSize.y ) ) {
this.element.style.marginTop = ( offsetTop + (delta.y * 2) ) + 'px'; this.element.style.marginTop = ( offsetTop + ( eventData.delta.y * 2 ) ) + 'px';
loadPanels( this, viewerSize.y, offsetTop + (delta.y * 2) ); loadPanels( this, viewerSize.y, offsetTop + ( eventData.delta.y * 2 ) );
} }
} else if ( -delta.y < 0 ) { } else if ( -eventData.delta.y < 0 ) {
//reverse //reverse
if ( offsetTop < 0 ) { if ( offsetTop < 0 ) {
this.element.style.marginTop = ( offsetTop + (delta.y * 2) ) + 'px'; this.element.style.marginTop = ( offsetTop + ( eventData.delta.y * 2 ) ) + 'px';
loadPanels( this, viewerSize.y, offsetTop + (delta.y * 2) ); loadPanels( this, viewerSize.y, offsetTop + ( eventData.delta.y * 2 ) );
} }
} }
} }
@ -339,7 +339,7 @@ function onStripDrag( tracker, position, delta, shift ) {
* @inner * @inner
* @function * @function
*/ */
function onStripScroll( tracker, position, scroll, shift ) { function onStripScroll( tracker, eventData ) {
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', '' ) ),
@ -347,31 +347,31 @@ function onStripScroll( tracker, position, scroll, shift ) {
viewerSize = $.getElementSize( this.viewer.canvas ); viewerSize = $.getElementSize( this.viewer.canvas );
if ( this.element ) { if ( this.element ) {
if ( 'horizontal' == this.scroll ) { if ( 'horizontal' == this.scroll ) {
if ( scroll > 0 ) { if ( eventData.scroll > 0 ) {
//forward //forward
if ( offsetLeft > -( scrollWidth - viewerSize.x ) ) { if ( offsetLeft > -( scrollWidth - viewerSize.x ) ) {
this.element.style.marginLeft = ( offsetLeft - (scroll * 60) ) + 'px'; this.element.style.marginLeft = ( offsetLeft - ( eventData.scroll * 60 ) ) + 'px';
loadPanels( this, viewerSize.x, offsetLeft - (scroll * 60) ); loadPanels( this, viewerSize.x, offsetLeft - ( eventData.scroll * 60 ) );
} }
} else if ( scroll < 0 ) { } else if ( eventData.scroll < 0 ) {
//reverse //reverse
if ( offsetLeft < 0 ) { if ( offsetLeft < 0 ) {
this.element.style.marginLeft = ( offsetLeft - (scroll * 60) ) + 'px'; this.element.style.marginLeft = ( offsetLeft - ( eventData.scroll * 60 ) ) + 'px';
loadPanels( this, viewerSize.x, offsetLeft - (scroll * 60) ); loadPanels( this, viewerSize.x, offsetLeft - ( eventData.scroll * 60 ) );
} }
} }
} else { } else {
if ( scroll < 0 ) { if ( eventData.scroll < 0 ) {
//scroll up //scroll up
if ( offsetTop > viewerSize.y - scrollHeight ) { if ( offsetTop > viewerSize.y - scrollHeight ) {
this.element.style.marginTop = ( offsetTop + (scroll * 60) ) + 'px'; this.element.style.marginTop = ( offsetTop + ( eventData.scroll * 60 ) ) + 'px';
loadPanels( this, viewerSize.y, offsetTop + (scroll * 60) ); loadPanels( this, viewerSize.y, offsetTop + ( eventData.scroll * 60 ) );
} }
} else if ( scroll > 0 ) { } else if ( eventData.scroll > 0 ) {
//scroll dowm //scroll dowm
if ( offsetTop < 0 ) { if ( offsetTop < 0 ) {
this.element.style.marginTop = ( offsetTop + (scroll * 60) ) + 'px'; this.element.style.marginTop = ( offsetTop + ( eventData.scroll * 60 ) ) + 'px';
loadPanels( this, viewerSize.y, offsetTop + (scroll * 60) ); loadPanels( this, viewerSize.y, offsetTop + ( eventData.scroll * 60 ) );
} }
} }
} }
@ -453,7 +453,7 @@ function loadPanels(strip, viewerSize, scroll){
* @inner * @inner
* @function * @function
*/ */
function onStripEnter( tracker ) { function onStripEnter( tracker, eventData ) {
//$.setElementOpacity(tracker.element, 0.8); //$.setElementOpacity(tracker.element, 0.8);
@ -480,7 +480,7 @@ function onStripEnter( tracker ) {
* @inner * @inner
* @function * @function
*/ */
function onStripExit( tracker ) { function onStripExit( tracker, eventData ) {
if ( 'horizontal' == this.scroll ) { if ( 'horizontal' == this.scroll ) {
//tracker.element.style.paddingTop = "10px"; //tracker.element.style.paddingTop = "10px";
@ -502,37 +502,37 @@ function onStripExit( tracker ) {
* @inner * @inner
* @function * @function
*/ */
function onKeyPress( tracker, keyCode, shiftKey ){ function onKeyPress( tracker, eventData ) {
//console.log( keyCode ); //console.log( eventData.keyCode );
switch( keyCode ){ switch ( eventData.keyCode ) {
case 61: //=|+ case 61: //=|+
onStripScroll.call(this, this.tracker, null, 1, null); onStripScroll.call( this, this.tracker, { position: null, scroll: 1, shift: null } );
return false; return false;
case 45: //-|_ case 45: //-|_
onStripScroll.call(this, this.tracker, null, -1, null); onStripScroll.call( this, this.tracker, { position: null, scroll: -1, shift: null } );
return false; return false;
case 48: //0|) case 48: //0|)
case 119: //w case 119: //w
case 87: //W case 87: //W
case 38: //up arrow case 38: //up arrow
onStripScroll.call(this, this.tracker, null, 1, null); onStripScroll.call( this, this.tracker, { position: null, scroll: 1, shift: null } );
return false; return false;
case 115: //s case 115: //s
case 83: //S case 83: //S
case 40: //down arrow case 40: //down arrow
onStripScroll.call(this, this.tracker, null, -1, null); onStripScroll.call( this, this.tracker, { position: null, scroll: -1, shift: null } );
return false; return false;
case 97: //a case 97: //a
case 37: //left arrow case 37: //left arrow
onStripScroll.call(this, this.tracker, null, -1, null); onStripScroll.call( this, this.tracker, { position: null, scroll: -1, shift: null } );
return false; return false;
case 100: //d case 100: //d
case 39: //right arrow case 39: //right arrow
onStripScroll.call(this, this.tracker, null, 1, null); onStripScroll.call( this, this.tracker, { position: null, scroll: 1, shift: null } );
return false; return false;
default: default:
//console.log( 'navigator keycode %s', keyCode ); //console.log( 'navigator keycode %s', eventData.keyCode );
return true; return true;
} }
} }

88
src/viewer.js
View File

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