Skip to content

Commit 5bd72c7

Browse files
gseguingseguin
committed
Merge branch 'collapsible-redesign'
2 parents e81e3b1 + 16c34ce commit 5bd72c7

File tree

6 files changed

+222
-52
lines changed

6 files changed

+222
-52
lines changed

‎docs/content/content-collapsible-set.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,25 @@ <h3>Section E</h3>
7272

7373
</div>
7474
</div>
75+
76+
<p>Here is an example of a collapsible with 3 sections and <code>data-content-theme</code> set</p>
77+
78+
<div data-role="collapsible-set" data-content-theme="c">
79+
<div data-role="collapsible" data-collapsed="false">
80+
<h3>Section F</h3>
81+
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
82+
</div>
83+
<div data-role="collapsible">
84+
<h3>Section G</h3>
85+
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
86+
87+
</div>
88+
<div data-role="collapsible">
89+
<h3>Section H</h3>
90+
<p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I have the "collapsed" state; you need to expand the header to see me.</p>
91+
92+
</div>
93+
</div>
7594

7695
</div><!--/content-primary -->
7796

‎docs/content/content-collapsible.html‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@ <h1>Collapsible content</h1>
2525

2626
<h2>Collapsible content markup</h2>
2727
<p>To create a collapsible blocks of content, create a container and add the <code> data-role="collapsible"</code> attribute.</p>
28-
28+
29+
<p>Using <code>data-content-theme</code> attribute allows you to set a theme for the content of the collapsible.</p>
30+
2931
<p>Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.</p>
3032

3133
<p>After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.</p>
@@ -63,9 +65,9 @@ <h3>I'm a header</h3>
6365
<h2>Collapsible example</h2>
6466
<p>This page has 4 collapsible containers with different types of content inside.</p>
6567

66-
<div data-role="collapsible" data-collapsed="true">
68+
<div data-role="collapsible">
6769
<h3>Section 1: Collapsed text block</h3>
68-
<p>I'm closed when the page loads because I have the <code>data-collapsed="true"</code> attribute on my container. </p>
70+
<p>I'm closed when the page loads because that's the default state of a collapsible.</p>
6971
<p>I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. </p>
7072
</div><!-- /section 1 -->
7173

@@ -106,6 +108,11 @@ <h3>Section 4: Collapsed list</h3>
106108
<li><a href="index.html">Ford</a></li>
107109
</ul>
108110
</div><!-- /section 4 -->
111+
112+
<div data-role="collapsible" data-theme="c" data-content-theme="c">
113+
<h3>Section 5: themed content</h3>
114+
<p>I have <code>data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
115+
</div><!-- /section 5 -->
109116

110117
<h2>Nested Collapsibles</h2>
111118
<div data-role="collapsible">

‎docs/content/content-themes.html‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,12 @@ <h1>Theming content</h1>
2424
<div class="content-primary">
2525
<h2>Theming the content area</h2>
2626
<p>The main content area of a page (container with the <code> data-role="content"</code> attribute) should be themed by adding the <code> data-theme</code> attribute to the <code> data-role="page"</code> container to ensure that the background colors are applied to the full page, regardless of the content length. (If you add to the <code> data-theme</code> to the content container, the background color will stop after the content so there may be a gap in color between the content and fixed footer.)</p>
27-
27+
<p>Additionally, the content area can be themed to match the theme of the collapsible header using the <code>data-content-theme</code> attribute.</p>
28+
2829
<code>
29-
&lt;div data-role=&quot;page&quot; <strong> data-theme=&quot;a&quot;</strong>&gt;
30-
</code>
30+
&lt;div data-role=&quot;page&quot; <strong> data-theme=&quot;a&quot;</strong> <strong>data-content-theme=&quot;a&quot;</strong>&gt;
31+
</code>
32+
3133
<h2>Theming collapsible blocks</h2>
3234
<p>To set the color of the collapsible header, add the <code> data-theme</code> attribute to the collapsible container. The icon and body are not currently themable through data attributes, but can be styled directly with custom css.</p>
3335

@@ -44,6 +46,10 @@ <h1>H1 Heading</h1>
4446
<h3>I'm an themed collapsible</h3>
4547
<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
4648
</div><!-- /collapsible -->
49+
<div data-role="collapsible" data-theme="a" data-content-theme="a">
50+
<h3>I'm a themed collapsible with a themed content</h3>
51+
<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
52+
</div>
4753
</div><!-- /themed container -->
4854

4955
<p><strong>B</strong> theme swatch on content &amp; collapsible</p>
@@ -54,6 +60,10 @@ <h1>H1 Heading</h1>
5460
<h3>I'm an themed collapsible</h3>
5561
<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
5662
</div><!-- /collapsible -->
63+
<div data-role="collapsible" data-theme="b" data-content-theme="b">
64+
<h3>I'm a themed collapsible with a themed content</h3>
65+
<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
66+
</div>
5767
</div><!-- /themed container -->
5868

5969
<p><strong>C</strong> theme swatch on content &amp; collapsible</p>
@@ -64,6 +74,10 @@ <h1>H1 Heading</h1>
6474
<h3>I'm an themed collapsible</h3>
6575
<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
6676
</div><!-- /collapsible -->
77+
<div data-role="collapsible" data-theme="c" data-content-theme="c">
78+
<h3>I'm a themed collapsible with a themed content</h3>
79+
<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
80+
</div>
6781
</div><!-- /themed container -->
6882

6983
<p><strong>D</strong> theme swatch on content &amp; collapsible</p>
@@ -74,6 +88,10 @@ <h1>H1 Heading</h1>
7488
<h3>I'm an themed collapsible</h3>
7589
<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
7690
</div><!-- /collapsible -->
91+
<div data-role="collapsible" data-theme="d" data-content-theme="d">
92+
<h3>I'm a themed collapsible with a themed content</h3>
93+
<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
94+
</div>
7795
</div><!-- /themed container -->
7896

7997
<p><strong>E</strong> theme swatch on content &amp; collapsible</p>
@@ -84,6 +102,10 @@ <h1>H1 Heading</h1>
84102
<h3>I'm an themed collapsible</h3>
85103
<p>I have <code> data-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
86104
</div><!-- /collapsible -->
105+
<div data-role="collapsible" data-theme="e" data-content-theme="e">
106+
<h3>I'm a themed collapsible with a themed content</h3>
107+
<p>I have <code> data-content-theme</code> attribute set manually on my container to set the color to match the content block I'm in. </p>
108+
</div>
87109
</div><!-- /themed container -->
88110

89111

‎js/jquery.mobile.collapsible.js‎

Lines changed: 54 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,40 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
1313
collapsed: true,
1414
heading: ">:header,>legend",
1515
theme: null,
16+
contentTheme: null,
1617
iconTheme: "d",
1718
initSelector: ":jqmData(role='collapsible')"
1819
},
1920
_create: function() {
2021

2122
var $el = this.element,
2223
o = this.options,
23-
expandedCls = "ui-btn-up-" + (o.theme || "c"),
2424
collapsible = $el.addClass( "ui-collapsible" ),
2525
collapsibleHeading = $el.find( o.heading ).eq( 0 ),
2626
collapsibleContent = collapsible.wrapInner( "<div class='ui-collapsible-content'></div>" ).find( ".ui-collapsible-content" ),
27-
collapsibleParent = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" );
27+
collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" ),
28+
colllapsiblesInSet = collapsibleSet.children( ":jqmData(role='collapsible')" );
2829

2930
// Replace collapsibleHeading if it's a legend
3031
if ( collapsibleHeading.is( "legend" ) ) {
3132
collapsibleHeading = $( "<div role='heading'>"+ collapsibleHeading.html() +"</div>" ).insertBefore( collapsibleHeading );
3233
collapsibleHeading.next().remove();
3334
}
3435

36+
// If we are in a collapsible set
37+
if ( collapsibleSet.length ) {
38+
// Inherit the theme from collapsible-set
39+
if ( !o.theme ) {
40+
o.theme = collapsibleSet.jqmData( "theme" );
41+
}
42+
// Inherit the content-theme from collapsible-set
43+
if ( !o.contentTheme ) {
44+
o.contentTheme = collapsibleSet.jqmData( "content-theme" );
45+
}
46+
}
47+
48+
collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-btn-up-" + o.contentTheme ) : "");
49+
3550
collapsibleHeading
3651
//drop heading in before content
3752
.insertBefore( collapsibleContent )
@@ -47,21 +62,43 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
4762
icon: "plus",
4863
theme: o.theme
4964
})
50-
.find( ".ui-icon" )
51-
.removeAttr( "class" )
52-
.buttonMarkup({
53-
shadow: true,
54-
corners: true,
55-
iconPos: "notext",
56-
icon: "plus",
57-
theme: o.iconTheme
58-
});
5965

60-
if ( !collapsibleParent.length ) {
66+
if ( !collapsibleSet.length ) {
6167
collapsibleHeading
6268
.find( "a:eq(0), .ui-btn-inner" )
6369
.addClass( "ui-corner-top ui-corner-bottom" );
6470
} else {
71+
// If we are in a collapsible set
72+
73+
// Initialize the collapsible set if it's not already initialized
74+
if ( !collapsibleSet.jqmData( "collapsiblebound" ) ) {
75+
76+
collapsibleSet
77+
.jqmData( "collapsiblebound", true )
78+
.bind( "expand", function( event ) {
79+
80+
$( event.target )
81+
.closest( ".ui-collapsible" )
82+
.siblings( ".ui-collapsible" )
83+
.trigger( "collapse" );
84+
85+
});
86+
}
87+
88+
colllapsiblesInSet.first()
89+
.find( "a:eq(0)" )
90+
.addClass( "ui-corner-top" )
91+
.find( ".ui-btn-inner" )
92+
.addClass( "ui-corner-top" );
93+
94+
colllapsiblesInSet.last()
95+
.jqmData( "collapsible-last", true )
96+
.find( "a:eq(0)" )
97+
.addClass( "ui-corner-bottom" )
98+
.find( ".ui-btn-inner" )
99+
.addClass( "ui-corner-bottom" );
100+
101+
65102
if ( collapsible.jqmData( "collapsible-last" ) ) {
66103
collapsibleHeading
67104
.find( "a:eq(0), .ui-btn-inner" )
@@ -76,7 +113,9 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
76113

77114
event.preventDefault();
78115

79-
var isCollapse = ( event.type === "collapse" );
116+
var $this = $( this ),
117+
isCollapse = ( event.type === "collapse" ),
118+
contentTheme = o.contentTheme;
80119

81120
collapsibleHeading
82121
.toggleClass( "ui-collapsible-heading-collapsed", isCollapse)
@@ -87,11 +126,10 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
87126
.toggleClass( "ui-icon-minus", !isCollapse )
88127
.toggleClass( "ui-icon-plus", isCollapse );
89128

90-
collapsible.toggleClass( "ui-collapsible-collapsed", isCollapse );
129+
$this.toggleClass( "ui-collapsible-collapsed", isCollapse );
91130
collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
92-
collapsibleContent.toggleClass( expandedCls, !isCollapse );
93131

94-
if ( !collapsibleParent.length || collapsible.jqmData( "collapsible-last" ) ) {
132+
if ( contentTheme && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) {
95133
collapsibleHeading
96134
.find( "a:eq(0), .ui-btn-inner" )
97135
.toggleClass( "ui-corner-bottom", isCollapse );
@@ -101,36 +139,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
101139
})
102140
.trigger( o.collapsed ? "collapse" : "expand" );
103141

104-
// Close others in a set
105-
if ( collapsibleParent.length && !collapsibleParent.jqmData( "collapsiblebound" ) ) {
106-
107-
collapsibleParent
108-
.jqmData( "collapsiblebound", true )
109-
.bind( "expand", function( event ) {
110-
111-
$( event.target )
112-
.closest( ".ui-collapsible" )
113-
.siblings( ".ui-collapsible" )
114-
.trigger( "collapse" );
115-
116-
});
117-
118-
var set = collapsibleParent.children( ":jqmData(role='collapsible')" );
119-
120-
set.first()
121-
.find( "a:eq(0)" )
122-
.addClass( "ui-corner-top" )
123-
.find( ".ui-btn-inner" )
124-
.addClass( "ui-corner-top" );
125-
126-
set.last()
127-
.jqmData( "collapsible-last", true )
128-
.find( "a:eq(0)" )
129-
.addClass( "ui-corner-bottom" )
130-
.find( ".ui-btn-inner" )
131-
.addClass( "ui-corner-bottom" );
132-
}
133-
134142
collapsibleHeading
135143
.bind( "vclick", function( event ) {
136144

‎tests/unit/collapsible/collapsible_core.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,5 +116,50 @@
116116
]);
117117
});
118118

119+
module( "Theming", {});
120+
121+
asyncTest( "Collapsible", 6, function(){
122+
$.testHelper.pageSequence([
123+
function(){
124+
$.testHelper.openPage( "#collapsible-with-theming" );
125+
},
126+
127+
function() {
128+
var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
129+
ok( collapsibles.eq(0).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-a" ), "Heading of first collapsible should have class ui-btn-up-a");
130+
ok( !collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-a" ), "Content of first collapsible should NOT have class ui-btn-up-a");
131+
ok( collapsibles.eq(1).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-b" ), "Heading of second collapsible should have class ui-btn-up-b");
132+
ok( collapsibles.eq(1).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-b" ), "Content of second collapsible should have class ui-btn-up-b");
133+
ok( collapsibles.eq(2).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-c" ), "Heading of third collapsible should have class ui-btn-up-c");
134+
ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-c" ), "Content of third collapsible should have class ui-btn-up-c");
135+
start();
136+
}
137+
]);
138+
});
139+
140+
141+
asyncTest( "Collapsible Set", function(){
142+
$.testHelper.pageSequence([
143+
function(){
144+
$.testHelper.openPage( "#collapsible-set-with-theming" );
145+
},
146+
147+
function() {
148+
var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
149+
ok( collapsibles.eq(0).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-a" ), "Heading of first collapsible should have class ui-btn-up-a");
150+
ok( !collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-a" ), "Content of first collapsible should NOT have class ui-btn-up-a");
151+
ok( collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-d" ), "Content of first collapsible should NOT have class ui-btn-up-d");
152+
ok( collapsibles.eq(1).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-b" ), "Heading of second collapsible should have class ui-btn-up-b");
153+
ok( collapsibles.eq(1).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-b" ), "Content of second collapsible should have class ui-btn-up-b");
154+
ok( collapsibles.eq(2).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-d" ), "Heading of third collapsible should have class ui-btn-up-d");
155+
ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-d" ), "Content of third collapsible should have class ui-btn-up-d");
156+
ok( !collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-collapsible-content-collapsed" ), "Content of third collapsible should NOT have class ui-collapsible-content-collapsed");
157+
ok( collapsibles.eq(3).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-d" ), "Heading of fourth collapsible should have class ui-btn-up-d");
158+
ok( collapsibles.eq(3).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-d" ), "Content of fourth collapsible should have class ui-btn-up-d");
159+
start();
160+
}
161+
]);
162+
});
163+
119164

120165
})( jQuery );

0 commit comments

Comments
 (0)