Accordion: Deprecated icons.headerSelected in favor of icons.activeHeader. Fixes #6834 - Accordion: Change icons.headerSelected to icons.activeHeader.

Author: Adovenmuehle

tests/unit/accordion/accordion_defaults.js

@@ -13,7 +13,9 @@ var accordion_defaults = {
 	fillSpace: false,
 	header: "> li > :first-child,> :not(li):even",
 	heightStyle: null,
-	icons: { "header": "ui-icon-triangle-1-e", "headerSelected": "ui-icon-triangle-1-s" },
+	icons: { "header": "ui-icon-triangle-1-e", 
+			"activeHeader": null,
+			"headerSelected": "ui-icon-triangle-1-s" },
 	navigation: false,
 	navigationFilter: function() {}
 };

tests/unit/accordion/accordion_options.js

@@ -163,6 +163,15 @@ test("{ icons: false }", function() {
 	icons(false);
 });
 
+test("{ icons: { activeHeader : 'test' } }", function() {
+	var list = $("#list1");
+	list.accordion( { icons: { "activeHeader": "test" } } );
+	equals( $( "#list1 span.test" ).length, 1);
+	list.accordion("option", "icons", { "activeHeader": "news" } );
+	equals( $( "#list1 span.test" ).length, 0);
+	equals( $( "#list1 span.news" ).length, 1);
+});
+
 test("{ navigation: true, navigationFilter: header }", function() {
 	$("#navigation").accordion({
 		navigation: true,
@@ -183,4 +192,12 @@ test("{ navigation: true, navigationFilter: content }", function() {
 	equals( $("#navigation .ui-accordion-content:eq(2)").size(), 1, "third content active" );
 });
 
+test("change headerSelected option after creation", function() {
+	var list = $("#list1");
+	list.accordion( { icons: { "activeHeader": "test" } } );
+	equals( $( "#list1 span.test" ).length, 1);
+	list.accordion( "option", "icons", { "headerSelected": "deprecated" } );
+	equals( $( "#list1 span.deprecated" ).length, 1);
+});
+
 })(jQuery);

ui/jquery.ui.accordion.js

@@ -24,7 +24,8 @@ $.widget( "ui.accordion", {
 		heightStyle: null, // "auto"
 		icons: {
 			header: "ui-icon-triangle-1-e",
-			headerSelected: "ui-icon-triangle-1-s"
+			// TODO: set to "ui-icon-triangle-1-s" in 2.0 (#6835)
+			activeHeader: null // "ui-icon-triangle-1-s"
 		}
 	},
 
@@ -133,7 +134,7 @@ $.widget( "ui.accordion", {
 				.prependTo( this.headers );
 			this.active.children( ".ui-icon" )
 				.toggleClass(options.icons.header)
-				.toggleClass(options.icons.headerSelected);
+				.toggleClass(options.icons.activeHeader);
 			this.element.addClass( "ui-accordion-icons" );
 		}
 	},
@@ -307,7 +308,7 @@ $.widget( "ui.accordion", {
 				.removeClass( "ui-state-active ui-corner-top" )
 				.addClass( "ui-state-default ui-corner-all" )
 				.children( ".ui-icon" )
-					.removeClass( options.icons.headerSelected )
+					.removeClass( options.icons.activeHeader )
 					.addClass( options.icons.header );
 			this.active.next().addClass( "ui-accordion-content-active" );
 			var toHide = this.active.next(),
@@ -361,15 +362,15 @@ $.widget( "ui.accordion", {
 			.removeClass( "ui-state-active ui-corner-top" )
 			.addClass( "ui-state-default ui-corner-all" )
 			.children( ".ui-icon" )
-				.removeClass( options.icons.headerSelected )
+				.removeClass( options.icons.activeHeader )
 				.addClass( options.icons.header );
 		if ( !clickedIsActive ) {
 			clicked
 				.removeClass( "ui-state-default ui-corner-all" )
 				.addClass( "ui-state-active ui-corner-top" )
 				.children( ".ui-icon" )
 					.removeClass( options.icons.header )
-					.addClass( options.icons.headerSelected );
+					.addClass( options.icons.activeHeader );
 			clicked
 				.next()
 				.addClass( "ui-accordion-content-active" );
@@ -626,6 +627,7 @@ $.extend( $.ui.accordion, {
 	};
 }( jQuery, jQuery.ui.accordion.prototype ) );
 
+// height options
 (function( $, prototype ) {
 	$.extend( prototype.options, {
 		autoHeight: true, // use heightStyle: "auto"
@@ -640,6 +642,7 @@ $.extend( $.ui.accordion, {
 		_create: function() {
 			this.options.heightStyle = this.options.heightStyle ||
 				this._mergeHeightStyle();
+
 			_create.call( this );
 		},
 
@@ -668,4 +671,16 @@ $.extend( $.ui.accordion, {
 	});
 }( jQuery, jQuery.ui.accordion.prototype ) );
 
+// icon options
+(function( $, prototype ) {
+	prototype.options.icons.headerSelected = "ui-icon-triangle-1-s";
+
+	var _createIcons = prototype._createIcons;
+	prototype._createIcons = function() {
+		this.options.icons.activeHeader = this.options.icons.activeHeader ||
+			this.options.icons.headerSelected;
+		_createIcons.call( this );
+	};
+}( jQuery, jQuery.ui.accordion.prototype ) );
+
 })( jQuery );