From 44a997b03bced53bff9eb089831e474d3a88484a Mon Sep 17 00:00:00 2001 From: thatcher Date: Thu, 22 Dec 2011 20:08:06 -0500 Subject: [PATCH] removed NavControl abstraction since it is only applied in Viewer. Made all psuedo-private _methods closure private functions which still use $.delegate ( $.delegate is a pattern I still dislike and eventually hope to remove if possible ). --- openseadragon.js | 298 ++++++++++++++++++++++++---------------------- src/navcontrol.js | 137 --------------------- src/viewer.js | 161 ++++++++++++++++++++++++- 3 files changed, 316 insertions(+), 280 deletions(-) diff --git a/openseadragon.js b/openseadragon.js index 8d727515..2a4d9a59 100644 --- a/openseadragon.js +++ b/openseadragon.js @@ -1222,147 +1222,10 @@ $.Utils = new $.Utils(); (function( $ ){ $.NavControl = function( viewer ) { - this._group = null; - this._zooming = false; // whether we should be continuously zooming - this._zoomFactor = null; // how much we should be continuously zooming by - this._lastZoomTime = null; - this._viewer = viewer; - this.config = this._viewer.config; - - this.elmt = null; - - var beginZoomingInHandler = $.delegate(this, this._beginZoomingIn); - var endZoomingHandler = $.delegate(this, this._endZooming); - var doSingleZoomInHandler = $.delegate(this, this._doSingleZoomIn); - var beginZoomingOutHandler = $.delegate(this, this._beginZoomingOut); - var doSingleZoomOutHandler = $.delegate(this, this._doSingleZoomOut); - var onHomeHandler = $.delegate(this, this._onHome); - var onFullPageHandler = $.delegate(this, this._onFullPage); - - var navImages = this._viewer.config.navImages; - - var zoomIn = new $.Button({ - config: this._viewer.config, - tooltip: $.Strings.getString("Tooltips.ZoomIn"), - srcRest: this._resolveUrl(navImages.zoomIn.REST), - srcGroup: this._resolveUrl(navImages.zoomIn.GROUP), - srcHover: this._resolveUrl(navImages.zoomIn.HOVER), - srcDown: this._resolveUrl(navImages.zoomIn.DOWN), - onPress: beginZoomingInHandler, - onRelease: endZoomingHandler, - onClick: doSingleZoomInHandler, - onEnter: beginZoomingInHandler, - onExit: endZoomingHandler - }); - var zoomOut = new $.Button({ - config: this._viewer.config, - tooltip: $.Strings.getString("Tooltips.ZoomOut"), - srcRest: this._resolveUrl(navImages.zoomOut.REST), - srcGroup: this._resolveUrl(navImages.zoomOut.GROUP), - srcHover: this._resolveUrl(navImages.zoomOut.HOVER), - srcDown: this._resolveUrl(navImages.zoomOut.DOWN), - onPress: beginZoomingOutHandler, - onRelease: endZoomingHandler, - onClick: doSingleZoomOutHandler, - onEnter: beginZoomingOutHandler, - onExit: endZoomingHandler - }); - var goHome = new $.Button({ - config: this._viewer.config, - tooltip: $.Strings.getString("Tooltips.Home"), - srcRest: this._resolveUrl(navImages.home.REST), - srcGroup: this._resolveUrl(navImages.home.GROUP), - srcHover: this._resolveUrl(navImages.home.HOVER), - srcDown: this._resolveUrl(navImages.home.DOWN), - onRelease: onHomeHandler - }); - var fullPage = new $.Button({ - config: this._viewer.config, - tooltip: $.Strings.getString("Tooltips.FullPage"), - srcRest: this._resolveUrl(navImages.fullpage.REST), - srcGroup: this._resolveUrl(navImages.fullpage.GROUP), - srcHover: this._resolveUrl(navImages.fullpage.HOVER), - srcDown: this._resolveUrl(navImages.fullpage.DOWN), - onRelease: onFullPageHandler - }); - this._group = new $.ButtonGroup({ - config: this._viewer.config, - buttons: [zoomIn, zoomOut, goHome, fullPage] - }); - - this.elmt = this._group.element; - this.elmt[ $.SIGNAL ] = true; // hack to get our controls to fade - this._viewer.addHandler('open', $.delegate(this, this._lightUp)); }; $.NavControl.prototype = { - _resolveUrl: function(url) { - var prefix = this._viewer.prefixUrl; - return prefix ? prefix + url : url; - }, - _beginZoomingIn: function() { - this._lastZoomTime = new Date().getTime(); - this._zoomFactor = this.config.zoomPerSecond; - this._zooming = true; - this._scheduleZoom(); - }, - _beginZoomingOut: function() { - this._lastZoomTime = new Date().getTime(); - this._zoomFactor = 1.0 / this.config.zoomPerSecond; - this._zooming = true; - this._scheduleZoom(); - }, - - _endZooming: function() { - this._zooming = false; - }, - _scheduleZoom: function() { - window.setTimeout($.delegate(this, this._doZoom), 10); - }, - _doZoom: function() { - if (this._zooming && this._viewer.viewport) { - var currentTime = new Date().getTime(); - var deltaTime = currentTime - this._lastZoomTime; - var adjustedFactor = Math.pow(this._zoomFactor, deltaTime / 1000); - - this._viewer.viewport.zoomBy(adjustedFactor); - this._viewer.viewport.applyConstraints(); - this._lastZoomTime = currentTime; - this._scheduleZoom(); - } - }, - _doSingleZoomIn: function() { - if (this._viewer.viewport) { - this._zooming = false; - this._viewer.viewport.zoomBy(this.config.zoomPerClick / 1.0); - this._viewer.viewport.applyConstraints(); - } - }, - _doSingleZoomOut: function() { - if (this._viewer.viewport) { - this._zooming = false; - this._viewer.viewport.zoomBy(1.0 / this.config.zoomPerClick); - this._viewer.viewport.applyConstraints(); - } - }, - _lightUp: function() { - this._group.emulateEnter(); - this._group.emulateExit(); - }, - _onHome: function() { - if (this._viewer.viewport) { - this._viewer.viewport.goHome(); - } - }, - _onFullPage: function() { - this._viewer.setFullPage(!this._viewer.isFullPage()); - this._group.emulateExit(); // correct for no mouseout event on change - - if (this._viewer.viewport) { - this._viewer.viewport.applyConstraints(); - } - } }; }( OpenSeadragon )); @@ -1548,7 +1411,7 @@ $.Viewer = function( options ) { this.container = $.Utils.makeNeutralElement("div"); this.canvas = $.Utils.makeNeutralElement("div"); - this._fsBoundsDelta = new $.Point(1, 1); + this._fsBoundsDelta = new $.Point( 1, 1 ); this._prevContainerSize = null; this._lastOpenStartTime = 0; this._lastOpenEndTime = 0; @@ -1617,9 +1480,82 @@ $.Viewer = function( options ) { } } - this.navControl = null; + ////////////////////////////////////////////////////////////////////////// + // Navigation Controls + ////////////////////////////////////////////////////////////////////////// + this._group = null; + this._zooming = false; // whether we should be continuously zooming + this._zoomFactor = null; // how much we should be continuously zooming by + this._lastZoomTime = null; + + this.elmt = null; + + var beginZoomingInHandler = $.delegate(this, beginZoomingIn); + var endZoomingHandler = $.delegate(this, endZooming); + var doSingleZoomInHandler = $.delegate(this, doSingleZoomIn); + var beginZoomingOutHandler = $.delegate(this, beginZoomingOut); + var doSingleZoomOutHandler = $.delegate(this, doSingleZoomOut); + var onHomeHandler = $.delegate(this, onHome); + var onFullPageHandler = $.delegate(this, onFullPage); + + var navImages = this.config.navImages; + + var zoomIn = new $.Button({ + config: this.config, + tooltip: $.Strings.getString("Tooltips.ZoomIn"), + srcRest: resolveUrl(this.urlPrefix, navImages.zoomIn.REST), + srcGroup: resolveUrl(this.urlPrefix, navImages.zoomIn.GROUP), + srcHover: resolveUrl(this.urlPrefix, navImages.zoomIn.HOVER), + srcDown: resolveUrl(this.urlPrefix, navImages.zoomIn.DOWN), + onPress: beginZoomingInHandler, + onRelease: endZoomingHandler, + onClick: doSingleZoomInHandler, + onEnter: beginZoomingInHandler, + onExit: endZoomingHandler + }); + + var zoomOut = new $.Button({ + config: this.config, + tooltip: $.Strings.getString("Tooltips.ZoomOut"), + srcRest: resolveUrl(this.urlPrefix, navImages.zoomOut.REST), + srcGroup: resolveUrl(this.urlPrefix, navImages.zoomOut.GROUP), + srcHover: resolveUrl(this.urlPrefix, navImages.zoomOut.HOVER), + srcDown: resolveUrl(this.urlPrefix, navImages.zoomOut.DOWN), + onPress: beginZoomingOutHandler, + onRelease: endZoomingHandler, + onClick: doSingleZoomOutHandler, + onEnter: beginZoomingOutHandler, + onExit: endZoomingHandler + }); + var goHome = new $.Button({ + config: this.config, + tooltip: $.Strings.getString("Tooltips.Home"), + srcRest: resolveUrl(this.urlPrefix, navImages.home.REST), + srcGroup: resolveUrl(this.urlPrefix, navImages.home.GROUP), + srcHover: resolveUrl(this.urlPrefix, navImages.home.HOVER), + srcDown: resolveUrl(this.urlPrefix, navImages.home.DOWN), + onRelease: onHomeHandler + }); + var fullPage = new $.Button({ + config: this.config, + tooltip: $.Strings.getString("Tooltips.FullPage"), + srcRest: resolveUrl(this.urlPrefix, navImages.fullpage.REST), + srcGroup: resolveUrl(this.urlPrefix, navImages.fullpage.GROUP), + srcHover: resolveUrl(this.urlPrefix, navImages.fullpage.HOVER), + srcDown: resolveUrl(this.urlPrefix, navImages.fullpage.DOWN), + onRelease: onFullPageHandler + }); + + this._group = new $.ButtonGroup({ + config: this.config, + buttons: [ zoomIn, zoomOut, goHome, fullPage ] + }); + + this.navControl = this._group.element; + this.navControl[ $.SIGNAL ] = true; // hack to get our controls to fade + this.addHandler( 'open', $.delegate( this, lightUp ) ); + if ( this.config.showNavigationControl ) { - this.navControl = (new $.NavControl(this)).elmt; this.navControl.style.marginRight = "4px"; this.navControl.style.marginBottom = "4px"; this.addControl(this.navControl, $.ControlAnchor.BOTTOM_RIGHT); @@ -2141,7 +2077,89 @@ function getControlIndex( viewer, elmt ) { /////////////////////////////////////////////////////////////////////////////// +/////////////////////////////////////////////////////////////////////////////// +// Navigation Controls +/////////////////////////////////////////////////////////////////////////////// +function resolveUrl( prefix, url ) { + return prefix ? prefix + url : url; +}; + + +function beginZoomingIn() { + this._lastZoomTime = +new Date(); + this._zoomFactor = this.config.zoomPerSecond; + this._zooming = true; + scheduleZoom( this ); +} + +function beginZoomingOut() { + this._lastZoomTime = +new Date(); + this._zoomFactor = 1.0 / this.config.zoomPerSecond; + this._zooming = true; + scheduleZoom( this ); +} + +function endZooming() { + this._zooming = false; +} + +function scheduleZoom( viewer ) { + window.setTimeout($.delegate(viewer, doZoom), 10); +} + +function doZoom() { + if (this._zooming && this.viewport) { + var currentTime = +new Date(); + var deltaTime = currentTime - this._lastZoomTime; + var adjustedFactor = Math.pow(this._zoomFactor, deltaTime / 1000); + + this.viewport.zoomBy(adjustedFactor); + this.viewport.applyConstraints(); + this._lastZoomTime = currentTime; + scheduleZoom( this ); + } +}; + +function doSingleZoomIn() { + if (this.viewport) { + this._zooming = false; + this.viewport.zoomBy( + this.config.zoomPerClick / 1.0 + ); + this.viewport.applyConstraints(); + } +}; + +function doSingleZoomOut() { + if (this.viewport) { + this._zooming = false; + this.viewport.zoomBy( + 1.0 / this.config.zoomPerClick + ); + this.viewport.applyConstraints(); + } +}; + +function lightUp() { + this._group.emulateEnter(); + this._group.emulateExit(); +}; + +function onHome() { + if (this.viewport) { + this.viewport.goHome(); + } +}; + +function onFullPage() { + this.setFullPage( !this.isFullPage() ); + this._group.emulateExit(); // correct for no mouseout event on change + + if (this.viewport) { + this.viewport.applyConstraints(); + } +}; }( OpenSeadragon )); diff --git a/src/navcontrol.js b/src/navcontrol.js index c1ff5179..73cda1ee 100644 --- a/src/navcontrol.js +++ b/src/navcontrol.js @@ -2,147 +2,10 @@ (function( $ ){ $.NavControl = function( viewer ) { - this._group = null; - this._zooming = false; // whether we should be continuously zooming - this._zoomFactor = null; // how much we should be continuously zooming by - this._lastZoomTime = null; - this._viewer = viewer; - this.config = this._viewer.config; - - this.elmt = null; - - var beginZoomingInHandler = $.delegate(this, this._beginZoomingIn); - var endZoomingHandler = $.delegate(this, this._endZooming); - var doSingleZoomInHandler = $.delegate(this, this._doSingleZoomIn); - var beginZoomingOutHandler = $.delegate(this, this._beginZoomingOut); - var doSingleZoomOutHandler = $.delegate(this, this._doSingleZoomOut); - var onHomeHandler = $.delegate(this, this._onHome); - var onFullPageHandler = $.delegate(this, this._onFullPage); - - var navImages = this._viewer.config.navImages; - - var zoomIn = new $.Button({ - config: this._viewer.config, - tooltip: $.Strings.getString("Tooltips.ZoomIn"), - srcRest: this._resolveUrl(navImages.zoomIn.REST), - srcGroup: this._resolveUrl(navImages.zoomIn.GROUP), - srcHover: this._resolveUrl(navImages.zoomIn.HOVER), - srcDown: this._resolveUrl(navImages.zoomIn.DOWN), - onPress: beginZoomingInHandler, - onRelease: endZoomingHandler, - onClick: doSingleZoomInHandler, - onEnter: beginZoomingInHandler, - onExit: endZoomingHandler - }); - var zoomOut = new $.Button({ - config: this._viewer.config, - tooltip: $.Strings.getString("Tooltips.ZoomOut"), - srcRest: this._resolveUrl(navImages.zoomOut.REST), - srcGroup: this._resolveUrl(navImages.zoomOut.GROUP), - srcHover: this._resolveUrl(navImages.zoomOut.HOVER), - srcDown: this._resolveUrl(navImages.zoomOut.DOWN), - onPress: beginZoomingOutHandler, - onRelease: endZoomingHandler, - onClick: doSingleZoomOutHandler, - onEnter: beginZoomingOutHandler, - onExit: endZoomingHandler - }); - var goHome = new $.Button({ - config: this._viewer.config, - tooltip: $.Strings.getString("Tooltips.Home"), - srcRest: this._resolveUrl(navImages.home.REST), - srcGroup: this._resolveUrl(navImages.home.GROUP), - srcHover: this._resolveUrl(navImages.home.HOVER), - srcDown: this._resolveUrl(navImages.home.DOWN), - onRelease: onHomeHandler - }); - var fullPage = new $.Button({ - config: this._viewer.config, - tooltip: $.Strings.getString("Tooltips.FullPage"), - srcRest: this._resolveUrl(navImages.fullpage.REST), - srcGroup: this._resolveUrl(navImages.fullpage.GROUP), - srcHover: this._resolveUrl(navImages.fullpage.HOVER), - srcDown: this._resolveUrl(navImages.fullpage.DOWN), - onRelease: onFullPageHandler - }); - this._group = new $.ButtonGroup({ - config: this._viewer.config, - buttons: [zoomIn, zoomOut, goHome, fullPage] - }); - - this.elmt = this._group.element; - this.elmt[ $.SIGNAL ] = true; // hack to get our controls to fade - this._viewer.addHandler('open', $.delegate(this, this._lightUp)); }; $.NavControl.prototype = { - _resolveUrl: function(url) { - var prefix = this._viewer.prefixUrl; - return prefix ? prefix + url : url; - }, - _beginZoomingIn: function() { - this._lastZoomTime = new Date().getTime(); - this._zoomFactor = this.config.zoomPerSecond; - this._zooming = true; - this._scheduleZoom(); - }, - _beginZoomingOut: function() { - this._lastZoomTime = new Date().getTime(); - this._zoomFactor = 1.0 / this.config.zoomPerSecond; - this._zooming = true; - this._scheduleZoom(); - }, - - _endZooming: function() { - this._zooming = false; - }, - _scheduleZoom: function() { - window.setTimeout($.delegate(this, this._doZoom), 10); - }, - _doZoom: function() { - if (this._zooming && this._viewer.viewport) { - var currentTime = new Date().getTime(); - var deltaTime = currentTime - this._lastZoomTime; - var adjustedFactor = Math.pow(this._zoomFactor, deltaTime / 1000); - - this._viewer.viewport.zoomBy(adjustedFactor); - this._viewer.viewport.applyConstraints(); - this._lastZoomTime = currentTime; - this._scheduleZoom(); - } - }, - _doSingleZoomIn: function() { - if (this._viewer.viewport) { - this._zooming = false; - this._viewer.viewport.zoomBy(this.config.zoomPerClick / 1.0); - this._viewer.viewport.applyConstraints(); - } - }, - _doSingleZoomOut: function() { - if (this._viewer.viewport) { - this._zooming = false; - this._viewer.viewport.zoomBy(1.0 / this.config.zoomPerClick); - this._viewer.viewport.applyConstraints(); - } - }, - _lightUp: function() { - this._group.emulateEnter(); - this._group.emulateExit(); - }, - _onHome: function() { - if (this._viewer.viewport) { - this._viewer.viewport.goHome(); - } - }, - _onFullPage: function() { - this._viewer.setFullPage(!this._viewer.isFullPage()); - this._group.emulateExit(); // correct for no mouseout event on change - - if (this._viewer.viewport) { - this._viewer.viewport.applyConstraints(); - } - } }; }( OpenSeadragon )); diff --git a/src/viewer.js b/src/viewer.js index b00e2b9d..bb209c14 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -126,7 +126,7 @@ $.Viewer = function( options ) { this.container = $.Utils.makeNeutralElement("div"); this.canvas = $.Utils.makeNeutralElement("div"); - this._fsBoundsDelta = new $.Point(1, 1); + this._fsBoundsDelta = new $.Point( 1, 1 ); this._prevContainerSize = null; this._lastOpenStartTime = 0; this._lastOpenEndTime = 0; @@ -195,9 +195,82 @@ $.Viewer = function( options ) { } } - this.navControl = null; + ////////////////////////////////////////////////////////////////////////// + // Navigation Controls + ////////////////////////////////////////////////////////////////////////// + this._group = null; + this._zooming = false; // whether we should be continuously zooming + this._zoomFactor = null; // how much we should be continuously zooming by + this._lastZoomTime = null; + + this.elmt = null; + + var beginZoomingInHandler = $.delegate(this, beginZoomingIn); + var endZoomingHandler = $.delegate(this, endZooming); + var doSingleZoomInHandler = $.delegate(this, doSingleZoomIn); + var beginZoomingOutHandler = $.delegate(this, beginZoomingOut); + var doSingleZoomOutHandler = $.delegate(this, doSingleZoomOut); + var onHomeHandler = $.delegate(this, onHome); + var onFullPageHandler = $.delegate(this, onFullPage); + + var navImages = this.config.navImages; + + var zoomIn = new $.Button({ + config: this.config, + tooltip: $.Strings.getString("Tooltips.ZoomIn"), + srcRest: resolveUrl(this.urlPrefix, navImages.zoomIn.REST), + srcGroup: resolveUrl(this.urlPrefix, navImages.zoomIn.GROUP), + srcHover: resolveUrl(this.urlPrefix, navImages.zoomIn.HOVER), + srcDown: resolveUrl(this.urlPrefix, navImages.zoomIn.DOWN), + onPress: beginZoomingInHandler, + onRelease: endZoomingHandler, + onClick: doSingleZoomInHandler, + onEnter: beginZoomingInHandler, + onExit: endZoomingHandler + }); + + var zoomOut = new $.Button({ + config: this.config, + tooltip: $.Strings.getString("Tooltips.ZoomOut"), + srcRest: resolveUrl(this.urlPrefix, navImages.zoomOut.REST), + srcGroup: resolveUrl(this.urlPrefix, navImages.zoomOut.GROUP), + srcHover: resolveUrl(this.urlPrefix, navImages.zoomOut.HOVER), + srcDown: resolveUrl(this.urlPrefix, navImages.zoomOut.DOWN), + onPress: beginZoomingOutHandler, + onRelease: endZoomingHandler, + onClick: doSingleZoomOutHandler, + onEnter: beginZoomingOutHandler, + onExit: endZoomingHandler + }); + var goHome = new $.Button({ + config: this.config, + tooltip: $.Strings.getString("Tooltips.Home"), + srcRest: resolveUrl(this.urlPrefix, navImages.home.REST), + srcGroup: resolveUrl(this.urlPrefix, navImages.home.GROUP), + srcHover: resolveUrl(this.urlPrefix, navImages.home.HOVER), + srcDown: resolveUrl(this.urlPrefix, navImages.home.DOWN), + onRelease: onHomeHandler + }); + var fullPage = new $.Button({ + config: this.config, + tooltip: $.Strings.getString("Tooltips.FullPage"), + srcRest: resolveUrl(this.urlPrefix, navImages.fullpage.REST), + srcGroup: resolveUrl(this.urlPrefix, navImages.fullpage.GROUP), + srcHover: resolveUrl(this.urlPrefix, navImages.fullpage.HOVER), + srcDown: resolveUrl(this.urlPrefix, navImages.fullpage.DOWN), + onRelease: onFullPageHandler + }); + + this._group = new $.ButtonGroup({ + config: this.config, + buttons: [ zoomIn, zoomOut, goHome, fullPage ] + }); + + this.navControl = this._group.element; + this.navControl[ $.SIGNAL ] = true; // hack to get our controls to fade + this.addHandler( 'open', $.delegate( this, lightUp ) ); + if ( this.config.showNavigationControl ) { - this.navControl = (new $.NavControl(this)).elmt; this.navControl.style.marginRight = "4px"; this.navControl.style.marginBottom = "4px"; this.addControl(this.navControl, $.ControlAnchor.BOTTOM_RIGHT); @@ -719,6 +792,88 @@ function getControlIndex( viewer, elmt ) { /////////////////////////////////////////////////////////////////////////////// +/////////////////////////////////////////////////////////////////////////////// +// Navigation Controls +/////////////////////////////////////////////////////////////////////////////// +function resolveUrl( prefix, url ) { + return prefix ? prefix + url : url; +}; + + +function beginZoomingIn() { + this._lastZoomTime = +new Date(); + this._zoomFactor = this.config.zoomPerSecond; + this._zooming = true; + scheduleZoom( this ); +} + +function beginZoomingOut() { + this._lastZoomTime = +new Date(); + this._zoomFactor = 1.0 / this.config.zoomPerSecond; + this._zooming = true; + scheduleZoom( this ); +} + +function endZooming() { + this._zooming = false; +} + +function scheduleZoom( viewer ) { + window.setTimeout($.delegate(viewer, doZoom), 10); +} + +function doZoom() { + if (this._zooming && this.viewport) { + var currentTime = +new Date(); + var deltaTime = currentTime - this._lastZoomTime; + var adjustedFactor = Math.pow(this._zoomFactor, deltaTime / 1000); + + this.viewport.zoomBy(adjustedFactor); + this.viewport.applyConstraints(); + this._lastZoomTime = currentTime; + scheduleZoom( this ); + } +}; + +function doSingleZoomIn() { + if (this.viewport) { + this._zooming = false; + this.viewport.zoomBy( + this.config.zoomPerClick / 1.0 + ); + this.viewport.applyConstraints(); + } +}; + +function doSingleZoomOut() { + if (this.viewport) { + this._zooming = false; + this.viewport.zoomBy( + 1.0 / this.config.zoomPerClick + ); + this.viewport.applyConstraints(); + } +}; + +function lightUp() { + this._group.emulateEnter(); + this._group.emulateExit(); +}; + +function onHome() { + if (this.viewport) { + this.viewport.goHome(); + } +}; + +function onFullPage() { + this.setFullPage( !this.isFullPage() ); + this._group.emulateExit(); // correct for no mouseout event on change + + if (this.viewport) { + this.viewport.applyConstraints(); + } +}; }( OpenSeadragon ));