mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-23 21:56:10 +03:00
Code Issues Projects Releases Wiki Activity

ES6

Browse Source
This commit is contained in:
Mark Salsbery 2023-08-11 20:42:30 -07:00
parent bef045c9df
commit f683a32e32
1 changed files with 105 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

215
src/referencestrip.js
View File

@ -35,7 +35,7 @@
(function ( $ ) { (function ( $ ) {
// dictionary from id to private properties // dictionary from id to private properties
var THIS = {}; const THIS = {};
/** /**
* The CollectionDrawer is a reimplementation if the Drawer API that * The CollectionDrawer is a reimplementation if the Drawer API that
@ -84,42 +84,43 @@ $.ReferenceStrip = function ( options ) {
// viewer: this // viewer: this
// }); // });
var _this = this, const viewer = options.viewer,
viewer = options.viewer, viewerSize = $.getElementSize( viewer.element );
viewerSize = $.getElementSize( viewer.element ),
element,
style,
i;
//We may need to create a new element and id if they did not //We may need to create a new element and id if they did not
//provide the id for the existing element //provide the id for the existing element
if ( !options.id ) { if ( !options.id ) {
options.id = 'referencestrip-' + $.now(); options.id = 'referencestrip-' + $.now();
this.element = $.makeNeutralElement( "div" ); this.stripElement = $.makeNeutralElement( "div" );
this.element.id = options.id; this.stripElement.id = options.id;
this.element.className = 'referencestrip'; this.stripElement.className = 'referencestrip';
} }
options = $.extend( true, { options = $.extend(
sizeRatio: $.DEFAULT_SETTINGS.referenceStripSizeRatio, true,
position: $.DEFAULT_SETTINGS.referenceStripPosition, {
scroll: $.DEFAULT_SETTINGS.referenceStripScroll, sizeRatio: $.DEFAULT_SETTINGS.referenceStripSizeRatio,
clickTimeThreshold: $.DEFAULT_SETTINGS.clickTimeThreshold position: $.DEFAULT_SETTINGS.referenceStripPosition,
}, options, { scroll: $.DEFAULT_SETTINGS.referenceStripScroll,
element: this.element clickTimeThreshold: $.DEFAULT_SETTINGS.clickTimeThreshold
} ); },
options,
{
element: this.stripElement
}
);
$.extend( this, options ); $.extend( this, options );
//Private state properties //Private state properties
THIS[this.id] = { THIS[this.id] = {
animating: false animating: false
}; };
this.minPixelRatio = this.viewer.minPixelRatio; 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.marginTop = '0px';
style.marginRight = '0px'; style.marginRight = '0px';
style.marginBottom = '0px'; style.marginBottom = '0px';
@ -130,14 +131,14 @@ $.ReferenceStrip = function ( options ) {
style.background = '#000'; style.background = '#000';
style.position = 'relative'; style.position = 'relative';
$.setElementTouchActionNone( this.element ); $.setElementTouchActionNone( this.stripElement );
$.setElementOpacity( this.element, 0.8 ); $.setElementOpacity( this.stripElement, 0.8 );
this.viewer = viewer; this.viewer = viewer;
this.tracker = new $.MouseTracker( { this.tracker = new $.MouseTracker( {
userData: 'ReferenceStrip.tracker', userData: 'ReferenceStrip.tracker',
element: this.element, element: this.stripElement,
clickHandler: $.delegate( this, onStripClick ), clickHandler: $.delegate( this, onStripClick ),
dragHandler: $.delegate( this, onStripDrag ), dragHandler: $.delegate( this, onStripDrag ),
scrollHandler: $.delegate( this, onStripScroll ), scrollHandler: $.delegate( this, onStripScroll ),
@ -159,10 +160,10 @@ $.ReferenceStrip = function ( options ) {
this.panelWidth = ( viewerSize.x * this.sizeRatio ) + 12; this.panelWidth = ( viewerSize.x * this.sizeRatio ) + 12;
this.panelHeight = ( viewerSize.y * this.sizeRatio ); this.panelHeight = ( viewerSize.y * this.sizeRatio );
this.element.style.width = options.width + 'px'; this.stripElement.style.width = options.width + 'px';
this.element.style.height = options.height + 'px'; this.stripElement.style.height = options.height + 'px';
viewer.addControl( viewer.addControl(
this.element, this.stripElement,
{ anchor: $.ControlAnchor.BOTTOM_LEFT } { anchor: $.ControlAnchor.BOTTOM_LEFT }
); );
} else { } else {
@ -170,30 +171,30 @@ $.ReferenceStrip = function ( options ) {
this.panelWidth = ( viewerSize.x * this.sizeRatio ) + 12; this.panelWidth = ( viewerSize.x * this.sizeRatio ) + 12;
this.panelHeight = ( viewerSize.y * this.sizeRatio ); this.panelHeight = ( viewerSize.y * this.sizeRatio );
this.element.style.width = ( this.stripElement.style.width = (
this.panelWidth * this.panelWidth *
viewer.tileSources.length viewer.tileSources.length
) + 'px'; ) + 'px';
this.element.style.height = this.panelHeight + 'px'; this.stripElement.style.height = this.panelHeight + 'px';
viewer.addControl( viewer.addControl(
this.element, this.stripElement,
{ anchor: $.ControlAnchor.BOTTOM_LEFT } { anchor: $.ControlAnchor.BOTTOM_LEFT }
); );
} else { } else {
this.panelWidth = ( viewerSize.x * this.sizeRatio ); this.panelWidth = ( viewerSize.x * this.sizeRatio );
this.panelHeight = ( viewerSize.y * this.sizeRatio ) + 12; this.panelHeight = ( viewerSize.y * this.sizeRatio ) + 12;
this.element.style.height = ( this.stripElement.style.height = (
this.panelHeight * this.panelHeight *
viewer.tileSources.length viewer.tileSources.length
) + 'px'; ) + 'px';
this.element.style.width = this.panelWidth + 'px'; this.stripElement.style.width = this.panelWidth + 'px';
viewer.addControl( viewer.addControl(
this.element, this.stripElement,
{ anchor: $.ControlAnchor.TOP_LEFT } { anchor: $.ControlAnchor.TOP_LEFT }
); );
@ -204,26 +205,27 @@ $.ReferenceStrip = function ( options ) {
this.miniViewers = {}; this.miniViewers = {};
/*jshint loopfunc:true*/ /*jshint loopfunc:true*/
for ( i = 0; i < viewer.tileSources.length; i++ ) { for ( let i = 0; i < viewer.tileSources.length; i++ ) {
element = $.makeNeutralElement( 'div' ); const panelElement = $.makeNeutralElement( 'div' );
element.id = this.element.id + "-" + i;
element.style.width = _this.panelWidth + 'px'; panelElement.id = this.stripElement.id + "-" + i;
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 );
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 ); loadPanels( this, this.scroll === 'vertical' ? viewerSize.y : viewerSize.x, 0 );
@ -238,42 +240,41 @@ $.ReferenceStrip.prototype = {
* @function * @function
*/ */
setFocus: function ( page ) { setFocus: function ( page ) {
var element = this.element.querySelector('#' + this.element.id + '-' + page ), const panelElement = this.stripElement.querySelector('#' + this.stripElement.id + '-' + page ),
viewerSize = $.getElementSize( this.viewer.canvas ), viewerSize = $.getElementSize( this.viewer.canvas ),
scrollWidth = Number( this.element.style.width.replace( 'px', '' ) ), scrollWidth = Number( this.stripElement.style.width.replace( 'px', '' ) ),
scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ), scrollHeight = Number( this.stripElement.style.height.replace( 'px', '' ) ),
offsetLeft = -Number( this.element.style.marginLeft.replace( 'px', '' ) ), offsetLeft = -Number( this.stripElement.style.marginLeft.replace( 'px', '' ) ),
offsetTop = -Number( this.element.style.marginTop.replace( 'px', '' ) ), offsetTop = -Number( this.stripElement.style.marginTop.replace( 'px', '' ) );
offset;
if ( this.currentSelected !== element ) { if ( this.currentSelected !== panelElement ) {
if ( this.currentSelected ) { if ( this.currentSelected ) {
this.currentSelected.style.background = '#000'; this.currentSelected.style.background = '#000';
} }
this.currentSelected = element; this.currentSelected = panelElement;
this.currentSelected.style.background = '#999'; this.currentSelected.style.background = '#999';
if ( 'horizontal' === this.scroll ) { if ( 'horizontal' === this.scroll ) {
//right left //right left
offset = ( Number( page ) ) * ( this.panelWidth + 3 ); let offset = ( Number( page ) ) * ( this.panelWidth + 3 );
if ( offset > offsetLeft + viewerSize.x - this.panelWidth ) { if ( offset > offsetLeft + viewerSize.x - this.panelWidth ) {
offset = Math.min( offset, ( scrollWidth - viewerSize.x ) ); offset = Math.min( offset, ( scrollWidth - viewerSize.x ) );
this.element.style.marginLeft = -offset + 'px'; this.stripElement.style.marginLeft = -offset + 'px';
loadPanels( this, viewerSize.x, -offset ); loadPanels( this, viewerSize.x, -offset );
} else if ( offset < offsetLeft ) { } else if ( offset < offsetLeft ) {
offset = Math.max( 0, offset - viewerSize.x / 2 ); 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 ); loadPanels( this, viewerSize.x, -offset );
} }
} else { } else {
offset = ( Number( page ) ) * ( this.panelHeight + 3 ); let offset = ( Number( page ) ) * ( this.panelHeight + 3 );
if ( offset > offsetTop + viewerSize.y - this.panelHeight ) { if ( offset > offsetTop + viewerSize.y - this.panelHeight ) {
offset = Math.min( offset, ( scrollHeight - viewerSize.y ) ); offset = Math.min( offset, ( scrollHeight - viewerSize.y ) );
this.element.style.marginTop = -offset + 'px'; this.stripElement.style.marginTop = -offset + 'px';
loadPanels( this, viewerSize.y, -offset ); loadPanels( this, viewerSize.y, -offset );
} else if ( offset < offsetTop ) { } else if ( offset < offsetTop ) {
offset = Math.max( 0, offset - viewerSize.y / 2 ); 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 ); loadPanels( this, viewerSize.y, -offset );
} }
} }
@ -296,15 +297,15 @@ $.ReferenceStrip.prototype = {
destroy: function() { destroy: function() {
if (this.miniViewers) { if (this.miniViewers) {
for (var key in this.miniViewers) { for (const key in this.miniViewers) {
this.miniViewers[key].destroy(); this.miniViewers[key].destroy();
} }
} }
this.tracker.destroy(); this.tracker.destroy();
if (this.element) { if (this.stripElement) {
this.viewer.removeControl( this.element ); this.viewer.removeControl( this.stripElement );
} }
} }
@ -318,7 +319,7 @@ $.ReferenceStrip.prototype = {
*/ */
function onStripClick( event ) { function onStripClick( event ) {
if ( event.quick ) { if ( event.quick ) {
var page; let page;
if ( 'horizontal' === this.scroll ) { if ( 'horizontal' === this.scroll ) {
// // +4px fix to solve problem with precision on thumbnail selection if there is a lot of them // // +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.viewer.goToPage( page );
} }
this.element.focus(); this.stripElement.focus();
} }
@ -344,25 +345,24 @@ function onStripClick( event ) {
*/ */
function onStripDrag( event ) { function onStripDrag( event ) {
this.dragging = true; if ( this.stripElement ) {
if ( this.element ) { const offsetLeft = Number( this.stripElement.style.marginLeft.replace( 'px', '' ) ),
var offsetLeft = Number( this.element.style.marginLeft.replace( 'px', '' ) ), offsetTop = Number( this.stripElement.style.marginTop.replace( 'px', '' ) ),
offsetTop = Number( this.element.style.marginTop.replace( 'px', '' ) ), scrollWidth = Number( this.stripElement.style.width.replace( 'px', '' ) ),
scrollWidth = Number( this.element.style.width.replace( 'px', '' ) ), scrollHeight = Number( this.stripElement.style.height.replace( 'px', '' ) ),
scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ), viewerSize = $.getElementSize( this.viewer.canvas );
viewerSize = $.getElementSize( this.viewer.canvas );
if ( 'horizontal' === this.scroll ) { if ( 'horizontal' === this.scroll ) {
if ( -event.delta.x > 0 ) { if ( -event.delta.x > 0 ) {
//forward //forward
if ( offsetLeft > -( scrollWidth - viewerSize.x ) ) { 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 ) ); loadPanels( this, viewerSize.x, offsetLeft + ( event.delta.x * 2 ) );
} }
} else if ( -event.delta.x < 0 ) { } else if ( -event.delta.x < 0 ) {
//reverse //reverse
if ( offsetLeft < 0 ) { 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 ) ); loadPanels( this, viewerSize.x, offsetLeft + ( event.delta.x * 2 ) );
} }
} }
@ -370,13 +370,13 @@ function onStripDrag( event ) {
if ( -event.delta.y > 0 ) { if ( -event.delta.y > 0 ) {
//forward //forward
if ( offsetTop > -( scrollHeight - viewerSize.y ) ) { 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 ) ); loadPanels( this, viewerSize.y, offsetTop + ( event.delta.y * 2 ) );
} }
} else if ( -event.delta.y < 0 ) { } else if ( -event.delta.y < 0 ) {
//reverse //reverse
if ( offsetTop < 0 ) { 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 ) ); loadPanels( this, viewerSize.y, offsetTop + ( event.delta.y * 2 ) );
} }
} }
@ -393,24 +393,24 @@ function onStripDrag( event ) {
* @function * @function
*/ */
function onStripScroll( event ) { function onStripScroll( event ) {
if ( this.element ) { if ( this.stripElement ) {
var offsetLeft = Number( this.element.style.marginLeft.replace( 'px', '' ) ), const offsetLeft = Number( this.stripElement.style.marginLeft.replace( 'px', '' ) ),
offsetTop = Number( this.element.style.marginTop.replace( 'px', '' ) ), offsetTop = Number( this.stripElement.style.marginTop.replace( 'px', '' ) ),
scrollWidth = Number( this.element.style.width.replace( 'px', '' ) ), scrollWidth = Number( this.stripElement.style.width.replace( 'px', '' ) ),
scrollHeight = Number( this.element.style.height.replace( 'px', '' ) ), scrollHeight = Number( this.stripElement.style.height.replace( 'px', '' ) ),
viewerSize = $.getElementSize( this.viewer.canvas ); viewerSize = $.getElementSize( this.viewer.canvas );
if ( 'horizontal' === this.scroll ) { if ( 'horizontal' === this.scroll ) {
if ( event.scroll > 0 ) { if ( event.scroll > 0 ) {
//forward //forward
if ( offsetLeft > -( scrollWidth - viewerSize.x ) ) { 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 ) ); loadPanels( this, viewerSize.x, offsetLeft - ( event.scroll * 60 ) );
} }
} else if ( event.scroll < 0 ) { } else if ( event.scroll < 0 ) {
//reverse //reverse
if ( offsetLeft < 0 ) { 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 ) ); loadPanels( this, viewerSize.x, offsetLeft - ( event.scroll * 60 ) );
} }
} }
@ -418,13 +418,13 @@ function onStripScroll( event ) {
if ( event.scroll < 0 ) { if ( event.scroll < 0 ) {
//scroll up //scroll up
if ( offsetTop > viewerSize.y - scrollHeight ) { 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 ) ); loadPanels( this, viewerSize.y, offsetTop + ( event.scroll * 60 ) );
} }
} else if ( event.scroll > 0 ) { } else if ( event.scroll > 0 ) {
//scroll dowm //scroll dowm
if ( offsetTop < 0 ) { 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 ) ); loadPanels( this, viewerSize.y, offsetTop + ( event.scroll * 60 ) );
} }
} }
@ -436,27 +436,22 @@ function onStripScroll( event ) {
function loadPanels( strip, viewerSize, scroll ) { function loadPanels( strip, viewerSize, scroll ) {
var panelSize, let panelSize;
activePanelsStart,
activePanelsEnd,
miniViewer,
i,
element;
if ( 'horizontal' === strip.scroll ) { if ( 'horizontal' === strip.scroll ) {
panelSize = strip.panelWidth; panelSize = strip.panelWidth;
} else { } else {
panelSize = strip.panelHeight; panelSize = strip.panelHeight;
} }
activePanelsStart = Math.ceil( viewerSize / panelSize ) + 5; const activePanelsEnd = Math.ceil( ( Math.abs( scroll ) + viewerSize ) / panelSize ) + 1;
activePanelsEnd = Math.ceil( ( Math.abs( scroll ) + viewerSize ) / panelSize ) + 1; let activePanelsStart = Math.ceil( viewerSize / panelSize ) + 5;
activePanelsStart = activePanelsEnd - activePanelsStart; activePanelsStart = activePanelsEnd - activePanelsStart;
activePanelsStart = activePanelsStart < 0 ? 0 : activePanelsStart; activePanelsStart = activePanelsStart < 0 ? 0 : activePanelsStart;
for ( i = activePanelsStart; i < activePanelsEnd && i < strip.panels.length; i++ ) { for ( let i = activePanelsStart; i < activePanelsEnd && i < strip.panels.length; i++ ) {
element = strip.panels[i]; const panelElement = strip.panels[i];
if ( !element.activePanel ) { if ( !panelElement.activePanel ) {
var miniTileSource; const originalTileSource = strip.viewer.tileSources[i];
var originalTileSource = strip.viewer.tileSources[i]; let miniTileSource;
if (originalTileSource.referenceStripThumbnailUrl) { if (originalTileSource.referenceStripThumbnailUrl) {
miniTileSource = { miniTileSource = {
type: 'image', type: 'image',
@ -465,10 +460,10 @@ function loadPanels( strip, viewerSize, scroll ) {
} else { } else {
miniTileSource = originalTileSource; miniTileSource = originalTileSource;
} }
miniViewer = new $.Viewer( { const miniViewer = new $.Viewer( {
id: element.id, id: panelElement.id,
tileSources: [miniTileSource], tileSources: [miniTileSource],
element: element, element: panelElement,
navigatorSizeRatio: strip.sizeRatio, navigatorSizeRatio: strip.sizeRatio,
showNavigator: false, showNavigator: false,
mouseNavEnabled: false, mouseNavEnabled: false,
@ -490,9 +485,9 @@ function loadPanels( strip, viewerSize, scroll ) {
miniViewer.innerTracker.setTracking( false ); miniViewer.innerTracker.setTracking( false );
miniViewer.outerTracker.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
*/ */
function onStripEnter( event ) { function onStripEnter( event ) {
var element = event.eventSource.element; const element = event.eventSource.element;
//$.setElementOpacity(element, 0.8); //$.setElementOpacity(element, 0.8);
@ -531,7 +526,7 @@ function onStripEnter( event ) {
* @function * @function
*/ */
function onStripLeave( event ) { function onStripLeave( event ) {
var element = event.eventSource.element; const element = event.eventSource.element;
if ( 'horizontal' === this.scroll ) { if ( 'horizontal' === this.scroll ) {