Several issues with button and buttongroup states likely a result of the refactoring were flushed out and corrected.

This commit is contained in:
thatcher 2012-02-28 08:07:56 -05:00
parent 8dc4c63f64
commit c610a9239b
6 changed files with 132 additions and 96 deletions

View File

@ -6,7 +6,7 @@
PROJECT: openseadragon PROJECT: openseadragon
BUILD_MAJOR: 0 BUILD_MAJOR: 0
BUILD_MINOR: 9 BUILD_MINOR: 9
BUILD_ID: 14 BUILD_ID: 15
BUILD: ${PROJECT}.${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID} BUILD: ${PROJECT}.${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID}
VERSION: ${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID} VERSION: ${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID}

View File

@ -1,5 +1,5 @@
/** /**
* @version OpenSeadragon 0.9.14 * @version OpenSeadragon 0.9.15
* *
* @fileOverview * @fileOverview
* <h2> * <h2>
@ -1291,7 +1291,9 @@ $.EventHandler.prototype = {
if( !events ){ if( !events ){
this.events[ eventName ] = 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, var i,
length = events.length; length = events.length;
for ( i = 0; i < length; i++ ) { 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({ this.buttons = new $.ButtonGroup({
config: this.config, clickTimeThreshold: this.config.clickTimeThreshold,
buttons: [ zoomIn, zoomOut, goHome, fullPage ] clickDistThreshold: this.config.clickDistThreshold,
buttons: [
zoomIn,
zoomOut,
goHome,
fullPage
]
}); });
this.navControl = this.buttons.element; this.navControl = this.buttons.element;
@ -4256,6 +4266,7 @@ $.Button = function( options ) {
element: this.element, element: this.element,
clickTimeThreshold: this.clickTimeThreshold, clickTimeThreshold: this.clickTimeThreshold,
clickDistThreshold: this.clickDistThreshold, clickDistThreshold: this.clickDistThreshold,
enterHandler: function( tracker, position, buttonDownElement, buttonDownAny ) { enterHandler: function( tracker, position, buttonDownElement, buttonDownAny ) {
if ( buttonDownElement ) { if ( buttonDownElement ) {
inTo( _this, $.ButtonState.DOWN ); inTo( _this, $.ButtonState.DOWN );
@ -4264,16 +4275,19 @@ $.Button = function( options ) {
inTo( _this, $.ButtonState.HOVER ); inTo( _this, $.ButtonState.HOVER );
} }
}, },
exitHandler: function( tracker, position, buttonDownElement, buttonDownAny ) { exitHandler: function( tracker, position, buttonDownElement, buttonDownAny ) {
outTo( _this, $.ButtonState.GROUP ); outTo( _this, $.ButtonState.GROUP );
if ( buttonDownElement ) { if ( buttonDownElement ) {
_this.raiseEvent( "onExit", _this ); _this.raiseEvent( "onExit", _this );
} }
}, },
pressHandler: function( tracker, position ) { pressHandler: function( tracker, position ) {
inTo( _this, $.ButtonState.DOWN ); inTo( _this, $.ButtonState.DOWN );
_this.raiseEvent( "onPress", _this ); _this.raiseEvent( "onPress", _this );
}, },
releaseHandler: function( tracker, position, insideElementPress, insideElementRelease ) { releaseHandler: function( tracker, position, insideElementPress, insideElementRelease ) {
if ( insideElementPress && insideElementRelease ) { if ( insideElementPress && insideElementRelease ) {
outTo( _this, $.ButtonState.HOVER ); outTo( _this, $.ButtonState.HOVER );
@ -4284,6 +4298,7 @@ $.Button = function( options ) {
inTo( _this, $.ButtonState.HOVER ); inTo( _this, $.ButtonState.HOVER );
} }
}, },
clickHandler: function( tracker, position, quick, shift ) { clickHandler: function( tracker, position, quick, shift ) {
if ( quick ) { if ( quick ) {
_this.raiseEvent("onClick", _this); _this.raiseEvent("onClick", _this);
@ -4333,8 +4348,8 @@ function updateFade( button ) {
if ( button.shouldFade ) { if ( button.shouldFade ) {
currentTime = +new Date(); currentTime = +new Date();
deltaTime = currentTime - this.fadeBeginTime; deltaTime = currentTime - button.fadeBeginTime;
opacity = 1.0 - deltaTime / this.fadeLength; opacity = 1.0 - deltaTime / button.fadeLength;
opacity = Math.min( 1.0, opacity ); opacity = Math.min( 1.0, opacity );
opacity = Math.max( 0.0, opacity ); opacity = Math.max( 0.0, opacity );
@ -4348,7 +4363,7 @@ function updateFade( button ) {
function beginFading( button ) { function beginFading( button ) {
button.shouldFade = true; button.shouldFade = true;
button.fadeBeginTime = new Date().getTime() + button.fadeDelay; button.fadeBeginTime = +new Date() + button.fadeDelay;
window.setTimeout( function(){ window.setTimeout( function(){
scheduleFade( button ); scheduleFade( button );
}, button.fadeDelay ); }, button.fadeDelay );
@ -4393,9 +4408,9 @@ function outTo( button, newState ) {
button.currentState = $.ButtonState.GROUP; button.currentState = $.ButtonState.GROUP;
} }
if ( button.newState <= $.ButtonState.REST && if ( newState <= $.ButtonState.REST &&
button.currentState == $.ButtonState.GROUP ) { button.currentState == $.ButtonState.GROUP ) {
button.beginFading(); beginFading( button );
button.currentState = $.ButtonState.REST; button.currentState = $.ButtonState.REST;
} }
}; };
@ -4428,54 +4443,57 @@ function outTo( button, newState ) {
**/ **/
$.ButtonGroup = function( options ) { $.ButtonGroup = function( options ) {
this.buttons = options.buttons; $.extend( true, this, {
this.element = options.group || $.makeNeutralElement( "span" ); buttons: null,
this.config = options.config; clickTimeThreshold: $.DEFAULT_SETTINGS.clickTimeThreshold,
this.tracker = new $.MouseTracker( clickDistThreshold: $.DEFAULT_SETTINGS.clickDistThreshold
this.element, }, options );
this.config.clickTimeThreshold,
this.config.clickDistThreshold
);
// copy the botton elements // copy the botton elements
var buttons = this.buttons.concat([]), var buttons = this.buttons.concat([]),
_this = this, _this = this,
i; i;
this.element = options.group || $.makeNeutralElement( "span" );
this.element.style.display = "inline-block"; this.element.style.display = "inline-block";
for ( i = 0; i < buttons.length; i++ ) { for ( i = 0; i < buttons.length; i++ ) {
this.element.appendChild( buttons[ i ].element ); this.element.appendChild( buttons[ i ].element );
} }
this.tracker.enter = options.enter || function() { this.tracker = new $.MouseTracker({
var i; element: this.element,
for ( i = 0; i < _this.buttons.length; i++ ) { clickTimeThreshold: this.clickTimeThreshold,
_this.buttons[ i ].notifyGroupEnter(); clickDistThreshold: this.clickDistThreshold,
} enterHandler: function() {
}; var i;
this.tracker.exit = options.exit || function() {
var i,
buttonDownElement = arguments.length > 2 ? arguments[ 2 ] : null;
if ( !buttonDownElement ) {
for ( i = 0; i < _this.buttons.length; 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();
}
} }
} }
}; }).setTracking( true );
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 );
}; };
$.ButtonGroup.prototype = { $.ButtonGroup.prototype = {
@ -4487,7 +4505,7 @@ $.ButtonGroup.prototype = {
* @name OpenSeadragon.ButtonGroup.prototype.emulateEnter * @name OpenSeadragon.ButtonGroup.prototype.emulateEnter
*/ */
emulateEnter: function() { emulateEnter: function() {
this.tracker.enter(); this.tracker.enterHandler();
}, },
/** /**
@ -4497,7 +4515,7 @@ $.ButtonGroup.prototype = {
* @name OpenSeadragon.ButtonGroup.prototype.emulateExit * @name OpenSeadragon.ButtonGroup.prototype.emulateExit
*/ */
emulateExit: function() { emulateExit: function() {
this.tracker.exit(); this.tracker.exitHandler();
} }
}; };

View File

@ -135,6 +135,7 @@ $.Button = function( options ) {
element: this.element, element: this.element,
clickTimeThreshold: this.clickTimeThreshold, clickTimeThreshold: this.clickTimeThreshold,
clickDistThreshold: this.clickDistThreshold, clickDistThreshold: this.clickDistThreshold,
enterHandler: function( tracker, position, buttonDownElement, buttonDownAny ) { enterHandler: function( tracker, position, buttonDownElement, buttonDownAny ) {
if ( buttonDownElement ) { if ( buttonDownElement ) {
inTo( _this, $.ButtonState.DOWN ); inTo( _this, $.ButtonState.DOWN );
@ -143,16 +144,19 @@ $.Button = function( options ) {
inTo( _this, $.ButtonState.HOVER ); inTo( _this, $.ButtonState.HOVER );
} }
}, },
exitHandler: function( tracker, position, buttonDownElement, buttonDownAny ) { exitHandler: function( tracker, position, buttonDownElement, buttonDownAny ) {
outTo( _this, $.ButtonState.GROUP ); outTo( _this, $.ButtonState.GROUP );
if ( buttonDownElement ) { if ( buttonDownElement ) {
_this.raiseEvent( "onExit", _this ); _this.raiseEvent( "onExit", _this );
} }
}, },
pressHandler: function( tracker, position ) { pressHandler: function( tracker, position ) {
inTo( _this, $.ButtonState.DOWN ); inTo( _this, $.ButtonState.DOWN );
_this.raiseEvent( "onPress", _this ); _this.raiseEvent( "onPress", _this );
}, },
releaseHandler: function( tracker, position, insideElementPress, insideElementRelease ) { releaseHandler: function( tracker, position, insideElementPress, insideElementRelease ) {
if ( insideElementPress && insideElementRelease ) { if ( insideElementPress && insideElementRelease ) {
outTo( _this, $.ButtonState.HOVER ); outTo( _this, $.ButtonState.HOVER );
@ -163,6 +167,7 @@ $.Button = function( options ) {
inTo( _this, $.ButtonState.HOVER ); inTo( _this, $.ButtonState.HOVER );
} }
}, },
clickHandler: function( tracker, position, quick, shift ) { clickHandler: function( tracker, position, quick, shift ) {
if ( quick ) { if ( quick ) {
_this.raiseEvent("onClick", _this); _this.raiseEvent("onClick", _this);
@ -212,8 +217,8 @@ function updateFade( button ) {
if ( button.shouldFade ) { if ( button.shouldFade ) {
currentTime = +new Date(); currentTime = +new Date();
deltaTime = currentTime - this.fadeBeginTime; deltaTime = currentTime - button.fadeBeginTime;
opacity = 1.0 - deltaTime / this.fadeLength; opacity = 1.0 - deltaTime / button.fadeLength;
opacity = Math.min( 1.0, opacity ); opacity = Math.min( 1.0, opacity );
opacity = Math.max( 0.0, opacity ); opacity = Math.max( 0.0, opacity );
@ -227,7 +232,7 @@ function updateFade( button ) {
function beginFading( button ) { function beginFading( button ) {
button.shouldFade = true; button.shouldFade = true;
button.fadeBeginTime = new Date().getTime() + button.fadeDelay; button.fadeBeginTime = +new Date() + button.fadeDelay;
window.setTimeout( function(){ window.setTimeout( function(){
scheduleFade( button ); scheduleFade( button );
}, button.fadeDelay ); }, button.fadeDelay );
@ -272,9 +277,9 @@ function outTo( button, newState ) {
button.currentState = $.ButtonState.GROUP; button.currentState = $.ButtonState.GROUP;
} }
if ( button.newState <= $.ButtonState.REST && if ( newState <= $.ButtonState.REST &&
button.currentState == $.ButtonState.GROUP ) { button.currentState == $.ButtonState.GROUP ) {
button.beginFading(); beginFading( button );
button.currentState = $.ButtonState.REST; button.currentState = $.ButtonState.REST;
} }
}; };

View File

@ -23,54 +23,57 @@
**/ **/
$.ButtonGroup = function( options ) { $.ButtonGroup = function( options ) {
this.buttons = options.buttons; $.extend( true, this, {
this.element = options.group || $.makeNeutralElement( "span" ); buttons: null,
this.config = options.config; clickTimeThreshold: $.DEFAULT_SETTINGS.clickTimeThreshold,
this.tracker = new $.MouseTracker( clickDistThreshold: $.DEFAULT_SETTINGS.clickDistThreshold
this.element, }, options );
this.config.clickTimeThreshold,
this.config.clickDistThreshold
);
// copy the botton elements // copy the botton elements
var buttons = this.buttons.concat([]), var buttons = this.buttons.concat([]),
_this = this, _this = this,
i; i;
this.element = options.group || $.makeNeutralElement( "span" );
this.element.style.display = "inline-block"; this.element.style.display = "inline-block";
for ( i = 0; i < buttons.length; i++ ) { for ( i = 0; i < buttons.length; i++ ) {
this.element.appendChild( buttons[ i ].element ); this.element.appendChild( buttons[ i ].element );
} }
this.tracker.enter = options.enter || function() { this.tracker = new $.MouseTracker({
var i; element: this.element,
for ( i = 0; i < _this.buttons.length; i++ ) { clickTimeThreshold: this.clickTimeThreshold,
_this.buttons[ i ].notifyGroupEnter(); clickDistThreshold: this.clickDistThreshold,
} enterHandler: function() {
}; var i;
this.tracker.exit = options.exit || function() {
var i,
buttonDownElement = arguments.length > 2 ? arguments[ 2 ] : null;
if ( !buttonDownElement ) {
for ( i = 0; i < _this.buttons.length; 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();
}
} }
} }
}; }).setTracking( true );
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 );
}; };
$.ButtonGroup.prototype = { $.ButtonGroup.prototype = {
@ -82,7 +85,7 @@ $.ButtonGroup.prototype = {
* @name OpenSeadragon.ButtonGroup.prototype.emulateEnter * @name OpenSeadragon.ButtonGroup.prototype.emulateEnter
*/ */
emulateEnter: function() { emulateEnter: function() {
this.tracker.enter(); this.tracker.enterHandler();
}, },
/** /**
@ -92,7 +95,7 @@ $.ButtonGroup.prototype = {
* @name OpenSeadragon.ButtonGroup.prototype.emulateExit * @name OpenSeadragon.ButtonGroup.prototype.emulateExit
*/ */
emulateExit: function() { emulateExit: function() {
this.tracker.exit(); this.tracker.exitHandler();
} }
}; };

View File

@ -22,7 +22,9 @@ $.EventHandler.prototype = {
if( !events ){ if( !events ){
this.events[ eventName ] = 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, var i,
length = events.length; length = events.length;
for ( i = 0; i < length; i++ ) { for ( i = 0; i < length; i++ ) {
events[ i ]( source, args ); if( events[ i ] ){
events[ i ]( source, args );
}
} }
}; };
}, },

View File

@ -233,8 +233,14 @@ $.Viewer = function( options ) {
}); });
this.buttons = new $.ButtonGroup({ this.buttons = new $.ButtonGroup({
config: this.config, clickTimeThreshold: this.config.clickTimeThreshold,
buttons: [ zoomIn, zoomOut, goHome, fullPage ] clickDistThreshold: this.config.clickDistThreshold,
buttons: [
zoomIn,
zoomOut,
goHome,
fullPage
]
}); });
this.navControl = this.buttons.element; this.navControl = this.buttons.element;