mirror of
https://github.com/openseadragon/openseadragon.git
synced 2025-02-08 02:49:22 +03:00
MouseTracker Original Events in Handlers
More formatting fixes
This commit is contained in:
Mark Salsbery
parent
56f5b9fb74
commit
5f6b89b8b5
@ -58,111 +58,111 @@ var THIS = {};
|
|||||||
*/
|
*/
|
||||||
$.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
|
//Controls the position and orientation of the reference strip and sets the
|
||||||
//appropriate width and height
|
//appropriate width and height
|
||||||
if ( options.width && options.height ) {
|
if ( options.width && options.height ) {
|
||||||
this.element.style.width = options.width + 'px';
|
this.element.style.width = options.width + 'px';
|
||||||
this.element.style.height = options.height + 'px';
|
this.element.style.height = options.height + 'px';
|
||||||
viewer.addControl(
|
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,
|
this.element,
|
||||||
{ anchor: $.ControlAnchor.BOTTOM_LEFT }
|
{ anchor: $.ControlAnchor.BOTTOM_LEFT }
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
this.element.style.height = (
|
if ( "horizontal" == options.scroll ) {
|
||||||
viewerSize.y *
|
|
||||||
options.sizeRatio *
|
|
||||||
viewer.tileSources.length
|
|
||||||
) + ( 12 * viewer.tileSources.length ) + 'px';
|
|
||||||
|
|
||||||
this.element.style.width = (
|
this.element.style.width = (
|
||||||
viewerSize.x *
|
viewerSize.x *
|
||||||
options.sizeRatio
|
options.sizeRatio *
|
||||||
) + 'px';
|
viewer.tileSources.length
|
||||||
|
) + ( 12 * viewer.tileSources.length ) + 'px';
|
||||||
|
|
||||||
|
this.element.style.height = (
|
||||||
|
viewerSize.y *
|
||||||
|
options.sizeRatio
|
||||||
|
) + 'px';
|
||||||
|
|
||||||
viewer.addControl(
|
viewer.addControl(
|
||||||
this.element,
|
this.element,
|
||||||
{ anchor: $.ControlAnchor.TOP_LEFT }
|
{ 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 }
|
||||||
|
);
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -177,16 +177,16 @@ $.ReferenceStrip = function ( options ) {
|
|||||||
element = $.makeNeutralElement( 'div' );
|
element = $.makeNeutralElement( 'div' );
|
||||||
element.id = this.element.id + "-" + i;
|
element.id = this.element.id + "-" + i;
|
||||||
|
|
||||||
element.style.width = _this.panelWidth + 'px';
|
element.style.width = _this.panelWidth + 'px';
|
||||||
element.style.height = _this.panelHeight + 'px';
|
element.style.height = _this.panelHeight + 'px';
|
||||||
element.style.display = 'inline';
|
element.style.display = 'inline';
|
||||||
element.style.float = 'left'; //Webkit
|
element.style.float = 'left'; //Webkit
|
||||||
element.style.cssFloat = 'left'; //Firefox
|
element.style.cssFloat = 'left'; //Firefox
|
||||||
element.style.styleFloat = 'left'; //IE
|
element.style.styleFloat = 'left'; //IE
|
||||||
element.style.padding = '2px';
|
element.style.padding = '2px';
|
||||||
|
|
||||||
element.innerTracker = new $.MouseTracker( {
|
element.innerTracker = new $.MouseTracker( {
|
||||||
element: element,
|
element: element,
|
||||||
clickTimeThreshold: this.clickTimeThreshold,
|
clickTimeThreshold: this.clickTimeThreshold,
|
||||||
clickDistThreshold: this.clickDistThreshold,
|
clickDistThreshold: this.clickDistThreshold,
|
||||||
pressHandler: function ( tracker, eventData ) {
|
pressHandler: function ( tracker, eventData ) {
|
||||||
@ -223,12 +223,12 @@ $.extend( $.ReferenceStrip.prototype, $.EventHandler.prototype, $.Viewer.prototy
|
|||||||
|
|
||||||
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 ) {
|
||||||
@ -292,10 +292,10 @@ $.extend( $.ReferenceStrip.prototype, $.EventHandler.prototype, $.Viewer.prototy
|
|||||||
function onStripDrag( tracker, eventData ) {
|
function onStripDrag( tracker, eventData ) {
|
||||||
|
|
||||||
var offsetLeft = Number( this.element.style.marginLeft.replace( 'px', '' ) ),
|
var offsetLeft = Number( this.element.style.marginLeft.replace( 'px', '' ) ),
|
||||||
offsetTop = Number( this.element.style.marginTop.replace( 'px', '' ) ),
|
offsetTop = Number( this.element.style.marginTop.replace( 'px', '' ) ),
|
||||||
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', '' ) ),
|
||||||
viewerSize = $.getElementSize( this.viewer.canvas );
|
viewerSize = $.getElementSize( this.viewer.canvas );
|
||||||
this.dragging = true;
|
this.dragging = true;
|
||||||
if ( this.element ) {
|
if ( this.element ) {
|
||||||
if ( 'horizontal' == this.scroll ) {
|
if ( 'horizontal' == this.scroll ) {
|
||||||
@ -341,10 +341,10 @@ function onStripDrag( tracker, eventData ) {
|
|||||||
*/
|
*/
|
||||||
function onStripScroll( tracker, eventData ) {
|
function onStripScroll( tracker, eventData ) {
|
||||||
var offsetLeft = Number( this.element.style.marginLeft.replace( 'px', '' ) ),
|
var offsetLeft = Number( this.element.style.marginLeft.replace( 'px', '' ) ),
|
||||||
offsetTop = Number( this.element.style.marginTop.replace( 'px', '' ) ),
|
offsetTop = Number( this.element.style.marginTop.replace( 'px', '' ) ),
|
||||||
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', '' ) ),
|
||||||
viewerSize = $.getElementSize( this.viewer.canvas );
|
viewerSize = $.getElementSize( this.viewer.canvas );
|
||||||
if ( this.element ) {
|
if ( this.element ) {
|
||||||
if ( 'horizontal' == this.scroll ) {
|
if ( 'horizontal' == this.scroll ) {
|
||||||
if ( eventData.scroll > 0 ) {
|
if ( eventData.scroll > 0 ) {
|
||||||
@ -383,12 +383,12 @@ function onStripScroll( tracker, eventData ) {
|
|||||||
|
|
||||||
function loadPanels( strip, viewerSize, scroll ) {
|
function loadPanels( strip, viewerSize, scroll ) {
|
||||||
var panelSize,
|
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 {
|
||||||
@ -403,44 +403,44 @@ function loadPanels( strip, viewerSize, scroll ) {
|
|||||||
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;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user