diff --git a/src/openseadragon.js b/src/openseadragon.js index 2cb2ac0d..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 {String} [referenceStripScroll='horizontal'] - * * @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 {Number} [referenceStripHeight=null] + * @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 {Number} [referenceStripWidth=null] + * @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 {Boolean} [referenceStripMaintainSizeRatio=false] + * If true, the reference strip is resized (using referenceStripSizeRatio) when the viewer size changes. + * + * @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, - referenceStripScroll: 'horizontal', - referenceStripElement: null, - referenceStripHeight: null, - referenceStripWidth: null, - referenceStripPosition: 'BOTTOM_LEFT', - referenceStripSizeRatio: 0.2, + 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 ab21da50..1646f0c0 100644 --- a/src/referencestrip.js +++ b/src/referencestrip.js @@ -35,7 +35,7 @@ (function ( $ ) { // dictionary from id to private properties -var THIS = {}; +const THIS = {}; /** * The CollectionDrawer is a reimplementation if the Drawer API that @@ -62,43 +62,107 @@ var THIS = {}; * @param {Object} options */ $.ReferenceStrip = function ( options ) { + // //REFERENCE STRIP SETTINGS ($.DEFAULT_SETTINGS) + // 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', - var _this = this, - viewer = options.viewer, - viewerSize = $.getElementSize( viewer.element ), - element, - style, - i; + // 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, + // position: this.referenceStripPosition, + // sizeRatio: this.referenceStripSizeRatio, + // height: this.referenceStripHeight, + // width: this.referenceStripWidth + // }); + + const viewer = options.viewer, + viewerSize = $.getElementSize( viewer.element ); //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-' + $.now(); - this.element = $.makeNeutralElement( "div" ); - this.element.id = options.id; - this.element.className = 'referencestrip'; + options.id = 'referencestrip-' + $.now(); + this.stripElement = $.makeNeutralElement( "div" ); + this.stripElement.id = options.id; + this.stripElement.className = 'referencestrip'; } - options = $.extend( true, { - sizeRatio: $.DEFAULT_SETTINGS.referenceStripSizeRatio, - position: $.DEFAULT_SETTINGS.referenceStripPosition, - scroll: $.DEFAULT_SETTINGS.referenceStripScroll, - clickTimeThreshold: $.DEFAULT_SETTINGS.clickTimeThreshold - }, options, { - element: this.element - } ); + options = $.extend( + true, + { + // // 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 + ); $.extend( this, options ); + //Private state properties THIS[this.id] = { - animating: false + animating: false }; - this.minPixelRatio = this.viewer.minPixelRatio; + this.stripElement.tabIndex = 0; - this.element.tabIndex = 0; - - style = this.element.style; + const style = this.stripElement.style; style.marginTop = '0px'; style.marginRight = '0px'; style.marginBottom = '0px'; @@ -109,21 +173,22 @@ $.ReferenceStrip = function ( options ) { style.background = '#000'; style.position = 'relative'; - $.setElementTouchActionNone( this.element ); + $.setElementTouchActionNone( this.stripElement ); - $.setElementOpacity( this.element, 0.8 ); + $.setElementOpacity( this.stripElement, 0.8 ); - this.viewer = viewer; - this.tracker = new $.MouseTracker( { - userData: 'ReferenceStrip.tracker', - element: this.element, - clickHandler: $.delegate( this, onStripClick ), - dragHandler: $.delegate( this, onStripDrag ), - scrollHandler: $.delegate( this, onStripScroll ), - enterHandler: $.delegate( this, onStripEnter ), - leaveHandler: $.delegate( this, onStripLeave ), - keyDownHandler: $.delegate( this, onKeyDown ), - keyHandler: $.delegate( this, onKeyPress ), + this.stripTracker = new $.MouseTracker( { + 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; @@ -134,75 +199,76 @@ $.ReferenceStrip = function ( options ) { //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'; + //TODO fix this - isn't correct + this.panelWidth = ( viewerSize.x * this.sizeRatio ) + 12; + this.panelHeight = ( viewerSize.y * this.sizeRatio ); + + this.stripElement.style.width = options.width + 'px'; + this.stripElement.style.height = options.height + 'px'; viewer.addControl( - this.element, + this.stripElement, { 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.panelWidth = ( viewerSize.x * this.sizeRatio ) + 12; + this.panelHeight = ( viewerSize.y * this.sizeRatio ); - this.element.style.height = ( - viewerSize.y * - options.sizeRatio + this.stripElement.style.width = ( + this.panelWidth * + viewer.tileSources.length ) + 'px'; + this.stripElement.style.height = this.panelHeight + 'px'; + viewer.addControl( - this.element, + this.stripElement, { anchor: $.ControlAnchor.BOTTOM_LEFT } ); } else { - this.element.style.height = ( - viewerSize.y * - options.sizeRatio * - viewer.tileSources.length - ) + ( 12 * viewer.tileSources.length ) + 'px'; + this.panelWidth = ( viewerSize.x * this.sizeRatio ); + this.panelHeight = ( viewerSize.y * this.sizeRatio ) + 12; - this.element.style.width = ( - viewerSize.x * - options.sizeRatio + this.stripElement.style.height = ( + this.panelHeight * + viewer.tileSources.length ) + 'px'; + this.stripElement.style.width = this.panelWidth + 'px'; + viewer.addControl( - this.element, + this.stripElement, { anchor: $.ControlAnchor.TOP_LEFT } ); } } - this.panelWidth = ( viewerSize.x * this.sizeRatio ) + 8; - this.panelHeight = ( viewerSize.y * this.sizeRatio ) + 8; this.panels = []; this.miniViewers = {}; /*jshint loopfunc:true*/ - for ( i = 0; i < viewer.tileSources.length; i++ ) { + for ( let i = 0; i < viewer.tileSources.length; i++ ) { - element = $.makeNeutralElement( 'div' ); - element.id = this.element.id + "-" + i; + const panelElement = $.makeNeutralElement( 'div' ); - 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'; - $.setElementTouchActionNone( element ); - $.setElementPointerEventsNone( element ); + panelElement.id = this.stripElement.id + "-" + i; - this.element.appendChild( element ); + panelElement.style.width = this.panelWidth + 'px'; + panelElement.style.height = this.panelHeight + 'px'; + panelElement.style.display = 'inline'; + panelElement.style['float'] = 'left'; //Webkit + panelElement.style.cssFloat = 'left'; //Firefox + panelElement.style.styleFloat = 'left'; //IE + panelElement.style.padding = '2px'; + $.setElementTouchActionNone( panelElement ); + $.setElementPointerEventsNone( panelElement ); - element.activePanel = false; + this.stripElement.appendChild( panelElement ); - this.panels.push( element ); + panelElement.activePanel = false; + + this.panels.push( panelElement ); } loadPanels( this, this.scroll === 'vertical' ? viewerSize.y : viewerSize.x, 0 ); @@ -213,52 +279,97 @@ $.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 */ setFocus: function ( page ) { - var element = this.element.querySelector('#' + 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; + const panelElement = this.stripElement.querySelector('#' + this.stripElement.id + '-' + page ), + viewerSize = $.getElementSize( this.viewer.canvas ), + scrollWidth = Number( this.stripElement.style.width.replace( 'px', '' ) ), + scrollHeight = Number( this.stripElement.style.height.replace( 'px', '' ) ), + offsetLeft = -Number( this.stripElement.style.marginLeft.replace( 'px', '' ) ), + offsetTop = -Number( this.stripElement.style.marginTop.replace( 'px', '' ) ); - if ( this.currentSelected !== element ) { + if ( this.currentSelected !== panelElement ) { if ( this.currentSelected ) { this.currentSelected.style.background = '#000'; } - this.currentSelected = element; + this.currentSelected = panelElement; this.currentSelected.style.background = '#999'; if ( 'horizontal' === this.scroll ) { //right left - offset = ( Number( page ) ) * ( this.panelWidth + 3 ); + let 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'; + this.stripElement.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'; + this.stripElement.style.marginLeft = -offset + 'px'; loadPanels( this, viewerSize.x, -offset ); } } else { - offset = ( Number( page ) ) * ( this.panelHeight + 3 ); + let 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'; + this.stripElement.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'; + this.stripElement.style.marginTop = -offset + 'px'; loadPanels( this, viewerSize.y, -offset ); } } this.currentPage = page; - onStripEnter.call( this, { eventSource: this.tracker } ); + onStripEnter.call( this, { eventSource: this.stripTracker } ); } }, @@ -270,20 +381,49 @@ $.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; }, destroy: function() { if (this.miniViewers) { - for (var key in this.miniViewers) { + for (const key in this.miniViewers) { this.miniViewers[key].destroy(); } } - this.tracker.destroy(); + this.stripTracker.destroy(); - if (this.element) { - this.viewer.removeControl( this.element ); + if (this.stripElement) { + this.viewer.removeControl( this.stripElement ); } } @@ -297,11 +437,14 @@ $.ReferenceStrip.prototype = { */ function onStripClick( event ) { if ( event.quick ) { - var page; + let page; if ( 'horizontal' === this.scroll ) { - // +4px fix to solve problem with precision on thumbnail selection if there is a lot of them - page = Math.floor(event.position.x / (this.panelWidth + 4)); + // // +4px fix to solve problem with precision on thumbnail selection if there is a lot of them + // page = Math.floor(event.position.x / (this.panelWidth + 4)); + // Note: This reverts PR #2280 (fix for issue #1992) as the issue was + // fixed in ms-reference-strip commit 7d19edff34f7491248064bef1efa69af588c40a0 + page = Math.floor(event.position.x / this.panelWidth); } else { page = Math.floor(event.position.y / this.panelHeight); } @@ -309,7 +452,7 @@ function onStripClick( event ) { this.viewer.goToPage( page ); } - this.element.focus(); + this.stripElement.focus(); } @@ -320,25 +463,24 @@ function onStripClick( event ) { */ function onStripDrag( event ) { - this.dragging = true; - if ( this.element ) { - 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.stripElement ) { + const offsetLeft = Number( this.stripElement.style.marginLeft.replace( 'px', '' ) ), + offsetTop = Number( this.stripElement.style.marginTop.replace( 'px', '' ) ), + scrollWidth = Number( this.stripElement.style.width.replace( 'px', '' ) ), + scrollHeight = Number( this.stripElement.style.height.replace( 'px', '' ) ), + viewerSize = $.getElementSize( this.viewer.canvas ); if ( 'horizontal' === this.scroll ) { if ( -event.delta.x > 0 ) { //forward if ( offsetLeft > -( scrollWidth - viewerSize.x ) ) { - this.element.style.marginLeft = ( offsetLeft + ( event.delta.x * 2 ) ) + 'px'; + this.stripElement.style.marginLeft = ( offsetLeft + ( event.delta.x * 2 ) ) + 'px'; loadPanels( this, viewerSize.x, offsetLeft + ( event.delta.x * 2 ) ); } } else if ( -event.delta.x < 0 ) { //reverse if ( offsetLeft < 0 ) { - this.element.style.marginLeft = ( offsetLeft + ( event.delta.x * 2 ) ) + 'px'; + this.stripElement.style.marginLeft = ( offsetLeft + ( event.delta.x * 2 ) ) + 'px'; loadPanels( this, viewerSize.x, offsetLeft + ( event.delta.x * 2 ) ); } } @@ -346,13 +488,13 @@ function onStripDrag( event ) { if ( -event.delta.y > 0 ) { //forward if ( offsetTop > -( scrollHeight - viewerSize.y ) ) { - this.element.style.marginTop = ( offsetTop + ( event.delta.y * 2 ) ) + 'px'; + this.stripElement.style.marginTop = ( offsetTop + ( event.delta.y * 2 ) ) + 'px'; loadPanels( this, viewerSize.y, offsetTop + ( event.delta.y * 2 ) ); } } else if ( -event.delta.y < 0 ) { //reverse if ( offsetTop < 0 ) { - this.element.style.marginTop = ( offsetTop + ( event.delta.y * 2 ) ) + 'px'; + this.stripElement.style.marginTop = ( offsetTop + ( event.delta.y * 2 ) ) + 'px'; loadPanels( this, viewerSize.y, offsetTop + ( event.delta.y * 2 ) ); } } @@ -369,39 +511,39 @@ function onStripDrag( event ) { * @function */ function onStripScroll( event ) { - if ( this.element ) { - 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.stripElement ) { + const offsetLeft = Number( this.stripElement.style.marginLeft.replace( 'px', '' ) ), + offsetTop = Number( this.stripElement.style.marginTop.replace( 'px', '' ) ), + scrollWidth = Number( this.stripElement.style.width.replace( 'px', '' ) ), + scrollHeight = Number( this.stripElement.style.height.replace( 'px', '' ) ), + viewerSize = $.getElementSize( this.viewer.canvas ); if ( 'horizontal' === this.scroll ) { if ( event.scroll > 0 ) { //forward if ( offsetLeft > -( scrollWidth - viewerSize.x ) ) { - this.element.style.marginLeft = ( offsetLeft - ( event.scroll * 60 ) ) + 'px'; - loadPanels( this, viewerSize.x, offsetLeft - ( event.scroll * 60 ) ); + this.stripElement.style.marginLeft = ( offsetLeft - ( event.scroll * 50 ) ) + 'px'; + loadPanels( this, viewerSize.x, offsetLeft - ( event.scroll * 50 ) ); } } else if ( event.scroll < 0 ) { //reverse if ( offsetLeft < 0 ) { - this.element.style.marginLeft = ( offsetLeft - ( event.scroll * 60 ) ) + 'px'; - loadPanels( this, viewerSize.x, offsetLeft - ( event.scroll * 60 ) ); + this.stripElement.style.marginLeft = ( offsetLeft - ( event.scroll * 50 ) ) + 'px'; + loadPanels( this, viewerSize.x, offsetLeft - ( event.scroll * 50 ) ); } } } else { if ( event.scroll < 0 ) { //scroll up if ( offsetTop > viewerSize.y - scrollHeight ) { - this.element.style.marginTop = ( offsetTop + ( event.scroll * 60 ) ) + 'px'; - loadPanels( this, viewerSize.y, offsetTop + ( event.scroll * 60 ) ); + this.stripElement.style.marginTop = ( offsetTop + ( event.scroll * 50 ) ) + 'px'; + loadPanels( this, viewerSize.y, offsetTop + ( event.scroll * 50 ) ); } } else if ( event.scroll > 0 ) { //scroll dowm if ( offsetTop < 0 ) { - this.element.style.marginTop = ( offsetTop + ( event.scroll * 60 ) ) + 'px'; - loadPanels( this, viewerSize.y, offsetTop + ( event.scroll * 60 ) ); + this.stripElement.style.marginTop = ( offsetTop + ( event.scroll * 50 ) ) + 'px'; + loadPanels( this, viewerSize.y, offsetTop + ( event.scroll * 50 ) ); } } } @@ -412,27 +554,22 @@ function onStripScroll( event ) { function loadPanels( strip, viewerSize, scroll ) { - var panelSize, - activePanelsStart, - activePanelsEnd, - miniViewer, - i, - element; + let panelSize; 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; + const activePanelsEnd = Math.ceil( ( Math.abs( scroll ) + viewerSize ) / panelSize ) + 1; + let activePanelsStart = Math.ceil( viewerSize / panelSize ) + 5; 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 ) { - var miniTileSource; - var originalTileSource = strip.viewer.tileSources[i]; + for ( let i = activePanelsStart; i < activePanelsEnd && i < strip.panels.length; i++ ) { + const panelElement = strip.panels[i]; + if ( !panelElement.activePanel ) { + const originalTileSource = strip.viewer.tileSources[i]; + let miniTileSource; if (originalTileSource.referenceStripThumbnailUrl) { miniTileSource = { type: 'image', @@ -441,21 +578,17 @@ function loadPanels( strip, viewerSize, scroll ) { } else { miniTileSource = originalTileSource; } - miniViewer = new $.Viewer( { - id: element.id, + const miniViewer = new $.Viewer( { + id: panelElement.id, tileSources: [miniTileSource], - element: element, - navigatorSizeRatio: strip.sizeRatio, - showNavigator: false, + element: panelElement, mouseNavEnabled: false, showNavigationControl: false, - showSequenceControl: false, immediateRender: true, blendTime: 0, animationTime: 0, loadTilesWithAjax: strip.viewer.loadTilesWithAjax, ajaxHeaders: strip.viewer.ajaxHeaders, - useCanvas: strip.useCanvas } ); // Allow pointer events to pass through miniViewer's canvas/container // elements so implicit pointer capture works on touch devices @@ -466,9 +599,9 @@ function loadPanels( strip, viewerSize, scroll ) { miniViewer.innerTracker.setTracking( false ); miniViewer.outerTracker.setTracking( false ); - strip.miniViewers[element.id] = miniViewer; + strip.miniViewers[panelElement.id] = miniViewer; - element.activePanel = true; + panelElement.activePanel = true; } } } @@ -480,7 +613,7 @@ function loadPanels( strip, viewerSize, scroll ) { * @function */ function onStripEnter( event ) { - var element = event.eventSource.element; + const element = event.eventSource.element; //$.setElementOpacity(element, 0.8); @@ -507,7 +640,7 @@ function onStripEnter( event ) { * @function */ function onStripLeave( event ) { - var element = event.eventSource.element; + const element = event.eventSource.element; if ( 'horizontal' === this.scroll ) { @@ -528,29 +661,29 @@ function onStripLeave( event ) { * @inner * @function */ -function onKeyDown( event ) { +function onStripKeyDown( event ) { //console.log( event.keyCode ); if ( !event.ctrl && !event.alt && !event.meta ) { switch ( event.keyCode ) { case 38: //up arrow - onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } ); + onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: 1, shift: null } ); event.preventDefault = true; break; case 40: //down arrow - onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } ); + onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: -1, shift: null } ); event.preventDefault = true; break; case 37: //left arrow - onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } ); + onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: -1, shift: null } ); event.preventDefault = true; break; case 39: //right arrow - onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } ); + onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: 1, shift: null } ); event.preventDefault = true; break; default: - //console.log( 'navigator keycode %s', event.keyCode ); + //console.log( 'reference strip keycode %s', event.keyCode ); event.preventDefault = false; break; } @@ -565,40 +698,40 @@ function onKeyDown( event ) { * @inner * @function */ -function onKeyPress( event ) { +function onStripKeyPress( event ) { //console.log( event.keyCode ); if ( !event.ctrl && !event.alt && !event.meta ) { switch ( event.keyCode ) { case 61: //=|+ - onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } ); + onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: 1, shift: null } ); event.preventDefault = true; break; case 45: //-|_ - onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } ); + onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: -1, shift: null } ); event.preventDefault = true; break; case 48: //0|) case 119: //w case 87: //W - onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } ); + onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: 1, shift: null } ); event.preventDefault = true; break; case 115: //s case 83: //S - onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } ); + onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: -1, shift: null } ); event.preventDefault = true; break; case 97: //a - onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } ); + onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: -1, shift: null } ); event.preventDefault = true; break; case 100: //d - onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } ); + onStripScroll.call( this, { eventSource: this.stripTracker, position: null, scroll: 1, shift: null } ); 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 d82a2d77..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,16 +2412,26 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, if (this.tileSources.length && this.tileSources.length > 1) { this.referenceStrip = new $.ReferenceStrip({ - id: this.referenceStripElement, - position: this.referenceStripPosition, - sizeRatio: this.referenceStripSizeRatio, - scroll: this.referenceStripScroll, - height: this.referenceStripHeight, - width: this.referenceStripWidth, - tileSources: this.tileSources, - prefixUrl: this.prefixUrl, - useCanvas: this.useCanvas, - viewer: this + 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 ); @@ -3721,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;