Skip to content

Commit

Permalink
All: Remove usage of jQuery positional selectors
Browse files Browse the repository at this point in the history 
jQuery positional selectors () have been deprecated in
[jQuery 3.4.0](https://blog.jquery.com/2019/04/10/jquery-3-4-0-released/)
and they'll be removed in jQuery 4.0.0. This PR removes their usage.

Most of the changes were possible without changing public API. However,
dropping `:even` usage required a change to the
[`header` option](https://api.jqueryui.com/accordion/#option-header)
of the accordion widget. I made it an optional function; this will need
to be documented.

The polyfill for `.even()` & `.odd()` is added for jQuery <3.5.0. There was
no usage of the :odd selector in the code but the `.odd()` method is also
polyfilled for completeness.

Closes gh-1904
  • Loading branch information
@mgol
mgol committed Jan 22, 2020
1 parent 3481f50 commit 0c860b0
Show file tree
Hide file tree
Showing 23 changed files with 193 additions and 148 deletions.
24 changes: 12 additions & 12 deletions demos/position/cycler.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,24 +49,24 @@
});
}

left( $( "img:eq(0)" ) );
center( $( "img:eq(1)" ) );
right( $( "img:eq(2)" ) );
left( $( "img" ).eq( 0 ) );
center( $( "img" ).eq( 1 ) );
right( $( "img" ).eq( 2 ) );

function animate( to ) {
$( this ).stop( true, false ).animate( to );
}
function next( event ) {
event.preventDefault();
center( $( "img:eq(2)" ), animate );
left( $( "img:eq(1)" ), animate );
right( $( "img:eq(0)" ).appendTo( "#container" ) );
center( $( "img" ).eq( 2 ), animate );
left( $( "img" ).eq( 1 ), animate );
right( $( "img" ).eq( 0 ).appendTo( "#container" ) );
}
function previous( event ) {
event.preventDefault();
center( $( "img:eq(0)" ), animate );
right( $( "img:eq(1)" ), animate );
left( $( "img:eq(2)" ).prependTo( "#container" ) );
center( $( "img" ).eq( 0 ), animate );
right( $( "img" ).eq( 1 ), animate );
left( $( "img" ).eq( 2 ).prependTo( "#container" ) );
}
$( "#previous" ).on( "click", previous );
$( "#next" ).on( "click", next );
Expand All @@ -76,9 +76,9 @@
});

$( window ).on( "resize", function() {
left( $( "img:eq(0)" ), animate );
center( $( "img:eq(1)" ), animate );
right( $( "img:eq(2)" ), animate );
left( $( "img" ).eq( 0 ), animate );
center( $( "img" ).eq( 1 ), animate );
right( $( "img" ).eq( 2 ), animate );
});
</script>
</head>
Expand Down
5 changes: 4 additions & 1 deletion tests/lib/bootstrap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,8 +172,11 @@ function migrateUrl() {
}
}

var jQueryVersion = parseUrl().jquery;

// Load the jQuery fixes, if necessary
if ( parseFloat( parseUrl().jquery ) < 3 ) {
if ( !jQueryVersion ||
( jQueryVersion.indexOf( "git" ) === -1 && parseFloat( jQueryVersion ) < 4 ) ) {
modules.unshift( "ui/jquery-1-7" );
}

Expand Down
4 changes: 3 additions & 1 deletion tests/unit/accordion/common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ common.testWidget( "accordion", {
collapsible: false,
disabled: false,
event: "click",
header: "> li > :first-child, > :not(li):even",
header: function( elem ) {
return elem.find( "> li > :first-child" ).add( elem.find( "> :not(li)" ).even() );
},
heightStyle: "auto",
icons: {
"activeHeader": "ui-icon-triangle-1-s",
Expand Down
2 changes: 1 addition & 1 deletion tests/unit/accordion/core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ $.each( { div: "#list1", ul: "#navigation", dl: "#accordion-dl" }, function( typ
QUnit.test( "handle click on header-descendant", function( assert ) {
assert.expect( 1 );
var element = $( "#navigation" ).accordion();
$( "#navigation h2:eq(1) a" ).trigger( "click" );
$( "#navigation h2" ).eq( 1 ).find( "a" ).trigger( "click" );
state( assert, element, 0, 1, 0 );
} );

Expand Down
22 changes: 19 additions & 3 deletions tests/unit/accordion/options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -376,15 +376,15 @@ QUnit.test( "{ event: custom }", function( assert ) {
QUnit.test( "{ header: default }", function( assert ) {
assert.expect( 2 );

// Default: > li > :first-child,> :not(li):even
// > :not(li):even
// Default: elem.find( "> li > :first-child" ).add( elem.find( "> :not(li)" ).even() )
// elem.find( "> :not(li)" ).even()
state( assert, $( "#list1" ).accordion(), 1, 0, 0 );

// > li > :first-child
state( assert, $( "#navigation" ).accordion(), 1, 0, 0 );
} );

QUnit.test( "{ header: custom }", function( assert ) {
QUnit.test( "{ header: customString }", function( assert ) {
assert.expect( 6 );
var element = $( "#navigationWrapper" ).accordion( {
header: "h2"
Expand All @@ -398,6 +398,22 @@ QUnit.test( "{ header: custom }", function( assert ) {
state( assert, element, 0, 0, 1 );
} );

QUnit.test( "{ header: customFunction }", function( assert ) {
assert.expect( 6 );
var element = $( "#navigationWrapper" ).accordion( {
header: function( elem ) {
return elem.find( "h2" );
}
} );
element.find( "h2" ).each( function() {
assert.hasClasses( this, "ui-accordion-header" );
} );
assert.equal( element.find( ".ui-accordion-header" ).length, 3 );
state( assert, element, 1, 0, 0 );
element.accordion( "option", "active", 2 );
state( assert, element, 0, 0, 1 );
} );

QUnit.test( "{ heightStyle: 'auto' }", function( assert ) {
assert.expect( 3 );
var element = $( "#navigation" ).accordion( { heightStyle: "auto" } );
Expand Down
98 changes: 49 additions & 49 deletions tests/unit/datepicker/core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,33 +51,33 @@ QUnit.test( "baseStructure", function( assert ) {
assert.ok( !dp.is( ".ui-datepicker-multi" ), "Structure - not multi-month" );
assert.equal( dp.children().length, 2, "Structure - child count" );

header = dp.children( ":first" );
header = dp.children().first();
assert.ok( header.is( "div.ui-datepicker-header" ), "Structure - header division" );
assert.equal( header.children().length, 3, "Structure - header child count" );
assert.ok( header.children( ":first" ).is( "a.ui-datepicker-prev" ) && header.children( ":first" ).html() !== "", "Structure - prev link" );
assert.ok( header.children( ":eq(1)" ).is( "a.ui-datepicker-next" ) && header.children( ":eq(1)" ).html() !== "", "Structure - next link" );
assert.ok( header.children().first().is( "a.ui-datepicker-prev" ) && header.children().first().html() !== "", "Structure - prev link" );
assert.ok( header.children().eq( 1 ).is( "a.ui-datepicker-next" ) && header.children().eq ( 1 ).html() !== "", "Structure - next link" );

title = header.children( ":last" );
title = header.children().last();
assert.ok( title.is( "div.ui-datepicker-title" ) && title.html() !== "", "Structure - title division" );
assert.equal( title.children().length, 2, "Structure - title child count" );
assert.ok( title.children( ":first" ).is( "span.ui-datepicker-month" ) && title.children( ":first" ).text() !== "", "Structure - month text" );
assert.ok( title.children( ":last" ).is( "span.ui-datepicker-year" ) && title.children( ":last" ).text() !== "", "Structure - year text" );
assert.ok( title.children().first().is( "span.ui-datepicker-month" ) && title.children().first().text() !== "", "Structure - month text" );
assert.ok( title.children().last().is( "span.ui-datepicker-year" ) && title.children().last().text() !== "", "Structure - year text" );

table = dp.children( ":eq(1)" );
table = dp.children().eq( 1 );
assert.ok( table.is( "table.ui-datepicker-calendar" ), "Structure - month table" );
assert.ok( table.children( ":first" ).is( "thead" ), "Structure - month table thead" );
assert.ok( table.children().first().is( "thead" ), "Structure - month table thead" );

thead = table.children( ":first" ).children( ":first" );
thead = table.children().first().children().first();
assert.ok( thead.is( "tr" ), "Structure - month table title row" );
assert.equal( thead.find( "th" ).length, 7, "Structure - month table title cells" );
assert.ok( table.children( ":eq(1)" ).is( "tbody" ), "Structure - month table body" );
assert.ok( table.children( ":eq(1)" ).children( "tr" ).length >= 4, "Structure - month table week count" );
assert.ok( table.children().eq( 1 ).is( "tbody" ), "Structure - month table body" );
assert.ok( table.children().eq( 1 ).children( "tr" ).length >= 4, "Structure - month table week count" );

week = table.children( ":eq(1)" ).children( ":first" );
week = table.children().eq( 1 ).children().first();
assert.ok( week.is( "tr" ), "Structure - month table week row" );
assert.equal( week.children().length, 7, "Structure - week child count" );
assert.ok( week.children( ":first" ).is( "td.ui-datepicker-week-end" ), "Structure - month table first day cell" );
assert.ok( week.children( ":last" ).is( "td.ui-datepicker-week-end" ), "Structure - month table second day cell" );
assert.ok( week.children().first().is( "td.ui-datepicker-week-end" ), "Structure - month table first day cell" );
assert.ok( week.children().last().is( "td.ui-datepicker-week-end" ), "Structure - month table second day cell" );

inp.datepicker( "hide" ).datepicker( "destroy" );
step2();
Expand All @@ -94,14 +94,14 @@ QUnit.test( "baseStructure", function( assert ) {
} );
testHelper.onFocus( inp, function() {
title = dp.find( "div.ui-datepicker-title" );
assert.ok( title.children( ":first" ).is( "select.ui-datepicker-month" ), "Structure - month selector" );
assert.ok( title.children( ":last" ).is( "select.ui-datepicker-year" ), "Structure - year selector" );
assert.ok( title.children().first().is( "select.ui-datepicker-month" ), "Structure - month selector" );
assert.ok( title.children().last().is( "select.ui-datepicker-year" ), "Structure - year selector" );

panel = dp.children( ":last" );
panel = dp.children().last();
assert.ok( panel.is( "div.ui-datepicker-buttonpane" ), "Structure - button panel division" );
assert.equal( panel.children().length, 2, "Structure - button panel child count" );
assert.ok( panel.children( ":first" ).is( "button.ui-datepicker-current" ), "Structure - today button" );
assert.ok( panel.children( ":last" ).is( "button.ui-datepicker-close" ), "Structure - close button" );
assert.ok( panel.children().first().is( "button.ui-datepicker-current" ), "Structure - today button" );
assert.ok( panel.children().last().is( "button.ui-datepicker-close" ), "Structure - close button" );

inp.datepicker( "hide" ).datepicker( "destroy" );
step3();
Expand All @@ -116,13 +116,13 @@ QUnit.test( "baseStructure", function( assert ) {
assert.ok( dp.is( ".ui-datepicker-multi" ), "Structure multi [2] - multi-month" );
assert.equal( dp.children().length, 3, "Structure multi [2] - child count" );

child = dp.children( ":first" );
child = dp.children().first();
assert.ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-first" ), "Structure multi [2] - first month division" );

child = dp.children( ":eq(1)" );
child = dp.children().eq( 1 );
assert.ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-last" ), "Structure multi [2] - second month division" );

child = dp.children( ":eq(2)" );
child = dp.children().eq( 2 );
assert.ok( child.is( "div.ui-datepicker-row-break" ), "Structure multi [2] - row break" );
assert.ok( dp.is( ".ui-datepicker-multi-2" ), "Structure multi [2] - multi-2" );

Expand Down Expand Up @@ -152,22 +152,22 @@ QUnit.test( "baseStructure", function( assert ) {
assert.ok( dp.is( ".ui-datepicker-multi" ), "Structure multi - multi-month" );
assert.equal( dp.children().length, 6, "Structure multi [2,2] - child count" );

child = dp.children( ":first" );
child = dp.children().first();
assert.ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-first" ), "Structure multi [2,2] - first month division" );

child = dp.children( ":eq(1)" );
child = dp.children().eq( 1 );
assert.ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-last" ), "Structure multi [2,2] - second month division" );

child = dp.children( ":eq(2)" );
child = dp.children().eq( 2 );
assert.ok( child.is( "div.ui-datepicker-row-break" ), "Structure multi [2,2] - row break" );

child = dp.children( ":eq(3)" );
child = dp.children().eq( 3 );
assert.ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-first" ), "Structure multi [2,2] - third month division" );

child = dp.children( ":eq(4)" );
child = dp.children().eq( 4 );
assert.ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-last" ), "Structure multi [2,2] - fourth month division" );

child = dp.children( ":eq(5)" );
child = dp.children().eq( 5 );
assert.ok( child.is( "div.ui-datepicker-row-break" ), "Structure multi [2,2] - row break" );

inp.datepicker( "hide" ).datepicker( "destroy" );
Expand All @@ -181,14 +181,14 @@ QUnit.test( "baseStructure", function( assert ) {
assert.ok( !dp.is( ".ui-datepicker-multi" ), "Structure inline - not multi-month" );
assert.equal( dp.children().length, 2, "Structure inline - child count" );

header = dp.children( ":first" );
header = dp.children().first();
assert.ok( header.is( "div.ui-datepicker-header" ), "Structure inline - header division" );
assert.equal( header.children().length, 3, "Structure inline - header child count" );

table = dp.children( ":eq(1)" );
table = dp.children().eq( 1 );
assert.ok( table.is( "table.ui-datepicker-calendar" ), "Structure inline - month table" );
assert.ok( table.children( ":first" ).is( "thead" ), "Structure inline - month table thead" );
assert.ok( table.children( ":eq(1)" ).is( "tbody" ), "Structure inline - month table body" );
assert.ok( table.children().first().is( "thead" ), "Structure inline - month table thead" );
assert.ok( table.children().eq( 1 ).is( "tbody" ), "Structure inline - month table body" );

inl.datepicker( "destroy" );

Expand All @@ -199,13 +199,13 @@ QUnit.test( "baseStructure", function( assert ) {
assert.ok( dp.is( ".ui-datepicker-inline" ) && dp.is( ".ui-datepicker-multi" ), "Structure inline multi - main div" );
assert.equal( dp.children().length, 3, "Structure inline multi - child count" );

child = dp.children( ":first" );
child = dp.children().first();
assert.ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-first" ), "Structure inline multi - first month division" );

child = dp.children( ":eq(1)" );
child = dp.children().eq( 1 );
assert.ok( child.is( "div.ui-datepicker-group" ) && child.is( "div.ui-datepicker-group-last" ), "Structure inline multi - second month division" );

child = dp.children( ":eq(2)" );
child = dp.children().eq( 2 );
assert.ok( child.is( "div.ui-datepicker-row-break" ), "Structure inline multi - row break" );

inl.datepicker( "destroy" );
Expand All @@ -229,17 +229,17 @@ QUnit.test( "customStructure", function( assert ) {
testHelper.onFocus( inp, function() {
assert.ok( dp.is( ".ui-datepicker-rtl" ), "Structure RTL - right-to-left" );

header = dp.children( ":first" );
header = dp.children().first();
assert.ok( header.is( "div.ui-datepicker-header" ), "Structure RTL - header division" );
assert.equal( header.children().length, 3, "Structure RTL - header child count" );
assert.ok( header.children( ":first" ).is( "a.ui-datepicker-next" ), "Structure RTL - prev link" );
assert.ok( header.children( ":eq(1)" ).is( "a.ui-datepicker-prev" ), "Structure RTL - next link" );
assert.ok( header.children().first().is( "a.ui-datepicker-next" ), "Structure RTL - prev link" );
assert.ok( header.children().eq( 1 ).is( "a.ui-datepicker-prev" ), "Structure RTL - next link" );

panel = dp.children( ":last" );
panel = dp.children().last();
assert.ok( panel.is( "div.ui-datepicker-buttonpane" ), "Structure RTL - button division" );
assert.equal( panel.children().length, 2, "Structure RTL - button panel child count" );
assert.ok( panel.children( ":first" ).is( "button.ui-datepicker-close" ), "Structure RTL - close button" );
assert.ok( panel.children( ":last" ).is( "button.ui-datepicker-current" ), "Structure RTL - today button" );
assert.ok( panel.children().first().is( "button.ui-datepicker-close" ), "Structure RTL - close button" );
assert.ok( panel.children().last().is( "button.ui-datepicker-current" ), "Structure RTL - today button" );

inp.datepicker( "hide" ).datepicker( "destroy" );
step2();
Expand All @@ -256,10 +256,10 @@ QUnit.test( "customStructure", function( assert ) {
inp.val( "02/10/2008" );

testHelper.onFocus( inp, function() {
header = dp.children( ":first" );
header = dp.children().first();
assert.ok( header.is( "div.ui-datepicker-header" ), "Structure hide prev/next - header division" );
assert.equal( header.children().length, 1, "Structure hide prev/next - links child count" );
assert.ok( header.children( ":first" ).is( "div.ui-datepicker-title" ), "Structure hide prev/next - title division" );
assert.ok( header.children().first().is( "div.ui-datepicker-title" ), "Structure hide prev/next - title division" );

inp.datepicker( "hide" ).datepicker( "destroy" );
step3();
Expand All @@ -271,10 +271,10 @@ QUnit.test( "customStructure", function( assert ) {
inp = testHelper.initNewInput( { changeMonth: true } );

testHelper.onFocus( inp, function() {
title = dp.children( ":first" ).children( ":last" );
title = dp.children().first().children().last();
assert.equal( title.children().length, 2, "Structure changeable month - title child count" );
assert.ok( title.children( ":first" ).is( "select.ui-datepicker-month" ), "Structure changeable month - month selector" );
assert.ok( title.children( ":last" ).is( "span.ui-datepicker-year" ), "Structure changeable month - read-only year" );
assert.ok( title.children().first().is( "select.ui-datepicker-month" ), "Structure changeable month - month selector" );
assert.ok( title.children().last().is( "span.ui-datepicker-year" ), "Structure changeable month - read-only year" );

inp.datepicker( "hide" ).datepicker( "destroy" );
step4();
Expand All @@ -286,10 +286,10 @@ QUnit.test( "customStructure", function( assert ) {
inp = testHelper.initNewInput( { changeYear: true } );

testHelper.onFocus( inp, function() {
title = dp.children( ":first" ).children( ":last" );
title = dp.children().first().children().last();
assert.equal( title.children().length, 2, "Structure changeable year - title child count" );
assert.ok( title.children( ":first" ).is( "span.ui-datepicker-month" ), "Structure changeable year - read-only month" );
assert.ok( title.children( ":last" ).is( "select.ui-datepicker-year" ), "Structure changeable year - year selector" );
assert.ok( title.children().first().is( "span.ui-datepicker-month" ), "Structure changeable year - read-only month" );
assert.ok( title.children().last().is( "select.ui-datepicker-year" ), "Structure changeable year - year selector" );

inp.datepicker( "hide" ).datepicker( "destroy" );
step5();
Expand Down
Loading

0 comments on commit 0c860b0

Please sign in to comment.