mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2025-01-20 09:41:45 +03:00
Code Issues Projects Releases Wiki Activity

MouseTracker Original Events in handlers

Browse Source 
Comment & Formatting fixes
This commit is contained in:
Mark Salsbery 2013-09-06 10:43:39 -07:00
parent b3fa8f1184
commit 56f5b9fb74
4 changed files with 854 additions and 862 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/button.js
View File

@ -184,9 +184,8 @@ $.Button = function( options ) {
} }
}, },
// TODO: This didn't match handler signature in MouseTracker. Investigate! focusHandler: function ( tracker, eventData ) {
focusHandler: function ( tracker, eventData ) { //position, buttonDownElement, buttonDownAny this.enterHandler( tracker, eventData );
//this.enterHandler( tracker, eventData ); //position, buttonDownElement, buttonDownAny
_this.raiseEvent( "onFocus", _this ); _this.raiseEvent( "onFocus", _this );
}, },
@ -197,9 +196,8 @@ $.Button = function( options ) {
} }
}, },
// TODO: This didn't match handler signature in MouseTracker. Investigate! blurHandler: function ( tracker, eventData ) {
blurHandler: function ( tracker, eventData ) { //position, buttonDownElement, buttonDownAny this.exitHandler( tracker, eventData );
//this.exitHandler( tracker, eventData ); //position, buttonDownElement, buttonDownAny
_this.raiseEvent( "onBlur", _this ); _this.raiseEvent( "onBlur", _this );
}, },

782
src/mousetracker.js
View File

File diff suppressed because it is too large Load Diff

6
src/openseadragon.js
View File

@ -705,7 +705,6 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
* @name OpenSeadragon.getElementOffset * @name OpenSeadragon.getElementOffset
* @param {Element|String} element - the element we want the position for. * @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. * @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 ) { getElementOffset: function( element ) {
var doc = element && element.ownerDocument, var doc = element && element.ownerDocument,
@ -719,11 +718,6 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
docElement = doc.documentElement; 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 ) { if ( typeof element.getBoundingClientRect !== typeof undefined ) {
boundingRect = element.getBoundingClientRect(); boundingRect = element.getBoundingClientRect();
} }

918
src/referencestrip.js
View File

@ -34,508 +34,508 @@
(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, { options = $.extend( true, {
sizeRatio: $.DEFAULT_SETTINGS.referenceStripSizeRatio, sizeRatio: $.DEFAULT_SETTINGS.referenceStripSizeRatio,
position: $.DEFAULT_SETTINGS.referenceStripPosition, position: $.DEFAULT_SETTINGS.referenceStripPosition,
scroll: $.DEFAULT_SETTINGS.referenceStripScroll, scroll: $.DEFAULT_SETTINGS.referenceStripScroll,
clickTimeThreshold: $.DEFAULT_SETTINGS.clickTimeThreshold clickTimeThreshold: $.DEFAULT_SETTINGS.clickTimeThreshold
}, options, { }, options, {
//required overrides //required overrides
element: this.element, element: this.element,
//These need to be overridden to prevent recursion since //These need to be overridden to prevent recursion since
//the navigator is a viewer and a viewer has a navigator //the navigator is a viewer and a viewer has a navigator
showNavigator: false, showNavigator: false,
mouseNavEnabled: false, mouseNavEnabled: false,
showNavigationControl: false, showNavigationControl: false,
showSequenceControl: false showSequenceControl: false
} ); } );
$.extend( this, options ); $.extend( this, options );
//Private state properties //Private state properties
THIS[this.id] = { THIS[this.id] = {
"animating": false "animating": false
}; };
this.minPixelRatio = this.viewer.minPixelRatio; this.minPixelRatio = this.viewer.minPixelRatio;
style = this.element.style; style = this.element.style;
style.marginTop = '0px'; style.marginTop = '0px';
style.marginRight = '0px'; style.marginRight = '0px';
style.marginBottom = '0px'; style.marginBottom = '0px';
style.marginLeft = '0px'; style.marginLeft = '0px';
style.left = '0px'; style.left = '0px';
style.bottom = '0px'; style.bottom = '0px';
style.border = '0px'; style.border = '0px';
style.background = '#000'; style.background = '#000';
style.position = 'relative'; style.position = 'relative';
$.setElementOpacity( this.element, 0.8 ); $.setElementOpacity( this.element, 0.8 );
this.viewer = viewer; this.viewer = viewer;
this.innerTracker = new $.MouseTracker( { this.innerTracker = new $.MouseTracker( {
element: this.element, element: this.element,
dragHandler: $.delegate( this, onStripDrag ), dragHandler: $.delegate( this, onStripDrag ),
scrollHandler: $.delegate( this, onStripScroll ), scrollHandler: $.delegate( this, onStripScroll ),
enterHandler: $.delegate( this, onStripEnter ), enterHandler: $.delegate( this, onStripEnter ),
exitHandler: $.delegate( this, onStripExit ), exitHandler: $.delegate( this, onStripExit ),
keyHandler: $.delegate( this, onKeyPress ) keyHandler: $.delegate( this, onKeyPress )
} ).setTracking( true ); } ).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';
//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( viewer.addControl(
this.element, this.element,
{ anchor: $.ControlAnchor.BOTTOM_LEFT } { anchor: $.ControlAnchor.BOTTOM_LEFT }
); );
} else { } else {
if ( "horizontal" == options.scroll ) { this.element.style.height = (
this.element.style.width = ( viewerSize.y *
viewerSize.x * options.sizeRatio *
options.sizeRatio * viewer.tileSources.length
viewer.tileSources.length ) + ( 12 * viewer.tileSources.length ) + 'px';
) + ( 12 * viewer.tileSources.length ) + 'px';
this.element.style.height = ( this.element.style.width = (
viewerSize.y * viewerSize.x *
options.sizeRatio options.sizeRatio
) + 'px'; ) + 'px';
viewer.addControl( viewer.addControl(
this.element, this.element,
{ anchor: $.ControlAnchor.BOTTOM_LEFT } { 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 ( eventData.insideElementPress &&
eventData.insideElementRelease &&
tracker.dragging &&
( now - tracker.dragging ) < tracker.clickTimeThreshold ) {
tracker.dragging = null;
viewer.goToPage( page );
}
}
} ).setTracking( true );
this.element.appendChild( element );
element.activePanel = false;
this.panels.push( element );
}
loadPanels( this, this.scroll == 'vertical' ? viewerSize.y : viewerSize.y, 0 );
this.setFocus( 0 );
};
$.extend( $.ReferenceStrip.prototype, $.EventHandler.prototype, $.Viewer.prototype, {
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', '' ) ),
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 );
}
} else { } else {
this.element.style.height = ( offset = ( Number( page ) ) * ( this.panelHeight + 3 );
viewerSize.y * if ( offset > offsetTop + viewerSize.y - this.panelHeight ) {
options.sizeRatio * offset = Math.min( offset, ( scrollHeight - viewerSize.y ) );
viewer.tileSources.length this.element.style.marginTop = -offset + 'px';
) + ( 12 * viewer.tileSources.length ) + '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.element.style.width = ( this.currentPage = page;
viewerSize.x * $.getElement( element.id + '-displayregion' ).focus();
options.sizeRatio onStripEnter.call( this, this.innerTracker, {} );
) + 'px'; }
},
/**
* @function
* @name OpenSeadragon.ReferenceStrip.prototype.update
*/
update: function () {
if ( THIS[this.id].animating ) {
$.console.log( 'image reference strip update' );
return true;
}
return false;
}
viewer.addControl( } );
this.element,
{ anchor: $.ControlAnchor.TOP_LEFT }
);
/**
* @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;
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'; * @private
element.style.display = 'inline'; * @inner
element.style.float = 'left'; //Webkit * @function
element.style.cssFloat = 'left'; //Firefox */
element.style.styleFloat = 'left'; //IE function onStripScroll( tracker, eventData ) {
element.style.padding = '2px'; 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;
}
element.innerTracker = new $.MouseTracker( {
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;
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, element: element,
clickTimeThreshold: this.clickTimeThreshold, navigatorSizeRatio: strip.sizeRatio,
clickDistThreshold: this.clickDistThreshold, showNavigator: false,
pressHandler: function ( tracker, eventData ) { mouseNavEnabled: false,
tracker.dragging = $.now(); showNavigationControl: false,
}, showSequenceControl: false,
releaseHandler: function ( tracker, eventData ) { immediateRender: true,
var id = tracker.element.id, blendTime: 0,
page = Number( id.split( '-' )[2] ), animationTime: 0
now = $.now(); } );
if ( eventData.insideElementPress && miniViewer.displayRegion = $.makeNeutralElement( "textarea" );
eventData.insideElementRelease && miniViewer.displayRegion.id = element.id + '-displayregion';
tracker.dragging && miniViewer.displayRegion.className = 'displayregion';
( now - tracker.dragging ) < tracker.clickTimeThreshold ) {
tracker.dragging = null;
viewer.goToPage( page );
}
}
} ).setTracking( true );
this.element.appendChild( element ); 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';
element.activePanel = false; miniViewer.displayRegion.innerTracker = new $.MouseTracker( {
element: miniViewer.displayRegion
} );
this.panels.push( element ); element.getElementsByTagName( 'form' )[0].appendChild(
miniViewer.displayRegion
);
element.activePanel = true;
} }
loadPanels( this, this.scroll == 'vertical' ? viewerSize.y : viewerSize.y, 0 ); }
this.setFocus( 0 ); }
};
$.extend( $.ReferenceStrip.prototype, $.EventHandler.prototype, $.Viewer.prototype, { /**
* @private
* @inner
* @function
*/
function onStripEnter( tracker, eventData ) {
setFocus: function ( page ) { //$.setElementOpacity(tracker.element, 0.8);
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', '' ) ),
offset;
if ( this.currentSelected !== element ) { //tracker.element.style.border = '1px solid #555';
if ( this.currentSelected ) { //tracker.element.style.background = '#000';
this.currentSelected.style.background = '#000';
}
this.currentSelected = element;
this.currentSelected.style.background = '#999';
if ( 'horizontal' == this.scroll ) { 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; //tracker.element.style.paddingTop = "0px";
$.getElement( element.id + '-displayregion' ).focus(); tracker.element.style.marginBottom = "0px";
onStripEnter.call( this, this.innerTracker, {} );
} } else {
},
/** //tracker.element.style.paddingRight = "0px";
* @function tracker.element.style.marginLeft = "0px";
* @name OpenSeadragon.ReferenceStrip.prototype.update
*/ }
update: function () { return false;
if ( THIS[this.id].animating ) { }
$.console.log( 'image reference strip update' );
return true;
} /**
* @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";
} else {
//tracker.element.style.paddingRight = "10px";
tracker.element.style.marginLeft = "-" + ( $.getElementSize( tracker.element ).x / 2 ) + "px";
}
return false;
}
/**
* @private
* @inner
* @function
*/
function onKeyPress( tracker, eventData ) {
//console.log( eventData.keyCode );
switch ( eventData.keyCode ) {
case 61: //=|+
onStripScroll.call( this, this.tracker, { position: null, scroll: 1, shift: null } );
return false; 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 } );
* @private return false;
* @inner case 115: //s
* @function case 83: //S
*/ case 40: //down arrow
function onStripDrag( tracker, eventData ) { onStripScroll.call( this, this.tracker, { position: null, scroll: -1, shift: null } );
return false;
var offsetLeft = Number( this.element.style.marginLeft.replace( 'px', '' ) ), case 97: //a
offsetTop = Number( this.element.style.marginTop.replace( 'px', '' ) ), case 37: //left arrow
scrollWidth = Number( this.element.style.width.replace( 'px', '' ) ), onStripScroll.call( this, this.tracker, { position: null, scroll: -1, shift: null } );
scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ), return false;
viewerSize = $.getElementSize( this.viewer.canvas ); case 100: //d
this.dragging = true; case 39: //right arrow
if ( this.element ) { onStripScroll.call( this, this.tracker, { position: null, scroll: 1, shift: null } );
if ( 'horizontal' == this.scroll ) { return false;
if ( -eventData.delta.x > 0 ) { default:
//forward //console.log( 'navigator keycode %s', eventData.keyCode );
if ( offsetLeft > -( scrollWidth - viewerSize.x ) ) { return true;
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;
}
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;
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';
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
} );
element.getElementsByTagName( 'form' )[0].appendChild(
miniViewer.displayRegion
);
element.activePanel = true;
}
}
}
/**
* @private
* @inner
* @function
*/
function onStripEnter( tracker, eventData ) {
//$.setElementOpacity(tracker.element, 0.8);
//tracker.element.style.border = '1px solid #555';
//tracker.element.style.background = '#000';
if ( 'horizontal' == this.scroll ) {
//tracker.element.style.paddingTop = "0px";
tracker.element.style.marginBottom = "0px";
} else {
//tracker.element.style.paddingRight = "0px";
tracker.element.style.marginLeft = "0px";
}
return false;
}
/**
* @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";
} else {
//tracker.element.style.paddingRight = "10px";
tracker.element.style.marginLeft = "-" + ( $.getElementSize( tracker.element ).x / 2 ) + "px";
}
return false;
}
/**
* @private
* @inner
* @function
*/
function onKeyPress( tracker, eventData ) {
//console.log( eventData.keyCode );
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;
}
} }
}