mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-25 06:36:11 +03:00
New options for fixing/adding features
This commit is contained in:
Mark Salsbery
parent
406baa1891
commit
bc1ca64fbb
@ -645,17 +645,66 @@
|
||||
* If sequenceMode is true, then display a scrolling strip of image thumbnails for
|
||||
* navigating through the images.
|
||||
*
|
||||
* @property {Element} [referenceStripElement=null]
|
||||
* The element to hold the reference strip.
|
||||
* If an element is specified, the Id option (see referenceStripId) is ignored.
|
||||
* If no element nor ID is specified, a div element will be generated accordingly.
|
||||
*
|
||||
* @property {Element} [referenceStripId=null]
|
||||
* The ID of a div to hold the reference strip.
|
||||
* If an ID is specified, the referenceStripPosition, referenceStripSizeRatio, referenceStripMaintainSizeRatio, referenceStrip[Top|Left|Height|Width], referenceStripAutoHide and referenceStripAutoFade options will be ignored.
|
||||
* If an ID is not specified, a div element will be generated and placed on top of the main image.
|
||||
*
|
||||
* @property {String} [referenceStripScroll='horizontal']
|
||||
* The orientation of the reference strip. Valid values are 'horizontal' and 'vertical'
|
||||
*
|
||||
* @property {String} [referenceStripPosition='BOTTOM_LEFT']
|
||||
* Valid values are 'TOP_LEFT', 'TOP_RIGHT', 'BOTTOM_LEFT', 'BOTTOM_RIGHT', or 'ABSOLUTE'.<br>
|
||||
* If 'ABSOLUTE' is specified, then referenceStrip[Top|Left|Height|Width] determines the size and position of the reference strip in the viewer, and referenceStripSizeRatio and referenceStripMaintainSizeRatio are ignored.<br>
|
||||
* For 'TOP_LEFT', 'TOP_RIGHT', 'BOTTOM_LEFT', and 'BOTTOM_RIGHT', the referenceStripSizeRatio or referenceStrip[Height|Width] values determine the size of the reference strip.
|
||||
*
|
||||
* @property {Number} [referenceStripSizeRatio=0.2]
|
||||
* Ratio of reference strip size to viewer size. Ignored if referenceStrip[Height|Width] are specified.
|
||||
*
|
||||
* @property {Number} [referenceStripHeight=null]
|
||||
* @property {Boolean} [referenceStripMaintainSizeRatio=false]
|
||||
* If true, the reference strip is resized (using referenceStripSizeRatio) when the viewer size changes.
|
||||
*
|
||||
* @property {Number} [referenceStripWidth=null]
|
||||
* @property {Number|String} [referenceStripTop=null]
|
||||
* Specifies the location of the reference strip (see referenceStripPosition).
|
||||
*
|
||||
* @property {Number|String} [referenceStripLeft=null]
|
||||
* Specifies the location of the reference strip (see referenceStripPosition).
|
||||
*
|
||||
* @property {Number|String} [referenceStripHeight=null]
|
||||
* Specifies the size of the reference strip (see referenceStripPosition).
|
||||
* If specified, referenceStripSizeRatio is ignored.
|
||||
*
|
||||
* @property {Number|String} [referenceStripWidth=null]
|
||||
* Specifies the size of the reference strip (see referenceStripPosition).
|
||||
* If specified, referenceStripSizeRatio is ignored.
|
||||
*
|
||||
* @property {Boolean} [referenceStripAutoResize=true]
|
||||
* When true and reference strip is embedded in its Viewer,the reference strip will automatically resize when its Viewer size changes.
|
||||
*
|
||||
* @property {Boolean} [referenceStripAutoHide=true]
|
||||
* If the user stops interacting with the reference strip, hide the reference strip.
|
||||
*
|
||||
* @property {Number} [referenceStripAutoHideFactor=0.5]
|
||||
* Amount of the reference strip to auto hide when referenceStripAutoHide is true.
|
||||
* Valid values are 0.0 to 1.0, where 1.0 hides the entire strip, 0.5 hides half the strip, etc.
|
||||
*
|
||||
* @property {Boolean} [referenceStripAutoFade=true]
|
||||
* If the user stops interacting with the viewport, fade the reference strip.
|
||||
* Setting to false will make the reference strip always visible.
|
||||
*
|
||||
* @property {String} [referenceStripBackground='#000']
|
||||
* Specifies the background color of the reference strip
|
||||
*
|
||||
* @property {Number} [referenceStripOpacity=0.8]
|
||||
* Specifies the opacity of the reference strip.
|
||||
*
|
||||
* @property {String} [referenceStripBorderColor='#555']
|
||||
* Specifies the border color of the reference strip
|
||||
*
|
||||
* @property {Boolean} [collectionMode=false]
|
||||
* Set to true to have the viewer arrange your TiledImages in a grid or line.
|
||||
@ -1347,13 +1396,24 @@ function OpenSeadragon( options ){
|
||||
subPixelRoundingForTransparency: null,
|
||||
|
||||
//REFERENCE STRIP SETTINGS
|
||||
showReferenceStrip: false,
|
||||
referenceStripId: null,
|
||||
referenceStripScroll: 'horizontal',
|
||||
referenceStripPosition: 'BOTTOM_LEFT',
|
||||
referenceStripSizeRatio: 0.2,
|
||||
referenceStripHeight: null,
|
||||
referenceStripWidth: null,
|
||||
showReferenceStrip: false,
|
||||
referenceStripElement: null,
|
||||
referenceStripId: null,
|
||||
referenceStripScroll: 'horizontal',
|
||||
referenceStripPosition: 'BOTTOM_LEFT',
|
||||
referenceStripSizeRatio: 0.2,
|
||||
referenceStripMaintainSizeRatio: false,
|
||||
referenceStripTop: null,
|
||||
referenceStripLeft: null,
|
||||
referenceStripHeight: null,
|
||||
referenceStripWidth: null,
|
||||
referenceStripAutoResize: true,
|
||||
referenceStripAutoHide: true,
|
||||
referenceStripAutoHideFactor: 0.5,
|
||||
referenceStripAutoFade: true,
|
||||
referenceStripBackground: '#000',
|
||||
referenceStripOpacity: 0.8,
|
||||
referenceStripBorderColor: '#555',
|
||||
|
||||
//COLLECTION VISUALIZATION SETTINGS
|
||||
collectionRows: 3, //or columns depending on layout
|
||||
|
||||
@ -63,15 +63,47 @@ const THIS = {};
|
||||
*/
|
||||
$.ReferenceStrip = function ( options ) {
|
||||
// //REFERENCE STRIP SETTINGS ($.DEFAULT_SETTINGS)
|
||||
// showReferenceStrip: false,
|
||||
// referenceStripId: null,
|
||||
// referenceStripScroll: 'horizontal',
|
||||
// referenceStripPosition: 'BOTTOM_LEFT',
|
||||
// referenceStripSizeRatio: 0.2,
|
||||
// referenceStripHeight: null,
|
||||
// referenceStripWidth: null,
|
||||
// showReferenceStrip: false,
|
||||
// referenceStripElement: null,
|
||||
// referenceStripId: null,
|
||||
// referenceStripScroll: 'horizontal',
|
||||
// referenceStripPosition: 'BOTTOM_LEFT',
|
||||
// referenceStripSizeRatio: 0.2,
|
||||
// referenceStripMaintainSizeRatio: false,
|
||||
// referenceStripTop: null,
|
||||
// referenceStripLeft: null,
|
||||
// referenceStripHeight: null,
|
||||
// referenceStripWidth: null,
|
||||
// referenceStripAutoResize: true,
|
||||
// referenceStripAutoHide: true,
|
||||
// referenceStripAutoHideFactor: 0.5,
|
||||
// referenceStripAutoFade: true,
|
||||
// referenceStripBackground: '#000',
|
||||
// referenceStripOpacity: 0.8,
|
||||
// referenceStripBorderColor: '#555',
|
||||
|
||||
// this.referenceStrip = new $.ReferenceStrip({
|
||||
// viewer: this,
|
||||
// element: this.referenceStripElement,
|
||||
// id: this.referenceStripId,
|
||||
// scroll: this.referenceStripScroll,
|
||||
// position: this.referenceStripPosition,
|
||||
// sizeRatio: this.referenceStripSizeRatio,
|
||||
// maintainSizeRatio: this.referenceStripMaintainSizeRatio,
|
||||
// top: this.referenceStripTop,
|
||||
// left: this.referenceStripLeft,
|
||||
// width: this.referenceStripWidth,
|
||||
// height: this.referenceStripHeight,
|
||||
// autoResize: this.referenceStripAutoResize,
|
||||
// autoHide: this.referenceStripAutoHide,
|
||||
// autoHideFactor: this.referenceStripAutoHideFactor,
|
||||
// autoFade: this.referenceStripAutoFade,
|
||||
// background: this.referenceStripBackground,
|
||||
// opacity: this.referenceStripOpacity,
|
||||
// borderColor: this.referenceStripBorderColor,
|
||||
// //TODO
|
||||
// //crossOriginPolicy: this.crossOriginPolicy,
|
||||
|
||||
// viewer: this,
|
||||
// id: this.referenceStripId,
|
||||
// scroll: this.referenceStripScroll,
|
||||
@ -96,9 +128,27 @@ $.ReferenceStrip = function ( options ) {
|
||||
options = $.extend(
|
||||
true,
|
||||
{
|
||||
sizeRatio: $.DEFAULT_SETTINGS.referenceStripSizeRatio,
|
||||
position: $.DEFAULT_SETTINGS.referenceStripPosition,
|
||||
scroll: $.DEFAULT_SETTINGS.referenceStripScroll,
|
||||
// // Viewer passes these commented options always...
|
||||
// // We only need these if ReferenceStrip constructor is made usable outside of Viewer
|
||||
// element: $.DEFAULT_SETTINGS.referenceStripElement,
|
||||
// id: $.DEFAULT_SETTINGS.referenceStripId,
|
||||
// scroll: $.DEFAULT_SETTINGS.referenceStripScroll,
|
||||
// position: $.DEFAULT_SETTINGS.referenceStripPosition,
|
||||
// sizeRatio: $.DEFAULT_SETTINGS.referenceStripSizeRatio,
|
||||
// maintainSizeRatio: $.DEFAULT_SETTINGS.referenceStripMaintainSizeRatio,
|
||||
// top: $.DEFAULT_SETTINGS.referenceStripTop,
|
||||
// left: $.DEFAULT_SETTINGS.referenceStripLeft,
|
||||
// width: $.DEFAULT_SETTINGS.referenceStripWidth,
|
||||
// height: $.DEFAULT_SETTINGS.referenceStripHeight,
|
||||
// autoResize: $.DEFAULT_SETTINGS.referenceStripAutoResize,
|
||||
// autoHide: $.DEFAULT_SETTINGS.referenceStripAutoHide,
|
||||
// autoHideFactor: $.DEFAULT_SETTINGS.referenceStripAutoHideFactor,
|
||||
// autoFade: $.DEFAULT_SETTINGS.referenceStripAutoFade,
|
||||
// background: $.DEFAULT_SETTINGS.referenceStripBackground,
|
||||
// opacity: $.DEFAULT_SETTINGS.referenceStripOpacity,
|
||||
// borderColor: $.DEFAULT_SETTINGS.referenceStripBorderColor,
|
||||
clickTimeThreshold: $.DEFAULT_SETTINGS.clickTimeThreshold,
|
||||
clickDistThreshold: $.DEFAULT_SETTINGS.clickDistThreshold,
|
||||
},
|
||||
options
|
||||
);
|
||||
@ -110,8 +160,6 @@ $.ReferenceStrip = function ( options ) {
|
||||
animating: false
|
||||
};
|
||||
|
||||
this.minPixelRatio = this.viewer.minPixelRatio;
|
||||
|
||||
this.stripElement.tabIndex = 0;
|
||||
|
||||
const style = this.stripElement.style;
|
||||
@ -130,17 +178,17 @@ $.ReferenceStrip = function ( options ) {
|
||||
$.setElementOpacity( this.stripElement, 0.8 );
|
||||
|
||||
this.stripTracker = new $.MouseTracker( {
|
||||
userData: 'ReferenceStrip.stripTracker',
|
||||
element: this.stripElement,
|
||||
clickTimeThreshold: viewer.clickTimeThreshold || $.DEFAULT_SETTINGS.clickTimeThreshold,
|
||||
clickDistThreshold: viewer.clickDistThreshold || $.DEFAULT_SETTINGS.clickDistThreshold,
|
||||
clickHandler: $.delegate( this, onStripClick ),
|
||||
dragHandler: $.delegate( this, onStripDrag ),
|
||||
scrollHandler: $.delegate( this, onStripScroll ),
|
||||
enterHandler: $.delegate( this, onStripEnter ),
|
||||
leaveHandler: $.delegate( this, onStripLeave ),
|
||||
keyDownHandler: $.delegate( this, onStripKeyDown ),
|
||||
keyHandler: $.delegate( this, onStripKeyPress ),
|
||||
userData: 'ReferenceStrip.stripTracker',
|
||||
element: this.stripElement,
|
||||
clickTimeThreshold: this.clickTimeThreshold,
|
||||
clickDistThreshold: this.clickDistThreshold,
|
||||
clickHandler: $.delegate( this, onStripClick ),
|
||||
dragHandler: $.delegate( this, onStripDrag ),
|
||||
scrollHandler: $.delegate( this, onStripScroll ),
|
||||
enterHandler: $.delegate( this, onStripEnter ),
|
||||
leaveHandler: $.delegate( this, onStripLeave ),
|
||||
keyDownHandler: $.delegate( this, onStripKeyDown ),
|
||||
keyHandler: $.delegate( this, onStripKeyPress ),
|
||||
preProcessEventHandler: function (eventInfo) {
|
||||
if (eventInfo.eventType === 'wheel') {
|
||||
eventInfo.preventDefault = true;
|
||||
@ -231,6 +279,52 @@ $.ReferenceStrip = function ( options ) {
|
||||
/** @lends OpenSeadragon.ReferenceStrip.prototype */
|
||||
$.ReferenceStrip.prototype = {
|
||||
|
||||
//TODO reference strip auto resize
|
||||
|
||||
// /**
|
||||
// * Used to notify the reference strip when its size has changed.
|
||||
// * Especially useful when {@link OpenSeadragon.Options}.referenceStripAutoResize is set to false and the reference strip is resizable.
|
||||
// * @function
|
||||
// */
|
||||
// updateSize: function () {
|
||||
// if ( this.viewport ) {
|
||||
// var containerSize = new $.Point(
|
||||
// (this.container.clientWidth === 0 ? 1 : this.container.clientWidth),
|
||||
// (this.container.clientHeight === 0 ? 1 : this.container.clientHeight)
|
||||
// );
|
||||
|
||||
// if ( !containerSize.equals( this.oldContainerSize ) ) {
|
||||
// this.viewport.resize( containerSize, true );
|
||||
// this.viewport.goHome(true);
|
||||
// this.oldContainerSize = containerSize;
|
||||
// this.drawer.clear();
|
||||
// this.world.draw();
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
|
||||
// /**
|
||||
// * Explicitly sets the width of the reference strip, in web coordinates. Disables automatic resizing.
|
||||
// * @param {Number|String} width - the new width, either a number of pixels or a CSS string, such as "100%"
|
||||
// */
|
||||
// setWidth: function(width) {
|
||||
// this.width = width;
|
||||
// this.element.style.width = typeof (width) === "number" ? (width + 'px') : width;
|
||||
// this._resizeWithViewer = false;
|
||||
// this.updateSize();
|
||||
// },
|
||||
|
||||
// /**
|
||||
// * Explicitly sets the height of the reference strip, in web coordinates. Disables automatic resizing.
|
||||
// * @param {Number|String} height - the new height, either a number of pixels or a CSS string, such as "100%"
|
||||
// */
|
||||
// setHeight: function(height) {
|
||||
// this.height = height;
|
||||
// this.element.style.height = typeof (height) === "number" ? (height + 'px') : height;
|
||||
// this._resizeWithViewer = false;
|
||||
// this.updateSize();
|
||||
// },
|
||||
|
||||
/**
|
||||
* @function
|
||||
*/
|
||||
@ -287,6 +381,35 @@ $.ReferenceStrip.prototype = {
|
||||
// $.console.log( 'image reference strip update' );
|
||||
return true;
|
||||
}
|
||||
|
||||
//TODO reference strip auto resize
|
||||
|
||||
// var viewerSize,
|
||||
// newWidth,
|
||||
// newHeight;
|
||||
|
||||
// viewerSize = $.getElementSize( this.viewer.element );
|
||||
// if ( this._resizeWithViewer && viewerSize.x && viewerSize.y && !viewerSize.equals( this.oldViewerSize ) ) {
|
||||
// this.oldViewerSize = viewerSize;
|
||||
|
||||
// if ( this.maintainSizeRatio || !this.elementArea) {
|
||||
// newWidth = viewerSize.x * this.sizeRatio;
|
||||
// newHeight = viewerSize.y * this.sizeRatio;
|
||||
// } else {
|
||||
// newWidth = Math.sqrt(this.elementArea * (viewerSize.x / viewerSize.y));
|
||||
// newHeight = this.elementArea / newWidth;
|
||||
// }
|
||||
|
||||
// this.element.style.width = Math.round( newWidth ) + 'px';
|
||||
// this.element.style.height = Math.round( newHeight ) + 'px';
|
||||
|
||||
// if (!this.elementArea) {
|
||||
// this.elementArea = newWidth * newHeight;
|
||||
// }
|
||||
|
||||
// this.updateSize();
|
||||
// }
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
@ -459,17 +582,13 @@ function loadPanels( strip, viewerSize, scroll ) {
|
||||
id: panelElement.id,
|
||||
tileSources: [miniTileSource],
|
||||
element: panelElement,
|
||||
navigatorSizeRatio: strip.sizeRatio,
|
||||
showNavigator: false,
|
||||
mouseNavEnabled: false,
|
||||
showNavigationControl: false,
|
||||
showSequenceControl: false,
|
||||
immediateRender: true,
|
||||
blendTime: 0,
|
||||
animationTime: 0,
|
||||
loadTilesWithAjax: strip.viewer.loadTilesWithAjax,
|
||||
ajaxHeaders: strip.viewer.ajaxHeaders,
|
||||
useCanvas: strip.viewer.useCanvas || $.DEFAULT_SETTINGS.useCanvas
|
||||
} );
|
||||
// Allow pointer events to pass through miniViewer's canvas/container
|
||||
// elements so implicit pointer capture works on touch devices
|
||||
@ -564,7 +683,7 @@ function onStripKeyDown( event ) {
|
||||
event.preventDefault = true;
|
||||
break;
|
||||
default:
|
||||
//console.log( 'navigator keycode %s', event.keyCode );
|
||||
//console.log( 'reference strip keycode %s', event.keyCode );
|
||||
event.preventDefault = false;
|
||||
break;
|
||||
}
|
||||
@ -612,7 +731,7 @@ function onStripKeyPress( event ) {
|
||||
event.preventDefault = true;
|
||||
break;
|
||||
default:
|
||||
//console.log( 'navigator keycode %s', event.keyCode );
|
||||
//console.log( 'reference strip keycode %s', event.keyCode );
|
||||
event.preventDefault = false;
|
||||
break;
|
||||
}
|
||||
|
||||
@ -1244,6 +1244,11 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
|
||||
this.navigator.update( this.viewport );
|
||||
}
|
||||
|
||||
//TODO reference strip auto resize
|
||||
// if ( this.referenceStrip ) {
|
||||
// this.referenceStrip.update();
|
||||
// }
|
||||
|
||||
/**
|
||||
* Raised when the viewer has changed to/from full-page mode (see {@link OpenSeadragon.Viewer#setFullPage}).
|
||||
*
|
||||
@ -1334,6 +1339,18 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
|
||||
_this.navigator.update( _this.viewport );
|
||||
});
|
||||
}
|
||||
//TODO reference strip auto resize
|
||||
// if ( (_this.navigator && _this.viewport) || _this.referenceStrip ) {
|
||||
// //09/08/2018 - Fabroh : Fix issue #1504 : Ensure to get the navigator updated on fullscreen out with custom location with a timeout
|
||||
// setTimeout(function(){
|
||||
// if ( _this.navigator && _this.viewport ) {
|
||||
// _this.navigator.update( _this.viewport );
|
||||
// }
|
||||
// if ( _this.referenceStrip ) {
|
||||
// _this.referenceStrip.update();
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
/**
|
||||
* Raised when the viewer has changed to/from full-screen mode (see {@link OpenSeadragon.Viewer#setFullScreen}).
|
||||
*
|
||||
@ -2395,13 +2412,26 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
|
||||
|
||||
if (this.tileSources.length && this.tileSources.length > 1) {
|
||||
this.referenceStrip = new $.ReferenceStrip({
|
||||
viewer: this,
|
||||
id: this.referenceStripId,
|
||||
scroll: this.referenceStripScroll,
|
||||
position: this.referenceStripPosition,
|
||||
sizeRatio: this.referenceStripSizeRatio,
|
||||
height: this.referenceStripHeight,
|
||||
width: this.referenceStripWidth
|
||||
viewer: this,
|
||||
element: this.referenceStripElement,
|
||||
id: this.referenceStripId,
|
||||
scroll: this.referenceStripScroll,
|
||||
position: this.referenceStripPosition,
|
||||
sizeRatio: this.referenceStripSizeRatio,
|
||||
maintainSizeRatio: this.referenceStripMaintainSizeRatio,
|
||||
top: this.referenceStripTop,
|
||||
left: this.referenceStripLeft,
|
||||
width: this.referenceStripWidth,
|
||||
height: this.referenceStripHeight,
|
||||
autoResize: this.referenceStripAutoResize,
|
||||
autoHide: this.referenceStripAutoHide,
|
||||
autoHideFactor: this.referenceStripAutoHideFactor,
|
||||
autoFade: this.referenceStripAutoFade,
|
||||
background: this.referenceStripBackground,
|
||||
opacity: this.referenceStripOpacity,
|
||||
borderColor: this.referenceStripBorderColor,
|
||||
//TODO
|
||||
//crossOriginPolicy: this.crossOriginPolicy,
|
||||
});
|
||||
|
||||
this.referenceStrip.setFocus( this._sequenceIndex );
|
||||
@ -3718,8 +3748,9 @@ function updateOnce( viewer ) {
|
||||
viewer.raiseEvent('viewport-change');
|
||||
}
|
||||
|
||||
if( viewer.referenceStrip ){
|
||||
animated = viewer.referenceStrip.update( viewer.viewport ) || animated;
|
||||
//TODO reference strip auto resize
|
||||
if ( viewer.referenceStrip ) {
|
||||
animated = viewer.referenceStrip.update() || animated;
|
||||
}
|
||||
|
||||
var currentAnimating = THIS[ viewer.hash ].animating;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user