Skip to content

Commit 490792b

Browse files
AdovenmuehleAdovenmuehle
committed
Accordion: API Redesign. Merged autoHeight, fillSpace, and clearStyle into a new option called heightStyle
1 parent cf48a3c commit 490792b

File tree

3 files changed

+53
-7
lines changed

3 files changed

+53
-7
lines changed

‎tests/unit/accordion/accordion_options.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,10 @@ test("{ autoHeight: true }, default", function() {
6969
equalHeights($('#navigation').accordion({ autoHeight: true }), 95, 130);
7070
});
7171

72+
test("{ heightStyle: 'auto' }, default", function() {
73+
equalHeights($('#navigation').accordion({ heightStyle: 'auto' }), 95, 130);
74+
});
75+
7276
test("{ autoHeight: false }", function() {
7377
var accordion = $('#navigation').accordion({ autoHeight: false });
7478
var sizes = [];
@@ -80,6 +84,16 @@ test("{ autoHeight: false }", function() {
8084
ok( sizes[2] >= 42 && sizes[2] <= 54, "was " + sizes[2] );
8185
});
8286

87+
test("{ heightStyle: 'content' }", function() {
88+
var accordion = $('#navigation').accordion({ heightStyle: 'content' });
89+
var sizes = [];
90+
accordion.find(".ui-accordion-content").each(function() {
91+
sizes.push($(this).height());
92+
});
93+
ok( sizes[0] >= 70 && sizes[0] <= 90, "was " + sizes[0] );
94+
ok( sizes[1] >= 98 && sizes[1] <= 126, "was " + sizes[1] );
95+
ok( sizes[2] >= 42 && sizes[2] <= 54, "was " + sizes[2] );
96+
});
8397
test("{ collapsible: false }, default", function() {
8498
var ac = $("#list1").accordion();
8599
ac.accordion("activate", false);
@@ -102,6 +116,19 @@ test("{ fillSpace: true }", function() {
102116
equalHeights($('#navigation').accordion({ fillSpace: true }), 446, 458);
103117
});
104118

119+
test("{ heightStyle: 'fill' }", function() {
120+
$("#navigationWrapper").height(500);
121+
equalHeights($('#navigation').accordion({ heightStyle: 'fill' }), 446, 458);
122+
});
123+
124+
test("{ fillSpace: true } with sibling", function() {
125+
$("#navigationWrapper").height(500);
126+
var sibling = $("<p>Lorem Ipsum</p>");
127+
$("#navigationWrapper").prepend( sibling.height(100) );
128+
//sibling.outerHeight(true) == 126
129+
equalHeights($('#navigation').accordion({ fillSpace: true}), 320, 332);
130+
});
131+
105132
test("{ header: '> li > :first-child,> :not(li):even' }, default", function() {
106133
state($("#list1").accordion(), 1, 0, 0);
107134
state($("#navigation").accordion(), 1, 0, 0);

‎tests/visual/accordion/accordion_option_fillSpace_true.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
<body>
2121

2222
<div style="height: 500px; width: 500px; border: 1px solid red;">
23+
<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>
2324
<div id="accordion" style="width:490px;">
2425
<h3><a href="#">Accordion Header 1</a></h3>
2526
<div style="padding-top: 1em">

‎ui/jquery.ui.accordion.js

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,34 @@ $.widget( "ui.accordion", {
2222
collapsible: false,
2323
event: "click",
2424
fillSpace: false,
25+
//heightStyle: "auto",
2526
header: "> li > :first-child,> :not(li):even",
2627
icons: {
2728
header: "ui-icon-triangle-1-e",
2829
headerSelected: "ui-icon-triangle-1-s"
2930
}
3031
},
3132

33+
_mergeHeightStyle: function() {
34+
options = this.options;
35+
36+
if (options.fillSpace)
37+
return "fill";
38+
39+
if (options.clearStyle)
40+
return "content";
41+
42+
if (options.autoHeight)
43+
return "auto";
44+
},
45+
3246
_create: function() {
3347
var self = this,
3448
options = self.options;
3549

50+
//Merge autoheight, fillSpace and clearStyle
51+
options.heightStyle = options.heightStyle || self._mergeHeightStyle();
52+
3653
self.running = 0;
3754

3855
self.element
@@ -165,7 +182,7 @@ $.widget( "ui.accordion", {
165182
.css( "display", "" )
166183
.removeAttr( "role" )
167184
.removeClass( "ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active ui-accordion-disabled ui-state-disabled" );
168-
if ( options.autoHeight || options.fillHeight ) {
185+
if ( options.heightStyle != "content" ) {
169186
contents.css( "height", "" );
170187
}
171188

@@ -232,12 +249,13 @@ $.widget( "ui.accordion", {
232249
var options = this.options,
233250
maxHeight;
234251

235-
if ( options.fillSpace ) {
252+
if ( options.heightStyle == "fill" ) {
236253
if ( $.browser.msie ) {
237254
var defOverflow = this.element.parent().css( "overflow" );
238255
this.element.parent().css( "overflow", "hidden");
239256
}
240-
maxHeight = this.element.parent().height();
257+
parent = this.element.parent();
258+
maxHeight = parent.height() - parent.children(':visible').not(this.element).outerHeight(true);
241259
if ($.browser.msie) {
242260
this.element.parent().css( "overflow", defOverflow );
243261
}
@@ -252,7 +270,7 @@ $.widget( "ui.accordion", {
252270
$( this ).innerHeight() + $( this ).height() ) );
253271
})
254272
.css( "overflow", "auto" );
255-
} else if ( options.autoHeight ) {
273+
} else if ( options.heightStyle == "auto" ) {
256274
maxHeight = 0;
257275
this.headers.next()
258276
.each(function() {
@@ -398,15 +416,15 @@ $.widget( "ui.accordion", {
398416
toHide: toHide,
399417
complete: complete,
400418
down: down,
401-
autoHeight: options.autoHeight || options.fillSpace
419+
autoHeight: options.heightStyle !== "content"
402420
};
403421
} else {
404422
animOptions = {
405423
toShow: toShow,
406424
toHide: toHide,
407425
complete: complete,
408426
down: down,
409-
autoHeight: options.autoHeight || options.fillSpace
427+
autoHeight: options.heightStyle !== "content"
410428
};
411429
}
412430

@@ -475,7 +493,7 @@ $.widget( "ui.accordion", {
475493
return;
476494
}
477495

478-
if ( this.options.clearStyle ) {
496+
if ( this.options.heightStyle == "content" ) {
479497
this.toShow.add( this.toHide ).css({
480498
height: "",
481499
overflow: ""

0 commit comments

Comments
 (0)