From 885c4d8e513616c0d565ceb6b71ab8e713884e61 Mon Sep 17 00:00:00 2001 From: Mark Salsbery <> Date: Thu, 18 Mar 2021 21:35:56 -0700 Subject: [PATCH 1/6] Initial commit for ReferenceStrip overhaul 2021 --- src/openseadragon.js | 4 ++-- src/referencestrip.js | 21 +++++++++++++++++++++ src/viewer.js | 2 +- 3 files changed, 24 insertions(+), 3 deletions(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index ff011fb7..4b89e31c 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -601,7 +601,7 @@ * * @property {String} [referenceStripScroll='horizontal'] * - * @property {Element} [referenceStripElement=null] + * @property {Element} [referenceStripId=null] * * @property {Number} [referenceStripHeight=null] * @@ -1260,7 +1260,7 @@ function OpenSeadragon( options ){ //REFERENCE STRIP SETTINGS showReferenceStrip: false, referenceStripScroll: 'horizontal', - referenceStripElement: null, + referenceStripId: null, referenceStripHeight: null, referenceStripWidth: null, referenceStripPosition: 'BOTTOM_LEFT', diff --git a/src/referencestrip.js b/src/referencestrip.js index 20dd9ea9..e991699c 100644 --- a/src/referencestrip.js +++ b/src/referencestrip.js @@ -62,6 +62,27 @@ var THIS = {}; * @param {Object} options */ $.ReferenceStrip = function ( options ) { + // //REFERENCE STRIP SETTINGS ($.DEFAULT_SETTINGS) + // showReferenceStrip: false, + // referenceStripScroll: 'horizontal', + // referenceStripId: null, + // referenceStripHeight: null, + // referenceStripWidth: null, + // referenceStripPosition: 'BOTTOM_LEFT', + // referenceStripSizeRatio: 0.2, + + // this.referenceStrip = new $.ReferenceStrip({ + // id: this.referenceStripId, + // 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 + // }); var _this = this, viewer = options.viewer, diff --git a/src/viewer.js b/src/viewer.js index 29b2054a..4b3812cc 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2249,7 +2249,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype, if (this.tileSources.length && this.tileSources.length > 1) { this.referenceStrip = new $.ReferenceStrip({ - id: this.referenceStripElement, + id: this.referenceStripId, position: this.referenceStripPosition, sizeRatio: this.referenceStripSizeRatio, scroll: this.referenceStripScroll, From 7d19edff34f7491248064bef1efa69af588c40a0 Mon Sep 17 00:00:00 2001 From: Mark Salsbery <> Date: Mon, 14 Jun 2021 11:42:39 -0700 Subject: [PATCH 2/6] Fixed panelWidth/panelHeight calculations (fixes #1992) --- src/referencestrip.js | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/referencestrip.js b/src/referencestrip.js index e991699c..4bf2f9b2 100644 --- a/src/referencestrip.js +++ b/src/referencestrip.js @@ -155,6 +155,10 @@ $.ReferenceStrip = function ( options ) { //Controls the position and orientation of the reference strip and sets the //appropriate width and height if ( options.width && options.height ) { + //TODO fix this - isn't correct + this.panelWidth = ( viewerSize.x * this.sizeRatio ) + 12; + this.panelHeight = ( viewerSize.y * this.sizeRatio ); + this.element.style.width = options.width + 'px'; this.element.style.height = options.height + 'px'; viewer.addControl( @@ -163,33 +167,31 @@ $.ReferenceStrip = function ( options ) { ); } 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.element.style.width = ( + this.panelWidth * + viewer.tileSources.length ) + 'px'; + this.element.style.height = this.panelHeight + '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.panelWidth = ( viewerSize.x * this.sizeRatio ); + this.panelHeight = ( viewerSize.y * this.sizeRatio ) + 12; - this.element.style.width = ( - viewerSize.x * - options.sizeRatio + this.element.style.height = ( + this.panelHeight * + viewer.tileSources.length ) + 'px'; + this.element.style.width = this.panelWidth + 'px'; + viewer.addControl( this.element, { anchor: $.ControlAnchor.TOP_LEFT } @@ -198,8 +200,6 @@ $.ReferenceStrip = function ( options ) { } } - this.panelWidth = ( viewerSize.x * this.sizeRatio ) + 8; - this.panelHeight = ( viewerSize.y * this.sizeRatio ) + 8; this.panels = []; this.miniViewers = {}; From bef045c9dfd2d78ddef81988d7dab5c634e44b5d Mon Sep 17 00:00:00 2001 From: Mark Salsbery Date: Fri, 11 Aug 2023 10:57:45 -0700 Subject: [PATCH 3/6] Revert PR #2280 (fix for issue #1992) --- src/referencestrip.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/referencestrip.js b/src/referencestrip.js index 7220da48..c668467c 100644 --- a/src/referencestrip.js +++ b/src/referencestrip.js @@ -321,8 +321,11 @@ function onStripClick( event ) { var 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); } From f683a32e32766c279ed15093313609fdbf76a65a Mon Sep 17 00:00:00 2001 From: Mark Salsbery Date: Fri, 11 Aug 2023 20:42:30 -0700 Subject: [PATCH 4/6] ES6 --- src/referencestrip.js | 215 +++++++++++++++++++++--------------------- 1 file changed, 105 insertions(+), 110 deletions(-) diff --git a/src/referencestrip.js b/src/referencestrip.js index c668467c..414db9b0 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 @@ -84,42 +84,43 @@ $.ReferenceStrip = function ( options ) { // viewer: this // }); - var _this = this, - viewer = options.viewer, - viewerSize = $.getElementSize( viewer.element ), - element, - style, - i; + 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, + { + sizeRatio: $.DEFAULT_SETTINGS.referenceStripSizeRatio, + position: $.DEFAULT_SETTINGS.referenceStripPosition, + scroll: $.DEFAULT_SETTINGS.referenceStripScroll, + clickTimeThreshold: $.DEFAULT_SETTINGS.clickTimeThreshold + }, + options, + { + element: this.stripElement + } + ); $.extend( this, options ); //Private state properties THIS[this.id] = { - animating: false + animating: false }; this.minPixelRatio = this.viewer.minPixelRatio; - this.element.tabIndex = 0; + this.stripElement.tabIndex = 0; - style = this.element.style; + const style = this.stripElement.style; style.marginTop = '0px'; style.marginRight = '0px'; style.marginBottom = '0px'; @@ -130,14 +131,14 @@ $.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, + element: this.stripElement, clickHandler: $.delegate( this, onStripClick ), dragHandler: $.delegate( this, onStripDrag ), scrollHandler: $.delegate( this, onStripScroll ), @@ -159,10 +160,10 @@ $.ReferenceStrip = function ( options ) { this.panelWidth = ( viewerSize.x * this.sizeRatio ) + 12; this.panelHeight = ( viewerSize.y * this.sizeRatio ); - this.element.style.width = options.width + 'px'; - this.element.style.height = options.height + 'px'; + 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 { @@ -170,30 +171,30 @@ $.ReferenceStrip = function ( options ) { this.panelWidth = ( viewerSize.x * this.sizeRatio ) + 12; this.panelHeight = ( viewerSize.y * this.sizeRatio ); - this.element.style.width = ( + this.stripElement.style.width = ( this.panelWidth * viewer.tileSources.length ) + 'px'; - this.element.style.height = this.panelHeight + 'px'; + this.stripElement.style.height = this.panelHeight + 'px'; viewer.addControl( - this.element, + this.stripElement, { anchor: $.ControlAnchor.BOTTOM_LEFT } ); } else { this.panelWidth = ( viewerSize.x * this.sizeRatio ); this.panelHeight = ( viewerSize.y * this.sizeRatio ) + 12; - this.element.style.height = ( + this.stripElement.style.height = ( this.panelHeight * viewer.tileSources.length ) + 'px'; - this.element.style.width = this.panelWidth + 'px'; + this.stripElement.style.width = this.panelWidth + 'px'; viewer.addControl( - this.element, + this.stripElement, { anchor: $.ControlAnchor.TOP_LEFT } ); @@ -204,26 +205,27 @@ $.ReferenceStrip = function ( options ) { 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 ); @@ -238,42 +240,41 @@ $.ReferenceStrip.prototype = { * @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 ); } } @@ -296,15 +297,15 @@ $.ReferenceStrip.prototype = { destroy: function() { if (this.miniViewers) { - for (var key in this.miniViewers) { + for (const key in this.miniViewers) { this.miniViewers[key].destroy(); } } this.tracker.destroy(); - if (this.element) { - this.viewer.removeControl( this.element ); + if (this.stripElement) { + this.viewer.removeControl( this.stripElement ); } } @@ -318,7 +319,7 @@ $.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 @@ -333,7 +334,7 @@ function onStripClick( event ) { this.viewer.goToPage( page ); } - this.element.focus(); + this.stripElement.focus(); } @@ -344,25 +345,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 ) ); } } @@ -370,13 +370,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 ) ); } } @@ -393,24 +393,24 @@ 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'; + this.stripElement.style.marginLeft = ( offsetLeft - ( event.scroll * 60 ) ) + 'px'; loadPanels( this, viewerSize.x, offsetLeft - ( event.scroll * 60 ) ); } } else if ( event.scroll < 0 ) { //reverse if ( offsetLeft < 0 ) { - this.element.style.marginLeft = ( offsetLeft - ( event.scroll * 60 ) ) + 'px'; + this.stripElement.style.marginLeft = ( offsetLeft - ( event.scroll * 60 ) ) + 'px'; loadPanels( this, viewerSize.x, offsetLeft - ( event.scroll * 60 ) ); } } @@ -418,13 +418,13 @@ function onStripScroll( event ) { if ( event.scroll < 0 ) { //scroll up if ( offsetTop > viewerSize.y - scrollHeight ) { - this.element.style.marginTop = ( offsetTop + ( event.scroll * 60 ) ) + 'px'; + this.stripElement.style.marginTop = ( offsetTop + ( event.scroll * 60 ) ) + 'px'; loadPanels( this, viewerSize.y, offsetTop + ( event.scroll * 60 ) ); } } else if ( event.scroll > 0 ) { //scroll dowm if ( offsetTop < 0 ) { - this.element.style.marginTop = ( offsetTop + ( event.scroll * 60 ) ) + 'px'; + this.stripElement.style.marginTop = ( offsetTop + ( event.scroll * 60 ) ) + 'px'; loadPanels( this, viewerSize.y, offsetTop + ( event.scroll * 60 ) ); } } @@ -436,27 +436,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', @@ -465,10 +460,10 @@ 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, + element: panelElement, navigatorSizeRatio: strip.sizeRatio, showNavigator: false, mouseNavEnabled: false, @@ -490,9 +485,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; } } } @@ -504,7 +499,7 @@ function loadPanels( strip, viewerSize, scroll ) { * @function */ function onStripEnter( event ) { - var element = event.eventSource.element; + const element = event.eventSource.element; //$.setElementOpacity(element, 0.8); @@ -531,7 +526,7 @@ function onStripEnter( event ) { * @function */ function onStripLeave( event ) { - var element = event.eventSource.element; + const element = event.eventSource.element; if ( 'horizontal' === this.scroll ) { From 406baa1891d252c575764a6a8264dcc917e1f067 Mon Sep 17 00:00:00 2001 From: Mark Salsbery Date: Fri, 11 Aug 2023 23:52:15 -0700 Subject: [PATCH 5/6] Default/options/member variable cleanup Clean up before fixing/adding features --- src/openseadragon.js | 16 ++++----- src/referencestrip.js | 79 ++++++++++++++++++++----------------------- src/viewer.js | 9 ++--- 3 files changed, 48 insertions(+), 56 deletions(-) diff --git a/src/openseadragon.js b/src/openseadragon.js index fd631834..a4abf84e 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -645,18 +645,18 @@ * If sequenceMode is true, then display a scrolling strip of image thumbnails for * navigating through the images. * - * @property {String} [referenceStripScroll='horizontal'] - * * @property {Element} [referenceStripId=null] * - * @property {Number} [referenceStripHeight=null] - * - * @property {Number} [referenceStripWidth=null] + * @property {String} [referenceStripScroll='horizontal'] * * @property {String} [referenceStripPosition='BOTTOM_LEFT'] * * @property {Number} [referenceStripSizeRatio=0.2] * + * @property {Number} [referenceStripHeight=null] + * + * @property {Number} [referenceStripWidth=null] + * * @property {Boolean} [collectionMode=false] * Set to true to have the viewer arrange your TiledImages in a grid or line. * @@ -1348,12 +1348,12 @@ function OpenSeadragon( options ){ //REFERENCE STRIP SETTINGS showReferenceStrip: false, - referenceStripScroll: 'horizontal', referenceStripId: null, - referenceStripHeight: null, - referenceStripWidth: null, + referenceStripScroll: 'horizontal', referenceStripPosition: 'BOTTOM_LEFT', referenceStripSizeRatio: 0.2, + referenceStripHeight: null, + referenceStripWidth: null, //COLLECTION VISUALIZATION SETTINGS collectionRows: 3, //or columns depending on layout diff --git a/src/referencestrip.js b/src/referencestrip.js index 414db9b0..d5436f41 100644 --- a/src/referencestrip.js +++ b/src/referencestrip.js @@ -64,24 +64,21 @@ const THIS = {}; $.ReferenceStrip = function ( options ) { // //REFERENCE STRIP SETTINGS ($.DEFAULT_SETTINGS) // showReferenceStrip: false, - // referenceStripScroll: 'horizontal', // referenceStripId: null, - // referenceStripHeight: null, - // referenceStripWidth: null, + // referenceStripScroll: 'horizontal', // referenceStripPosition: 'BOTTOM_LEFT', // referenceStripSizeRatio: 0.2, + // referenceStripHeight: null, + // referenceStripWidth: null, // this.referenceStrip = new $.ReferenceStrip({ + // viewer: this, // id: this.referenceStripId, + // scroll: this.referenceStripScroll, // 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 + // width: this.referenceStripWidth // }); const viewer = options.viewer, @@ -102,15 +99,12 @@ $.ReferenceStrip = function ( options ) { sizeRatio: $.DEFAULT_SETTINGS.referenceStripSizeRatio, position: $.DEFAULT_SETTINGS.referenceStripPosition, scroll: $.DEFAULT_SETTINGS.referenceStripScroll, - clickTimeThreshold: $.DEFAULT_SETTINGS.clickTimeThreshold }, - options, - { - element: this.stripElement - } + options ); $.extend( this, options ); + //Private state properties THIS[this.id] = { animating: false @@ -135,17 +129,18 @@ $.ReferenceStrip = function ( options ) { $.setElementOpacity( this.stripElement, 0.8 ); - this.viewer = viewer; - this.tracker = new $.MouseTracker( { - userData: 'ReferenceStrip.tracker', + 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, onKeyDown ), - keyHandler: $.delegate( this, onKeyPress ), + keyDownHandler: $.delegate( this, onStripKeyDown ), + keyHandler: $.delegate( this, onStripKeyPress ), preProcessEventHandler: function (eventInfo) { if (eventInfo.eventType === 'wheel') { eventInfo.preventDefault = true; @@ -280,7 +275,7 @@ $.ReferenceStrip.prototype = { } this.currentPage = page; - onStripEnter.call( this, { eventSource: this.tracker } ); + onStripEnter.call( this, { eventSource: this.stripTracker } ); } }, @@ -302,7 +297,7 @@ $.ReferenceStrip.prototype = { } } - this.tracker.destroy(); + this.stripTracker.destroy(); if (this.stripElement) { this.viewer.removeControl( this.stripElement ); @@ -404,28 +399,28 @@ function onStripScroll( event ) { if ( event.scroll > 0 ) { //forward if ( offsetLeft > -( scrollWidth - viewerSize.x ) ) { - this.stripElement.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.stripElement.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.stripElement.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.stripElement.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 ) ); } } } @@ -474,7 +469,7 @@ function loadPanels( strip, viewerSize, scroll ) { animationTime: 0, loadTilesWithAjax: strip.viewer.loadTilesWithAjax, ajaxHeaders: strip.viewer.ajaxHeaders, - useCanvas: strip.useCanvas + 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 @@ -547,25 +542,25 @@ 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: @@ -584,36 +579,36 @@ 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: diff --git a/src/viewer.js b/src/viewer.js index 2795794b..cc8fb220 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2395,16 +2395,13 @@ $.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, - scroll: this.referenceStripScroll, height: this.referenceStripHeight, - width: this.referenceStripWidth, - tileSources: this.tileSources, - prefixUrl: this.prefixUrl, - useCanvas: this.useCanvas, - viewer: this + width: this.referenceStripWidth }); this.referenceStrip.setFocus( this._sequenceIndex ); From bc1ca64fbb24a71b845cd68fe9594011e16b0310 Mon Sep 17 00:00:00 2001 From: Mark Salsbery Date: Sat, 12 Aug 2023 14:34:51 -0700 Subject: [PATCH 6/6] New options for fixing/adding features --- src/openseadragon.js | 78 ++++++++++++++++--- src/referencestrip.js | 177 +++++++++++++++++++++++++++++++++++------- src/viewer.js | 49 +++++++++--- 3 files changed, 257 insertions(+), 47 deletions(-) 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;