Skip to content
Permalink
Browse files

Tabs: Replaced fx option with show and hide options. Fixes #8319 - Ta…

…bs: Deprecate fx option.
  • Loading branch information...
scottgonzalez committed May 14, 2012
1 parent 1304c50 commit d4318a5f4c216e1184b6e90c17214b6e6cfbb0fb
Showing with 81 additions and 28 deletions.
  1. +2 −1 tests/unit/tabs/tabs_common.js
  2. +2 −0 tests/unit/tabs/tabs_common_deprecated.js
  3. +77 −27 ui/jquery.ui.tabs.js
@@ -4,7 +4,8 @@ TestHelpers.commonWidgetTests( "tabs", {
collapsible: false,
disabled: false,
event: "click",
fx: null,
hide: null,
show: null,

// callbacks
activate: null,
@@ -7,9 +7,11 @@ TestHelpers.commonWidgetTests( "tabs", {
cookie: null,
disabled: false,
event: "click",
hide: null,
fx: null,
idPrefix: "ui-tabs-",
panelTemplate: "<div></div>",
// show: null, // conflicts with old show callback
spinner: "<em>Loading&#8230;</em>",
tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>",

@@ -34,7 +34,8 @@ $.widget( "ui.tabs", {
active: null,
collapsible: false,
event: "click",
fx: null, // e.g. { height: 'toggle', opacity: 'toggle', duration: 200 }
hide: null,
show: null,

// callbacks
activate: null,
@@ -101,8 +102,6 @@ $.widget( "ui.tabs", {
) ).sort();
}

this._setupFx( options.fx );

this._refresh();

// highlight selected tab
@@ -151,10 +150,6 @@ $.widget( "ui.tabs", {
if ( key === "event" ) {
this._setupEvents( value );
}

if ( key === "fx" ) {
this._setupFx( value );
}
},

_tabId: function( a ) {
@@ -278,18 +273,6 @@ $.widget( "ui.tabs", {
this.options.disabled = disabled;
},

_setupFx: function( fx ) {
// set up animations
if ( fx ) {
if ( $.isArray( fx ) ) {
this.hideFx = fx[ 0 ];
this.showFx = fx[ 1 ];
} else {
this.hideFx = this.showFx = fx;
}
}
},

_setupEvents: function( event ) {
// attach tab event handler, unbind to avoid duplicates from former tabifying...
this.anchors.unbind( ".tabs" );
@@ -364,7 +347,7 @@ $.widget( "ui.tabs", {
toShow = eventData.newPanel,
toHide = eventData.oldPanel;

that.running = true;
this.running = true;

function complete() {
that.running = false;
@@ -374,20 +357,17 @@ $.widget( "ui.tabs", {
function show() {
eventData.newTab.closest( "li" ).addClass( "ui-tabs-active ui-state-active" );

if ( toShow.length && that.showFx ) {
toShow
.animate( that.showFx, that.showFx.duration || "normal", function() {
complete();
});
if ( toShow.length && that.options.show ) {
that._show( toShow, that.options.show, complete );
} else {
toShow.show();
complete();
}
}

// start out by hiding, then showing, then completing
if ( toHide.length && that.hideFx ) {
toHide.animate( that.hideFx, that.hideFx.duration || "normal", function() {
if ( toHide.length && this.options.hide ) {
this._hide( toHide, this.options.hide, function() {
eventData.oldTab.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" );
show();
});
@@ -995,6 +975,76 @@ if ( $.uiBackCompat !== false ) {
return this._super( type, event, _data );
}
});

// fx option
// The new animation options (show, hide) conflict with the old show callback.
// The old fx option wins over show/hide anyway (always favor back-compat).
// If a user wants to use the new animation API, they must give up the old API.
$.widget( "ui.tabs", $.ui.tabs, {
options: {
fx: null // e.g. { height: "toggle", opacity: "toggle", duration: 200 }
},

_getFx: function() {
var hide, show,
fx = this.options.fx;

if ( fx ) {
if ( $.isArray( fx ) ) {
hide = fx[ 0 ];
show = fx[ 1 ];
} else {
hide = show = fx;
}
}

return fx ? { show: show, hide: hide } : null;
},

_toggle: function( event, eventData ) {
var that = this,
toShow = eventData.newPanel,
toHide = eventData.oldPanel,
fx = this._getFx();

if ( !fx ) {
return this._super( event, eventData );
}

that.running = true;

function complete() {
that.running = false;
that._trigger( "activate", event, eventData );
}

function show() {
eventData.newTab.closest( "li" ).addClass( "ui-tabs-active ui-state-active" );

if ( toShow.length && fx.show ) {
toShow
.animate( fx.show, fx.show.duration, function() {
complete();
});
} else {
toShow.show();
complete();
}
}

// start out by hiding, then showing, then completing
if ( toHide.length && fx.hide ) {
toHide.animate( fx.hide, fx.hide.duration, function() {
eventData.oldTab.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" );
show();
});
} else {
eventData.oldTab.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" );
toHide.hide();
show();
}
}
});
}

})( jQuery );

0 comments on commit d4318a5

Please sign in to comment.
You can’t perform that action at this time.