r2861 - accordion fix for #4653: added tests, adopted no-auto-height demo to also cover navigatio...
Author: joern.zaefferer
Date: Fri Jul 3 14:05:22 2009
New Revision: 2861
Modified:
trunk/demos/accordion/no-auto-height.html
trunk/tests/unit/accordion/accordion.html
trunk/tests/unit/accordion/accordion_options.js
trunk/ui/ui.accordion.js
Log:
accordion fix for #4653: added tests, adopted no-auto-height demo to also
cover navigation option; fixed an unrelated bug, where
ui-accordion-content-active was never removed
Modified: trunk/demos/accordion/no-auto-height.html
==============================================================================
--- trunk/demos/accordion/no-auto-height.html (original)
+++ trunk/demos/accordion/no-auto-height.html Fri Jul 3 14:05:22 2009
@@ -10,7 +10,8 @@
<script type="text/javascript">
$(function() {
$("#accordion").accordion({
- autoHeight: false
+ autoHeight: false,
+ navigation: true
});
});
</script>
@@ -20,15 +21,15 @@
<div class="demo">
<div id="accordion">
- <h3><a href="#">Section 1</a></h3>
+ <h3><a href="#section1">Section 1</a></h3>
<div>
Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin
viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante
scelerisque vulputate.
</div>
- <h3><a href="#">Section 2</a></h3>
+ <h3><a href="#section2">Section 2</a></h3>
<div>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</div>
- <h3><a href="#">Section 3</a></h3>
+ <h3><a href="#section3">Section 3</a></h3>
<div>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque
lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus
ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna
quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis
dui.
<ul>
@@ -40,6 +41,7 @@
<li>List item</li>
<li>List item</li>
</ul>
+ <a href="#othercontent">Link to other content</a>
</div>
</div>
@@ -50,6 +52,8 @@
<div class="demo-description">
Setting <code>autoHeight: false</code> allows to accordion panels to
keep their native height.
+
+
In addition, the <code>navigation</code> option is enabled, opening the
panel based on the current location, eg. no-auto-height.html#panel2 would
open the second panel on page load. It also finds anchors within the
content, so #othercontent will open the third section, as it contains a
link with that href.
</div><!-- End demo-description -->
Modified: trunk/tests/unit/accordion/accordion.html
==============================================================================
--- trunk/tests/unit/accordion/accordion.html (original)
+++ trunk/tests/unit/accordion/accordion.html Fri Jul 3 14:05:22 2009
@@ -58,7 +58,7 @@
<ul id="navigation">
<li>
- <a href="?p=1.1.1">Guitar</a>
+ <h2><a href="?p=1.1.1">Guitar</a></h2>
<ul>
<li><a href="?p=1.1.1.1">Electric</a></li>
<li><a href="?p=1.1.1.2">Acoustic</a></li>
@@ -68,7 +68,7 @@
</ul>
</li>
<li>
- <a href="?p=1.1.2"><span>Bass</span></a>
+ <h2><a href="?p=1.1.2"><span>Bass</span></a></h2>
<ul>
<li><a href="?p=1.1.2.1">Electric</a></li>
<li><a href="?p=1.1.2.2">Acoustic</a></li>
@@ -80,7 +80,7 @@
</ul>
</li>
<li>
- <a href="?p=1.1.3">Drums</a>
+ <h2><a href="?p=1.1.3">Drums</a></h2>
<ul>
<li><a href="?p=1.1.3.2">Acoustic Drums</a></li>
<li><a href="?p=1.1.3.3">Electronic Drums</a></li>
Modified: trunk/tests/unit/accordion/accordion_options.js
==============================================================================
--- trunk/tests/unit/accordion/accordion_options.js (original)
+++ trunk/tests/unit/accordion/accordion_options.js Fri Jul 3 14:05:22 2009
@@ -136,16 +136,24 @@
icons(false);
});
-test("{ navigation: false }, default", function() {
- ok(false, 'missing test - untested code is broken code');
+test("{ navigation: true, navigationFilter: header }", function() {
+ $("#navigation").accordion({
+ navigation: true,
+ navigationFilter: function() {
+ return /\?p=1\.1\.3$/.test(this.href);
+ }
+ });
+ equals( $("#navigation .ui-accordion-content:eq(2)").size(), 1, "third
content active" );
});
-test("{ navigation: true }", function() {
- ok(false, 'missing test - untested code is broken code');
-});
-
-test("{ navigationFilter: Function }, default", function() {
- ok(false, 'missing test - untested code is broken code');
+test("{ navigation: true, navigationFilter: content }", function() {
+ $("#navigation").accordion({
+ navigation: true,
+ navigationFilter: function() {
+ return /\?p=1\.1\.3\.2$/.test(this.href);
+ }
+ });
+ equals( $("#navigation .ui-accordion-content:eq(2)").size(), 1, "third
content active" );
});
})(jQuery);
Modified: trunk/ui/ui.accordion.js
==============================================================================
--- trunk/ui/ui.accordion.js (original)
+++ trunk/ui/ui.accordion.js Fri Jul 3 14:05:22 2009
@@ -27,18 +27,6 @@
o.collapsible = !o.alwaysOpen;
}
- if ( o.navigation ) {
- var current = this.element.find("a").filter(o.navigationFilter);
- if ( current.length ) {
- if ( current.filter(o.header).length ) {
- this.active = current;
- } else {
- this.active = current.parent().parent().prev();
- current.addClass("ui-accordion-content-active");
- }
- }
- }
-
this.element.addClass("ui-accordion ui-widget ui-helper-reset");
// in lack of child-selectors in CSS we need to mark top-LIs in a
UL-accordion for some IE-fix
@@ -56,6 +44,20 @@
.next()
.addClass("ui-accordion-content ui-helper-reset ui-widget-content
ui-corner-bottom");
+ if ( o.navigation ) {
+ var current = this.element.find("a").filter(o.navigationFilter);
+ if ( current.length ) {
+ var header = current.closest(".ui-accordion-header");
+ if ( header.length ) {
+ // anchor within header
+ this.active = header;
+ } else {
+ // anchor within content
+ this.active = current.closest(".ui-accordion-content").prev();
+ }
+ }
+ }
+
this.active = this._findActive(this.active ||
o.active).toggleClass("ui-state-default").toggleClass("ui-state-active").toggleClass("ui-corner-all").toggleClass("ui-corner-top");
this.active.next().addClass('ui-accordion-content-active');
@@ -276,7 +278,7 @@
// switch classes
this.active.removeClass("ui-state-active
ui-corner-top").addClass("ui-state-default ui-corner-all")
.find(".ui-icon").removeClass(o.icons.headerSelected).addClass(o.icons.header);
- this.active.next().addClass('ui-accordion-content-active');
+ this.active.next().removeClass('ui-accordion-content-active');
if (!clickedIsActive) {
clicked.removeClass("ui-state-default
ui-corner-all").addClass("ui-state-active ui-corner-top")
.find(".ui-icon").removeClass(o.icons.header).addClass(o.icons.headerSelected);
Topic Participants
scott.gonzalez
Jörn Zaefferer