Widget: Fixed _show() and _hide() implementation and added tests.

This commit is contained in:
Scott González 2011-05-30 18:27:48 -04:00
parent e5186dc930
commit 1b52cefc26
5 changed files with 285 additions and 5 deletions

View File

@ -2,15 +2,19 @@ commonWidgetTests( "tooltip", {
defaults: {
content: function() {},
disabled: false,
hide: true,
items: "[title]",
position: {
my: "left+15 center",
at: "right center",
collision: "flip fit"
},
show: true,
tooltipClass: null,
// callbacks
create: null
close: null,
create: null,
open: null
}
});

View File

@ -15,6 +15,7 @@
<script src="widget_core.js"></script>
<script src="widget_extend.js"></script>
<script src="widget_animation.js"></script>
<script src="../swarminject.js"></script>
</head>

View File

@ -0,0 +1,257 @@
module( "widget animation", (function() {
var show = $.fn.show,
fadeIn = $.fn.fadeIn,
slideDown = $.fn.slideDown;
return {
setup: function() {
$.widget( "ui.testWidget", {
_create: function() {
this.element.hide();
},
show: function( fn ) {
this._show( this.element, this.options.show, fn );
}
});
$.effects = { effect: { testEffect: $.noop } };
},
teardown: function() {
delete $.ui.testWidget;
delete $.effects.effect.testEffect;
$.fn.show = show;
$.fn.fadeIn = fadeIn;
$.fn.slideDown = slideDown;
}
};
}()));
asyncTest( "show: null", function() {
expect( 4 );
var element = $( "#widget" ).testWidget(),
hasRun = false;
$.fn.show = function() {
ok( true, "show called" );
equal( arguments.length, 0, "no args passed to show" );
};
element
.delay( 50 )
.queue(function( next ) {
ok( !hasRun, "queue before show" );
next();
})
.testWidget( "show", function() {
hasRun = true;
})
.queue(function( next ) {
ok( hasRun, "queue after show" );
start();
next();
});
});
asyncTest( "show: true", function() {
expect( 4 );
var element = $( "#widget" ).testWidget({
show: true
}),
hasRun = false;
$.fn.fadeIn = function( duration, easing, complete ) {
return this.queue(function( next ) {
strictEqual( duration, undefined, "duration" );
strictEqual( easing, undefined, "easing" );
complete();
next();
});
};
element
.delay( 50 )
.queue(function( next ) {
ok( !hasRun, "queue before show" );
next();
})
.testWidget( "show", function() {
hasRun = true;
})
.queue(function( next ) {
ok( hasRun, "queue after show" );
start();
next();
});
});
asyncTest( "show: number", function() {
expect( 4 );
var element = $( "#widget" ).testWidget({
show: 123
}),
hasRun = false;
$.fn.fadeIn = function( duration, easing, complete ) {
return this.queue(function( next ) {
strictEqual( duration, 123, "duration" );
strictEqual( easing, undefined, "easing" );
complete();
next();
});
};
element
.delay( 50 )
.queue(function( next ) {
ok( !hasRun, "queue before show" );
next();
})
.testWidget( "show", function() {
hasRun = true;
})
.queue(function( next ) {
ok( hasRun, "queue after show" );
start();
next();
});
});
asyncTest( "show: core animation", function() {
expect( 4 );
var element = $( "#widget" ).testWidget({
show: "slideDown"
}),
hasRun = false;
$.fn.slideDown = function( duration, easing, complete ) {
return this.queue(function( next ) {
strictEqual( duration, undefined, "duration" );
strictEqual( easing, undefined, "easing" );
complete();
next();
});
};
element
.delay( 50 )
.queue(function( next ) {
ok( !hasRun, "queue before show" );
next();
})
.testWidget( "show", function() {
hasRun = true;
})
.queue(function( next ) {
ok( hasRun, "queue after show" );
start();
next();
});
});
asyncTest( "show: effect", function() {
expect( 5 );
var element = $( "#widget" ).testWidget({
show: "testEffect"
}),
hasRun = false;
$.fn.show = function( options ) {
return this.queue(function( next ) {
equal( options.effect, "testEffect", "effect" );
ok( !("duration" in options), "duration" );
ok( !("easing" in options), "easing" );
options.complete();
next();
});
};
element
.delay( 50 )
.queue(function( next ) {
ok( !hasRun, "queue before show" );
next();
})
.testWidget( "show", function() {
hasRun = true;
})
.queue(function( next ) {
ok( hasRun, "queue after show" );
start();
next();
});
});
asyncTest( "show: object(core animation)", function() {
expect( 4 );
var element = $( "#widget" ).testWidget({
show: {
effect: "slideDown",
duration: 123,
easing: "testEasing"
}
}),
hasRun = false;
$.fn.slideDown = function( duration, easing, complete ) {
return this.queue(function( next ) {
equal( duration, 123, "duration" );
equal( easing, "testEasing", "easing" );
complete();
next();
});
};
element
.delay( 50 )
.queue(function( next ) {
ok( !hasRun, "queue before show" );
next();
})
.testWidget( "show", function() {
hasRun = true;
})
.queue(function( next ) {
ok( hasRun, "queue after show" );
start();
next();
});
});
asyncTest( "show: object(effect)", function() {
expect( 3 );
var element = $( "#widget" ).testWidget({
show: {
effect: "testEffect",
duration: 123,
easing: "testEasing"
}
}),
hasRun = false;
$.fn.show = function( options ) {
return this.queue(function( next ) {
deepEqual( options, {
effect: "testEffect",
duration: 123,
easing: "testEasing",
complete: options.complete
});
options.complete();
next();
});
};
element
.delay( 50 )
.queue(function( next ) {
ok( !hasRun, "queue before show" );
next();
})
.testWidget( "show", function() {
hasRun = true;
})
.queue(function( next ) {
ok( hasRun, "queue after show" );
start();
next();
});
});

View File

@ -22,13 +22,19 @@ $.widget( "ui.tooltip", {
content: function() {
return $( this ).attr( "title" );
},
hide: true,
items: "[title]",
position: {
my: "left+15 center",
at: "right center",
collision: "flip fit"
},
tooltipClass: null
show: true,
tooltipClass: null,
// callbacks
close: null,
open: null
},
_create: function() {

View File

@ -375,9 +375,20 @@ $.Widget.prototype = {
$.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) {
$.Widget.prototype[ "_" + method ] = function( element, options, callback ) {
if ( typeof options === "string" ) {
options = { effect: options };
}
var hasOptions,
effectName = !options ?
method :
options === true || typeof options === "number" ?
defaultEffect :
options.effect || defaultEffect;
options = options || {};
var hasOptions = !$.isEmptyObject( options ),
effectName = options.effect || defaultEffect;
if ( typeof options === "number" ) {
options = { duration: options };
}
hasOptions = !$.isEmptyObject( options );
options.complete = callback;
if ( options.delay ) {
element.delay( options.delay );
@ -387,11 +398,12 @@ $.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) {
} else if ( effectName !== method && element[ effectName ] ) {
element[ effectName ]( options.duration, options.easing, callback );
} else {
element.queue( function() {
element.queue(function( next ) {
$( this )[ method ]();
if ( callback ) {
callback.call( element[ 0 ] );
}
next();
});
}
};