mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-23 05:36:09 +03:00
543 lines
19 KiB
JavaScript
543 lines
19 KiB
JavaScript
/*
|
|
* OpenSeadragon - ReferenceStrip
|
|
*
|
|
* Copyright (C) 2009 CodePlex Foundation
|
|
* Copyright (C) 2010-2013 OpenSeadragon contributors
|
|
*
|
|
* Redistribution and use in source and binary forms, with or without
|
|
* modification, are permitted provided that the following conditions are
|
|
* met:
|
|
*
|
|
* - Redistributions of source code must retain the above copyright notice,
|
|
* this list of conditions and the following disclaimer.
|
|
*
|
|
* - Redistributions in binary form must reproduce the above copyright
|
|
* notice, this list of conditions and the following disclaimer in the
|
|
* documentation and/or other materials provided with the distribution.
|
|
*
|
|
* - Neither the name of CodePlex Foundation nor the names of its
|
|
* contributors may be used to endorse or promote products derived from
|
|
* this software without specific prior written permission.
|
|
*
|
|
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
|
|
* "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
|
|
* LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
|
|
* A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
|
|
* OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
|
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
|
|
* TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
|
|
* PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
|
|
* LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
|
|
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
|
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
*/
|
|
|
|
(function( $ ){
|
|
|
|
// 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 ){
|
|
|
|
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-' + (+new Date());
|
|
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}
|
|
);
|
|
|
|
}
|
|
}
|
|
|
|
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 ){
|
|
tracker.dragging = +new Date();
|
|
},
|
|
releaseHandler: function( tracker, position, insideElementPress, insideElementRelease ){
|
|
var id = tracker.element.id,
|
|
page = Number( id.split( '-' )[ 2 ] ),
|
|
now = +new Date();
|
|
|
|
if ( insideElementPress &&
|
|
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{
|
|
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;
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/**
|
|
* @private
|
|
* @inner
|
|
* @function
|
|
*/
|
|
function onStripDrag( tracker, position, delta, shift ) {
|
|
|
|
var offsetLeft = Number(this.element.style.marginLeft.replace('px','')),
|
|
offsetTop = Number(this.element.style.marginTop.replace('px','')),
|
|
scrollWidth = Number(this.element.style.width.replace('px','')),
|
|
scrollHeight = Number(this.element.style.height.replace('px','')),
|
|
viewerSize = $.getElementSize( this.viewer.canvas );
|
|
this.dragging = true;
|
|
if ( this.element ) {
|
|
if( 'horizontal' == this.scroll ){
|
|
if ( -delta.x > 0 ) {
|
|
//forward
|
|
if( offsetLeft > -(scrollWidth - viewerSize.x)){
|
|
this.element.style.marginLeft = ( offsetLeft + (delta.x * 2) ) + 'px';
|
|
loadPanels( this, viewerSize.x, offsetLeft + (delta.x * 2) );
|
|
}
|
|
} else if ( -delta.x < 0 ) {
|
|
//reverse
|
|
if( offsetLeft < 0 ){
|
|
this.element.style.marginLeft = ( offsetLeft + (delta.x * 2) ) + 'px';
|
|
loadPanels( this, viewerSize.x, offsetLeft + (delta.x * 2) );
|
|
}
|
|
}
|
|
}else{
|
|
if ( -delta.y > 0 ) {
|
|
//forward
|
|
if( offsetTop > -(scrollHeight - viewerSize.y)){
|
|
this.element.style.marginTop = ( offsetTop + (delta.y * 2) ) + 'px';
|
|
loadPanels( this, viewerSize.y, offsetTop + (delta.y * 2) );
|
|
}
|
|
} else if ( -delta.y < 0 ) {
|
|
//reverse
|
|
if( offsetTop < 0 ){
|
|
this.element.style.marginTop = ( offsetTop + (delta.y * 2) ) + 'px';
|
|
loadPanels( this, viewerSize.y, offsetTop + (delta.y * 2) );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* @private
|
|
* @inner
|
|
* @function
|
|
*/
|
|
function onStripScroll( tracker, position, scroll, shift ) {
|
|
var offsetLeft = Number(this.element.style.marginLeft.replace('px','')),
|
|
offsetTop = Number(this.element.style.marginTop.replace('px','')),
|
|
scrollWidth = Number(this.element.style.width.replace('px','')),
|
|
scrollHeight = Number(this.element.style.height.replace('px','')),
|
|
viewerSize = $.getElementSize( this.viewer.canvas );
|
|
if ( this.element ) {
|
|
if( 'horizontal' == this.scroll ){
|
|
if ( scroll > 0 ) {
|
|
//forward
|
|
if( offsetLeft > -(scrollWidth - viewerSize.x)){
|
|
this.element.style.marginLeft = ( offsetLeft - (scroll * 60) ) + 'px';
|
|
loadPanels( this, viewerSize.x, offsetLeft - (scroll * 60) );
|
|
}
|
|
} else if ( scroll < 0 ) {
|
|
//reverse
|
|
if( offsetLeft < 0 ){
|
|
this.element.style.marginLeft = ( offsetLeft - (scroll * 60) ) + 'px';
|
|
loadPanels( this, viewerSize.x, offsetLeft - (scroll * 60) );
|
|
}
|
|
}
|
|
}else{
|
|
if ( scroll < 0 ) {
|
|
//scroll up
|
|
if( offsetTop > viewerSize.y - scrollHeight ){
|
|
this.element.style.marginTop = ( offsetTop + (scroll * 60) ) + 'px';
|
|
loadPanels( this, viewerSize.y, offsetTop + (scroll * 60) );
|
|
}
|
|
} else if ( scroll > 0 ) {
|
|
//scroll dowm
|
|
if( offsetTop < 0 ){
|
|
this.element.style.marginTop = ( offsetTop + (scroll * 60) ) + 'px';
|
|
loadPanels( this, viewerSize.y, offsetTop + (scroll * 60) );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//cancels event
|
|
return false;
|
|
}
|
|
|
|
|
|
function loadPanels(strip, viewerSize, scroll){
|
|
var panelSize,
|
|
activePanelsStart,
|
|
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 ) {
|
|
|
|
//$.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 ) {
|
|
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, keyCode, shiftKey ){
|
|
//console.log( 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;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}( OpenSeadragon ));
|