diff --git a/src/openseadragon.js b/src/openseadragon.js
index a4abf84e..42ad0927 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -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'.
+ * 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.
+ * 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
diff --git a/src/referencestrip.js b/src/referencestrip.js
index d5436f41..1646f0c0 100644
--- a/src/referencestrip.js
+++ b/src/referencestrip.js
@@ -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;
}
diff --git a/src/viewer.js b/src/viewer.js
index cc8fb220..efab2c60 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -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;