Accordion: API Redesign. Merged autoHeight, fillSpace, and clearStyle into a new option called heightStyle

author: Alex Dovenmuehle <adovenmuehle@gmail.com> 2010-12-14 23:48:36 -0500
committer: Alex Dovenmuehle <adovenmuehle@gmail.com> 2010-12-16 22:55:59 -0500
commit: 490792be6a17f53108f96e077948db5f3cbafa05 (patch)
tree: d31e56549fb0f06189aa7333cd0f027cc3598d5e
parent: cf48a3c5c8da7bc90a9424e333d53d0e178e7885 (diff)
download: jquery-ui-490792be6a17f53108f96e077948db5f3cbafa05.tar.gz
jquery-ui-490792be6a17f53108f96e077948db5f3cbafa05.zip
3 files changed, 53 insertions, 7 deletions
diff --git a/tests/unit/accordion/accordion_options.js b/tests/unit/accordion/accordion_options.js
index 291deb214..b806a4513 100644
--- 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
index 5d433097d..7642d0621 100644
--- 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
index d134d3b6b..3abb088d1 100644
--- a/ui/jquery.ui.accordion.js
+++ b/ui/jquery.ui.accordion.js
@@ -22,6 +22,7 @@ $.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",
@@ -29,10 +30,26 @@ $.widget( "ui.accordion", {
 		}
 	},
 
+	_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,7 +416,7 @@ $.widget( "ui.accordion", {
 					toHide: toHide,
 					complete: complete,
 					down: down,
-					autoHeight: options.autoHeight || options.fillSpace
+					autoHeight: options.heightStyle !== "content"
 				};
 			} else {
 				animOptions = {
@@ -406,7 +424,7 @@ $.widget( "ui.accordion", {
 					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: ""
author	Alex Dovenmuehle <adovenmuehle@gmail.com>	2010-12-14 23:48:36 -0500
committer	Alex Dovenmuehle <adovenmuehle@gmail.com>	2010-12-16 22:55:59 -0500
commit	490792be6a17f53108f96e077948db5f3cbafa05 (patch)
tree	d31e56549fb0f06189aa7333cd0f027cc3598d5e
parent	cf48a3c5c8da7bc90a9424e333d53d0e178e7885 (diff)
download	jquery-ui-490792be6a17f53108f96e077948db5f3cbafa05.tar.gz jquery-ui-490792be6a17f53108f96e077948db5f3cbafa05.zip