diff --git a/src/button.js b/src/button.js index 88c73274..ed5b7891 100644 --- a/src/button.js +++ b/src/button.js @@ -175,41 +175,81 @@ $.Button = function( options ) { clickTimeThreshold: this.clickTimeThreshold, clickDistThreshold: this.clickDistThreshold, - enterHandler: function( tracker, position, buttonDownElement, buttonDownAny ) { + enterHandler: function( tracker, position, buttonDownElement, buttonDownAny, event ) { if ( buttonDownElement ) { inTo( _this, $.ButtonState.DOWN ); - _this.raiseEvent( "onEnter", _this ); + _this.raiseEvent( "enter", { + button: _this, + tracker: tracker, + position: position, + buttonDownElement: buttonDownElement, + buttonDownAny: buttonDownAny, + originalEvent: event + }); } else if ( !buttonDownAny ) { inTo( _this, $.ButtonState.HOVER ); } }, - focusHandler: function( tracker, position, buttonDownElement, buttonDownAny ) { - this.enterHandler( tracker, position, buttonDownElement, buttonDownAny ); - _this.raiseEvent( "onFocus", _this ); + focusHandler: function( tracker, position, buttonDownElement, buttonDownAny, event ) { + this.enterHandler( tracker, position, buttonDownElement, buttonDownAny, event ); + _this.raiseEvent( "focus", { + button: _this, + tracker: tracker, + position: position, + buttonDownElement: buttonDownElement, + buttonDownAny: buttonDownAny, + originalEvent: event + }); }, - exitHandler: function( tracker, position, buttonDownElement, buttonDownAny ) { + exitHandler: function( tracker, position, buttonDownElement, buttonDownAny, event ) { outTo( _this, $.ButtonState.GROUP ); if ( buttonDownElement ) { - _this.raiseEvent( "onExit", _this ); + _this.raiseEvent( "exit", { + button: _this, + tracker: tracker, + position: position, + buttonDownElement: buttonDownElement, + buttonDownAny: buttonDownAny, + originalEvent: event + }); } }, - blurHandler: function( tracker, position, buttonDownElement, buttonDownAny ) { - this.exitHandler( tracker, position, buttonDownElement, buttonDownAny ); - _this.raiseEvent( "onBlur", _this ); + blurHandler: function( tracker, position, buttonDownElement, buttonDownAny, event ) { + this.exitHandler( tracker, position, buttonDownElement, buttonDownAny, event ); + _this.raiseEvent( "blur", { + button: _this, + tracker: tracker, + position: position, + buttonDownElement: buttonDownElement, + buttonDownAny: buttonDownAny, + originalEvent: event + }); }, - pressHandler: function( tracker, position ) { + pressHandler: function( tracker, position, event ) { inTo( _this, $.ButtonState.DOWN ); - _this.raiseEvent( "onPress", _this ); + _this.raiseEvent( "press", { + button: _this, + tracker: tracker, + position: position, + originalEvent: event + }); }, - releaseHandler: function( tracker, position, insideElementPress, insideElementRelease ) { + releaseHandler: function( tracker, position, insideElementPress, insideElementRelease, event ) { if ( insideElementPress && insideElementRelease ) { outTo( _this, $.ButtonState.HOVER ); - _this.raiseEvent( "onRelease", _this ); + _this.raiseEvent( "release", { + button: _this, + tracker: tracker, + position: position, + insideElementPress: insideElementPress, + insideElementRelease: insideElementRelease, + originalEvent: event + }); } else if ( insideElementPress ) { outTo( _this, $.ButtonState.GROUP ); } else { @@ -217,17 +257,28 @@ $.Button = function( options ) { } }, - clickHandler: function( tracker, position, quick, shift ) { + clickHandler: function( tracker, position, quick, shift, event ) { if ( quick ) { - _this.raiseEvent("onClick", _this); + _this.raiseEvent("click", { + button: _this, + tracker: tracker, + position: position, + quick: quick, + shift: shift, + originalEvent: event + }); } }, - keyHandler: function( tracker, key ){ + keyHandler: function( tracker, key, event ){ //console.log( "%s : handling key %s!", _this.tooltip, key); if( 13 === key ){ - _this.raiseEvent( "onClick", _this ); - _this.raiseEvent( "onRelease", _this ); + _this.raiseEvent( "keypress", { + button: _this, + tracker: tracker, + key: key, + originalEvent: event + }); return false; } return true; diff --git a/src/mousetracker.js b/src/mousetracker.js index 1593839f..d91ee310 100644 --- a/src/mousetracker.js +++ b/src/mousetracker.js @@ -210,6 +210,8 @@ * initiated inside the tracked element, otherwise false. * @param {Boolean} buttonDownAny * Was the button down anywhere in the screen during the event. + * @param {MouseEvent} event + * The original mouse event that triggered this handler */ enterHandler: function(){}, @@ -226,6 +228,8 @@ * initiated inside the tracked element, otherwise false. * @param {Boolean} buttonDownAny * Was the button down anywhere in the screen during the event. + * @param {MouseEvent} event + * The original mouse event that triggered this handler */ exitHandler: function(){}, @@ -237,6 +241,8 @@ * A reference to the tracker instance. * @param {OpenSeadragon.Point} position * The poistion of the event on the screen. + * @param {MouseEvent} event + * The original mouse event that triggered this handler */ pressHandler: function(){}, @@ -254,6 +260,8 @@ * @param {Boolean} insideElementRelease * Was the mouse still inside the tracked element when the button * was released. + * @param {MouseEvent} event + * The original mouse event that triggered this handler */ releaseHandler: function(){}, @@ -269,6 +277,8 @@ * The scroll delta for the event. * @param {Boolean} shift * Was the shift key being pressed during this event? + * @param {MouseEvent} event + * The original mouse event that triggered this handler */ scrollHandler: function(){}, @@ -285,6 +295,8 @@ * both pased. Useful for ignoring events. * @param {Boolean} shift * Was the shift key being pressed during this event? + * @param {MouseEvent} event + * The original mouse event that triggered this handler */ clickHandler: function(){}, @@ -301,6 +313,8 @@ * end drag. Usefule for ignoring or weighting the events. * @param {Boolean} shift * Was the shift key being pressed during this event? + * @param {Event} event + * The original mouse or wheel event that triggered this handler */ dragHandler: function(){}, @@ -314,6 +328,8 @@ * The key code that was pressed. * @param {Boolean} shift * Was the shift key being pressed during this event? + * @param {MouseEvent} event + * The original mouse event that triggered this handler */ keyHandler: function(){}, @@ -555,7 +571,8 @@ propagate = tracker.keyHandler( tracker, event.keyCode ? event.keyCode : event.charCode, - event.shiftKey + event.shiftKey, + event ); if( !propagate ){ $.cancelEvent( event ); @@ -602,7 +619,8 @@ tracker, getMouseRelative( event, tracker.element ), delegate.buttonDown, - IS_BUTTON_DOWN + IS_BUTTON_DOWN, + event ); if( propagate === false ){ $.cancelEvent( event ); @@ -649,7 +667,8 @@ tracker, getMouseRelative( event, tracker.element ), delegate.buttonDown, - IS_BUTTON_DOWN + IS_BUTTON_DOWN, + event ); if( propagate === false ){ @@ -682,7 +701,8 @@ if ( tracker.pressHandler ) { propagate = tracker.pressHandler( tracker, - getMouseRelative( event, tracker.element ) + getMouseRelative( event, tracker.element ), + event ); if( propagate === false ){ $.cancelEvent( event ); @@ -717,7 +737,16 @@ event.targetTouches.length == 1 && event.changedTouches.length == 1 ){ - THIS[ tracker.hash ].lastTouch = event.touches[ 0 ]; + THIS[ tracker.hash ].lastTouch = event.touches[ 0 ]; + +//DWK So onMouseOver and onMouseDown are both expecting an event for the second +//DWK parameter. This is passing a Touch point instead. Although a Touch +//DWK object is very similar to an event object that are not identical. +//DWK not sure if this is a problem. May need to include a comment in the +//DWK API notes, since this object as passed here is getting passed along. +//DWK Alternately, should there be some way to still pass the original +//DWK touch event along. + onMouseOver( tracker, event.changedTouches[ 0 ] ); onMouseDown( tracker, event.touches[ 0 ] ); } @@ -765,7 +794,8 @@ tracker, getMouseRelative( event, tracker.element ), insideElementPress, - insideElementRelease + insideElementRelease, + event ); if( propagate === false ){ $.cancelEvent( event ); @@ -789,6 +819,7 @@ event.changedTouches.length == 1 ){ THIS[ tracker.hash ].lastTouch = null; +//DWK See comment in onTouchStart onMouseUp( tracker, event.changedTouches[ 0 ] ); onMouseOut( tracker, event.changedTouches[ 0 ] ); } @@ -897,7 +928,8 @@ tracker, getMouseRelative( event, tracker.element ), nDelta, - event.shiftKey + event.shiftKey, + event ); if( propagate === false ){ $.cancelEvent( event ); @@ -931,7 +963,8 @@ tracker, getMouseRelative( event, tracker.element ), quick, - event.shiftKey + event.shiftKey, + event ); if( propagate === false ){ $.cancelEvent( event ); @@ -961,7 +994,8 @@ tracker, getMouseRelative( event, tracker.element ), delta, - event.shiftKey + event.shiftKey, + event ); if( propagate === false ){ $.cancelEvent( event ); @@ -983,7 +1017,7 @@ event.targetTouches.length === 1 && event.changedTouches.length === 1 && THIS[ tracker.hash ].lastTouch.identifier === event.touches[ 0 ].identifier){ - +//DWK See comment in onTouchStart onMouseMove( tracker, event.touches[ 0 ] ); } else if ( event.touches.length === 2 ){ @@ -998,6 +1032,8 @@ if( Math.abs( THIS[ tracker.hash ].lastPinchDelta - pinchDelta ) > 75 ){ //$.console.debug( "pinch delta : " + pinchDelta + " | previous : " + THIS[ tracker.hash ].lastPinchDelta); +//DWK This is a variant on the onTouchStart comment, but instead of a Touch +//DWK object, a generic object with a handful of properties is passed onMouseWheelSpin( tracker, { shift: false, pageX: THIS[ tracker.hash ].pinchMidpoint.x, diff --git a/src/viewer.js b/src/viewer.js index 24c61b20..26cbc7f5 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1249,7 +1249,7 @@ function onBlur(){ } -function onCanvasClick( tracker, position, quick, shift ) { +function onCanvasClick( tracker, position, quick, shift, event ) { var zoomPreClick, factor; if ( this.viewport && quick ) { // ignore clicks where mouse moved @@ -1261,15 +1261,16 @@ function onCanvasClick( tracker, position, quick, shift ) { ); this.viewport.applyConstraints(); } - this.raiseEvent( 'canvas-click', { + this.raiseEvent( 'click', { tracker: tracker, position: position, quick: quick, - shift: shift + shift: shift, + originalEvent: event }); } -function onCanvasDrag( tracker, position, delta, shift ) { +function onCanvasDrag( tracker, position, delta, shift, event ) { if ( this.viewport ) { if( !this.panHorizontal ){ delta.x = 0; @@ -1286,27 +1287,29 @@ function onCanvasDrag( tracker, position, delta, shift ) { this.viewport.applyConstraints(); } } - this.raiseEvent( 'canvas-click', { + this.raiseEvent( 'drag', { tracker: tracker, position: position, delta: delta, - shift: shift + shift: shift, + originalEvent: event }); } -function onCanvasRelease( tracker, position, insideElementPress, insideElementRelease ) { +function onCanvasRelease( tracker, position, insideElementPress, insideElementRelease, event ) { if ( insideElementPress && this.viewport ) { this.viewport.applyConstraints(); } - this.raiseEvent( 'canvas-release', { + this.raiseEvent( 'release', { tracker: tracker, position: position, insideElementPress: insideElementPress, - insideElementRelease: insideElementRelease + insideElementRelease: insideElementRelease, + originalEvent: event }); } -function onCanvasScroll( tracker, position, scroll, shift ) { +function onCanvasScroll( tracker, position, scroll, shift, event ) { var factor; if ( this.viewport ) { factor = Math.pow( this.zoomPerScroll, scroll ); @@ -1316,54 +1319,58 @@ function onCanvasScroll( tracker, position, scroll, shift ) { ); this.viewport.applyConstraints(); } - this.raiseEvent( 'canvas-scroll', { + this.raiseEvent( 'scroll', { tracker: tracker, position: position, scroll: scroll, - shift: shift + shift: shift, + originalEvent: event }); //cancels event return false; } -function onContainerExit( tracker, position, buttonDownElement, buttonDownAny ) { +function onContainerExit( tracker, position, buttonDownElement, buttonDownAny, event ) { if ( !buttonDownElement ) { THIS[ this.hash ].mouseInside = false; if ( !THIS[ this.hash ].animating ) { beginControlsAutoHide( this ); } } - this.raiseEvent( 'container-exit', { + this.raiseEvent( 'exit', { tracker: tracker, position: position, buttonDownElement: buttonDownElement, - buttonDownAny: buttonDownAny + buttonDownAny: buttonDownAny, + originalEvent: event }); } -function onContainerRelease( tracker, position, insideElementPress, insideElementRelease ) { +function onContainerRelease( tracker, position, insideElementPress, insideElementRelease, event ) { if ( !insideElementRelease ) { THIS[ this.hash ].mouseInside = false; if ( !THIS[ this.hash ].animating ) { beginControlsAutoHide( this ); } } - this.raiseEvent( 'container-release', { + this.raiseEvent( 'release', { tracker: tracker, position: position, insideElementPress: insideElementPress, - insideElementRelease: insideElementRelease + insideElementRelease: insideElementRelease, + originalEvent: event }); } -function onContainerEnter( tracker, position, buttonDownElement, buttonDownAny ) { +function onContainerEnter( tracker, position, buttonDownElement, buttonDownAny, event ) { THIS[ this.hash ].mouseInside = true; abortControlsAutoHide( this ); - this.raiseEvent( 'container-enter', { + this.raiseEvent( 'enter', { tracker: tracker, position: position, buttonDownElement: buttonDownElement, - buttonDownAny: buttonDownAny + buttonDownAny: buttonDownAny, + originalEvent: event }); } diff --git a/test/demo.html b/test/demo.html new file mode 100644 index 00000000..9022d115 --- /dev/null +++ b/test/demo.html @@ -0,0 +1,180 @@ + + + OpenSeadragon Expose Origina Event Demo + + + + +
+
+ Simple demo page to verify that event handlers pass along the original source event +
+
+
+ +
+
+ + + +