From c610a9239bc5ae26bcb6bbdf4be015d8055c2ba5 Mon Sep 17 00:00:00 2001 From: thatcher Date: Tue, 28 Feb 2012 08:07:56 -0500 Subject: [PATCH] Several issues with button and buttongroup states likely a result of the refactoring were flushed out and corrected. --- build.properties | 2 +- openseadragon.js | 114 +++++++++++++++++++++++++------------------- src/button.js | 17 ++++--- src/buttongroup.js | 75 +++++++++++++++-------------- src/eventhandler.js | 8 +++- src/viewer.js | 12 +++-- 6 files changed, 132 insertions(+), 96 deletions(-) diff --git a/build.properties b/build.properties index 1ef55a72..9b4ce36b 100644 --- a/build.properties +++ b/build.properties @@ -6,7 +6,7 @@ PROJECT: openseadragon BUILD_MAJOR: 0 BUILD_MINOR: 9 -BUILD_ID: 14 +BUILD_ID: 15 BUILD: ${PROJECT}.${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID} VERSION: ${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID} diff --git a/openseadragon.js b/openseadragon.js index 4f5db3e1..d2ea6f7d 100644 --- a/openseadragon.js +++ b/openseadragon.js @@ -1,5 +1,5 @@ /** - * @version OpenSeadragon 0.9.14 + * @version OpenSeadragon 0.9.15 * * @fileOverview *

@@ -1291,7 +1291,9 @@ $.EventHandler.prototype = { if( !events ){ this.events[ eventName ] = events = []; } - events[ events.length ] = handler; + if( handler && $.isFunction( handler ) ){ + events[ events.length ] = handler; + } }, /** @@ -1328,7 +1330,9 @@ $.EventHandler.prototype = { var i, length = events.length; for ( i = 0; i < length; i++ ) { - events[ i ]( source, args ); + if( events[ i ] ){ + events[ i ]( source, args ); + } } }; }, @@ -2695,8 +2699,14 @@ $.Viewer = function( options ) { }); this.buttons = new $.ButtonGroup({ - config: this.config, - buttons: [ zoomIn, zoomOut, goHome, fullPage ] + clickTimeThreshold: this.config.clickTimeThreshold, + clickDistThreshold: this.config.clickDistThreshold, + buttons: [ + zoomIn, + zoomOut, + goHome, + fullPage + ] }); this.navControl = this.buttons.element; @@ -2889,7 +2899,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, { if( source ){ this.source = source; } - + this.viewport = new $.Viewport({ containerSize: THIS[ this.hash ].prevContainerSize, contentSize: this.source.dimensions, @@ -4256,6 +4266,7 @@ $.Button = function( options ) { element: this.element, clickTimeThreshold: this.clickTimeThreshold, clickDistThreshold: this.clickDistThreshold, + enterHandler: function( tracker, position, buttonDownElement, buttonDownAny ) { if ( buttonDownElement ) { inTo( _this, $.ButtonState.DOWN ); @@ -4264,16 +4275,19 @@ $.Button = function( options ) { inTo( _this, $.ButtonState.HOVER ); } }, + exitHandler: function( tracker, position, buttonDownElement, buttonDownAny ) { outTo( _this, $.ButtonState.GROUP ); if ( buttonDownElement ) { _this.raiseEvent( "onExit", _this ); } }, + pressHandler: function( tracker, position ) { inTo( _this, $.ButtonState.DOWN ); _this.raiseEvent( "onPress", _this ); }, + releaseHandler: function( tracker, position, insideElementPress, insideElementRelease ) { if ( insideElementPress && insideElementRelease ) { outTo( _this, $.ButtonState.HOVER ); @@ -4284,6 +4298,7 @@ $.Button = function( options ) { inTo( _this, $.ButtonState.HOVER ); } }, + clickHandler: function( tracker, position, quick, shift ) { if ( quick ) { _this.raiseEvent("onClick", _this); @@ -4333,11 +4348,11 @@ function updateFade( button ) { if ( button.shouldFade ) { currentTime = +new Date(); - deltaTime = currentTime - this.fadeBeginTime; - opacity = 1.0 - deltaTime / this.fadeLength; + deltaTime = currentTime - button.fadeBeginTime; + opacity = 1.0 - deltaTime / button.fadeLength; opacity = Math.min( 1.0, opacity ); opacity = Math.max( 0.0, opacity ); - + $.setElementOpacity( button.imgGroup, opacity, true ); if ( opacity > 0 ) { // fade again @@ -4348,7 +4363,7 @@ function updateFade( button ) { function beginFading( button ) { button.shouldFade = true; - button.fadeBeginTime = new Date().getTime() + button.fadeDelay; + button.fadeBeginTime = +new Date() + button.fadeDelay; window.setTimeout( function(){ scheduleFade( button ); }, button.fadeDelay ); @@ -4393,9 +4408,9 @@ function outTo( button, newState ) { button.currentState = $.ButtonState.GROUP; } - if ( button.newState <= $.ButtonState.REST && + if ( newState <= $.ButtonState.REST && button.currentState == $.ButtonState.GROUP ) { - button.beginFading(); + beginFading( button ); button.currentState = $.ButtonState.REST; } }; @@ -4428,54 +4443,57 @@ function outTo( button, newState ) { **/ $.ButtonGroup = function( options ) { - this.buttons = options.buttons; - this.element = options.group || $.makeNeutralElement( "span" ); - this.config = options.config; - this.tracker = new $.MouseTracker( - this.element, - this.config.clickTimeThreshold, - this.config.clickDistThreshold - ); - + $.extend( true, this, { + buttons: null, + clickTimeThreshold: $.DEFAULT_SETTINGS.clickTimeThreshold, + clickDistThreshold: $.DEFAULT_SETTINGS.clickDistThreshold + }, options ); + // copy the botton elements var buttons = this.buttons.concat([]), _this = this, i; + this.element = options.group || $.makeNeutralElement( "span" ); this.element.style.display = "inline-block"; for ( i = 0; i < buttons.length; i++ ) { this.element.appendChild( buttons[ i ].element ); } - this.tracker.enter = options.enter || function() { - var i; - for ( i = 0; i < _this.buttons.length; i++ ) { - _this.buttons[ i ].notifyGroupEnter(); - } - }; - - this.tracker.exit = options.exit || function() { - var i, - buttonDownElement = arguments.length > 2 ? arguments[ 2 ] : null; - if ( !buttonDownElement ) { + this.tracker = new $.MouseTracker({ + element: this.element, + clickTimeThreshold: this.clickTimeThreshold, + clickDistThreshold: this.clickDistThreshold, + enterHandler: function() { + var i; for ( i = 0; i < _this.buttons.length; i++ ) { - _this.buttons[ i ].notifyGroupExit(); + _this.buttons[ i ].notifyGroupEnter(); + } + }, + exitHandler: function() { + var i, + buttonDownElement = arguments.length > 2 ? + arguments[ 2 ] : + null; + if ( !buttonDownElement ) { + for ( i = 0; i < _this.buttons.length; i++ ) { + _this.buttons[ i ].notifyGroupExit(); + } + } + }, + releaseHandler: function() { + var i, + insideElementRelease = arguments.length > 3 ? + arguments[ 3 ] : + null; + if ( !insideElementRelease ) { + for ( i = 0; i < _this.buttons.length; i++ ) { + _this.buttons[ i ].notifyGroupExit(); + } } } - }; - - this.tracker.release = options.release || function() { - var i, - insideElementRelease = arguments.length > 3 ? arguments[ 3 ] : null; - if ( !insideElementRelease ) { - for ( i = 0; i < _this.buttons.length; i++ ) { - _this.buttons[ i ].notifyGroupExit(); - } - } - }; - - this.tracker.setTracking( true ); + }).setTracking( true ); }; $.ButtonGroup.prototype = { @@ -4487,7 +4505,7 @@ $.ButtonGroup.prototype = { * @name OpenSeadragon.ButtonGroup.prototype.emulateEnter */ emulateEnter: function() { - this.tracker.enter(); + this.tracker.enterHandler(); }, /** @@ -4497,7 +4515,7 @@ $.ButtonGroup.prototype = { * @name OpenSeadragon.ButtonGroup.prototype.emulateExit */ emulateExit: function() { - this.tracker.exit(); + this.tracker.exitHandler(); } }; diff --git a/src/button.js b/src/button.js index 21acbf70..340302fd 100644 --- a/src/button.js +++ b/src/button.js @@ -135,6 +135,7 @@ $.Button = function( options ) { element: this.element, clickTimeThreshold: this.clickTimeThreshold, clickDistThreshold: this.clickDistThreshold, + enterHandler: function( tracker, position, buttonDownElement, buttonDownAny ) { if ( buttonDownElement ) { inTo( _this, $.ButtonState.DOWN ); @@ -143,16 +144,19 @@ $.Button = function( options ) { inTo( _this, $.ButtonState.HOVER ); } }, + exitHandler: function( tracker, position, buttonDownElement, buttonDownAny ) { outTo( _this, $.ButtonState.GROUP ); if ( buttonDownElement ) { _this.raiseEvent( "onExit", _this ); } }, + pressHandler: function( tracker, position ) { inTo( _this, $.ButtonState.DOWN ); _this.raiseEvent( "onPress", _this ); }, + releaseHandler: function( tracker, position, insideElementPress, insideElementRelease ) { if ( insideElementPress && insideElementRelease ) { outTo( _this, $.ButtonState.HOVER ); @@ -163,6 +167,7 @@ $.Button = function( options ) { inTo( _this, $.ButtonState.HOVER ); } }, + clickHandler: function( tracker, position, quick, shift ) { if ( quick ) { _this.raiseEvent("onClick", _this); @@ -212,11 +217,11 @@ function updateFade( button ) { if ( button.shouldFade ) { currentTime = +new Date(); - deltaTime = currentTime - this.fadeBeginTime; - opacity = 1.0 - deltaTime / this.fadeLength; + deltaTime = currentTime - button.fadeBeginTime; + opacity = 1.0 - deltaTime / button.fadeLength; opacity = Math.min( 1.0, opacity ); opacity = Math.max( 0.0, opacity ); - + $.setElementOpacity( button.imgGroup, opacity, true ); if ( opacity > 0 ) { // fade again @@ -227,7 +232,7 @@ function updateFade( button ) { function beginFading( button ) { button.shouldFade = true; - button.fadeBeginTime = new Date().getTime() + button.fadeDelay; + button.fadeBeginTime = +new Date() + button.fadeDelay; window.setTimeout( function(){ scheduleFade( button ); }, button.fadeDelay ); @@ -272,9 +277,9 @@ function outTo( button, newState ) { button.currentState = $.ButtonState.GROUP; } - if ( button.newState <= $.ButtonState.REST && + if ( newState <= $.ButtonState.REST && button.currentState == $.ButtonState.GROUP ) { - button.beginFading(); + beginFading( button ); button.currentState = $.ButtonState.REST; } }; diff --git a/src/buttongroup.js b/src/buttongroup.js index e4e178ad..11e10143 100644 --- a/src/buttongroup.js +++ b/src/buttongroup.js @@ -23,54 +23,57 @@ **/ $.ButtonGroup = function( options ) { - this.buttons = options.buttons; - this.element = options.group || $.makeNeutralElement( "span" ); - this.config = options.config; - this.tracker = new $.MouseTracker( - this.element, - this.config.clickTimeThreshold, - this.config.clickDistThreshold - ); - + $.extend( true, this, { + buttons: null, + clickTimeThreshold: $.DEFAULT_SETTINGS.clickTimeThreshold, + clickDistThreshold: $.DEFAULT_SETTINGS.clickDistThreshold + }, options ); + // copy the botton elements var buttons = this.buttons.concat([]), _this = this, i; + this.element = options.group || $.makeNeutralElement( "span" ); this.element.style.display = "inline-block"; for ( i = 0; i < buttons.length; i++ ) { this.element.appendChild( buttons[ i ].element ); } - this.tracker.enter = options.enter || function() { - var i; - for ( i = 0; i < _this.buttons.length; i++ ) { - _this.buttons[ i ].notifyGroupEnter(); - } - }; - - this.tracker.exit = options.exit || function() { - var i, - buttonDownElement = arguments.length > 2 ? arguments[ 2 ] : null; - if ( !buttonDownElement ) { + this.tracker = new $.MouseTracker({ + element: this.element, + clickTimeThreshold: this.clickTimeThreshold, + clickDistThreshold: this.clickDistThreshold, + enterHandler: function() { + var i; for ( i = 0; i < _this.buttons.length; i++ ) { - _this.buttons[ i ].notifyGroupExit(); + _this.buttons[ i ].notifyGroupEnter(); + } + }, + exitHandler: function() { + var i, + buttonDownElement = arguments.length > 2 ? + arguments[ 2 ] : + null; + if ( !buttonDownElement ) { + for ( i = 0; i < _this.buttons.length; i++ ) { + _this.buttons[ i ].notifyGroupExit(); + } + } + }, + releaseHandler: function() { + var i, + insideElementRelease = arguments.length > 3 ? + arguments[ 3 ] : + null; + if ( !insideElementRelease ) { + for ( i = 0; i < _this.buttons.length; i++ ) { + _this.buttons[ i ].notifyGroupExit(); + } } } - }; - - this.tracker.release = options.release || function() { - var i, - insideElementRelease = arguments.length > 3 ? arguments[ 3 ] : null; - if ( !insideElementRelease ) { - for ( i = 0; i < _this.buttons.length; i++ ) { - _this.buttons[ i ].notifyGroupExit(); - } - } - }; - - this.tracker.setTracking( true ); + }).setTracking( true ); }; $.ButtonGroup.prototype = { @@ -82,7 +85,7 @@ $.ButtonGroup.prototype = { * @name OpenSeadragon.ButtonGroup.prototype.emulateEnter */ emulateEnter: function() { - this.tracker.enter(); + this.tracker.enterHandler(); }, /** @@ -92,7 +95,7 @@ $.ButtonGroup.prototype = { * @name OpenSeadragon.ButtonGroup.prototype.emulateExit */ emulateExit: function() { - this.tracker.exit(); + this.tracker.exitHandler(); } }; diff --git a/src/eventhandler.js b/src/eventhandler.js index e76315a0..5d6e21a3 100644 --- a/src/eventhandler.js +++ b/src/eventhandler.js @@ -22,7 +22,9 @@ $.EventHandler.prototype = { if( !events ){ this.events[ eventName ] = events = []; } - events[ events.length ] = handler; + if( handler && $.isFunction( handler ) ){ + events[ events.length ] = handler; + } }, /** @@ -59,7 +61,9 @@ $.EventHandler.prototype = { var i, length = events.length; for ( i = 0; i < length; i++ ) { - events[ i ]( source, args ); + if( events[ i ] ){ + events[ i ]( source, args ); + } } }; }, diff --git a/src/viewer.js b/src/viewer.js index 981e7c95..d2969130 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -233,8 +233,14 @@ $.Viewer = function( options ) { }); this.buttons = new $.ButtonGroup({ - config: this.config, - buttons: [ zoomIn, zoomOut, goHome, fullPage ] + clickTimeThreshold: this.config.clickTimeThreshold, + clickDistThreshold: this.config.clickDistThreshold, + buttons: [ + zoomIn, + zoomOut, + goHome, + fullPage + ] }); this.navControl = this.buttons.element; @@ -427,7 +433,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, { if( source ){ this.source = source; } - + this.viewport = new $.Viewport({ containerSize: THIS[ this.hash ].prevContainerSize, contentSize: this.source.dimensions,