Tabs: Deprecate spinner option. Fixes #7134 Tabs: Deprecate spinner option

5 files changed, 63 insertions, 54 deletions

diff --git a/tests/unit/tabs/tabs_core.js b/tests/unit/tabs/tabs_core.js
index 652788bba..7d9074819 100644
--- a/tests/unit/tabs/tabs_core.js
+++ b/tests/unit/tabs/tabs_core.js
@@ -25,34 +25,4 @@ test('navigation markup', function() {
 	el.tabs('destroy');
 });
 
-test('ajax', function() {
-	expect(4);
-	stop();
-	
-	el = $('#tabs2');
-	
-	el.tabs({
-		selected: 2,
-		load: function() {
-			// spinner: default spinner
-			setTimeout(function() {
-				equals($('li:eq(2) > a > span', el).length, 1, "should restore tab markup after spinner is removed");
-				equals($('li:eq(2) > a > span', el).html(), '3', "should restore tab label after spinner is removed");
-				el.tabs('destroy');
-				el.tabs({
-					selected: 2,
-					spinner: '<img src="spinner.gif" alt="">',
-					load: function() {
-						// spinner: image
-						equals($('li:eq(2) > a > span', el).length, 1, "should restore tab markup after spinner is removed");
-						equals($('li:eq(2) > a > span', el).html(), '3', "should restore tab label after spinner is removed");
-						start();
-					}
-				});
-			}, 1);
-		}
-	});
-	
-});
-
 })(jQuery);
diff --git a/tests/unit/tabs/tabs_defaults.js b/tests/unit/tabs/tabs_defaults.js
index 4f663fbf2..397d81ce6 100644
--- a/tests/unit/tabs/tabs_defaults.js
+++ b/tests/unit/tabs/tabs_defaults.js
@@ -18,7 +18,6 @@ var tabs_defaults = {
 	remove: null,
 	select: null,
 	show: null,
-	spinner: "<em>Loading&#8230;</em>",
 	tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>"
 };
 
diff --git a/tests/unit/tabs/tabs_deprecated.js b/tests/unit/tabs/tabs_deprecated.js
index 72034c083..cec689808 100644
--- a/tests/unit/tabs/tabs_deprecated.js
+++ b/tests/unit/tabs/tabs_deprecated.js
@@ -10,4 +10,35 @@ test('cache', function() {
 	ok(false, "missing test - untested code is broken code.");
 });
 
+module("tabs (deprecated): spinner");
+
+test('spinner', function() {
+	expect(4);
+	stop();
+
+	el = $('#tabs2');
+
+	el.tabs({
+		selected: 2,
+		load: function() {
+			// spinner: default spinner
+			setTimeout(function() {
+				equals($('li:eq(2) > a > span', el).length, 1, "should restore tab markup after spinner is removed");
+				equals($('li:eq(2) > a > span', el).html(), '3', "should restore tab label after spinner is removed");
+				el.tabs('destroy');
+				el.tabs({
+					selected: 2,
+					spinner: '<img src="spinner.gif" alt="">',
+					load: function() {
+						// spinner: image
+						equals($('li:eq(2) > a > span', el).length, 1, "should restore tab markup after spinner is removed");
+						equals($('li:eq(2) > a > span', el).html(), '3', "should restore tab label after spinner is removed");
+						start();
+					}
+				});
+			}, 1);
+		}
+	});
+});
+
 }( jQuery ) );
diff --git a/tests/unit/tabs/tabs_options.js b/tests/unit/tabs/tabs_options.js
index cf50bd970..45fba8f32 100644
--- a/tests/unit/tabs/tabs_options.js
+++ b/tests/unit/tabs/tabs_options.js
@@ -117,10 +117,6 @@ test('selected', function() {
 	equals(el.tabs('option', 'selected'), 0, 'should not collapse tab if value is same as selected');
 });
 
-test('spinner', function() {
-	ok(false, "missing test - untested code is broken code.");
-});
-
 test('tabTemplate', function() {
 	ok(false, "missing test - untested code is broken code.");
 });
diff --git a/ui/jquery.ui.tabs.js b/ui/jquery.ui.tabs.js
index 617e84848..f54b166c9 100755
--- a/ui/jquery.ui.tabs.js
+++ b/ui/jquery.ui.tabs.js
@@ -41,7 +41,6 @@ $.widget( "ui.tabs", {
 		remove: null,
 		select: null,
 		show: null,
-		spinner: "<em>Loading&#8230;</em>",
 		tabTemplate: "<li><a href='#{href}'><span>#{label}</span></a></li>"
 	},
 
@@ -85,17 +84,6 @@ $.widget( "ui.tabs", {
 		};
 	},
 
-	_cleanup: function() {
-		// restore all former loading tabs labels
-		this.lis.filter( ".ui-state-processing" )
-			.removeClass( "ui-state-processing" )
-			.find( "span:data(label.tabs)" )
-				.each(function() {
-					var el = $( this );
-					el.html( el.data( "label.tabs" ) ).removeData( "label.tabs" );
-				});
-	},
-
 	_tabify: function( init ) {
 		var self = this,
 			o = this.options,
@@ -630,11 +618,6 @@ $.widget( "ui.tabs", {
 			// load remote from here on
 			this.lis.eq( index ).addClass( "ui-state-processing" );
 
-			if ( o.spinner ) {
-				var span = $( "span", a );
-				span.data( "label.tabs", span.html() ).html( o.spinner );
-			}
-
 			this.xhr
 				.success( function( response ) {
 					self.element.find( self._sanitizeSelector( a.hash ) ).html( response );
@@ -651,8 +634,8 @@ $.widget( "ui.tabs", {
 
 						delete this.xhr;
 					}
-					// take care of tab labels
-					self._cleanup();
+
+					self.lis.eq( index ).removeClass( "ui-state-processing" );
 
 					self._trigger( "load", null, eventData );
 				});
@@ -755,6 +738,36 @@ if ( $.uiBackCompat !== false ) {
 			}
 		};
 	}( jQuery, jQuery.ui.tabs.prototype ) );
+
+	// spinner
+	(function( $, prototype ) {
+		$.extend( prototype.options, {
+			spinner: "<em>Loading&#8230;</em>"
+		});
+
+		var _create = prototype._create;
+		prototype._create = function() {
+			_create.call( this );
+			var self = this;
+
+			this.element.bind( "tabsbeforeload", function( event, ui ) {
+				if ( self.options.spinner ) {
+					var span = $( "span", ui.tab );
+					if ( span.length ) {
+						span.data( "label.tabs", span.html() ).html( self.options.spinner );
+					}
+				}
+				ui.jqXHR.complete( function() {
+					if ( self.options.spinner ) {
+						var span = $( "span", ui.tab );
+						if ( span.length ) {
+							span.html( span.data( "label.tabs" ) ).removeData( "label.tabs" );
+						}
+					}
+				});
+			});
+		};
+	}( jQuery, jQuery.ui.tabs.prototype ) );
 }
 
 })( jQuery );