mirror of
https://github.com/openseadragon/openseadragon.git
synced 2025-01-19 09:11:45 +03:00
23 Initial attempt a this feature along with a demo page
This commit is contained in:
houseofyin
parent
ab3f465e4b
commit
a432a38d3d
@ -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,
|
||||
|
||||
296
test/demo.html
Normal file
296
test/demo.html
Normal file
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user