From a432a38d3dcca1980ff8f378abe11870a39aa18c Mon Sep 17 00:00:00 2001 From: houseofyin Date: Mon, 4 Mar 2013 15:19:35 -0500 Subject: [PATCH 1/2] 23 Initial attempt a this feature along with a demo page --- src/mousetracker.js | 56 +++++++-- test/demo.html | 296 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 342 insertions(+), 10 deletions(-) create mode 100644 test/demo.html diff --git a/src/mousetracker.js b/src/mousetracker.js index 397fd19f..58d2e80e 100644 --- a/src/mousetracker.js +++ b/src/mousetracker.js @@ -176,6 +176,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(){}, @@ -192,6 +194,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(){}, @@ -203,6 +207,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(){}, @@ -220,6 +226,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(){}, @@ -235,6 +243,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(){}, @@ -251,6 +261,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(){}, @@ -267,6 +279,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(){}, @@ -280,6 +294,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(){}, @@ -521,7 +537,8 @@ propagate = tracker.keyHandler( tracker, event.keyCode ? event.keyCode : event.charCode, - event.shiftKey + event.shiftKey, + event ); if( !propagate ){ $.cancelEvent( event ); @@ -568,7 +585,8 @@ tracker, getMouseRelative( event, tracker.element ), delegate.buttonDown, - IS_BUTTON_DOWN + IS_BUTTON_DOWN, + event ); if( propagate === false ){ $.cancelEvent( event ); @@ -615,7 +633,8 @@ tracker, getMouseRelative( event, tracker.element ), delegate.buttonDown, - IS_BUTTON_DOWN + IS_BUTTON_DOWN, + event ); if( propagate === false ){ @@ -648,7 +667,8 @@ if ( tracker.pressHandler ) { propagate = tracker.pressHandler( tracker, - getMouseRelative( event, tracker.element ) + getMouseRelative( event, tracker.element ), + event ); if( propagate === false ){ $.cancelEvent( event ); @@ -683,7 +703,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 ] ); } @@ -731,7 +760,8 @@ tracker, getMouseRelative( event, tracker.element ), insideElementPress, - insideElementRelease + insideElementRelease, + event ); if( propagate === false ){ $.cancelEvent( event ); @@ -755,6 +785,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 ] ); } @@ -863,7 +894,8 @@ tracker, getMouseRelative( event, tracker.element ), nDelta, - event.shiftKey + event.shiftKey, + event ); if( propagate === false ){ $.cancelEvent( event ); @@ -897,7 +929,8 @@ tracker, getMouseRelative( event, tracker.element ), quick, - event.shiftKey + event.shiftKey, + event ); if( propagate === false ){ $.cancelEvent( event ); @@ -927,7 +960,8 @@ tracker, getMouseRelative( event, tracker.element ), delta, - event.shiftKey + event.shiftKey, + event ); if( propagate === false ){ $.cancelEvent( event ); @@ -949,7 +983,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 ){ @@ -964,6 +998,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/test/demo.html b/test/demo.html new file mode 100644 index 00000000..e38b9b51 --- /dev/null +++ b/test/demo.html @@ -0,0 +1,296 @@ + + + OpenSeadragon Expose Origina Event Demo + + + + +
+
+ Simple demo page to verify that event handlers pass along the original source event +
+
+
+ +
+
+ + + + From 6285a779f393a72463ff80789a535cc9922500eb Mon Sep 17 00:00:00 2001 From: thatcher Date: Wed, 6 Mar 2013 17:34:12 -0500 Subject: [PATCH 2/2] cleaning up event names, reducing demo cases to just addHandler interface, normalizing event data to express more idiomatic javascript pattern of passing object instead of invoking callback with positional parameters --- src/button.js | 89 ++++++++++--- src/viewer.js | 49 ++++--- test/demo.html | 356 +++++++++++++++++-------------------------------- 3 files changed, 218 insertions(+), 276 deletions(-) diff --git a/src/button.js b/src/button.js index 4b98faf3..cec5d1f2 100644 --- a/src/button.js +++ b/src/button.js @@ -141,41 +141,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 { @@ -183,17 +223,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/viewer.js b/src/viewer.js index 2a6cf9dc..16cd3210 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -1169,7 +1169,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 @@ -1181,15 +1181,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; @@ -1206,27 +1207,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 ); @@ -1236,54 +1239,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 index e38b9b51..9022d115 100644 --- a/test/demo.html +++ b/test/demo.html @@ -5,290 +5,174 @@
-
- Simple demo page to verify that event handlers pass along the original source event -
-
-
- -
+
+ Simple demo page to verify that event handlers pass along the original source event +
+
+
+ +