library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Widget: Style updates

Browse Source 
Ref #14246
This commit is contained in:
Alexander Schmitz 2015-08-24 09:32:13 -04:00
parent 14b3b607e5
commit e021e4d6e2
5 changed files with 317 additions and 298 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
tests/unit/widget/animation.js
View File

@ -3,7 +3,7 @@ define( [
"ui/widget" "ui/widget"
], function( $ ) { ], function( $ ) {
module( "widget animation", (function() { module( "widget animation", ( function() {
var show = $.fn.show, var show = $.fn.show,
fadeIn = $.fn.fadeIn, fadeIn = $.fn.fadeIn,
slideDown = $.fn.slideDown; slideDown = $.fn.slideDown;
@ -16,7 +16,7 @@ module( "widget animation", (function() {
show: function( fn ) { show: function( fn ) {
this._show( this.element, this.options.show, fn ); this._show( this.element, this.options.show, fn );
} }
}); } );
$.effects = { effect: { testEffect: $.noop } }; $.effects = { effect: { testEffect: $.noop } };
}, },
teardown: function() { teardown: function() {
@ -27,7 +27,7 @@ module( "widget animation", (function() {
$.fn.slideDown = slideDown; $.fn.slideDown = slideDown;
} }
}; };
}())); }() ) );
asyncTest( "show: null", function() { asyncTest( "show: null", function() {
expect( 4 ); expect( 4 );
@ -41,223 +41,223 @@ asyncTest( "show: null", function() {
element element
.delay( 50 ) .delay( 50 )
.queue(function( next ) { .queue( function( next ) {
ok( !hasRun, "queue before show" ); ok( !hasRun, "queue before show" );
next(); next();
}) } )
.testWidget( "show", function() { .testWidget( "show", function() {
hasRun = true; hasRun = true;
}) } )
.queue(function( next ) { .queue( function( next ) {
ok( hasRun, "queue after show" ); ok( hasRun, "queue after show" );
start(); start();
next(); next();
}); } );
}); } );
asyncTest( "show: true", function() { asyncTest( "show: true", function() {
expect( 4 ); expect( 4 );
var element = $( "#widget" ).testWidget({ var element = $( "#widget" ).testWidget( {
show: true show: true
}), } ),
hasRun = false; hasRun = false;
$.fn.fadeIn = function( duration, easing, complete ) { $.fn.fadeIn = function( duration, easing, complete ) {
return this.queue(function( next ) { return this.queue( function( next ) {
strictEqual( duration, undefined, "duration" ); strictEqual( duration, undefined, "duration" );
strictEqual( easing, undefined, "easing" ); strictEqual( easing, undefined, "easing" );
complete(); complete();
next(); next();
}); } );
}; };
element element
.delay( 50 ) .delay( 50 )
.queue(function( next ) { .queue( function( next ) {
ok( !hasRun, "queue before show" ); ok( !hasRun, "queue before show" );
next(); next();
}) } )
.testWidget( "show", function() { .testWidget( "show", function() {
hasRun = true; hasRun = true;
}) } )
.queue(function( next ) { .queue( function( next ) {
ok( hasRun, "queue after show" ); ok( hasRun, "queue after show" );
start(); start();
next(); next();
}); } );
}); } );
asyncTest( "show: number", function() { asyncTest( "show: number", function() {
expect( 4 ); expect( 4 );
var element = $( "#widget" ).testWidget({ var element = $( "#widget" ).testWidget( {
show: 123 show: 123
}), } ),
hasRun = false; hasRun = false;
$.fn.fadeIn = function( duration, easing, complete ) { $.fn.fadeIn = function( duration, easing, complete ) {
return this.queue(function( next ) { return this.queue( function( next ) {
strictEqual( duration, 123, "duration" ); strictEqual( duration, 123, "duration" );
strictEqual( easing, undefined, "easing" ); strictEqual( easing, undefined, "easing" );
complete(); complete();
next(); next();
}); } );
}; };
element element
.delay( 50 ) .delay( 50 )
.queue(function( next ) { .queue( function( next ) {
ok( !hasRun, "queue before show" ); ok( !hasRun, "queue before show" );
next(); next();
}) } )
.testWidget( "show", function() { .testWidget( "show", function() {
hasRun = true; hasRun = true;
}) } )
.queue(function( next ) { .queue( function( next ) {
ok( hasRun, "queue after show" ); ok( hasRun, "queue after show" );
start(); start();
next(); next();
}); } );
}); } );
asyncTest( "show: core animation", function() { asyncTest( "show: core animation", function() {
expect( 4 ); expect( 4 );
var element = $( "#widget" ).testWidget({ var element = $( "#widget" ).testWidget( {
show: "slideDown" show: "slideDown"
}), } ),
hasRun = false; hasRun = false;
$.fn.slideDown = function( duration, easing, complete ) { $.fn.slideDown = function( duration, easing, complete ) {
return this.queue(function( next ) { return this.queue( function( next ) {
strictEqual( duration, undefined, "duration" ); strictEqual( duration, undefined, "duration" );
strictEqual( easing, undefined, "easing" ); strictEqual( easing, undefined, "easing" );
complete(); complete();
next(); next();
}); } );
}; };
element element
.delay( 50 ) .delay( 50 )
.queue(function( next ) { .queue( function( next ) {
ok( !hasRun, "queue before show" ); ok( !hasRun, "queue before show" );
next(); next();
}) } )
.testWidget( "show", function() { .testWidget( "show", function() {
hasRun = true; hasRun = true;
}) } )
.queue(function( next ) { .queue( function( next ) {
ok( hasRun, "queue after show" ); ok( hasRun, "queue after show" );
start(); start();
next(); next();
}); } );
}); } );
asyncTest( "show: effect", function() { asyncTest( "show: effect", function() {
expect( 5 ); expect( 5 );
var element = $( "#widget" ).testWidget({ var element = $( "#widget" ).testWidget( {
show: "testEffect" show: "testEffect"
}), } ),
hasRun = false; hasRun = false;
$.fn.show = function( options ) { $.fn.show = function( options ) {
return this.queue(function( next ) { return this.queue( function( next ) {
equal( options.effect, "testEffect", "effect" ); equal( options.effect, "testEffect", "effect" );
ok( !("duration" in options), "duration" ); ok( !( "duration" in options ), "duration" );
ok( !("easing" in options), "easing" ); ok( !( "easing" in options ), "easing" );
options.complete(); options.complete();
next(); next();
}); } );
}; };
element element
.delay( 50 ) .delay( 50 )
.queue(function( next ) { .queue( function( next ) {
ok( !hasRun, "queue before show" ); ok( !hasRun, "queue before show" );
next(); next();
}) } )
.testWidget( "show", function() { .testWidget( "show", function() {
hasRun = true; hasRun = true;
}) } )
.queue(function( next ) { .queue( function( next ) {
ok( hasRun, "queue after show" ); ok( hasRun, "queue after show" );
start(); start();
next(); next();
}); } );
}); } );
asyncTest( "show: object(core animation)", function() { asyncTest( "show: object(core animation)", function() {
expect( 4 ); expect( 4 );
var element = $( "#widget" ).testWidget({ var element = $( "#widget" ).testWidget( {
show: { show: {
effect: "slideDown", effect: "slideDown",
duration: 123, duration: 123,
easing: "testEasing" easing: "testEasing"
} }
}), } ),
hasRun = false; hasRun = false;
$.fn.slideDown = function( duration, easing, complete ) { $.fn.slideDown = function( duration, easing, complete ) {
return this.queue(function( next ) { return this.queue( function( next ) {
equal( duration, 123, "duration" ); equal( duration, 123, "duration" );
equal( easing, "testEasing", "easing" ); equal( easing, "testEasing", "easing" );
complete(); complete();
next(); next();
}); } );
}; };
element element
.delay( 50 ) .delay( 50 )
.queue(function( next ) { .queue( function( next ) {
ok( !hasRun, "queue before show" ); ok( !hasRun, "queue before show" );
next(); next();
}) } )
.testWidget( "show", function() { .testWidget( "show", function() {
hasRun = true; hasRun = true;
}) } )
.queue(function( next ) { .queue( function( next ) {
ok( hasRun, "queue after show" ); ok( hasRun, "queue after show" );
start(); start();
next(); next();
}); } );
}); } );
asyncTest( "show: object(effect)", function() { asyncTest( "show: object(effect)", function() {
expect( 3 ); expect( 3 );
var element = $( "#widget" ).testWidget({ var element = $( "#widget" ).testWidget( {
show: { show: {
effect: "testEffect", effect: "testEffect",
duration: 123, duration: 123,
easing: "testEasing" easing: "testEasing"
} }
}), } ),
hasRun = false; hasRun = false;
$.fn.show = function( options ) { $.fn.show = function( options ) {
return this.queue(function( next ) { return this.queue( function( next ) {
deepEqual( options, { deepEqual( options, {
effect: "testEffect", effect: "testEffect",
duration: 123, duration: 123,
easing: "testEasing", easing: "testEasing",
complete: options.complete complete: options.complete
}); } );
options.complete(); options.complete();
next(); next();
}); } );
}; };
element element
.delay( 50 ) .delay( 50 )
.queue(function( next ) { .queue( function( next ) {
ok( !hasRun, "queue before show" ); ok( !hasRun, "queue before show" );
next(); next();
}) } )
.testWidget( "show", function() { .testWidget( "show", function() {
hasRun = true; hasRun = true;
}) } )
.queue(function( next ) { .queue( function( next ) {
ok( hasRun, "queue after show" ); ok( hasRun, "queue after show" );
start(); start();
next(); next();
}); } );
}); } );
} ); } );

16
tests/unit/widget/classes.js
View File

@ -48,13 +48,13 @@ module( "widget factory classes", {
this.span.remove(); this.span.remove();
this.element.unwrap(); this.element.unwrap();
} }
}); } );
}, },
teardown: function() { teardown: function() {
delete $.ui.classesWidget; delete $.ui.classesWidget;
delete $.fn.classesWidget; delete $.fn.classesWidget;
} }
}); } );
function elementHasClasses( widget, method, assert ) { function elementHasClasses( widget, method, assert ) {
var toggle = method === "toggle" ? ( ", true" ) : ""; var toggle = method === "toggle" ? ( ", true" ) : "";
@ -96,13 +96,13 @@ test( ".option() - classes setter", function( assert ) {
elementHasClasses( testWidget.element, "add", assert ); elementHasClasses( testWidget.element, "add", assert );
testWidget.option({ testWidget.option( {
classes: { classes: {
"ui-classes-span": "custom-theme-span", "ui-classes-span": "custom-theme-span",
"ui-classes-widget": "ui-theme-widget custom-theme-widget", "ui-classes-widget": "ui-theme-widget custom-theme-widget",
"ui-classes-element": "ui-theme-element-2" "ui-classes-element": "ui-theme-element-2"
} }
}); } );
assert.lacksClasses( testWidget.element, "ui-theme-element", assert.lacksClasses( testWidget.element, "ui-theme-element",
"Removing a class from the value removes the class" ); "Removing a class from the value removes the class" );
@ -116,15 +116,15 @@ test( ".option() - classes setter", function( assert ) {
"Adding a class to an empty value works as expected" ); "Adding a class to an empty value works as expected" );
assert.hasClasses( testWidget.wrapper, "ui-classes-widget custom-theme-widget", assert.hasClasses( testWidget.wrapper, "ui-classes-widget custom-theme-widget",
"Appending a class to the current value works as expected" ); "Appending a class to the current value works as expected" );
}); } );
test( ".destroy() - class removal", function( assert ) { test( ".destroy() - class removal", function( assert ) {
expect( 1 ); expect( 1 );
assert.domEqual( "#widget", function() { assert.domEqual( "#widget", function() {
$( "#widget" ).classesWidget().classesWidget( "destroy" ); $( "#widget" ).classesWidget().classesWidget( "destroy" );
}); } );
}); } );
test( "._add/_remove/_toggleClass()", function( assert ) { test( "._add/_remove/_toggleClass()", function( assert ) {
expect( 24 ); expect( 24 );
@ -141,6 +141,6 @@ test( "._add/_remove/_toggleClass()", function( assert ) {
widget.classesWidget( "removeClasses" ); widget.classesWidget( "removeClasses" );
elementLacksClasses( widget, "remove", assert ); elementLacksClasses( widget, "remove", assert );
}); } );
} ); } );

421
tests/unit/widget/core.js
View File

File diff suppressed because it is too large Load Diff

22
tests/unit/widget/extend.js
View File

@ -16,7 +16,7 @@ test( "$.widget.extend()", function() {
deep2 = { foo: { baz: true }, foo2: document }, deep2 = { foo: { baz: true }, foo2: document },
deep2copy = { foo: { baz: true }, foo2: document }, deep2copy = { foo: { baz: true }, foo2: document },
deepmerged = { foo: { bar: true, baz: true }, foo2: document }, deepmerged = { foo: { bar: true, baz: true }, foo2: document },
arr = [1, 2, 3], arr = [ 1, 2, 3 ],
nestedarray = { arr: arr }, nestedarray = { arr: arr },
defaults = { xnumber1: 5, xnumber2: 7, xstring1: "peter", xstring2: "pan" }, defaults = { xnumber1: 5, xnumber2: 7, xstring1: "peter", xstring2: "pan" },
defaultsCopy = { xnumber1: 5, xnumber2: 7, xstring1: "peter", xstring2: "pan" }, defaultsCopy = { xnumber1: 5, xnumber2: 7, xstring1: "peter", xstring2: "pan" },
@ -35,8 +35,8 @@ test( "$.widget.extend()", function() {
deepEqual( deep2.foo, deep2copy.foo, "Check if not deep2: options must not be modified" ); deepEqual( deep2.foo, deep2copy.foo, "Check if not deep2: options must not be modified" );
equal( deep1.foo2, document, "Make sure that a deep clone was not attempted on the document" ); equal( deep1.foo2, document, "Make sure that a deep clone was not attempted on the document" );
strictEqual( $.widget.extend({}, nestedarray).arr, arr, "Don't clone arrays" ); strictEqual( $.widget.extend( {}, nestedarray ).arr, arr, "Don't clone arrays" );
ok( $.isPlainObject( $.widget.extend({ arr: arr }, { arr: {} }).arr ), "Cloned object heve to be an plain object" ); ok( $.isPlainObject( $.widget.extend( { arr: arr }, { arr: {} } ).arr ), "Cloned object heve to be an plain object" );
empty = {}; empty = {};
optionsWithLength = { foo: { length: -1 } }; optionsWithLength = { foo: { length: -1 } };
@ -56,29 +56,29 @@ test( "$.widget.extend()", function() {
strictEqual( empty.foo.date, customObject, "Custom objects copy correctly (no methods)" ); strictEqual( empty.foo.date, customObject, "Custom objects copy correctly (no methods)" );
// Makes the class a little more realistic // Makes the class a little more realistic
myKlass.prototype = { someMethod: function(){} }; myKlass.prototype = { someMethod: function() {} };
empty = {}; empty = {};
$.widget.extend( empty, optionsWithCustomObject ); $.widget.extend( empty, optionsWithCustomObject );
strictEqual( empty.foo.date, customObject, "Custom objects copy correctly" ); strictEqual( empty.foo.date, customObject, "Custom objects copy correctly" );
ret = $.widget.extend({ foo: 4 }, { foo: Number(5) } ); ret = $.widget.extend( { foo: 4 }, { foo: Number( 5 ) } );
equal( ret.foo, 5, "Wrapped numbers copy correctly" ); equal( ret.foo, 5, "Wrapped numbers copy correctly" );
nullUndef = $.widget.extend( {}, options, { xnumber2: null } ); nullUndef = $.widget.extend( {}, options, { xnumber2: null } );
strictEqual( nullUndef.xnumber2, null, "Check to make sure null values are copied"); strictEqual( nullUndef.xnumber2, null, "Check to make sure null values are copied" );
nullUndef = $.widget.extend( {}, options, { xnumber2: undefined } ); nullUndef = $.widget.extend( {}, options, { xnumber2: undefined } );
strictEqual( nullUndef.xnumber2, options.xnumber2, "Check to make sure undefined values are not copied"); strictEqual( nullUndef.xnumber2, options.xnumber2, "Check to make sure undefined values are not copied" );
nullUndef = $.widget.extend( {}, options, { xnumber0: null } ); nullUndef = $.widget.extend( {}, options, { xnumber0: null } );
strictEqual( nullUndef.xnumber0, null, "Check to make sure null values are inserted"); strictEqual( nullUndef.xnumber0, null, "Check to make sure null values are inserted" );
target = {}; target = {};
recursive = { foo:target, bar:5 }; recursive = { foo:target, bar:5 };
$.widget.extend( target, recursive ); $.widget.extend( target, recursive );
deepEqual( target, { foo: {}, bar: 5 }, "Check to make sure a recursive obj doesn't go never-ending loop by not copying it over" ); deepEqual( target, { foo: {}, bar: 5 }, "Check to make sure a recursive obj doesn't go never-ending loop by not copying it over" );
ret = $.widget.extend( { foo: [] }, { foo: [0] } ); // 1907 ret = $.widget.extend( { foo: [] }, { foo: [ 0 ] } ); // 1907
equal( ret.foo.length, 1, "Check to make sure a value with coersion 'false' copies over when necessary to fix #1907" ); equal( ret.foo.length, 1, "Check to make sure a value with coersion 'false' copies over when necessary to fix #1907" );
ret = $.widget.extend( { foo: "1,2,3" }, { foo: [ 1, 2, 3 ] } ); ret = $.widget.extend( { foo: "1,2,3" }, { foo: [ 1, 2, 3 ] } );
@ -105,8 +105,8 @@ test( "$.widget.extend()", function() {
}; };
output = $.widget.extend( {}, input ); output = $.widget.extend( {}, input );
deepEqual( input, output, "don't clone arrays" ); deepEqual( input, output, "don't clone arrays" );
input.key[0] = 10; input.key[ 0 ] = 10;
deepEqual( input, output, "don't clone arrays" ); deepEqual( input, output, "don't clone arrays" );
}); } );
} ); } );

12
ui/widgets/accordion.js
View File

@ -87,6 +87,7 @@ return $.widget( "ui.accordion", {
} }
this._processPanels(); this._processPanels();
// handle negative values // handle negative values
if ( options.active < 0 ) { if ( options.active < 0 ) {
options.active += this.headers.length; options.active += this.headers.length;
@ -147,6 +148,7 @@ return $.widget( "ui.accordion", {
_setOption: function( key, value ) { _setOption: function( key, value ) {
if ( key === "active" ) { if ( key === "active" ) {
// _activate() will handle invalid values and update this.options // _activate() will handle invalid values and update this.options
this._activate( value ); this._activate( value );
return; return;
@ -238,21 +240,27 @@ return $.widget( "ui.accordion", {
if ( ( options.active === false && options.collapsible === true ) || !this.headers.length ) { if ( ( options.active === false && options.collapsible === true ) || !this.headers.length ) {
options.active = false; options.active = false;
this.active = $(); this.active = $();
// active false only when collapsible is true // active false only when collapsible is true
} else if ( options.active === false ) { } else if ( options.active === false ) {
this._activate( 0 ); this._activate( 0 );
// was active, but active panel is gone // was active, but active panel is gone
} else if ( this.active.length && !$.contains( this.element[ 0 ], this.active[ 0 ] ) ) { } else if ( this.active.length && !$.contains( this.element[ 0 ], this.active[ 0 ] ) ) {
// all remaining panel are disabled // all remaining panel are disabled
if ( this.headers.length === this.headers.find( ".ui-state-disabled" ).length ) { if ( this.headers.length === this.headers.find( ".ui-state-disabled" ).length ) {
options.active = false; options.active = false;
this.active = $(); this.active = $();
// activate previous panel // activate previous panel
} else { } else {
this._activate( Math.max( 0, options.active - 1 ) ); this._activate( Math.max( 0, options.active - 1 ) );
} }
// was active, active panel still exists // was active, active panel still exists
} else { } else {
// make sure active index is correct // make sure active index is correct
options.active = this.headers.index( this.active ); options.active = this.headers.index( this.active );
} }
@ -427,8 +435,10 @@ return $.widget( "ui.accordion", {
event.preventDefault(); event.preventDefault();
if ( if (
// click on active header, but not collapsible // click on active header, but not collapsible
( clickedIsActive && !options.collapsible ) || ( clickedIsActive && !options.collapsible ) ||
// allow canceling activation // allow canceling activation
( this._trigger( "beforeActivate", event, eventData ) === false ) ) { ( this._trigger( "beforeActivate", event, eventData ) === false ) ) {
return; return;
@ -487,6 +497,7 @@ return $.widget( "ui.accordion", {
"aria-selected": "false", "aria-selected": "false",
"aria-expanded": "false" "aria-expanded": "false"
} ); } );
// if we're switching panels, remove the old header from the tab order // if we're switching panels, remove the old header from the tab order
// if we're opening from collapsed state, remove the previous header from the tab order // if we're opening from collapsed state, remove the previous header from the tab order
// if we're collapsing, then keep the collapsing header in the tab order // if we're collapsing, then keep the collapsing header in the tab order
@ -531,6 +542,7 @@ return $.widget( "ui.accordion", {
if ( typeof options === "string" ) { if ( typeof options === "string" ) {
easing = options; easing = options;
} }
// fall back from options to animation in case of partial down settings // fall back from options to animation in case of partial down settings
easing = easing || options.easing || animate.easing; easing = easing || options.easing || animate.easing;
duration = duration || options.duration || animate.duration; duration = duration || options.duration || animate.duration;