From 406baa1891d252c575764a6a8264dcc917e1f067 Mon Sep 17 00:00:00 2001 From: Mark Salsbery Date: Fri, 11 Aug 2023 23:52:15 -0700 Subject: [PATCH] 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 );