mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-25 22:56:11 +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 ];

1065
src/mousetracker.js
View File

File diff suppressed because it is too large Load Diff

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

862
src/referencestrip.js
View File

@ -32,511 +32,511 @@
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/ */
(function( $ ){ (function ( $ ) {
// dictionary from id to private properties // dictionary from id to private properties
var THIS = {}; var THIS = {};
/** /**
* The CollectionDrawer is a reimplementation if the Drawer API that * The CollectionDrawer is a reimplementation if the Drawer API that
* focuses on allowing a viewport to be redefined as a collection * focuses on allowing a viewport to be redefined as a collection
* of smaller viewports, defined by a clear number of rows and / or * of smaller viewports, defined by a clear number of rows and / or
* columns of which each item in the matrix of viewports has its own * columns of which each item in the matrix of viewports has its own
* source. * source.
* *
* This idea is a reexpression of the idea of dzi collections * This idea is a reexpression of the idea of dzi collections
* which allows a clearer algorithm to reuse the tile sources already * which allows a clearer algorithm to reuse the tile sources already
* supported by OpenSeadragon, in heterogenious or homogenious * supported by OpenSeadragon, in heterogenious or homogenious
* sequences just like mixed groups already supported by the viewer * sequences just like mixed groups already supported by the viewer
* for the purpose of image sequnces. * for the purpose of image sequnces.
* *
* TODO: The difficult part of this feature is figuring out how to express * TODO: The difficult part of this feature is figuring out how to express
* this functionality as a combination of the functionality already * this functionality as a combination of the functionality already
* provided by Drawer, Viewport, TileSource, and Navigator. It may * provided by Drawer, Viewport, TileSource, and Navigator. It may
* require better abstraction at those points in order to effeciently * require better abstraction at those points in order to effeciently
* reuse those paradigms. * reuse those paradigms.
*/ */
$.ReferenceStrip = function( options ){ $.ReferenceStrip = function ( options ) {
var _this = this, var _this = this,
viewer = options.viewer, viewer = options.viewer,
viewerSize = $.getElementSize( viewer.element ), viewerSize = $.getElementSize( viewer.element ),
element, element,
style, style,
i; i;
//We may need to create a new element and id if they did not //We may need to create a new element and id if they did not
//provide the id for the existing element //provide the id for the existing element
if( !options.id ){ if ( !options.id ) {
options.id = 'referencestrip-' + $.now(); options.id = 'referencestrip-' + $.now();
this.element = $.makeNeutralElement( "div" ); this.element = $.makeNeutralElement( "div" );
this.element.id = options.id; this.element.id = options.id;
this.element.className = 'referencestrip'; this.element.className = 'referencestrip';
}
options = $.extend( true, {
sizeRatio: $.DEFAULT_SETTINGS.referenceStripSizeRatio,
position: $.DEFAULT_SETTINGS.referenceStripPosition,
scroll: $.DEFAULT_SETTINGS.referenceStripScroll,
clickTimeThreshold: $.DEFAULT_SETTINGS.clickTimeThreshold
}, options, {
//required overrides
element: this.element,
//These need to be overridden to prevent recursion since
//the navigator is a viewer and a viewer has a navigator
showNavigator: false,
mouseNavEnabled: false,
showNavigationControl: false,
showSequenceControl: false
});
$.extend( this, options );
//Private state properties
THIS[ this.id ] = {
"animating": false
};
this.minPixelRatio = this.viewer.minPixelRatio;
style = this.element.style;
style.marginTop = '0px';
style.marginRight = '0px';
style.marginBottom = '0px';
style.marginLeft = '0px';
style.left = '0px';
style.bottom = '0px';
style.border = '0px';
style.background = '#000';
style.position = 'relative';
$.setElementOpacity( this.element, 0.8 );
this.viewer = viewer;
this.innerTracker = new $.MouseTracker({
element: this.element,
dragHandler: $.delegate( this, onStripDrag ),
scrollHandler: $.delegate( this, onStripScroll ),
enterHandler: $.delegate( this, onStripEnter ),
exitHandler: $.delegate( this, onStripExit ),
keyHandler: $.delegate( this, onKeyPress )
}).setTracking( true );
//Controls the position and orientation of the reference strip and sets the
//appropriate width and height
if( options.width && options.height ){
this.element.style.width = options.width + 'px';
this.element.style.height = options.height + 'px';
viewer.addControl(
this.element,
{anchor: $.ControlAnchor.BOTTOM_LEFT}
);
} else {
if( "horizontal" == options.scroll ){
this.element.style.width = (
viewerSize.x *
options.sizeRatio *
viewer.tileSources.length
) + ( 12 * viewer.tileSources.length ) + 'px';
this.element.style.height = (
viewerSize.y *
options.sizeRatio
) + 'px';
viewer.addControl(
this.element,
{anchor: $.ControlAnchor.BOTTOM_LEFT}
);
}else {
this.element.style.height = (
viewerSize.y *
options.sizeRatio *
viewer.tileSources.length
) + ( 12 * viewer.tileSources.length ) + 'px';
this.element.style.width = (
viewerSize.x *
options.sizeRatio
) + 'px';
viewer.addControl(
this.element,
{anchor: $.ControlAnchor.TOP_LEFT}
);
} }
}
this.panelWidth = ( viewerSize.x * this.sizeRatio ) + 8; options = $.extend( true, {
this.panelHeight = ( viewerSize.y * this.sizeRatio ) + 8; sizeRatio: $.DEFAULT_SETTINGS.referenceStripSizeRatio,
this.panels = []; position: $.DEFAULT_SETTINGS.referenceStripPosition,
scroll: $.DEFAULT_SETTINGS.referenceStripScroll,
clickTimeThreshold: $.DEFAULT_SETTINGS.clickTimeThreshold
}, options, {
//required overrides
element: this.element,
//These need to be overridden to prevent recursion since
//the navigator is a viewer and a viewer has a navigator
showNavigator: false,
mouseNavEnabled: false,
showNavigationControl: false,
showSequenceControl: false
} );
/*jshint loopfunc:true*/ $.extend( this, options );
for( i = 0; i < viewer.tileSources.length; i++ ){ //Private state properties
THIS[this.id] = {
"animating": false
};
element = $.makeNeutralElement('div'); this.minPixelRatio = this.viewer.minPixelRatio;
element.id = this.element.id + "-" + i;
element.style.width = _this.panelWidth + 'px'; style = this.element.style;
element.style.height = _this.panelHeight + 'px'; style.marginTop = '0px';
element.style.display = 'inline'; style.marginRight = '0px';
element.style.float = 'left'; //Webkit style.marginBottom = '0px';
element.style.cssFloat = 'left'; //Firefox style.marginLeft = '0px';
element.style.styleFloat = 'left'; //IE style.left = '0px';
element.style.padding = '2px'; style.bottom = '0px';
style.border = '0px';
style.background = '#000';
style.position = 'relative';
element.innerTracker = new $.MouseTracker({ $.setElementOpacity( this.element, 0.8 );
element: element,
clickTimeThreshold: this.clickTimeThreshold, this.viewer = viewer;
clickDistThreshold: this.clickDistThreshold, this.innerTracker = new $.MouseTracker( {
pressHandler: function( tracker ){ element: this.element,
tracker.dragging = $.now(); dragHandler: $.delegate( this, onStripDrag ),
}, scrollHandler: $.delegate( this, onStripScroll ),
releaseHandler: function( tracker, position, insideElementPress, insideElementRelease ){ enterHandler: $.delegate( this, onStripEnter ),
var id = tracker.element.id, exitHandler: $.delegate( this, onStripExit ),
page = Number( id.split( '-' )[ 2 ] ), keyHandler: $.delegate( this, onKeyPress )
} ).setTracking( true );
//Controls the position and orientation of the reference strip and sets the
//appropriate width and height
if ( options.width && options.height ) {
this.element.style.width = options.width + 'px';
this.element.style.height = options.height + 'px';
viewer.addControl(
this.element,
{ anchor: $.ControlAnchor.BOTTOM_LEFT }
);
} else {
if ( "horizontal" == options.scroll ) {
this.element.style.width = (
viewerSize.x *
options.sizeRatio *
viewer.tileSources.length
) + ( 12 * viewer.tileSources.length ) + 'px';
this.element.style.height = (
viewerSize.y *
options.sizeRatio
) + 'px';
viewer.addControl(
this.element,
{ anchor: $.ControlAnchor.BOTTOM_LEFT }
);
} else {
this.element.style.height = (
viewerSize.y *
options.sizeRatio *
viewer.tileSources.length
) + ( 12 * viewer.tileSources.length ) + 'px';
this.element.style.width = (
viewerSize.x *
options.sizeRatio
) + 'px';
viewer.addControl(
this.element,
{ anchor: $.ControlAnchor.TOP_LEFT }
);
}
}
this.panelWidth = ( viewerSize.x * this.sizeRatio ) + 8;
this.panelHeight = ( viewerSize.y * this.sizeRatio ) + 8;
this.panels = [];
/*jshint loopfunc:true*/
for ( i = 0; i < viewer.tileSources.length; i++ ) {
element = $.makeNeutralElement( 'div' );
element.id = this.element.id + "-" + i;
element.style.width = _this.panelWidth + 'px';
element.style.height = _this.panelHeight + 'px';
element.style.display = 'inline';
element.style.float = 'left'; //Webkit
element.style.cssFloat = 'left'; //Firefox
element.style.styleFloat = 'left'; //IE
element.style.padding = '2px';
element.innerTracker = new $.MouseTracker( {
element: element,
clickTimeThreshold: this.clickTimeThreshold,
clickDistThreshold: this.clickDistThreshold,
pressHandler: function ( tracker, eventData ) {
tracker.dragging = $.now();
},
releaseHandler: function ( tracker, eventData ) {
var id = tracker.element.id,
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;
viewer.goToPage( page ); viewer.goToPage( page );
}
} }
} } ).setTracking( true );
}).setTracking( true );
this.element.appendChild( element ); this.element.appendChild( element );
element.activePanel = false; element.activePanel = false;
this.panels.push( element ); this.panels.push( element );
} }
loadPanels( this, this.scroll == 'vertical' ? viewerSize.y : viewerSize.y, 0); loadPanels( this, this.scroll == 'vertical' ? viewerSize.y : viewerSize.y, 0 );
this.setFocus( 0 ); this.setFocus( 0 );
}; };
$.extend( $.ReferenceStrip.prototype, $.EventHandler.prototype, $.Viewer.prototype, { $.extend( $.ReferenceStrip.prototype, $.EventHandler.prototype, $.Viewer.prototype, {
setFocus: function( page ){ setFocus: function ( page ) {
var element = $.getElement( this.element.id + '-' + page ), var element = $.getElement( this.element.id + '-' + page ),
viewerSize = $.getElementSize( this.viewer.canvas ), viewerSize = $.getElementSize( this.viewer.canvas ),
scrollWidth = Number(this.element.style.width.replace('px','')), scrollWidth = Number( this.element.style.width.replace( 'px', '' ) ),
scrollHeight = Number(this.element.style.height.replace('px','')), scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ),
offsetLeft = -Number(this.element.style.marginLeft.replace('px','')), offsetLeft = -Number( this.element.style.marginLeft.replace( 'px', '' ) ),
offsetTop = -Number(this.element.style.marginTop.replace('px','')), offsetTop = -Number( this.element.style.marginTop.replace( 'px', '' ) ),
offset; offset;
if ( this.currentSelected !== element ){ if ( this.currentSelected !== element ) {
if( this.currentSelected ){ if ( this.currentSelected ) {
this.currentSelected.style.background = '#000'; this.currentSelected.style.background = '#000';
}
this.currentSelected = element;
this.currentSelected.style.background = '#999';
if( 'horizontal' == this.scroll ){
//right left
offset = (Number(page)) * ( this.panelWidth + 3 );
if( offset > offsetLeft + viewerSize.x - this.panelWidth){
offset = Math.min(offset, (scrollWidth - viewerSize.x));
this.element.style.marginLeft = -offset + 'px';
loadPanels( this, viewerSize.x, -offset );
}else if( offset < offsetLeft ){
offset = Math.max(0, offset - viewerSize.x / 2);
this.element.style.marginLeft = -offset + 'px';
loadPanels( this, viewerSize.x, -offset );
} }
}else{ this.currentSelected = element;
offset = (Number(page) ) * ( this.panelHeight + 3 ); this.currentSelected.style.background = '#999';
if( offset > offsetTop + viewerSize.y - this.panelHeight){
offset = Math.min(offset, (scrollHeight - viewerSize.y));
this.element.style.marginTop = -offset + 'px';
loadPanels( this, viewerSize.y, -offset );
}else if( offset < offsetTop ){
offset = Math.max(0, offset - viewerSize.y / 2);
this.element.style.marginTop = -offset + 'px';
loadPanels( this, viewerSize.y, -offset );
}
}
this.currentPage = page; if ( 'horizontal' == this.scroll ) {
$.getElement( element.id + '-displayregion' ).focus(); //right left
onStripEnter.call( this, this.innerTracker ); offset = ( Number( page ) ) * ( this.panelWidth + 3 );
if ( offset > offsetLeft + viewerSize.x - this.panelWidth ) {
offset = Math.min( offset, ( scrollWidth - viewerSize.x ) );
this.element.style.marginLeft = -offset + 'px';
loadPanels( this, viewerSize.x, -offset );
} else if ( offset < offsetLeft ) {
offset = Math.max( 0, offset - viewerSize.x / 2 );
this.element.style.marginLeft = -offset + 'px';
loadPanels( this, viewerSize.x, -offset );
}
} else {
offset = ( Number( page ) ) * ( this.panelHeight + 3 );
if ( offset > offsetTop + viewerSize.y - this.panelHeight ) {
offset = Math.min( offset, ( scrollHeight - viewerSize.y ) );
this.element.style.marginTop = -offset + 'px';
loadPanels( this, viewerSize.y, -offset );
} else if ( offset < offsetTop ) {
offset = Math.max( 0, offset - viewerSize.y / 2 );
this.element.style.marginTop = -offset + 'px';
loadPanels( this, viewerSize.y, -offset );
}
}
this.currentPage = page;
$.getElement( element.id + '-displayregion' ).focus();
onStripEnter.call( this, this.innerTracker, {} );
}
},
/**
* @function
* @name OpenSeadragon.ReferenceStrip.prototype.update
*/
update: function () {
if ( THIS[this.id].animating ) {
$.console.log( 'image reference strip update' );
return true;
}
return false;
} }
},
} );
/** /**
* @function * @private
* @name OpenSeadragon.ReferenceStrip.prototype.update * @inner
*/ * @function
update: function() { */
if ( THIS[ this.id ].animating ) { function onStripDrag( tracker, eventData ) {
$.console.log('image reference strip update');
return true; var offsetLeft = Number( this.element.style.marginLeft.replace( 'px', '' ) ),
offsetTop = Number( this.element.style.marginTop.replace( 'px', '' ) ),
scrollWidth = Number( this.element.style.width.replace( 'px', '' ) ),
scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ),
viewerSize = $.getElementSize( this.viewer.canvas );
this.dragging = true;
if ( this.element ) {
if ( 'horizontal' == this.scroll ) {
if ( -eventData.delta.x > 0 ) {
//forward
if ( offsetLeft > -( scrollWidth - viewerSize.x ) ) {
this.element.style.marginLeft = ( offsetLeft + ( eventData.delta.x * 2 ) ) + 'px';
loadPanels( this, viewerSize.x, offsetLeft + ( eventData.delta.x * 2 ) );
}
} else if ( -eventData.delta.x < 0 ) {
//reverse
if ( offsetLeft < 0 ) {
this.element.style.marginLeft = ( offsetLeft + ( eventData.delta.x * 2 ) ) + 'px';
loadPanels( this, viewerSize.x, offsetLeft + ( eventData.delta.x * 2 ) );
}
}
} else {
if ( -eventData.delta.y > 0 ) {
//forward
if ( offsetTop > -( scrollHeight - viewerSize.y ) ) {
this.element.style.marginTop = ( offsetTop + ( eventData.delta.y * 2 ) ) + 'px';
loadPanels( this, viewerSize.y, offsetTop + ( eventData.delta.y * 2 ) );
}
} else if ( -eventData.delta.y < 0 ) {
//reverse
if ( offsetTop < 0 ) {
this.element.style.marginTop = ( offsetTop + ( eventData.delta.y * 2 ) ) + 'px';
loadPanels( this, viewerSize.y, offsetTop + ( eventData.delta.y * 2 ) );
}
}
}
} }
return false; return false;
}
/**
* @private
* @inner
* @function
*/
function onStripScroll( tracker, eventData ) {
var offsetLeft = Number( this.element.style.marginLeft.replace( 'px', '' ) ),
offsetTop = Number( this.element.style.marginTop.replace( 'px', '' ) ),
scrollWidth = Number( this.element.style.width.replace( 'px', '' ) ),
scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ),
viewerSize = $.getElementSize( this.viewer.canvas );
if ( this.element ) {
if ( 'horizontal' == this.scroll ) {
if ( eventData.scroll > 0 ) {
//forward
if ( offsetLeft > -( scrollWidth - viewerSize.x ) ) {
this.element.style.marginLeft = ( offsetLeft - ( eventData.scroll * 60 ) ) + 'px';
loadPanels( this, viewerSize.x, offsetLeft - ( eventData.scroll * 60 ) );
}
} else if ( eventData.scroll < 0 ) {
//reverse
if ( offsetLeft < 0 ) {
this.element.style.marginLeft = ( offsetLeft - ( eventData.scroll * 60 ) ) + 'px';
loadPanels( this, viewerSize.x, offsetLeft - ( eventData.scroll * 60 ) );
}
}
} else {
if ( eventData.scroll < 0 ) {
//scroll up
if ( offsetTop > viewerSize.y - scrollHeight ) {
this.element.style.marginTop = ( offsetTop + ( eventData.scroll * 60 ) ) + 'px';
loadPanels( this, viewerSize.y, offsetTop + ( eventData.scroll * 60 ) );
}
} else if ( eventData.scroll > 0 ) {
//scroll dowm
if ( offsetTop < 0 ) {
this.element.style.marginTop = ( offsetTop + ( eventData.scroll * 60 ) ) + 'px';
loadPanels( this, viewerSize.y, offsetTop + ( eventData.scroll * 60 ) );
}
}
}
}
//cancels event
return false;
} }
});
function loadPanels( strip, viewerSize, scroll ) {
var panelSize,
/**
* @private
* @inner
* @function
*/
function onStripDrag( tracker, position, delta, shift ) {
var offsetLeft = Number(this.element.style.marginLeft.replace('px','')),
offsetTop = Number(this.element.style.marginTop.replace('px','')),
scrollWidth = Number(this.element.style.width.replace('px','')),
scrollHeight = Number(this.element.style.height.replace('px','')),
viewerSize = $.getElementSize( this.viewer.canvas );
this.dragging = true;
if ( this.element ) {
if( 'horizontal' == this.scroll ){
if ( -delta.x > 0 ) {
//forward
if( offsetLeft > -(scrollWidth - viewerSize.x)){
this.element.style.marginLeft = ( offsetLeft + (delta.x * 2) ) + 'px';
loadPanels( this, viewerSize.x, offsetLeft + (delta.x * 2) );
}
} else if ( -delta.x < 0 ) {
//reverse
if( offsetLeft < 0 ){
this.element.style.marginLeft = ( offsetLeft + (delta.x * 2) ) + 'px';
loadPanels( this, viewerSize.x, offsetLeft + (delta.x * 2) );
}
}
}else{
if ( -delta.y > 0 ) {
//forward
if( offsetTop > -(scrollHeight - viewerSize.y)){
this.element.style.marginTop = ( offsetTop + (delta.y * 2) ) + 'px';
loadPanels( this, viewerSize.y, offsetTop + (delta.y * 2) );
}
} else if ( -delta.y < 0 ) {
//reverse
if( offsetTop < 0 ){
this.element.style.marginTop = ( offsetTop + (delta.y * 2) ) + 'px';
loadPanels( this, viewerSize.y, offsetTop + (delta.y * 2) );
}
}
}
}
return false;
}
/**
* @private
* @inner
* @function
*/
function onStripScroll( tracker, position, scroll, shift ) {
var offsetLeft = Number(this.element.style.marginLeft.replace('px','')),
offsetTop = Number(this.element.style.marginTop.replace('px','')),
scrollWidth = Number(this.element.style.width.replace('px','')),
scrollHeight = Number(this.element.style.height.replace('px','')),
viewerSize = $.getElementSize( this.viewer.canvas );
if ( this.element ) {
if( 'horizontal' == this.scroll ){
if ( scroll > 0 ) {
//forward
if( offsetLeft > -(scrollWidth - viewerSize.x)){
this.element.style.marginLeft = ( offsetLeft - (scroll * 60) ) + 'px';
loadPanels( this, viewerSize.x, offsetLeft - (scroll * 60) );
}
} else if ( scroll < 0 ) {
//reverse
if( offsetLeft < 0 ){
this.element.style.marginLeft = ( offsetLeft - (scroll * 60) ) + 'px';
loadPanels( this, viewerSize.x, offsetLeft - (scroll * 60) );
}
}
}else{
if ( scroll < 0 ) {
//scroll up
if( offsetTop > viewerSize.y - scrollHeight ){
this.element.style.marginTop = ( offsetTop + (scroll * 60) ) + 'px';
loadPanels( this, viewerSize.y, offsetTop + (scroll * 60) );
}
} else if ( scroll > 0 ) {
//scroll dowm
if( offsetTop < 0 ){
this.element.style.marginTop = ( offsetTop + (scroll * 60) ) + 'px';
loadPanels( this, viewerSize.y, offsetTop + (scroll * 60) );
}
}
}
}
//cancels event
return false;
}
function loadPanels(strip, viewerSize, scroll){
var panelSize,
activePanelsStart, activePanelsStart,
activePanelsEnd, activePanelsEnd,
miniViewer, miniViewer,
style, style,
i, i,
element; element;
if( 'horizontal' == strip.scroll ){ if ( 'horizontal' == strip.scroll ) {
panelSize = strip.panelWidth; panelSize = strip.panelWidth;
}else{ } else {
panelSize = strip.panelHeight; panelSize = strip.panelHeight;
} }
activePanelsStart = Math.ceil( viewerSize / panelSize ) + 5; activePanelsStart = Math.ceil( viewerSize / panelSize ) + 5;
activePanelsEnd = Math.ceil( (Math.abs(scroll) + viewerSize ) / panelSize ) + 1; activePanelsEnd = Math.ceil( ( Math.abs( scroll ) + viewerSize ) / panelSize ) + 1;
activePanelsStart = activePanelsEnd - activePanelsStart; activePanelsStart = activePanelsEnd - activePanelsStart;
activePanelsStart = activePanelsStart < 0 ? 0 : activePanelsStart; activePanelsStart = activePanelsStart < 0 ? 0 : activePanelsStart;
for( i = activePanelsStart; i < activePanelsEnd && i < strip.panels.length; i++ ){ for ( i = activePanelsStart; i < activePanelsEnd && i < strip.panels.length; i++ ) {
element = strip.panels[ i ]; element = strip.panels[i];
if ( !element.activePanel ){ if ( !element.activePanel ) {
miniViewer = new $.Viewer( { miniViewer = new $.Viewer( {
id: element.id, id: element.id,
tileSources: [ strip.viewer.tileSources[ i ] ], tileSources: [strip.viewer.tileSources[i]],
element: element, element: element,
navigatorSizeRatio: strip.sizeRatio, navigatorSizeRatio: strip.sizeRatio,
showNavigator: false, showNavigator: false,
mouseNavEnabled: false, mouseNavEnabled: false,
showNavigationControl: false, showNavigationControl: false,
showSequenceControl: false, showSequenceControl: false,
immediateRender: true, immediateRender: true,
blendTime: 0, blendTime: 0,
animationTime: 0 animationTime: 0
} ); } );
miniViewer.displayRegion = $.makeNeutralElement( "textarea" ); miniViewer.displayRegion = $.makeNeutralElement( "textarea" );
miniViewer.displayRegion.id = element.id + '-displayregion'; miniViewer.displayRegion.id = element.id + '-displayregion';
miniViewer.displayRegion.className = 'displayregion'; miniViewer.displayRegion.className = 'displayregion';
style = miniViewer.displayRegion.style; style = miniViewer.displayRegion.style;
style.position = 'relative'; style.position = 'relative';
style.top = '0px'; style.top = '0px';
style.left = '0px'; style.left = '0px';
style.fontSize = '0px'; style.fontSize = '0px';
style.overflow = 'hidden'; style.overflow = 'hidden';
style.float = 'left'; //Webkit style.float = 'left'; //Webkit
style.cssFloat = 'left'; //Firefox style.cssFloat = 'left'; //Firefox
style.styleFloat = 'left'; //IE style.styleFloat = 'left'; //IE
style.zIndex = 999999999; style.zIndex = 999999999;
style.cursor = 'default'; style.cursor = 'default';
style.width = ( strip.panelWidth - 4 ) + 'px'; style.width = ( strip.panelWidth - 4 ) + 'px';
style.height = ( strip.panelHeight - 4 ) + 'px'; style.height = ( strip.panelHeight - 4 ) + 'px';
miniViewer.displayRegion.innerTracker = new $.MouseTracker({ miniViewer.displayRegion.innerTracker = new $.MouseTracker( {
element: miniViewer.displayRegion element: miniViewer.displayRegion
}); } );
element.getElementsByTagName('form')[ 0 ].appendChild( element.getElementsByTagName( 'form' )[0].appendChild(
miniViewer.displayRegion miniViewer.displayRegion
); );
element.activePanel = true; element.activePanel = true;
}
} }
} }
}
/** /**
* @private * @private
* @inner * @inner
* @function * @function
*/ */
function onStripEnter( tracker ) { function onStripEnter( tracker, eventData ) {
//$.setElementOpacity(tracker.element, 0.8); //$.setElementOpacity(tracker.element, 0.8);
//tracker.element.style.border = '1px solid #555'; //tracker.element.style.border = '1px solid #555';
//tracker.element.style.background = '#000'; //tracker.element.style.background = '#000';
if( 'horizontal' == this.scroll ){ if ( 'horizontal' == this.scroll ) {
//tracker.element.style.paddingTop = "0px"; //tracker.element.style.paddingTop = "0px";
tracker.element.style.marginBottom = "0px"; tracker.element.style.marginBottom = "0px";
} else { } else {
//tracker.element.style.paddingRight = "0px"; //tracker.element.style.paddingRight = "0px";
tracker.element.style.marginLeft = "0px"; tracker.element.style.marginLeft = "0px";
}
return false;
} }
return false;
}
/** /**
* @private * @private
* @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";
tracker.element.style.marginBottom = "-" + ( $.getElementSize( tracker.element ).y / 2 ) + "px"; tracker.element.style.marginBottom = "-" + ( $.getElementSize( tracker.element ).y / 2 ) + "px";
} else { } else {
//tracker.element.style.paddingRight = "10px"; //tracker.element.style.paddingRight = "10px";
tracker.element.style.marginLeft = "-" + ( $.getElementSize( tracker.element ).x / 2 )+ "px"; tracker.element.style.marginLeft = "-" + ( $.getElementSize( tracker.element ).x / 2 ) + "px";
}
return false;
} }
return false;
}
/** /**
* @private * @private
* @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;
}
} }
}
}( OpenSeadragon )); } ( OpenSeadragon ) );

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
}); });
} }