From a432a38d3dcca1980ff8f378abe11870a39aa18c Mon Sep 17 00:00:00 2001
From: houseofyin <david_kane@houseofyin.com>
Date: Mon, 4 Mar 2013 15:19:35 -0500
Subject: [PATCH] 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 @@
+<html>
+ <head>
+ <title>OpenSeadragon Expose Origina Event Demo</title>
+ <script type="text/javascript" src='openseadragon/build/openseadragon/openseadragon.js'></script>
+ <style type="text/css">
+ .openseadragon
+ {
+ width: 800px;
+ height: 600px;
+ border: 1px solid black;
+ color: #333; /* text color for messages */
+ background-color: black;
+ }
+ .openseadragon-small
+ {
+ width: 40px;
+ height: 30px;
+ border: 1px solid black;
+ color: #333; /* text color for messages */
+ background-color: black;
+ }
+
+ </style>
+</head>
+<body>
+ <div class="demoarea">
+ <div>
+ Simple demo page to verify that event handlers pass along the original source event
+ </div>
+ <div id="contentDiv" class="openseadragon"></div>
+ <div>
+ <span id='consolelog'></span>
+ </div>
+ </div>
+
+ <script type="text/javascript">
+ var viewer = OpenSeadragon({
+ id:"contentDiv",
+ prefixUrl:"openseadragon/build/openseadragon/images/",
+ tileSources:{
+ Image:{
+ xmlns:"http://schemas.microsoft.com/deepzoom/2008",
+ Url:"example-images/highsmith/highsmith_files/",
+ Format:"jpg",
+ Overlap:"2",
+ TileSize:"256",
+ Size:{
+ Height:"9221",
+ Width:"7026"
+ }
+ }
+ }
+ });
+
+ var demoMessageLog = "";
+ var screenConsole = document.getElementById('consolelog');
+
+ function checkIfEventWasPassed(event)
+ {
+ if(typeof event === 'undefined')
+ {
+ demoMessageLog += "PROBLEM EVENT WAS UNDEFINED:" + event + "\n\n";
+ }
+ }
+
+ function updateDebugMessageOnScreenConsole()
+ {
+ screenConsole.innerHTML = demoMessageLog.replace(/\n/g, '<br />');
+ }
+
+ viewer.innerTracker.clickHandler = function(tracker, position, delta, shift,event)
+ {
+ demoMessageLog += "Altered version of original clickHandler\n" +
+ " tracker:" + tracker + "\n" +
+ " position:" + position + "\n" +
+ " delta:" + delta + "\n" +
+ " shift:" + shift + "\n" +
+ " event:" + event + "\n\n";
+ checkIfEventWasPassed(event);
+ updateDebugMessageOnScreenConsole();
+
+ }
+
+ viewer.addHandler("click", function(tracker, position, delta, shift,event)
+ {
+ demoMessageLog += "Additional clickHandler\n" +
+ " tracker:" + tracker + "\n" +
+ " position:" + position + "\n" +
+ " delta:" + delta + "\n" +
+ " shift:" + shift + "\n" +
+ " event:" + event + "\n\n";
+ checkIfEventWasPassed(event);
+ updateDebugMessageOnScreenConsole();
+ });
+
+ viewer.innerTracker.pressHandler = function(tracker, position, event)
+ {
+ demoMessageLog += "Altered version of original pressHandler\n" +
+ " tracker:" + tracker + "\n" +
+ " position:" + position + "\n" +
+ " event:" + event + "\n\n";
+ checkIfEventWasPassed(event);
+ updateDebugMessageOnScreenConsole();
+ };
+ viewer.addHandler("press", function(tracker, position,event)
+ {
+ demoMessageLog += "Additional pressHandler\n" +
+ " tracker:" + tracker + "\n" +
+ " position:" + position + "\n" +
+ " event:" + event + "\n\n";
+ checkIfEventWasPassed(event);
+ updateDebugMessageOnScreenConsole();
+ });
+
+ viewer.innerTracker.releaseHandler = function(tracker, position,buttonDown,insideElementRelease,event)
+ {
+ demoMessageLog += "Altered version of original releaseHandler\n" +
+ " tracker:" + tracker + "\n" +
+ " position:" + position + "\n" +
+ " buttonDown:" + buttonDown + "\n" +
+ " insideElementRelease:" + insideElementRelease + "\n" +
+ " event:" + event + "\n\n";
+ checkIfEventWasPassed(event);
+ updateDebugMessageOnScreenConsole();
+ };
+
+ viewer.addHandler("release", function(tracker, position ,buttonDown,insideElementRelease,event)
+ {
+ demoMessageLog += "Additional releaseHandler\n" +
+ " tracker:" + tracker + "\n" +
+ " position:" + position + "\n" +
+ " buttonDown:" + buttonDown + "\n" +
+ " insideElementRelease:" + insideElementRelease + "\n" +
+ " event:" + event + "\n\n";
+ checkIfEventWasPassed(event);
+ updateDebugMessageOnScreenConsole();
+ });
+
+ viewer.innerTracker.keyHandler = function(tracker, keycode, shift,event)
+ {
+ demoMessageLog += "Altered version of original keyHandler\n" +
+ " tracker:" + tracker + "\n" +
+ " keycode:" + keycode + "\n" +
+ " shift:" + shift + "\n" +
+ " event:" + event + "\n\n";
+ checkIfEventWasPassed(event);
+ updateDebugMessageOnScreenConsole();
+ };
+
+ viewer.addHandler("keypress", function(tracker, keycode, shift,event)
+ {
+ demoMessageLog += "Additional keyHandler\n" +
+ " tracker:" + tracker + "\n" +
+ " keycode:" + keycode + "\n" +
+ " shift:" + shift + "\n" +
+ " event:" + event + "\n\n";
+ checkIfEventWasPassed(event);
+ updateDebugMessageOnScreenConsole();
+ });
+
+
+ viewer.innerTracker.dragHandler = function(tracker, position, delta, shift,event)
+ {
+ demoMessageLog += "Altered version of original dragHandler\n" +
+ " tracker:" + tracker + "\n" +
+ " position:" + position + "\n" +
+ " delta:" + delta + "\n" +
+ " shift:" + shift + "\n" +
+ " event:" + event + "\n\n";
+ checkIfEventWasPassed(event);
+ updateDebugMessageOnScreenConsole();
+ };
+
+ viewer.addHandler("drag", function(tracker, position, delta, shift,event)
+ {
+ demoMessageLog += "Additional dragHandler\n" +
+ " tracker:" + tracker + "\n" +
+ " position:" + position + "\n" +
+ " delta:" + delta + "\n" +
+ " shift:" + shift + "\n" +
+ " event:" + event + "\n\n";
+ checkIfEventWasPassed(event);
+ updateDebugMessageOnScreenConsole();
+ });
+
+ viewer.innerTracker.scrollHandler = function(tracker, position, scroll, shift,event)
+ {
+ demoMessageLog += "Altered version of original scrollHandler\n" +
+ " tracker:" + tracker + "\n" +
+ " position:" + position + "\n" +
+ " scroll:" + scroll + "\n" +
+ " shift:" + shift + "\n" +
+ " event:" + event + "\n\n";
+ checkIfEventWasPassed(event);
+ updateDebugMessageOnScreenConsole();
+ };
+
+ viewer.addHandler("scroll", function(tracker, position, scroll, shift,event)
+ {
+ demoMessageLog += "Additional scrollHandler\n" +
+ " tracker:" + tracker + "\n" +
+ " position:" + position + "\n" +
+ " scroll:" + scroll + "\n" +
+ " shift:" + shift + "\n" +
+ " event:" + event + "\n\n";
+ checkIfEventWasPassed(event);
+ updateDebugMessageOnScreenConsole();
+ });
+
+ viewer.innerTracker.enterHandler = function(tracker, position, buttonDown, buttonDownAny,event)
+ {
+ demoMessageLog += "Altered version of original enterHandler\n" +
+ " tracker:" + tracker + "\n" +
+ " position:" + position + "\n" +
+ " buttonDown:" + buttonDown + "\n" +
+ " buttonDownAny:" + buttonDownAny + "\n" +
+ " event:" + event + "\n\n";
+ checkIfEventWasPassed(event);
+ updateDebugMessageOnScreenConsole();
+ };
+
+ viewer.addHandler("enter", function(tracker, position, buttonDown, buttonDownAny,event)
+ {
+ demoMessageLog += "Additional enterHandler\n" +
+ " tracker:" + tracker + "\n" +
+ " position:" + position + "\n" +
+ " buttonDown:" + buttonDown + "\n" +
+ " buttonDownAny:" + buttonDownAny + "\n" +
+ " event:" + event + "\n\n";
+ checkIfEventWasPassed(event);
+ updateDebugMessageOnScreenConsole();
+ });
+
+ viewer.innerTracker.exitHandler = function(tracker, position, buttonDown, buttonDownAny,event)
+ {
+ demoMessageLog += "Altered version of original exitHandler\n" +
+ " tracker:" + tracker + "\n" +
+ " position:" + position + "\n" +
+ " buttonDown:" + buttonDown + "\n" +
+ " buttonDownAny:" + buttonDownAny + "\n" +
+ " event:" + event + "\n\n";
+ checkIfEventWasPassed(event);
+ updateDebugMessageOnScreenConsole();
+ };
+
+ viewer.addHandler("exit", function(tracker, position, buttonDown, buttonDownAny,event)
+ {
+ demoMessageLog += "Additional exitHandler\n" +
+ " tracker:" + tracker + "\n" +
+ " position:" + position + "\n" +
+ " buttonDown:" + buttonDown + "\n" +
+ " buttonDownAny:" + buttonDownAny + "\n" +
+ " event:" + event + "\n\n";
+ checkIfEventWasPassed(event);
+ updateDebugMessageOnScreenConsole();
+ });
+
+ viewer.innerTracker.focusHandler = function(tracker, event)
+ {
+ demoMessageLog += "Altered version of original focusHandler\n" +
+ " tracker:" + tracker + "\n" +
+ " event:" + event + "\n\n";
+ checkIfEventWasPassed(event);
+ updateDebugMessageOnScreenConsole();
+ };
+
+ viewer.addHandler("focus", function(tracker, event)
+ {
+ demoMessageLog += "Additional focusHandler\n" +
+ " tracker:" + tracker + "\n" +
+ " event:" + event + "\n\n";
+ checkIfEventWasPassed(event);
+ updateDebugMessageOnScreenConsole();
+ });
+
+ viewer.innerTracker.blurHandler = function(tracker, event)
+ {
+ demoMessageLog += "Altered version of original blurHandler\n" +
+ " tracker:" + tracker + "\n" +
+ " event:" + event + "\n\n";
+ checkIfEventWasPassed(event);
+ updateDebugMessageOnScreenConsole();
+ };
+
+ viewer.addHandler("blur", function(tracker, event)
+ {
+ demoMessageLog += "Additional blurHandler\n" +
+ " tracker:" + tracker + "\n" +
+ " event:" + event + "\n\n";
+ checkIfEventWasPassed(event);
+ updateDebugMessageOnScreenConsole();
+ });
+
+ </script>
+ </body>
+</html>