From 490792be6a17f53108f96e077948db5f3cbafa05 Mon Sep 17 00:00:00 2001 From: Alex Dovenmuehle Date: Tue, 14 Dec 2010 23:48:36 -0500 Subject: [PATCH] Accordion: API Redesign. Merged autoHeight, fillSpace, and clearStyle into a new option called heightStyle --- tests/unit/accordion/accordion_options.js | 27 ++++++++++++++++ .../accordion_option_fillSpace_true.html | 1 + ui/jquery.ui.accordion.js | 32 +++++++++++++++---- 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 = $("

Lorem Ipsum

"); + $("#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 @@
+

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.

Accordion Header 1

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: "" -- 2.39.5