Skip to content

Commit 1bacdec

Browse files
scottgonzalezscottgonzalez
committed
Tabs: Cleaned up add and remove methods.
1 parent c3d9bd0 commit 1bacdec

File tree

4 files changed

+96
-65
lines changed

4 files changed

+96
-65
lines changed

‎tests/unit/tabs/tabs.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
panel = $( $.ui.tabs.prototype._sanitizeSelector(
3535
"#" + tab.find( "a" ).attr( "aria-controls" ) ) ),
3636
tabIsActive = tab.hasClass( "ui-state-active" ),
37-
panelIsActive = panel.is( ":visible" );
37+
panelIsActive = panel.css( "display" ) !== "none";
3838

3939
if ( tabIsActive && panelIsActive ) {
4040
return 1;

‎tests/unit/tabs/tabs_deprecated.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
panel = $( $.ui.tabs.prototype._sanitizeSelector(
3434
"#" + tab.find( "a" ).attr( "aria-controls" ) ) ),
3535
tabIsActive = tab.hasClass( "ui-state-active" ),
36-
panelIsActive = panel.is( ":visible" );
36+
panelIsActive = panel.css( "display" ) !== "none";
3737

3838
if ( tabIsActive && panelIsActive ) {
3939
return 1;

‎tests/unit/tabs/tabs_deprecated.js

Lines changed: 64 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -247,42 +247,78 @@ test('select', function() {
247247
equals( evenObj.originalEvent.type, "click", "select triggered by click" );
248248
});
249249

250-
module("tabs (deprecated): methods");
251-
252-
test('add', function() {
253-
expect(4);
254-
255-
el = $('#tabs1').tabs();
256-
el.tabs('add', '#new', 'New');
257-
258-
var added = $('li:last', el).simulate('mouseover');
259-
ok(added.is('.ui-state-hover'), 'should add mouseover handler to added tab');
260-
added.simulate('mouseout');
261-
var other = $('li:first', el).simulate('mouseover');
262-
ok(other.is('.ui-state-hover'), 'should not remove mouseover handler from existing tab');
263-
other.simulate('mouseout');
250+
module( "tabs (deprecated): methods" );
251+
252+
test( "add", function() {
253+
expect( 18 );
254+
255+
var element = $( "#tabs1" ).tabs();
256+
tabs_state( element, 1, 0, 0 );
257+
258+
// add without index
259+
element.tabs( "add", "#new", "New" );
260+
tabs_state( element, 1, 0, 0, 0 );
261+
var tab = element.find( ".ui-tabs-nav li" ).last(),
262+
anchor = tab.find( "a" );
263+
equals( tab.text(), "New", "label" );
264+
equals( anchor.attr( "href" ), "#new", "href" );
265+
equals( anchor.attr( "aria-controls" ), "new", "aria-controls" );
266+
ok( !tab.hasClass( "ui-state-hover" ), "not hovered" );
267+
anchor.simulate( "mouseover" );
268+
ok( tab.hasClass( "ui-state-hover" ), "hovered" );
269+
anchor.simulate( "click" );
270+
tabs_state( element, 0, 0, 0, 1 );
271+
272+
// add remote tab with index
273+
element.tabs( "add", "data/test.html", "New Remote", 1 );
274+
tabs_state( element, 0, 0, 0, 0, 1 );
275+
tab = element.find( ".ui-tabs-nav li" ).eq( 1 );
276+
anchor = tab.find( "a" );
277+
equals( tab.text(), "New Remote", "label" );
278+
equals( anchor.attr( "href" ), "data/test.html", "href" );
279+
ok( /^ui-tabs-\d+$/.test( anchor.attr( "aria-controls" ) ), "aria controls" );
280+
ok( !tab.hasClass( "ui-state-hover" ), "not hovered" );
281+
anchor.simulate( "mouseover" );
282+
ok( tab.hasClass( "ui-state-hover" ), "hovered" );
283+
anchor.simulate( "click" );
284+
tabs_state( element, 0, 1, 0, 0, 0 );
285+
286+
// add to empty tab set
287+
element = $( "<div><ul></ul></div>" ).tabs();
288+
equals( element.tabs( "option", "active" ), false, "active: false on init" );
289+
element.tabs( "add", "#first", "First" );
290+
tabs_state( element, 1 );
291+
equals( element.tabs( "option", "active" ), 0, "active: 0 after add" );
292+
});
264293

265-
equals($('a', added).attr('href'), '#new', 'should not expand href to full url of current page');
294+
test( "#5069 - ui.tabs.add creates two tab panels when using a full URL", function() {
295+
expect( 2 );
266296

267-
ok(false, "missing test - untested code is broken code.");
297+
var element = $( "#tabs2" ).tabs();
298+
equals( element.children( "div" ).length, element.find( ".ui-tabs-nav li" ).length );
299+
element.tabs( "add", "/new", "New" );
300+
equals( element.children( "div" ).length, element.find( ".ui-tabs-nav li" ).length );
268301
});
269302

270-
test('remove', function() {
271-
expect(4);
303+
test( "remove", function() {
304+
expect( 8 );
272305

273-
el = $('#tabs1').tabs();
306+
var element = $( "#tabs1" ).tabs({ active: 1 });
307+
tabs_state( element, 0, 1, 0 );
274308

275-
el.tabs('remove', 0);
276-
equals(el.tabs('length'), 2, 'remove tab');
277-
equals($('li a[href$="fragment-1"]', el).length, 0, 'remove associated list item');
278-
equals($('#fragment-1').length, 0, 'remove associated panel');
309+
element.tabs( "remove", 1 );
310+
tabs_state( element, 0, 1 );
311+
equals( element.tabs( "option", "active" ), 1 );
312+
equals( element.find( ".ui-tabs-nav li a[href$='fragment-2']" ).length, 0,
313+
"remove correct list item" );
314+
equals( element.find( "#fragment-2" ).length, 0, "remove correct panel" );
279315

280-
// TODO delete tab -> focus tab to right
281-
// TODO delete last tab -> focus tab to left
316+
element.tabs( "remove", 1 );
317+
tabs_state( element, 1 );
318+
equals( element.tabs( "option", "active"), 0 );
282319

283-
el.tabs('select', 1);
284-
el.tabs('remove', 1);
285-
equals(el.tabs('option', 'selected'), 0, 'update selected property');
320+
element.tabs( "remove", 0 );
321+
equals( element.tabs( "option", "active" ), false );
286322
});
287323

288324
test('select', function() {
@@ -314,17 +350,6 @@ test('select', function() {
314350
equals(el.tabs('option', 'active'), 1, 'should select tab by id');
315351
});
316352

317-
318-
test('#5069 - ui.tabs.add creates two tab panels when using a full URL', function() {
319-
// http://dev.jqueryui.com/ticket/5069
320-
expect(2);
321-
322-
el = $('#tabs2').tabs();
323-
equals(el.children('div').length, el.find('> ul > li').length, 'After creation, number of panels should be equal to number of tabs');
324-
el.tabs('add', '/ajax_html_echo', 'Test');
325-
equals(el.children('div').length, el.find('> ul > li').length, 'After add, number of panels should be equal to number of tabs');
326-
});
327-
328353
test( "length", function() {
329354
expect( 2 );
330355

‎ui/jquery.ui.tabs.js

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -826,61 +826,67 @@ if ( $.uiBackCompat !== false ) {
826826
index = this.anchors.length;
827827
}
828828

829-
var self = this,
830-
o = this.options,
831-
$li = $( o.tabTemplate.replace( /#\{href\}/g, url ).replace( /#\{label\}/g, label ) ),
832-
id = !url.indexOf( "#" ) ? url.replace( "#", "" ) : this._tabId( $( "a", $li )[ 0 ] );
829+
var options = this.options,
830+
li = $( options.tabTemplate
831+
.replace( /#\{href\}/g, url )
832+
.replace( /#\{label\}/g, label ) ),
833+
id = !url.indexOf( "#" ) ?
834+
url.replace( "#", "" ) :
835+
this._tabId( li.find( "a" )[ 0 ] );
833836

834-
$li.addClass( "ui-state-default ui-corner-top" ).data( "destroy.tabs", true );
837+
li.addClass( "ui-state-default ui-corner-top" ).data( "destroy.tabs", true );
838+
li.find( "a" ).attr( "aria-controls", id );
835839

836840
// try to find an existing element before creating a new one
837-
var $panel = self.element.find( "#" + id );
838-
if ( !$panel.length ) {
839-
$panel = self._createPanel( id );
841+
var panel = this.element.find( "#" + id );
842+
if ( !panel.length ) {
843+
panel = this._createPanel( id );
840844
}
841-
$panel.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ).hide();
845+
panel.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom" ).hide();
842846

843847
if ( index >= this.lis.length ) {
844-
$li.appendTo( this.list );
845-
$panel.appendTo( this.list[ 0 ].parentNode );
848+
li.appendTo( this.list );
849+
panel.appendTo( this.list[ 0 ].parentNode );
846850
} else {
847-
$li.insertBefore( this.lis[ index ] );
848-
$panel.insertBefore( this.panels[ index ] );
851+
li.insertBefore( this.lis[ index ] );
852+
panel.insertBefore( this.panels[ index ] );
849853
}
850-
851-
o.disabled = $.map( o.disabled, function( n, i ) {
854+
options.disabled = $.map( options.disabled, function( n ) {
852855
return n >= index ? ++n : n;
853856
});
854857

855858
this.refresh();
859+
if ( this.lis.length === 1 && options.active === false ) {
860+
this.option( "active", 0 );
861+
}
856862

857863
this._trigger( "add", null, this._ui( this.anchors[ index ], this.panels[ index ] ) );
858864
return this;
859865
};
860866

861867
prototype.remove = function( index ) {
862868
index = this._getIndex( index );
863-
var o = this.options,
864-
$li = this.lis.eq( index ).remove(),
865-
$panel = this.panels.eq( index ).remove();
869+
var options = this.options,
870+
tab = this.lis.eq( index ).remove(),
871+
panel = this.panels.eq( index ).remove();
866872

867873
// If selected tab was removed focus tab to the right or
868874
// in case the last tab was removed the tab to the left.
869-
if ( $li.hasClass( "ui-tabs-active" ) && this.anchors.length > 1) {
875+
if ( tab.hasClass( "ui-tabs-active" ) && this.anchors.length > 1) {
870876
this._activate( index + ( index + 1 < this.anchors.length ? 1 : -1 ) );
871877
}
872878

873-
o.disabled = $.map(
874-
$.grep( o.disabled, function(n, i) {
875-
return n != index;
879+
options.disabled = $.map(
880+
$.grep( options.disabled, function( n ) {
881+
return n !== index;
876882
}),
877-
function( n, i ) {
883+
function( n ) {
878884
return n >= index ? --n : n;
879885
});
880886

881887
this.refresh();
882888

883-
this._trigger( "remove", null, this._ui( $li.find( "a" )[ 0 ], $panel[ 0 ] ) );
889+
this._trigger( "remove", null, this._ui( tab.find( "a" )[ 0 ], panel[ 0 ] ) );
884890
return this;
885891
};
886892
}( jQuery, jQuery.ui.tabs.prototype ) );

0 commit comments

Comments
 (0)