Tabs: Split out event handler, showtab, hidetab, resetStyle to their own methods

1 files changed, 116 insertions, 111 deletions

diff --git a/ui/jquery.ui.tabs.js b/ui/jquery.ui.tabs.js
index fcdf22c0e..f12383d08 100755
--- a/ui/jquery.ui.tabs.js
+++ b/ui/jquery.ui.tabs.js
@@ -258,147 +258,152 @@ $.widget( "ui.tabs", {
 		this._hoverable( this.lis );
 
 		// set up animations
-		var hideFx, showFx;
 		if ( o.fx ) {
 			if ( $.isArray( o.fx ) ) {
-				hideFx = o.fx[ 0 ];
-				showFx = o.fx[ 1 ];
+				this.hideFx = o.fx[ 0 ];
+				this.showFx = o.fx[ 1 ];
 			} else {
-				hideFx = showFx = o.fx;
+				this.hideFx = this.showFx = o.fx;
 			}
 		}
 
-		// Reset certain styles left over from animation
-		// and prevent IE's ClearType bug...
-		function resetStyle( $el, fx ) {
-			$el.css( "display", "" );
-			if ( !$.support.opacity && fx.opacity ) {
-				$el[ 0 ].style.removeAttribute( "filter" );
-			}
+		// attach tab event handler, unbind to avoid duplicates from former tabifying...
+		this.anchors.bind( o.event + ".tabs", $.proxy( this, "_eventHandler" ));
+
+		// disable click in any case
+		this.anchors.bind( "click.tabs", function( event ){
+			event.preventDefault();
+		});
+	},
+
+	// Reset certain styles left over from animation
+	// and prevent IE's ClearType bug...
+	_resetStyle: function ( $el, fx ) {
+		$el.css( "display", "" );
+		if ( !$.support.opacity && fx.opacity ) {
+			$el[ 0 ].style.removeAttribute( "filter" );
 		}
+	},
 
-		// Show a tab...
-		var showTab = showFx
-			? function( clicked, $show, event ) {
-				$( clicked ).closest( "li" ).addClass( "ui-tabs-selected ui-state-active" );
-				$show.hide().removeClass( "ui-tabs-hide" ) // avoid flicker that way
-					.animate( showFx, showFx.duration || "normal", function() {
-						resetStyle( $show, showFx );
-						self._trigger( "show", event, self._ui( clicked, $show[ 0 ] ) );
-					});
-			}
-			: function( clicked, $show, event ) {
-				$( clicked ).closest( "li" ).addClass( "ui-tabs-selected ui-state-active" );
-				$show.removeClass( "ui-tabs-hide" );
-				self._trigger( "show", event, self._ui( clicked, $show[ 0 ] ) );
-			};
-
-		// Hide a tab, $show is optional...
-		var hideTab = hideFx
-			? function( clicked, $hide ) {
-				$hide.animate( hideFx, hideFx.duration || "normal", function() {
-					self.lis.removeClass( "ui-tabs-selected ui-state-active" );
-					$hide.addClass( "ui-tabs-hide" );
-					resetStyle( $hide, hideFx );
-					self.element.dequeue( "tabs" );
+	_showTab: function( clicked, show, event ) {
+		var self = this;
+
+		$( clicked ).closest( "li" ).addClass( "ui-tabs-selected ui-state-active" );
+
+		if ( this.showFx ) {
+			show.hide().removeClass( "ui-tabs-hide" ) // avoid flicker that way
+				.animate( showFx, showFx.duration || "normal", function() {
+					self._resetStyle( show, showFx );
+					self._trigger( "show", event, self._ui( clicked, show[ 0 ] ) );
 				});
-			}
-			: function( clicked, $hide, $show ) {
+		} else {
+			show.removeClass( "ui-tabs-hide" );
+			self._trigger( "show", event, self._ui( clicked, show[ 0 ] ) );
+		}
+	},
+
+	_hideTab: function( clicked, $hide ) {
+		var self = this;
+
+		if ( this.hideFx ) {
+			$hide.animate( hideFx, hideFx.duration || "normal", function() {
 				self.lis.removeClass( "ui-tabs-selected ui-state-active" );
 				$hide.addClass( "ui-tabs-hide" );
+				self._resetStyle( $hide, hideFx );
 				self.element.dequeue( "tabs" );
-			};
+			});
+		} else {
+			self.lis.removeClass( "ui-tabs-selected ui-state-active" );
+			$hide.addClass( "ui-tabs-hide" );
+			self.element.dequeue( "tabs" );
+		}
+	},
 
-		// attach tab event handler, unbind to avoid duplicates from former tabifying...
-		this.anchors.bind( o.event + ".tabs", function( event ) {
-			event.preventDefault();
-			var el = this,
-				$li = $(el).closest( "li" ),
-				$hide = self.panels.filter( ":not(.ui-tabs-hide)" ),
-				$show = self.element.find( self._sanitizeSelector( el.hash ) );
-
-			// If tab is already selected and not collapsible or tab disabled or
-			// or is already loading or click callback returns false stop here.
-			// Check if click handler returns false last so that it is not executed
-			// for a disabled or loading tab!
-			if ( ( $li.hasClass( "ui-tabs-selected" ) && !o.collapsible) ||
-				$li.hasClass( "ui-state-disabled" ) ||
-				$li.hasClass( "ui-state-processing" ) ||
-				self.panels.filter( ":animated" ).length ||
-				self._trigger( "select", event, self._ui( this, $show[ 0 ] ) ) === false ) {
-				this.blur();
-				return;
-			}
+	_eventHandler: function( event ) {
+		event.preventDefault();
+		var self = this,
+			o = this.options,
+			el = event.currentTarget,
+			$li = $(el).closest( "li" ),
+			$hide = self.panels.filter( ":not(.ui-tabs-hide)" ),
+			$show = self.element.find( self._sanitizeSelector( el.hash ) );
+
+		// If tab is already selected and not collapsible or tab disabled or
+		// or is already loading or click callback returns false stop here.
+		// Check if click handler returns false last so that it is not executed
+		// for a disabled or loading tab!
+		if ( ( $li.hasClass( "ui-tabs-selected" ) && !o.collapsible) ||
+			$li.hasClass( "ui-state-disabled" ) ||
+			$li.hasClass( "ui-state-processing" ) ||
+			self.panels.filter( ":animated" ).length ||
+			self._trigger( "select", event, self._ui( el, $show[ 0 ] ) ) === false ) {
+			el.blur();
+			return;
+		}
 
-			o.selected = self.anchors.index( this );
+		o.selected = self.anchors.index( el );
 
-			self.abort();
+		self.abort();
 
-			// if tab may be closed
-			if ( o.collapsible ) {
-				if ( $li.hasClass( "ui-tabs-selected" ) ) {
-					o.selected = -1;
+		// if tab may be closed
+		if ( o.collapsible ) {
+			if ( $li.hasClass( "ui-tabs-selected" ) ) {
+				o.selected = -1;
 
-					if ( o.cookie ) {
-						self._cookie( o.selected, o.cookie );
-					}
+				if ( o.cookie ) {
+					self._cookie( o.selected, o.cookie );
+				}
 
-					self.element.queue( "tabs", function() {
-						hideTab( el, $hide );
-					}).dequeue( "tabs" );
+				self.element.queue( "tabs", function() {
+					self._hideTab( el, $hide );
+				}).dequeue( "tabs" );
 
-					this.blur();
-					return;
-				} else if ( !$hide.length ) {
-					if ( o.cookie ) {
-						self._cookie( o.selected, o.cookie );
-					}
+				el.blur();
+				return;
+			} else if ( !$hide.length ) {
+				if ( o.cookie ) {
+					self._cookie( o.selected, o.cookie );
+				}
 
-					self.element.queue( "tabs", function() {
-						showTab( el, $show, event );
-					});
+				self.element.queue( "tabs", function() {
+					self._showTab( el, $show, event );
+				});
 
-					// TODO make passing in node possible, see also http://dev.jqueryui.com/ticket/3171
-					self.load( self.anchors.index( this ) );
+				// TODO make passing in node possible, see also http://dev.jqueryui.com/ticket/3171
+				self.load( self.anchors.index( el ) );
 
-					this.blur();
-					return;
-				}
+				el.blur();
+				return;
 			}
+		}
 
-			if ( o.cookie ) {
-				self._cookie( o.selected, o.cookie );
-			}
+		if ( o.cookie ) {
+			self._cookie( o.selected, o.cookie );
+		}
 
-			// show new tab
-			if ( $show.length ) {
-				if ( $hide.length ) {
-					self.element.queue( "tabs", function() {
-						hideTab( el, $hide );
-					});
-				}
+		// show new tab
+		if ( $show.length ) {
+			if ( $hide.length ) {
 				self.element.queue( "tabs", function() {
-					showTab( el, $show, event );
+					self._hideTab( el, $hide );
 				});
-
-				self.load( self.anchors.index( this ) );
-			} else {
-				throw "jQuery UI Tabs: Mismatching fragment identifier.";
 			}
+			self.element.queue( "tabs", function() {
+				self._showTab( el, $show, event );
+			});
 
-			// Prevent IE from keeping other link focussed when using the back button
-			// and remove dotted border from clicked link. This is controlled via CSS
-			// in modern browsers; blur() removes focus from address bar in Firefox
-			// which can become a usability
-			if ( $.browser.msie ) {
-				this.blur();
-			}
-		});
+			self.load( self.anchors.index( el ) );
+		} else {
+			throw "jQuery UI Tabs: Mismatching fragment identifier.";
+		}
 
-		// disable click in any case
-		this.anchors.bind( "click.tabs", function( event ){
-			event.preventDefault();
-		});
+		// Prevent IE from keeping other link focussed when using the back button
+		// and remove dotted border from clicked link. This is controlled via CSS
+		// in modern browsers; blur() removes focus from address bar in Firefox
+		// which can become a usability
+		if ( $.browser.msie ) {
+			el.blur();
+		}
 	},
 
     _getIndex: function( index ) {