Accordion: API Redesign. Merged autoHeight, fillSpace, and clearStyle…

… into a new option called heightStyle
jquery · Dec 17, 2010 · 490792b · 490792b
1 parent cf48a3c
commit 490792b
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 7 deletions.
diff --git a/tests/unit/accordion/accordion_options.js b/tests/unit/accordion/accordion_options.js
@@ -69,6 +69,10 @@ test("{ autoHeight: true }, default", function() {
 	equalHeights($('#navigation').accordion({ autoHeight: true }), 95, 130);
 });
 
+test("{ heightStyle: 'auto' }, default", function() {
+	equalHeights($('#navigation').accordion({ heightStyle: 'auto' }), 95, 130);
+});
+
 test("{ autoHeight: false }", function() {
 	var accordion = $('#navigation').accordion({ autoHeight: false });
 	var sizes = [];
@@ -80,6 +84,16 @@ test("{ autoHeight: false }", function() {
 	ok( sizes[2] >= 42 && sizes[2] <= 54, "was " + sizes[2] );
 });
 
+test("{ heightStyle: 'content' }", function() {
+	var accordion = $('#navigation').accordion({ heightStyle: 'content' });
+	var sizes = [];
+	accordion.find(".ui-accordion-content").each(function() {
+		sizes.push($(this).height());
+	});
+	ok( sizes[0] >= 70 && sizes[0] <= 90, "was " + sizes[0] );
+	ok( sizes[1] >= 98 && sizes[1] <= 126, "was " + sizes[1] );
+	ok( sizes[2] >= 42 && sizes[2] <= 54, "was " + sizes[2] );
+});
 test("{ collapsible: false }, default", function() {
 	var ac = $("#list1").accordion();
 	ac.accordion("activate", false);
@@ -102,6 +116,19 @@ test("{ fillSpace: true }", function() {
 	equalHeights($('#navigation').accordion({ fillSpace: true }), 446, 458);
 });
 
+test("{ heightStyle: 'fill' }", function() {
+	$("#navigationWrapper").height(500);
+	equalHeights($('#navigation').accordion({ heightStyle: 'fill' }), 446, 458);
+});
+
+test("{ fillSpace: true } with sibling", function() {
+	$("#navigationWrapper").height(500);
+	var sibling = $("<p>Lorem Ipsum</p>");
+	$("#navigationWrapper").prepend( sibling.height(100) );
+	//sibling.outerHeight(true) == 126
+	equalHeights($('#navigation').accordion({ fillSpace: true}), 320, 332);
+});
+
 test("{ header: '> li > :first-child,> :not(li):even' }, default", function() {
 	state($("#list1").accordion(), 1, 0, 0);
 	state($("#navigation").accordion(), 1, 0, 0);

diff --git a/tests/visual/accordion/accordion_option_fillSpace_true.html b/tests/visual/accordion/accordion_option_fillSpace_true.html
@@ -20,6 +20,7 @@
 <body>
 
 <div style="height: 500px; width: 500px; border: 1px solid red;">
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultricies enim augue. Vestibulum quis risus massa. Donec ut augue vitae velit dignissim auctor ac eleifend nisi. Donec et urna sapien. Donec bibendum rhoncus erat sit amet suscipit. Ut sodales vestibulum urna, blandit tempor enim sodales ac. Integer sagittis mauris nec sapien ornare ut malesuada nunc egestas. Ut auctor metus eget leo imperdiet non cursus velit rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consectetur euismod ipsum ac sodales. Proin volutpat, est non ultricies iaculis, augue orci pulvinar lectus, quis tincidunt nibh odio a augue. Sed posuere interdum augue a consequat. Ut ac nunc nulla, quis aliquet purus. Nullam convallis elit id magna pretium pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce commodo, ipsum ac ultrices porta, purus leo suscipit dui, sit amet ultricies ligula ante a dui. Morbi a sem quam, quis rhoncus quam.</p>
 	<div id="accordion" style="width:490px;">
 		<h3><a href="#">Accordion Header 1</a></h3>
 		<div style="padding-top: 1em">

diff --git a/ui/jquery.ui.accordion.js b/ui/jquery.ui.accordion.js
@@ -22,17 +22,34 @@ $.widget( "ui.accordion", {
 		collapsible: false,
 		event: "click",
 		fillSpace: false,
+		//heightStyle: "auto",
 		header: "> li > :first-child,> :not(li):even",
 		icons: {
 			header: "ui-icon-triangle-1-e",
 			headerSelected: "ui-icon-triangle-1-s"
 		}
 	},
 
+	_mergeHeightStyle: function() {
+		options = this.options;
+
+		if (options.fillSpace)
+			return "fill";
+
+		if (options.clearStyle)
+			return "content";
+
+		if (options.autoHeight) 
+			return "auto";
+	},
+
 	_create: function() {
 		var self = this,
 			options = self.options;
 
+		//Merge autoheight, fillSpace and clearStyle
+		options.heightStyle = options.heightStyle || self._mergeHeightStyle();	
+
 		self.running = 0;
 
 		self.element
@@ -165,7 +182,7 @@ $.widget( "ui.accordion", {
 			.css( "display", "" )
 			.removeAttr( "role" )
 			.removeClass( "ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active ui-accordion-disabled ui-state-disabled" );
-		if ( options.autoHeight || options.fillHeight ) {
+		if ( options.heightStyle != "content" ) {
 			contents.css( "height", "" );
 		}
 
@@ -232,12 +249,13 @@ $.widget( "ui.accordion", {
 		var options = this.options,
 			maxHeight;
 
-		if ( options.fillSpace ) {
+		if ( options.heightStyle == "fill" ) {
 			if ( $.browser.msie ) {
 				var defOverflow = this.element.parent().css( "overflow" );
 				this.element.parent().css( "overflow", "hidden");
 			}
-			maxHeight = this.element.parent().height();
+			parent = this.element.parent();			
+			maxHeight = parent.height() - parent.children(':visible').not(this.element).outerHeight(true);
 			if ($.browser.msie) {
 				this.element.parent().css( "overflow", defOverflow );
 			}
@@ -252,7 +270,7 @@ $.widget( "ui.accordion", {
 						$( this ).innerHeight() + $( this ).height() ) );
 				})
 				.css( "overflow", "auto" );
-		} else if ( options.autoHeight ) {
+		} else if ( options.heightStyle == "auto" ) {
 			maxHeight = 0;
 			this.headers.next()
 				.each(function() {
@@ -398,15 +416,15 @@ $.widget( "ui.accordion", {
 					toHide: toHide,
 					complete: complete,
 					down: down,
-					autoHeight: options.autoHeight || options.fillSpace
+					autoHeight: options.heightStyle !== "content"
 				};
 			} else {
 				animOptions = {
 					toShow: toShow,
 					toHide: toHide,
 					complete: complete,
 					down: down,
-					autoHeight: options.autoHeight || options.fillSpace
+					autoHeight: options.heightStyle !== "content"
 				};
 			}
 
@@ -475,7 +493,7 @@ $.widget( "ui.accordion", {
 			return;
 		}
 
-		if ( this.options.clearStyle ) {
+		if ( this.options.heightStyle == "content" ) {
 			this.toShow.add( this.toHide ).css({
 				height: "",
 				overflow: ""