Skip to content

Commit

Permalink
Tabs: Deprecate select method. Fixes #7138 Tabs: Deprecate select method
Browse files Browse the repository at this point in the history
  • Loading branch information
@petersendidit
petersendidit committed Mar 29, 2011
1 parent 8b0c361 commit c6a6ef5
Show file tree
Hide file tree
Showing 6 changed files with 110 additions and 77 deletions.
30 changes: 30 additions & 0 deletions tests/unit/tabs/tabs_deprecated.js
View file
Expand Up @@ -247,6 +247,36 @@ test('remove', function() {
equals(el.tabs('option', 'selected'), 0, 'update selected property');
});

test('select', function() {
expect(6);

el = $('#tabs1').tabs();

el.tabs('select', 1);
equals(el.tabs('option', 'active'), 1, 'should select tab');

el.tabs('destroy');
el.tabs({ collapsible: true });
el.tabs('select', 0);
equals(el.tabs('option', 'active'), -1, 'should collapse tab passing in the already active tab');

el.tabs('destroy');
el.tabs({ collapsible: true });
el.tabs('select', -1);
equals(el.tabs('option', 'active'), -1, 'should collapse tab passing in -1');

el.tabs('destroy');
el.tabs();
el.tabs('select', 0);
equals(el.tabs('option', 'active'), 0, 'should not collapse tab if collapsible is not set to true');
el.tabs('select', -1);
equals(el.tabs('option', 'active'), 0, 'should not collapse tab if collapsible is not set to true');

el.tabs('select', '#fragment-2');
equals(el.tabs('option', 'active'), 1, 'should select tab by id');
});


test('#5069 - ui.tabs.add creates two tab panels when using a full URL', function() {
// http://dev.jqueryui.com/ticket/5069
expect(2);
Expand Down
11 changes: 7 additions & 4 deletions tests/unit/tabs/tabs_events.js
View file
Expand Up @@ -8,7 +8,6 @@ module("tabs: events");
test('beforeActivate', function() {
expect(7);

var eventObj;
el = $('#tabs1').tabs({
beforeActivate: function(event, ui) {
ok(true, 'beforeActivate triggered after initialization');
Expand All @@ -17,13 +16,17 @@ test('beforeActivate', function() {
equals(ui.tab, el.find('a')[1], 'contain tab as DOM anchor element');
equals(ui.panel, el.find('div')[1], 'contain panel as DOM div element');
equals(ui.index, 1, 'contain index');
evenObj = event;
}
});
el.tabs('select', 1);
el.tabs('option', 'active', 1);

el.tabs('destroy');
el.tabs({
beforeActivate: function(event, ui) {
equals( event.originalEvent.type, "click", "beforeActivate triggered by click" );
}
});
el.find( "li:eq(1) a" ).simulate( "click" );
equals( evenObj.originalEvent.type, "click", "beforeActivate triggered by click" );
});

test('beforeload', function() {
Expand Down
31 changes: 1 addition & 30 deletions tests/unit/tabs/tabs_methods.js
View file
Expand Up @@ -130,35 +130,6 @@ test('disable', function() {
same(el.tabs('option', 'disabled'), true, 'set to true');
});

test('select', function() {
expect(6);

el = $('#tabs1').tabs();

el.tabs('select', 1);
equals(el.tabs('option', 'active'), 1, 'should select tab');

el.tabs('destroy');
el.tabs({ collapsible: true });
el.tabs('select', 0);
equals(el.tabs('option', 'active'), -1, 'should collapse tab passing in the already active tab');

el.tabs('destroy');
el.tabs({ collapsible: true });
el.tabs('select', -1);
equals(el.tabs('option', 'active'), -1, 'should collapse tab passing in -1');

el.tabs('destroy');
el.tabs();
el.tabs('select', 0);
equals(el.tabs('option', 'active'), 0, 'should not collapse tab if collapsible is not set to true');
el.tabs('select', -1);
equals(el.tabs('option', 'active'), 0, 'should not collapse tab if collapsible is not set to true');

el.tabs('select', '#fragment-2');
equals(el.tabs('option', 'active'), 1, 'should select tab by id');
});

test('refresh', function() {
expect(5);

Expand All @@ -178,7 +149,7 @@ test('refresh', function() {
ul.append('<li><a href="#test1">Test 1</a></li>');
$('<div id="test1">Test Panel 1</div>').insertAfter( ul );
el.tabs('refresh');
el.tabs('select', 0);
el.tabs('option', 'active', 0);
equals( el.tabs('option', 'active'), 0, 'First tab added should be auto active');

ul.append('<li><a href="#test2">Test 2</a></li>');
Expand Down
10 changes: 6 additions & 4 deletions tests/unit/tabs/tabs_options.js
View file
Expand Up @@ -13,8 +13,10 @@ test('collapsible', function() {
el.tabs({ collapsible: true });
equals(el.tabs('option', 'collapsible'), true, 'option set');
ok(el.is('.ui-tabs-collapsible'), 'extra class "ui-tabs-collapsible" attached');
el.tabs('select', 0);

el.tabs('option', 'active', false);
equals($('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden');

el.tabs('option', 'collapsible', false);
ok(el.is(':not(.ui-tabs-collapsible)'), 'extra class "ui-tabs-collapsible" not attached');

Expand All @@ -37,8 +39,8 @@ test('cookie', function() {
el.tabs({ active: 1, cookie: cookieObj });
equals(cookie(), 1, 'initial cookie value, from active property');

el.tabs('select', 2);
equals(cookie(), 2, 'cookie value updated after select');
el.tabs('option', 'active', 2);
equals(cookie(), 2, 'cookie value updated after activating');

el.tabs('destroy');
$.cookie(cookieName, 1);
Expand All @@ -47,7 +49,7 @@ test('cookie', function() {

el.tabs('destroy');
el.tabs({ cookie: cookieObj, collapsible: true });
el.tabs('select', 0);
el.tabs('option', 'active', false);
equals(cookie(), -1, 'cookie value for all tabs unselected');

el.tabs('destroy');
Expand Down
6 changes: 3 additions & 3 deletions tests/unit/tabs/tabs_tickets.js
View file
Expand Up @@ -13,7 +13,7 @@ test('#2715 - id containing colon', function() {
ok( $('div.ui-tabs-panel:eq(0)', '#tabs2').is(':visible'), 'first panel should be visible' );
ok( $('div.ui-tabs-panel:eq(1)', '#tabs2').is(':hidden'), 'second panel should be hidden' );

el.tabs('select', 1).tabs('select', 0);
el.tabs('option', 'active', 1).tabs('option', 'active', 0);
ok( $('div.ui-tabs-panel:eq(0)', '#tabs2').is(':visible'), 'first panel should be visible' );
ok( $('div.ui-tabs-panel:eq(1)', '#tabs2').is(':hidden'), 'second panel should be hidden' );

Expand All @@ -30,10 +30,10 @@ test('#???? - panel containing inline style', function() {
el = $('#tabs2').tabs();
equals(inlineStyle('height'), expected, 'init should not remove inline style');

el.tabs('select', 1);
el.tabs('option', 'active', 1);
equals(inlineStyle('height'), expected, 'show tab should not remove inline style');

el.tabs('select', 0);
el.tabs('option', 'active', 0);
equals(inlineStyle('height'), expected, 'hide tab should not remove inline style');

});
Expand Down
99 changes: 63 additions & 36 deletions ui/jquery.ui.tabs.js
View file
Expand Up @@ -96,16 +96,16 @@ $.widget( "ui.tabs", {
this.lis.removeClass( "ui-tabs-selected ui-state-active" );
// check for length avoids error when initializing empty list
if ( o.active >= 0 && this.anchors.length ) {
var tab = self.anchors[ o.active ],
panel = self.element.find( self._sanitizeSelector( $( tab ).attr( "aria-controls" ) ) );
this.active = this._findActive( o.active );
var panel = self.element.find( self._sanitizeSelector( this.active.attr( "aria-controls" ) ) );

panel.removeClass( "ui-tabs-hide" );

this.lis.eq( o.active ).addClass( "ui-tabs-selected ui-state-active" );

// seems to be expected behavior that the activate callback is fired
self.element.queue( "tabs", function() {
self._trigger( "activate", null, self._ui( tab, panel[ 0 ] ) );
self._trigger( "activate", null, self._ui( self.active[ 0 ], panel[ 0 ] ) );
});

this.load( o.active );
Expand All @@ -120,10 +120,9 @@ $.widget( "ui.tabs", {

_setOption: function( key, value ) {
if ( key == "active" ) {
if (this.options.collapsible && value == this.options.active ) {
return;
}
this.select( value );
// _activate() will handle invalid values and update this.option
this._activate( value );
return
} else {
this.options[ key ] = value;
this.refresh();
Expand Down Expand Up @@ -350,10 +349,10 @@ $.widget( "ui.tabs", {
event.preventDefault();
var self = this,
o = this.options,
el = event.currentTarget,
$li = $( el ).closest( "li" ),
clicked = $( event.currentTarget ),
$li = clicked.closest( "li" ),
$hide = self.panels.filter( ":not(.ui-tabs-hide)" ),
$show = self.element.find( self._sanitizeSelector( $( el ).attr( "aria-controls" ) ) );
$show = self.element.find( self._sanitizeSelector( clicked.attr( "aria-controls" ) ) );

// tab is already selected, but not collapsible
if ( ( $li.hasClass( "ui-tabs-selected" ) && !o.collapsible ) ||
Expand All @@ -364,12 +363,14 @@ $.widget( "ui.tabs", {
// tab is already loading
$li.hasClass( "ui-state-processing" ) ||
// allow canceling by beforeActivate event
self._trigger( "beforeActivate", event, self._ui( el, $show[ 0 ] ) ) === false ) {
el.blur();
self._trigger( "beforeActivate", event, self._ui( clicked[ 0 ], $show[ 0 ] ) ) === false ) {
clicked[ 0 ].blur();
return;
}

o.active = self.anchors.index( el );
o.active = self.anchors.index( clicked );

self.active = clicked;

if ( self.xhr ) {
self.xhr.abort();
Expand All @@ -379,30 +380,31 @@ $.widget( "ui.tabs", {
if ( o.collapsible ) {
if ( $li.hasClass( "ui-tabs-selected" ) ) {
o.active = -1;
self.active = null;

if ( o.cookie ) {
self._cookie( o.active, o.cookie );
}

self.element.queue( "tabs", function() {
self._hideTab( el, $hide );
self._hideTab( clicked, $hide );
}).dequeue( "tabs" );

el.blur();
clicked[ 0 ].blur();
return;
} else if ( !$hide.length ) {
if ( o.cookie ) {
self._cookie( o.active, o.cookie );
}

self.element.queue( "tabs", function() {
self._showTab( el, $show, event );
self._showTab( clicked, $show, event );
});

// TODO make passing in node possible, see also http://dev.jqueryui.com/ticket/3171
self.load( self.anchors.index( el ) );
self.load( self.anchors.index( clicked ) );

el.blur();
clicked[ 0 ].blur();
return;
}
}
Expand All @@ -415,14 +417,14 @@ $.widget( "ui.tabs", {
if ( $show.length ) {
if ( $hide.length ) {
self.element.queue( "tabs", function() {
self._hideTab( el, $hide );
self._hideTab( clicked, $hide );
});
}
self.element.queue( "tabs", function() {
self._showTab( el, $show, event );
self._showTab( clicked, $show, event );
});

self.load( self.anchors.index( el ) );
self.load( self.anchors.index( clicked ) );
} else {
throw "jQuery UI Tabs: Mismatching fragment identifier.";
}
Expand All @@ -432,8 +434,31 @@ $.widget( "ui.tabs", {
// in modern browsers; blur() removes focus from address bar in Firefox
// which can become a usability
if ( $.browser.msie ) {
el.blur();
clicked[ 0 ].blur();
}
},

_activate: function( index ) {
var active = this._findActive( index )[ 0 ];

// trying to activate the already active panel
if ( this.active && active === this.active[ 0 ] ) {
return;
}

// trying to collapse, simulate a click on the current active header
active = active || this.active;

this._eventHandler({
target: active,
currentTarget: active,
preventDefault: $.noop
});
},

_findActive: function( selector ) {
return typeof selector === "number" ? this.anchors.eq( selector ) :
typeof selector === "string" ? this.anchors.filter( "[href$='" + selector + "']" ) : $();
},

_getIndex: function( index ) {
Expand Down Expand Up @@ -539,19 +564,6 @@ $.widget( "ui.tabs", {
return this;
},

select: function( index ) {
index = this._getIndex( index );
if ( index == -1 ) {
if ( this.options.collapsible && this.options.active != -1 ) {
index = this.options.active;
} else {
return this;
}
}
this.anchors.eq( index ).trigger( this.options.event + ".tabs" );
return this;
},

load: function( index ) {
index = this._getIndex( index );
var self = this,
Expand Down Expand Up @@ -834,7 +846,7 @@ if ( $.uiBackCompat !== false ) {
// If selected tab was removed focus tab to the right or
// in case the last tab was removed the tab to the left.
if ( $li.hasClass( "ui-tabs-selected" ) && this.anchors.length > 1) {
this.select( index + ( index + 1 < this.anchors.length ? 1 : -1 ) );
this._activate( index + ( index + 1 < this.anchors.length ? 1 : -1 ) );
}

o.disabled = $.map(
Expand Down Expand Up @@ -947,6 +959,21 @@ if ( $.uiBackCompat !== false ) {
}
};
}( jQuery, jQuery.ui.tabs.prototype ) );

// select method
(function( $, prototype ) {
prototype.select = function( index ) {
index = this._getIndex( index );
if ( index == -1 ) {
if ( this.options.collapsible && this.options.selected != -1 ) {
index = this.options.selected;
} else {
return;
}
}
this.anchors.eq( index ).trigger( this.options.event + ".tabs" );
};
}( jQuery, jQuery.ui.tabs.prototype ) );
}

})( jQuery );

0 comments on commit c6a6ef5

Please sign in to comment.