mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-22 13:16:10 +03:00
MouseTracker original events in handlers
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
parent
0bbf6bc58a
commit
b3fa8f1184
@ -175,57 +175,59 @@ $.Button = function( options ) {
|
||||
clickTimeThreshold: this.clickTimeThreshold,
|
||||
clickDistThreshold: this.clickDistThreshold,
|
||||
|
||||
enterHandler: function( tracker, position, buttonDownElement, buttonDownAny ) {
|
||||
if ( buttonDownElement ) {
|
||||
enterHandler: function( tracker, eventData ) {
|
||||
if ( eventData.buttonDownElement ) {
|
||||
inTo( _this, $.ButtonState.DOWN );
|
||||
_this.raiseEvent( "onEnter", _this );
|
||||
} else if ( !buttonDownAny ) {
|
||||
} else if ( !eventData.buttonDownAny ) {
|
||||
inTo( _this, $.ButtonState.HOVER );
|
||||
}
|
||||
},
|
||||
|
||||
focusHandler: function( tracker, position, buttonDownElement, buttonDownAny ) {
|
||||
this.enterHandler( tracker, position, buttonDownElement, buttonDownAny );
|
||||
// TODO: This didn't match handler signature in MouseTracker. Investigate!
|
||||
focusHandler: function ( tracker, eventData ) { //position, buttonDownElement, buttonDownAny
|
||||
//this.enterHandler( tracker, eventData ); //position, buttonDownElement, buttonDownAny
|
||||
_this.raiseEvent( "onFocus", _this );
|
||||
},
|
||||
|
||||
exitHandler: function( tracker, position, buttonDownElement, buttonDownAny ) {
|
||||
exitHandler: function( tracker, eventData ) {
|
||||
outTo( _this, $.ButtonState.GROUP );
|
||||
if ( buttonDownElement ) {
|
||||
if ( eventData.buttonDownElement ) {
|
||||
_this.raiseEvent( "onExit", _this );
|
||||
}
|
||||
},
|
||||
|
||||
blurHandler: function( tracker, position, buttonDownElement, buttonDownAny ) {
|
||||
this.exitHandler( tracker, position, buttonDownElement, buttonDownAny );
|
||||
// TODO: This didn't match handler signature in MouseTracker. Investigate!
|
||||
blurHandler: function ( tracker, eventData ) { //position, buttonDownElement, buttonDownAny
|
||||
//this.exitHandler( tracker, eventData ); //position, buttonDownElement, buttonDownAny
|
||||
_this.raiseEvent( "onBlur", _this );
|
||||
},
|
||||
|
||||
pressHandler: function( tracker, position ) {
|
||||
pressHandler: function ( tracker, eventData ) {
|
||||
inTo( _this, $.ButtonState.DOWN );
|
||||
_this.raiseEvent( "onPress", _this );
|
||||
},
|
||||
|
||||
releaseHandler: function( tracker, position, insideElementPress, insideElementRelease ) {
|
||||
if ( insideElementPress && insideElementRelease ) {
|
||||
releaseHandler: function( tracker, eventData ) {
|
||||
if ( eventData.insideElementPress && eventData.insideElementRelease ) {
|
||||
outTo( _this, $.ButtonState.HOVER );
|
||||
_this.raiseEvent( "onRelease", _this );
|
||||
} else if ( insideElementPress ) {
|
||||
} else if ( eventData.insideElementPress ) {
|
||||
outTo( _this, $.ButtonState.GROUP );
|
||||
} else {
|
||||
inTo( _this, $.ButtonState.HOVER );
|
||||
}
|
||||
},
|
||||
|
||||
clickHandler: function( tracker, position, quick, shift ) {
|
||||
if ( quick ) {
|
||||
clickHandler: function( tracker, eventData ) {
|
||||
if ( eventData.quick ) {
|
||||
_this.raiseEvent("onClick", _this);
|
||||
}
|
||||
},
|
||||
|
||||
keyHandler: function( tracker, key ){
|
||||
//console.log( "%s : handling key %s!", _this.tooltip, key);
|
||||
if( 13 === key ){
|
||||
keyHandler: function( tracker, eventData ){
|
||||
//console.log( "%s : handling key %s!", _this.tooltip, eventData.keyCode);
|
||||
if( 13 === eventData.keyCode ){
|
||||
_this.raiseEvent( "onClick", _this );
|
||||
_this.raiseEvent( "onRelease", _this );
|
||||
return false;
|
||||
|
||||
@ -85,29 +85,23 @@ $.ButtonGroup = function( options ) {
|
||||
element: this.element,
|
||||
clickTimeThreshold: this.clickTimeThreshold,
|
||||
clickDistThreshold: this.clickDistThreshold,
|
||||
enterHandler: function() {
|
||||
enterHandler: function ( tracker, eventData ) {
|
||||
var i;
|
||||
for ( i = 0; i < _this.buttons.length; i++ ) {
|
||||
_this.buttons[ i ].notifyGroupEnter();
|
||||
}
|
||||
},
|
||||
exitHandler: function() {
|
||||
var i,
|
||||
buttonDownElement = arguments.length > 2 ?
|
||||
arguments[ 2 ] :
|
||||
null;
|
||||
if ( !buttonDownElement ) {
|
||||
exitHandler: function ( tracker, eventData ) {
|
||||
var i;
|
||||
if ( !eventData.buttonDownElement ) {
|
||||
for ( i = 0; i < _this.buttons.length; i++ ) {
|
||||
_this.buttons[ i ].notifyGroupExit();
|
||||
}
|
||||
}
|
||||
},
|
||||
releaseHandler: function() {
|
||||
var i,
|
||||
insideElementRelease = arguments.length > 3 ?
|
||||
arguments[ 3 ] :
|
||||
null;
|
||||
if ( !insideElementRelease ) {
|
||||
releaseHandler: function ( tracker, eventData ) {
|
||||
var i;
|
||||
if ( !eventData.insideElementRelease ) {
|
||||
for ( i = 0; i < _this.buttons.length; i++ ) {
|
||||
_this.buttons[ i ].notifyGroupExit();
|
||||
}
|
||||
|
||||
@ -55,7 +55,7 @@ $.EventHandler.prototype = {
|
||||
* @function
|
||||
* @param {String} eventName - Name of event to register.
|
||||
* @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 ) {
|
||||
var events = this.events[ eventName ];
|
||||
|
||||
1061
src/mousetracker.js
1061
src/mousetracker.js
File diff suppressed because it is too large
Load Diff
@ -251,13 +251,13 @@ $.extend( $.Navigator.prototype, $.EventHandler.prototype, $.Viewer.prototype, {
|
||||
* @inner
|
||||
* @function
|
||||
*/
|
||||
function onCanvasClick( tracker, position, quick, shift ) {
|
||||
function onCanvasClick( tracker, eventData ) {
|
||||
var newBounds,
|
||||
viewerPosition,
|
||||
dimensions;
|
||||
if (! this.drag) {
|
||||
if ( this.viewer.viewport ) {
|
||||
viewerPosition = this.viewport.deltaPointsFromPixels(position);
|
||||
viewerPosition = this.viewport.deltaPointsFromPixels( eventData.position );
|
||||
dimensions = this.viewer.viewport.getBounds().getSize();
|
||||
newBounds = new $.Rect(
|
||||
viewerPosition.x - dimensions.x/2,
|
||||
@ -285,18 +285,18 @@ function onCanvasClick( tracker, position, quick, shift ) {
|
||||
* @inner
|
||||
* @function
|
||||
*/
|
||||
function onCanvasDrag( tracker, position, delta, shift ) {
|
||||
function onCanvasDrag( tracker, eventData ) {
|
||||
if ( this.viewer.viewport ) {
|
||||
this.drag = true;
|
||||
if( !this.panHorizontal ){
|
||||
delta.x = 0;
|
||||
eventData.delta.x = 0;
|
||||
}
|
||||
if( !this.panVertical ){
|
||||
delta.y = 0;
|
||||
eventData.delta.y = 0;
|
||||
}
|
||||
this.viewer.viewport.panBy(
|
||||
this.viewport.deltaPointsFromPixels(
|
||||
delta
|
||||
eventData.delta
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -308,8 +308,8 @@ function onCanvasDrag( tracker, position, delta, shift ) {
|
||||
* @inner
|
||||
* @function
|
||||
*/
|
||||
function onCanvasRelease( tracker, position, insideElementPress, insideElementRelease ) {
|
||||
if ( insideElementPress && this.viewer.viewport ) {
|
||||
function onCanvasRelease( tracker, eventData ) {//position, insideElementPress, insideElementRelease
|
||||
if ( eventData.insideElementPress && this.viewer.viewport ) {
|
||||
this.viewer.viewport.applyConstraints();
|
||||
}
|
||||
}
|
||||
|
||||
@ -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.
|
||||
* @function
|
||||
|
||||
@ -32,511 +32,511 @@
|
||||
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*/
|
||||
|
||||
(function( $ ){
|
||||
(function ( $ ) {
|
||||
|
||||
// dictionary from id to private properties
|
||||
var THIS = {};
|
||||
// dictionary from id to private properties
|
||||
var THIS = {};
|
||||
|
||||
/**
|
||||
* The CollectionDrawer is a reimplementation if the Drawer API that
|
||||
* focuses on allowing a viewport to be redefined as a collection
|
||||
* 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
|
||||
* source.
|
||||
*
|
||||
* This idea is a reexpression of the idea of dzi collections
|
||||
* which allows a clearer algorithm to reuse the tile sources already
|
||||
* supported by OpenSeadragon, in heterogenious or homogenious
|
||||
* sequences just like mixed groups already supported by the viewer
|
||||
* for the purpose of image sequnces.
|
||||
*
|
||||
* TODO: The difficult part of this feature is figuring out how to express
|
||||
* this functionality as a combination of the functionality already
|
||||
* provided by Drawer, Viewport, TileSource, and Navigator. It may
|
||||
* require better abstraction at those points in order to effeciently
|
||||
* reuse those paradigms.
|
||||
*/
|
||||
$.ReferenceStrip = function( options ){
|
||||
/**
|
||||
* The CollectionDrawer is a reimplementation if the Drawer API that
|
||||
* focuses on allowing a viewport to be redefined as a collection
|
||||
* 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
|
||||
* source.
|
||||
*
|
||||
* This idea is a reexpression of the idea of dzi collections
|
||||
* which allows a clearer algorithm to reuse the tile sources already
|
||||
* supported by OpenSeadragon, in heterogenious or homogenious
|
||||
* sequences just like mixed groups already supported by the viewer
|
||||
* for the purpose of image sequnces.
|
||||
*
|
||||
* TODO: The difficult part of this feature is figuring out how to express
|
||||
* this functionality as a combination of the functionality already
|
||||
* provided by Drawer, Viewport, TileSource, and Navigator. It may
|
||||
* require better abstraction at those points in order to effeciently
|
||||
* reuse those paradigms.
|
||||
*/
|
||||
$.ReferenceStrip = function ( options ) {
|
||||
|
||||
var _this = this,
|
||||
viewer = options.viewer,
|
||||
viewerSize = $.getElementSize( viewer.element ),
|
||||
var _this = this,
|
||||
viewer = options.viewer,
|
||||
viewerSize = $.getElementSize( viewer.element ),
|
||||
element,
|
||||
style,
|
||||
i;
|
||||
|
||||
//We may need to create a new element and id if they did not
|
||||
//provide the id for the existing element
|
||||
if( !options.id ){
|
||||
options.id = 'referencestrip-' + $.now();
|
||||
this.element = $.makeNeutralElement( "div" );
|
||||
this.element.id = options.id;
|
||||
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}
|
||||
);
|
||||
|
||||
//We may need to create a new element and id if they did not
|
||||
//provide the id for the existing element
|
||||
if ( !options.id ) {
|
||||
options.id = 'referencestrip-' + $.now();
|
||||
this.element = $.makeNeutralElement( "div" );
|
||||
this.element.id = options.id;
|
||||
this.element.className = 'referencestrip';
|
||||
}
|
||||
}
|
||||
|
||||
this.panelWidth = ( viewerSize.x * this.sizeRatio ) + 8;
|
||||
this.panelHeight = ( viewerSize.y * this.sizeRatio ) + 8;
|
||||
this.panels = [];
|
||||
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
|
||||
} );
|
||||
|
||||
/*jshint loopfunc:true*/
|
||||
for( i = 0; i < viewer.tileSources.length; i++ ){
|
||||
$.extend( this, options );
|
||||
//Private state properties
|
||||
THIS[this.id] = {
|
||||
"animating": false
|
||||
};
|
||||
|
||||
element = $.makeNeutralElement('div');
|
||||
element.id = this.element.id + "-" + i;
|
||||
this.minPixelRatio = this.viewer.minPixelRatio;
|
||||
|
||||
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';
|
||||
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';
|
||||
|
||||
element.innerTracker = new $.MouseTracker({
|
||||
element: element,
|
||||
clickTimeThreshold: this.clickTimeThreshold,
|
||||
clickDistThreshold: this.clickDistThreshold,
|
||||
pressHandler: function( tracker ){
|
||||
tracker.dragging = $.now();
|
||||
},
|
||||
releaseHandler: function( tracker, position, insideElementPress, insideElementRelease ){
|
||||
var id = tracker.element.id,
|
||||
page = Number( id.split( '-' )[ 2 ] ),
|
||||
$.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;
|
||||
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();
|
||||
|
||||
if ( insideElementPress &&
|
||||
insideElementRelease &&
|
||||
if ( eventData.insideElementPress &&
|
||||
eventData.insideElementRelease &&
|
||||
tracker.dragging &&
|
||||
( now - tracker.dragging ) < tracker.clickTimeThreshold ){
|
||||
tracker.dragging = null;
|
||||
viewer.goToPage( page );
|
||||
( now - tracker.dragging ) < tracker.clickTimeThreshold ) {
|
||||
tracker.dragging = null;
|
||||
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);
|
||||
this.setFocus( 0 );
|
||||
}
|
||||
loadPanels( this, this.scroll == 'vertical' ? viewerSize.y : viewerSize.y, 0 );
|
||||
this.setFocus( 0 );
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
$.extend( $.ReferenceStrip.prototype, $.EventHandler.prototype, $.Viewer.prototype, {
|
||||
$.extend( $.ReferenceStrip.prototype, $.EventHandler.prototype, $.Viewer.prototype, {
|
||||
|
||||
setFocus: function( page ){
|
||||
var element = $.getElement( this.element.id + '-' + page ),
|
||||
setFocus: function ( page ) {
|
||||
var element = $.getElement( this.element.id + '-' + page ),
|
||||
viewerSize = $.getElementSize( this.viewer.canvas ),
|
||||
scrollWidth = Number(this.element.style.width.replace('px','')),
|
||||
scrollHeight = Number(this.element.style.height.replace('px','')),
|
||||
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', '' ) ),
|
||||
offsetLeft = -Number( this.element.style.marginLeft.replace( 'px', '' ) ),
|
||||
offsetTop = -Number( this.element.style.marginTop.replace( 'px', '' ) ),
|
||||
offset;
|
||||
|
||||
if ( this.currentSelected !== element ){
|
||||
if( this.currentSelected ){
|
||||
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 );
|
||||
if ( this.currentSelected !== element ) {
|
||||
if ( this.currentSelected ) {
|
||||
this.currentSelected.style.background = '#000';
|
||||
}
|
||||
}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.currentSelected = element;
|
||||
this.currentSelected.style.background = '#999';
|
||||
|
||||
this.currentPage = page;
|
||||
$.getElement( element.id + '-displayregion' ).focus();
|
||||
onStripEnter.call( this, this.innerTracker );
|
||||
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 {
|
||||
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
|
||||
* @name OpenSeadragon.ReferenceStrip.prototype.update
|
||||
*/
|
||||
update: function() {
|
||||
if ( THIS[ this.id ].animating ) {
|
||||
$.console.log('image reference strip update');
|
||||
return true;
|
||||
* @private
|
||||
* @inner
|
||||
* @function
|
||||
*/
|
||||
function onStripDrag( 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 );
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @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;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @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,
|
||||
function loadPanels( strip, viewerSize, scroll ) {
|
||||
var panelSize,
|
||||
activePanelsStart,
|
||||
activePanelsEnd,
|
||||
miniViewer,
|
||||
style,
|
||||
i,
|
||||
element;
|
||||
if( 'horizontal' == strip.scroll ){
|
||||
panelSize = strip.panelWidth;
|
||||
}else{
|
||||
panelSize = strip.panelHeight;
|
||||
}
|
||||
activePanelsStart = Math.ceil( viewerSize / panelSize ) + 5;
|
||||
activePanelsEnd = Math.ceil( (Math.abs(scroll) + viewerSize ) / panelSize ) + 1;
|
||||
activePanelsStart = activePanelsEnd - activePanelsStart;
|
||||
activePanelsStart = activePanelsStart < 0 ? 0 : activePanelsStart;
|
||||
if ( 'horizontal' == strip.scroll ) {
|
||||
panelSize = strip.panelWidth;
|
||||
} else {
|
||||
panelSize = strip.panelHeight;
|
||||
}
|
||||
activePanelsStart = Math.ceil( viewerSize / panelSize ) + 5;
|
||||
activePanelsEnd = Math.ceil( ( Math.abs( scroll ) + viewerSize ) / panelSize ) + 1;
|
||||
activePanelsStart = activePanelsEnd - activePanelsStart;
|
||||
activePanelsStart = activePanelsStart < 0 ? 0 : activePanelsStart;
|
||||
|
||||
for( i = activePanelsStart; i < activePanelsEnd && i < strip.panels.length; i++ ){
|
||||
element = strip.panels[ i ];
|
||||
if ( !element.activePanel ){
|
||||
miniViewer = new $.Viewer( {
|
||||
id: element.id,
|
||||
tileSources: [ strip.viewer.tileSources[ i ] ],
|
||||
element: element,
|
||||
navigatorSizeRatio: strip.sizeRatio,
|
||||
showNavigator: false,
|
||||
mouseNavEnabled: false,
|
||||
showNavigationControl: false,
|
||||
showSequenceControl: false,
|
||||
immediateRender: true,
|
||||
blendTime: 0,
|
||||
animationTime: 0
|
||||
} );
|
||||
for ( i = activePanelsStart; i < activePanelsEnd && i < strip.panels.length; i++ ) {
|
||||
element = strip.panels[i];
|
||||
if ( !element.activePanel ) {
|
||||
miniViewer = new $.Viewer( {
|
||||
id: element.id,
|
||||
tileSources: [strip.viewer.tileSources[i]],
|
||||
element: element,
|
||||
navigatorSizeRatio: strip.sizeRatio,
|
||||
showNavigator: false,
|
||||
mouseNavEnabled: false,
|
||||
showNavigationControl: false,
|
||||
showSequenceControl: false,
|
||||
immediateRender: true,
|
||||
blendTime: 0,
|
||||
animationTime: 0
|
||||
} );
|
||||
|
||||
miniViewer.displayRegion = $.makeNeutralElement( "textarea" );
|
||||
miniViewer.displayRegion.id = element.id + '-displayregion';
|
||||
miniViewer.displayRegion.className = 'displayregion';
|
||||
miniViewer.displayRegion = $.makeNeutralElement( "textarea" );
|
||||
miniViewer.displayRegion.id = element.id + '-displayregion';
|
||||
miniViewer.displayRegion.className = 'displayregion';
|
||||
|
||||
style = miniViewer.displayRegion.style;
|
||||
style.position = 'relative';
|
||||
style.top = '0px';
|
||||
style.left = '0px';
|
||||
style.fontSize = '0px';
|
||||
style.overflow = 'hidden';
|
||||
style.float = 'left'; //Webkit
|
||||
style.cssFloat = 'left'; //Firefox
|
||||
style.styleFloat = 'left'; //IE
|
||||
style.zIndex = 999999999;
|
||||
style.cursor = 'default';
|
||||
style.width = ( strip.panelWidth - 4 ) + 'px';
|
||||
style.height = ( strip.panelHeight - 4 ) + 'px';
|
||||
style = miniViewer.displayRegion.style;
|
||||
style.position = 'relative';
|
||||
style.top = '0px';
|
||||
style.left = '0px';
|
||||
style.fontSize = '0px';
|
||||
style.overflow = 'hidden';
|
||||
style.float = 'left'; //Webkit
|
||||
style.cssFloat = 'left'; //Firefox
|
||||
style.styleFloat = 'left'; //IE
|
||||
style.zIndex = 999999999;
|
||||
style.cursor = 'default';
|
||||
style.width = ( strip.panelWidth - 4 ) + 'px';
|
||||
style.height = ( strip.panelHeight - 4 ) + 'px';
|
||||
|
||||
miniViewer.displayRegion.innerTracker = new $.MouseTracker({
|
||||
element: miniViewer.displayRegion
|
||||
});
|
||||
miniViewer.displayRegion.innerTracker = new $.MouseTracker( {
|
||||
element: miniViewer.displayRegion
|
||||
} );
|
||||
|
||||
element.getElementsByTagName('form')[ 0 ].appendChild(
|
||||
element.getElementsByTagName( 'form' )[0].appendChild(
|
||||
miniViewer.displayRegion
|
||||
);
|
||||
|
||||
element.activePanel = true;
|
||||
element.activePanel = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @inner
|
||||
* @function
|
||||
*/
|
||||
function onStripEnter( tracker ) {
|
||||
/**
|
||||
* @private
|
||||
* @inner
|
||||
* @function
|
||||
*/
|
||||
function onStripEnter( tracker, eventData ) {
|
||||
|
||||
//$.setElementOpacity(tracker.element, 0.8);
|
||||
//$.setElementOpacity(tracker.element, 0.8);
|
||||
|
||||
//tracker.element.style.border = '1px solid #555';
|
||||
//tracker.element.style.background = '#000';
|
||||
//tracker.element.style.border = '1px solid #555';
|
||||
//tracker.element.style.background = '#000';
|
||||
|
||||
if( 'horizontal' == this.scroll ){
|
||||
if ( 'horizontal' == this.scroll ) {
|
||||
|
||||
//tracker.element.style.paddingTop = "0px";
|
||||
tracker.element.style.marginBottom = "0px";
|
||||
//tracker.element.style.paddingTop = "0px";
|
||||
tracker.element.style.marginBottom = "0px";
|
||||
|
||||
} else {
|
||||
} else {
|
||||
|
||||
//tracker.element.style.paddingRight = "0px";
|
||||
tracker.element.style.marginLeft = "0px";
|
||||
//tracker.element.style.paddingRight = "0px";
|
||||
tracker.element.style.marginLeft = "0px";
|
||||
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @inner
|
||||
* @function
|
||||
*/
|
||||
function onStripExit( tracker ) {
|
||||
if ( 'horizontal' == this.scroll ) {
|
||||
/**
|
||||
* @private
|
||||
* @inner
|
||||
* @function
|
||||
*/
|
||||
function onStripExit( tracker, eventData ) {
|
||||
if ( 'horizontal' == this.scroll ) {
|
||||
|
||||
//tracker.element.style.paddingTop = "10px";
|
||||
tracker.element.style.marginBottom = "-" + ( $.getElementSize( tracker.element ).y / 2 ) + "px";
|
||||
//tracker.element.style.paddingTop = "10px";
|
||||
tracker.element.style.marginBottom = "-" + ( $.getElementSize( tracker.element ).y / 2 ) + "px";
|
||||
|
||||
} else {
|
||||
} else {
|
||||
|
||||
//tracker.element.style.paddingRight = "10px";
|
||||
tracker.element.style.marginLeft = "-" + ( $.getElementSize( tracker.element ).x / 2 )+ "px";
|
||||
//tracker.element.style.paddingRight = "10px";
|
||||
tracker.element.style.marginLeft = "-" + ( $.getElementSize( tracker.element ).x / 2 ) + "px";
|
||||
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @inner
|
||||
* @function
|
||||
*/
|
||||
function onKeyPress( tracker, keyCode, shiftKey ){
|
||||
//console.log( keyCode );
|
||||
/**
|
||||
* @private
|
||||
* @inner
|
||||
* @function
|
||||
*/
|
||||
function onKeyPress( tracker, eventData ) {
|
||||
//console.log( eventData.keyCode );
|
||||
|
||||
switch( keyCode ){
|
||||
case 61://=|+
|
||||
onStripScroll.call(this, this.tracker, null, 1, null);
|
||||
return false;
|
||||
case 45://-|_
|
||||
onStripScroll.call(this, this.tracker, null, -1, null);
|
||||
return false;
|
||||
case 48://0|)
|
||||
case 119://w
|
||||
case 87://W
|
||||
case 38://up arrow
|
||||
onStripScroll.call(this, this.tracker, null, 1, null);
|
||||
return false;
|
||||
case 115://s
|
||||
case 83://S
|
||||
case 40://down arrow
|
||||
onStripScroll.call(this, this.tracker, null, -1, null);
|
||||
return false;
|
||||
case 97://a
|
||||
case 37://left arrow
|
||||
onStripScroll.call(this, this.tracker, null, -1, null);
|
||||
return false;
|
||||
case 100://d
|
||||
case 39://right arrow
|
||||
onStripScroll.call(this, this.tracker, null, 1, null);
|
||||
return false;
|
||||
default:
|
||||
//console.log( 'navigator keycode %s', keyCode );
|
||||
return true;
|
||||
switch ( eventData.keyCode ) {
|
||||
case 61: //=|+
|
||||
onStripScroll.call( this, this.tracker, { position: null, scroll: 1, shift: null } );
|
||||
return false;
|
||||
case 45: //-|_
|
||||
onStripScroll.call( this, this.tracker, { position: null, scroll: -1, shift: null } );
|
||||
return false;
|
||||
case 48: //0|)
|
||||
case 119: //w
|
||||
case 87: //W
|
||||
case 38: //up arrow
|
||||
onStripScroll.call( this, this.tracker, { position: null, scroll: 1, shift: null } );
|
||||
return false;
|
||||
case 115: //s
|
||||
case 83: //S
|
||||
case 40: //down arrow
|
||||
onStripScroll.call( this, this.tracker, { position: null, scroll: -1, shift: null } );
|
||||
return false;
|
||||
case 97: //a
|
||||
case 37: //left arrow
|
||||
onStripScroll.call( this, this.tracker, { position: null, scroll: -1, shift: null } );
|
||||
return false;
|
||||
case 100: //d
|
||||
case 39: //right arrow
|
||||
onStripScroll.call( this, this.tracker, { position: null, scroll: 1, shift: null } );
|
||||
return false;
|
||||
default:
|
||||
//console.log( 'navigator keycode %s', eventData.keyCode );
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}( OpenSeadragon ));
|
||||
} ( OpenSeadragon ) );
|
||||
|
||||
@ -265,8 +265,8 @@ $.Viewer = function( options ) {
|
||||
window.scrollTo( 0, point.y );
|
||||
},
|
||||
|
||||
keyHandler: function(tracker, keyCode, shiftKey){
|
||||
switch( keyCode ){
|
||||
keyHandler: function( tracker, eventData ){
|
||||
switch( eventData.keyCode ){
|
||||
case 61://=|+
|
||||
_this.viewport.zoomBy(1.1);
|
||||
_this.viewport.applyConstraints();
|
||||
@ -282,7 +282,7 @@ $.Viewer = function( options ) {
|
||||
case 119://w
|
||||
case 87://W
|
||||
case 38://up arrow
|
||||
if (shiftKey) {
|
||||
if ( eventData.shift ) {
|
||||
_this.viewport.zoomBy(1.1);
|
||||
} else {
|
||||
_this.viewport.panBy(new $.Point(0, -0.05));
|
||||
@ -292,7 +292,7 @@ $.Viewer = function( options ) {
|
||||
case 115://s
|
||||
case 83://S
|
||||
case 40://down arrow
|
||||
if (shiftKey) {
|
||||
if ( eventData.shift ) {
|
||||
_this.viewport.zoomBy(0.9);
|
||||
} else {
|
||||
_this.viewport.panBy(new $.Point(0, 0.05));
|
||||
@ -310,7 +310,7 @@ $.Viewer = function( options ) {
|
||||
_this.viewport.applyConstraints();
|
||||
return false;
|
||||
default:
|
||||
//console.log( 'navigator keycode %s', keyCode );
|
||||
//console.log( 'navigator keycode %s', eventData.keyCode );
|
||||
return true;
|
||||
}
|
||||
}
|
||||
@ -1426,37 +1426,37 @@ function onBlur(){
|
||||
|
||||
}
|
||||
|
||||
function onCanvasClick( tracker, position, quick, shift ) {
|
||||
function onCanvasClick( tracker, eventData ) {
|
||||
var zoomPerClick,
|
||||
factor;
|
||||
if ( this.viewport && quick ) { // ignore clicks where mouse moved
|
||||
if ( this.viewport && eventData.quick ) { // ignore clicks where mouse moved
|
||||
zoomPerClick = this.zoomPerClick;
|
||||
factor = shift ? 1.0 / zoomPerClick : zoomPerClick;
|
||||
factor = eventData.shift ? 1.0 / zoomPerClick : zoomPerClick;
|
||||
this.viewport.zoomBy(
|
||||
factor,
|
||||
this.viewport.pointFromPixel( position, true )
|
||||
this.viewport.pointFromPixel( eventData.position, true )
|
||||
);
|
||||
this.viewport.applyConstraints();
|
||||
}
|
||||
this.raiseEvent( 'canvas-click', {
|
||||
tracker: tracker,
|
||||
position: position,
|
||||
quick: quick,
|
||||
shift: shift
|
||||
position: eventData.position,
|
||||
quick: eventData.quick,
|
||||
shift: eventData.shift
|
||||
});
|
||||
}
|
||||
|
||||
function onCanvasDrag( tracker, position, delta, shift ) {
|
||||
function onCanvasDrag( tracker, eventData ) {
|
||||
if ( this.viewport ) {
|
||||
if( !this.panHorizontal ){
|
||||
delta.x = 0;
|
||||
eventData.delta.x = 0;
|
||||
}
|
||||
if( !this.panVertical ){
|
||||
delta.y = 0;
|
||||
eventData.delta.y = 0;
|
||||
}
|
||||
this.viewport.panBy(
|
||||
this.viewport.deltaPointsFromPixels(
|
||||
delta.negate()
|
||||
eventData.delta.negate()
|
||||
)
|
||||
);
|
||||
if( this.constrainDuringPan ){
|
||||
@ -1465,46 +1465,46 @@ function onCanvasDrag( tracker, position, delta, shift ) {
|
||||
}
|
||||
this.raiseEvent( 'canvas-drag', {
|
||||
tracker: tracker,
|
||||
position: position,
|
||||
delta: delta,
|
||||
shift: shift
|
||||
position: eventData.position,
|
||||
delta: eventData.delta,
|
||||
shift: eventData.shift
|
||||
});
|
||||
}
|
||||
|
||||
function onCanvasRelease( tracker, position, insideElementPress, insideElementRelease ) {
|
||||
if ( insideElementPress && this.viewport ) {
|
||||
function onCanvasRelease( tracker, eventData ) {
|
||||
if ( eventData.insideElementPress && this.viewport ) {
|
||||
this.viewport.applyConstraints();
|
||||
}
|
||||
this.raiseEvent( 'canvas-release', {
|
||||
tracker: tracker,
|
||||
position: position,
|
||||
insideElementPress: insideElementPress,
|
||||
insideElementRelease: insideElementRelease
|
||||
position: eventData.position,
|
||||
insideElementPress: eventData.insideElementPress,
|
||||
insideElementRelease: eventData.insideElementRelease
|
||||
});
|
||||
}
|
||||
|
||||
function onCanvasScroll( tracker, position, scroll, shift ) {
|
||||
function onCanvasScroll( tracker, eventData ) {
|
||||
var factor;
|
||||
if ( this.viewport ) {
|
||||
factor = Math.pow( this.zoomPerScroll, scroll );
|
||||
factor = Math.pow( this.zoomPerScroll, eventData.scroll );
|
||||
this.viewport.zoomBy(
|
||||
factor,
|
||||
this.viewport.pointFromPixel( position, true )
|
||||
this.viewport.pointFromPixel( eventData.position, true )
|
||||
);
|
||||
this.viewport.applyConstraints();
|
||||
}
|
||||
this.raiseEvent( 'canvas-scroll', {
|
||||
tracker: tracker,
|
||||
position: position,
|
||||
scroll: scroll,
|
||||
shift: shift
|
||||
position: eventData.position,
|
||||
scroll: eventData.scroll,
|
||||
shift: eventData.shift
|
||||
});
|
||||
//cancels event
|
||||
return false;
|
||||
}
|
||||
|
||||
function onContainerExit( tracker, position, buttonDownElement, buttonDownAny ) {
|
||||
if ( !buttonDownElement ) {
|
||||
function onContainerExit( tracker, eventData ) {
|
||||
if ( !eventData.buttonDownElement ) {
|
||||
THIS[ this.hash ].mouseInside = false;
|
||||
if ( !THIS[ this.hash ].animating ) {
|
||||
beginControlsAutoHide( this );
|
||||
@ -1512,14 +1512,14 @@ function onContainerExit( tracker, position, buttonDownElement, buttonDownAny )
|
||||
}
|
||||
this.raiseEvent( 'container-exit', {
|
||||
tracker: tracker,
|
||||
position: position,
|
||||
buttonDownElement: buttonDownElement,
|
||||
buttonDownAny: buttonDownAny
|
||||
position: eventData.position,
|
||||
buttonDownElement: eventData.buttonDownElement,
|
||||
buttonDownAny: eventData.buttonDownAny
|
||||
});
|
||||
}
|
||||
|
||||
function onContainerRelease( tracker, position, insideElementPress, insideElementRelease ) {
|
||||
if ( !insideElementRelease ) {
|
||||
function onContainerRelease( tracker, eventData ) {
|
||||
if ( !eventData.insideElementRelease ) {
|
||||
THIS[ this.hash ].mouseInside = false;
|
||||
if ( !THIS[ this.hash ].animating ) {
|
||||
beginControlsAutoHide( this );
|
||||
@ -1527,20 +1527,20 @@ function onContainerRelease( tracker, position, insideElementPress, insideElemen
|
||||
}
|
||||
this.raiseEvent( 'container-release', {
|
||||
tracker: tracker,
|
||||
position: position,
|
||||
insideElementPress: insideElementPress,
|
||||
insideElementRelease: insideElementRelease
|
||||
position: eventData.position,
|
||||
insideElementPress: eventData.insideElementPress,
|
||||
insideElementRelease: eventData.insideElementRelease
|
||||
});
|
||||
}
|
||||
|
||||
function onContainerEnter( tracker, position, buttonDownElement, buttonDownAny ) {
|
||||
function onContainerEnter( tracker, eventData ) {
|
||||
THIS[ this.hash ].mouseInside = true;
|
||||
abortControlsAutoHide( this );
|
||||
this.raiseEvent( 'container-enter', {
|
||||
tracker: tracker,
|
||||
position: position,
|
||||
buttonDownElement: buttonDownElement,
|
||||
buttonDownAny: buttonDownAny
|
||||
position: eventData.position,
|
||||
buttonDownElement: eventData.buttonDownElement,
|
||||
buttonDownAny: eventData.buttonDownAny
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user