Tabs: Removing queue logic, _hideTab, and _showTab - Replaced with _toggle - Fixes #7357 Tabs: Remove queueing logic

Author: gnarf

ui/jquery.ui.tabs.js

@@ -13,7 +13,7 @@
  */
 (function( $, undefined ) {
 
-var tabId = 0
+var tabId = 0;
 function getNextTabId() {
 	return ++tabId;
 }
@@ -289,58 +289,14 @@ $.widget( "ui.tabs", {
 	// Reset certain styles left over from animation
 	// and prevent IE's ClearType bug...
 	_resetStyle: function ( $el, fx ) {
-		$el.css( "display", "" );
+		$el.css( "display", function( oldValue ) {
+			return oldValue === "none" ? oldValue : "";
+		});
 		if ( !$.support.opacity && fx.opacity ) {
 			$el[ 0 ].style.removeAttribute( "filter" );
 		}
 	},
 
-	_showTab: function( event, eventData ) {
-		var that = this;
-
-		$( eventData.newTab ).closest( "li" ).addClass( "ui-tabs-active ui-state-active" );
-
-		if ( that.showFx ) {
-			that.running = true;
-			eventData.newPanel
-				// TODO: why are we hiding? old code?
-				.hide()
-				.animate( that.showFx, that.showFx.duration || "normal", function() {
-					that._resetStyle( $( this ), that.showFx );
-					that.running = false;
-					that._trigger( "activate", event, eventData );
-				});
-		} else {
-			eventData.newPanel.show();
-			that._trigger( "activate", event, eventData );
-		}
-	},
-
-	// TODO: combine with _showTab()
-	_hideTab: function( event, eventData ) {
-		var that = this;
-
-		if ( that.hideFx ) {
-			that.running = true;
-			eventData.oldPanel.animate( that.hideFx, that.hideFx.duration || "normal", function() {
-				that.running = false;
-				eventData.oldTab.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" );
-				that._resetStyle( $( this ), that.hideFx );
-				that.element.dequeue( "tabs" );
-				if ( !eventData.newPanel.length ) {
-					that._trigger( "activate", event, eventData );
-				}
-			});
-		} else {
-			eventData.oldTab.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" );
-			eventData.oldPanel.hide();
-			that.element.dequeue( "tabs" );
-			if ( !eventData.newPanel.length ) {
-				that._trigger( "activate", event, eventData );
-			}
-		}
-	},
-
 	_setupEvents: function( event ) {
 		// attach tab event handler, unbind to avoid duplicates from former tabifying...
 		this.anchors.unbind( ".tabs" );
@@ -399,22 +355,58 @@ $.widget( "ui.tabs", {
 			throw "jQuery UI Tabs: Mismatching fragment identifier.";
 		}
 
-		if ( toHide.length ) {
-			that.element.queue( "tabs", function() {
-				that._hideTab( event, eventData );
-			});
-		}
 		if ( toShow.length ) {
-			that.element.queue( "tabs", function() {
-				that._showTab( event, eventData );
-			});
 
 			// TODO make passing in node possible, see also http://dev.jqueryui.com/ticket/3171
 			that.load( that.anchors.index( clicked ), event );
 
 			clicked[ 0 ].blur();
+		}
+		that._toggle( event, eventData );
+	},
+
+	// handles show/hide for selecting tabs
+	_toggle: function( event, eventData ) {
+		var that = this,
+			options = that.options,
+			toShow = eventData.newPanel,
+			toHide = eventData.oldPanel;
+
+		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 && that.showFx ) {
+				toShow
+					// TODO: why are we hiding? old code?
+					.hide()
+					.animate( that.showFx, that.showFx.duration || "normal", function() {
+						that._resetStyle( $( this ), that.showFx );
+						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() {
+				eventData.oldTab.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" );
+				that._resetStyle( $( this ), that.hideFx );
+				show();
+			});
 		} else {
-			that.element.dequeue( "tabs" );
+			eventData.oldTab.closest( "li" ).removeClass( "ui-tabs-active ui-state-active" );
+			toHide.hide();
+			show();
 		}
 	},
 
@@ -554,7 +546,6 @@ $.widget( "ui.tabs", {
 
 		// not remote
 		if ( !url ) {
-			this.element.dequeue( "tabs" );
 			return;
 		}
 
@@ -577,13 +568,7 @@ $.widget( "ui.tabs", {
 				})
 				.complete(function( jqXHR, status ) {
 					if ( status === "abort" ) {
-						// stop possibly running animations
-						self.element.queue( [] );
 						self.panels.stop( false, true );
-
-						// "tabs" queue must not contain more than two elements,
-						// which are the callbacks for the latest clicked tab...
-						self.element.queue( "tabs", self.element.queue( "tabs" ).splice( -2, 2 ) );
 					}
 
 					self.lis.eq( index ).removeClass( "ui-tabs-loading" );
@@ -592,9 +577,6 @@ $.widget( "ui.tabs", {
 				});
 		}
 
-		// last, so that load event is fired before show...
-		self.element.dequeue( "tabs" );
-
 		return this;
 	},
 
@@ -938,7 +920,7 @@ if ( $.uiBackCompat !== false ) {
 				this._trigger( "show", null, this._ui(
 					this.active[ 0 ], this._getPanelForTab( this.active )[ 0 ] ) );
 			}
-		}
+		};
 		prototype._trigger = function( type, event, data ) {
 			var ret = _trigger.apply( this, arguments );
 			if ( !ret ) {