Permalink
Browse files

Merge branch 'collapsible-redesign'

  • Loading branch information...
2 parents e81e3b1 + 16c34ce commit 5bd72c7b9638f8522f18ad2ffee9f19980ef141e @gseguin gseguin committed Sep 25, 2011
@@ -72,6 +72,25 @@
</div>
</div>
+
+ <p>Here is an example of a collapsible with 3 sections and <code>data-content-theme</code> set</p>
+
+ <div data-role="collapsible-set" data-content-theme="c">
+ <div data-role="collapsible" data-collapsed="false">
+ <h3>Section F</h3>
+ <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>
+ </div>
+ <div data-role="collapsible">
+ <h3>Section G</h3>
+ <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>
+
+ </div>
+ <div data-role="collapsible">
+ <h3>Section H</h3>
+ <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>
+
+ </div>
+ </div>
</div><!--/content-primary -->
@@ -25,7 +25,9 @@
<h2>Collapsible content markup</h2>
<p>To create a collapsible blocks of content, create a container and add the <code> data-role="collapsible"</code> attribute.</p>
-
+
+ <p>Using <code>data-content-theme</code> attribute allows you to set a theme for the content of the collapsible.</p>
+
<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>
<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 @@
<h2>Collapsible example</h2>
<p>This page has 4 collapsible containers with different types of content inside.</p>
- <div data-role="collapsible" data-collapsed="true">
+ <div data-role="collapsible">
<h3>Section 1: Collapsed text block</h3>
- <p>I'm closed when the page loads because I have the <code>data-collapsed="true"</code> attribute on my container. </p>
+ <p>I'm closed when the page loads because that's the default state of a collapsible.</p>
<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>
</div><!-- /section 1 -->
@@ -106,6 +108,11 @@
<li><a href="index.html">Ford</a></li>
</ul>
</div><!-- /section 4 -->
+
+ <div data-role="collapsible" data-theme="c" data-content-theme="c">
+ <h3>Section 5: themed content</h3>
+ <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>
+ </div><!-- /section 5 -->
<h2>Nested Collapsibles</h2>
<div data-role="collapsible">
@@ -24,10 +24,12 @@
<div class="content-primary">
<h2>Theming the content area</h2>
<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>
-
+ <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>
+
<code>
-&lt;div data-role=&quot;page&quot; <strong> data-theme=&quot;a&quot;</strong>&gt;
-</code>
+&lt;div data-role=&quot;page&quot; <strong> data-theme=&quot;a&quot;</strong> <strong>data-content-theme=&quot;a&quot;</strong>&gt;
+</code>
+
<h2>Theming collapsible blocks</h2>
<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>
@@ -44,6 +46,10 @@
<h3>I'm an themed collapsible</h3>
<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>
</div><!-- /collapsible -->
+ <div data-role="collapsible" data-theme="a" data-content-theme="a">
+ <h3>I'm a themed collapsible with a themed content</h3>
+ <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>
+ </div>
</div><!-- /themed container -->
<p><strong>B</strong> theme swatch on content &amp; collapsible</p>
@@ -54,6 +60,10 @@
<h3>I'm an themed collapsible</h3>
<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>
</div><!-- /collapsible -->
+ <div data-role="collapsible" data-theme="b" data-content-theme="b">
+ <h3>I'm a themed collapsible with a themed content</h3>
+ <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>
+ </div>
</div><!-- /themed container -->
<p><strong>C</strong> theme swatch on content &amp; collapsible</p>
@@ -64,6 +74,10 @@
<h3>I'm an themed collapsible</h3>
<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>
</div><!-- /collapsible -->
+ <div data-role="collapsible" data-theme="c" data-content-theme="c">
+ <h3>I'm a themed collapsible with a themed content</h3>
+ <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>
+ </div>
</div><!-- /themed container -->
<p><strong>D</strong> theme swatch on content &amp; collapsible</p>
@@ -74,6 +88,10 @@
<h3>I'm an themed collapsible</h3>
<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>
</div><!-- /collapsible -->
+ <div data-role="collapsible" data-theme="d" data-content-theme="d">
+ <h3>I'm a themed collapsible with a themed content</h3>
+ <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>
+ </div>
</div><!-- /themed container -->
<p><strong>E</strong> theme swatch on content &amp; collapsible</p>
@@ -84,6 +102,10 @@
<h3>I'm an themed collapsible</h3>
<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>
</div><!-- /collapsible -->
+ <div data-role="collapsible" data-theme="e" data-content-theme="e">
+ <h3>I'm a themed collapsible with a themed content</h3>
+ <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>
+ </div>
</div><!-- /themed container -->
@@ -13,25 +13,40 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
collapsed: true,
heading: ">:header,>legend",
theme: null,
+ contentTheme: null,
iconTheme: "d",
initSelector: ":jqmData(role='collapsible')"
},
_create: function() {
var $el = this.element,
o = this.options,
- expandedCls = "ui-btn-up-" + (o.theme || "c"),
collapsible = $el.addClass( "ui-collapsible" ),
collapsibleHeading = $el.find( o.heading ).eq( 0 ),
collapsibleContent = collapsible.wrapInner( "<div class='ui-collapsible-content'></div>" ).find( ".ui-collapsible-content" ),
- collapsibleParent = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" );
+ collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" ),
+ colllapsiblesInSet = collapsibleSet.children( ":jqmData(role='collapsible')" );
// Replace collapsibleHeading if it's a legend
if ( collapsibleHeading.is( "legend" ) ) {
collapsibleHeading = $( "<div role='heading'>"+ collapsibleHeading.html() +"</div>" ).insertBefore( collapsibleHeading );
collapsibleHeading.next().remove();
}
+ // If we are in a collapsible set
+ if ( collapsibleSet.length ) {
+ // Inherit the theme from collapsible-set
+ if ( !o.theme ) {
+ o.theme = collapsibleSet.jqmData( "theme" );
+ }
+ // Inherit the content-theme from collapsible-set
+ if ( !o.contentTheme ) {
+ o.contentTheme = collapsibleSet.jqmData( "content-theme" );
+ }
+ }
+
+ collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-btn-up-" + o.contentTheme ) : "");
+
collapsibleHeading
//drop heading in before content
.insertBefore( collapsibleContent )
@@ -47,21 +62,43 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
icon: "plus",
theme: o.theme
})
- .find( ".ui-icon" )
- .removeAttr( "class" )
- .buttonMarkup({
- shadow: true,
- corners: true,
- iconPos: "notext",
- icon: "plus",
- theme: o.iconTheme
- });
- if ( !collapsibleParent.length ) {
+ if ( !collapsibleSet.length ) {
collapsibleHeading
.find( "a:eq(0), .ui-btn-inner" )
.addClass( "ui-corner-top ui-corner-bottom" );
} else {
+ // If we are in a collapsible set
+
+ // Initialize the collapsible set if it's not already initialized
+ if ( !collapsibleSet.jqmData( "collapsiblebound" ) ) {
+
+ collapsibleSet
+ .jqmData( "collapsiblebound", true )
+ .bind( "expand", function( event ) {
+
+ $( event.target )
+ .closest( ".ui-collapsible" )
+ .siblings( ".ui-collapsible" )
+ .trigger( "collapse" );
+
+ });
+ }
+
+ colllapsiblesInSet.first()
+ .find( "a:eq(0)" )
+ .addClass( "ui-corner-top" )
+ .find( ".ui-btn-inner" )
+ .addClass( "ui-corner-top" );
+
+ colllapsiblesInSet.last()
+ .jqmData( "collapsible-last", true )
+ .find( "a:eq(0)" )
+ .addClass( "ui-corner-bottom" )
+ .find( ".ui-btn-inner" )
+ .addClass( "ui-corner-bottom" );
+
+
if ( collapsible.jqmData( "collapsible-last" ) ) {
collapsibleHeading
.find( "a:eq(0), .ui-btn-inner" )
@@ -76,7 +113,9 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
event.preventDefault();
- var isCollapse = ( event.type === "collapse" );
+ var $this = $( this ),
+ isCollapse = ( event.type === "collapse" ),
+ contentTheme = o.contentTheme;
collapsibleHeading
.toggleClass( "ui-collapsible-heading-collapsed", isCollapse)
@@ -87,11 +126,10 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
.toggleClass( "ui-icon-minus", !isCollapse )
.toggleClass( "ui-icon-plus", isCollapse );
- collapsible.toggleClass( "ui-collapsible-collapsed", isCollapse );
+ $this.toggleClass( "ui-collapsible-collapsed", isCollapse );
collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
- collapsibleContent.toggleClass( expandedCls, !isCollapse );
- if ( !collapsibleParent.length || collapsible.jqmData( "collapsible-last" ) ) {
+ if ( contentTheme && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) {
collapsibleHeading
.find( "a:eq(0), .ui-btn-inner" )
.toggleClass( "ui-corner-bottom", isCollapse );
@@ -101,36 +139,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
})
.trigger( o.collapsed ? "collapse" : "expand" );
- // Close others in a set
- if ( collapsibleParent.length && !collapsibleParent.jqmData( "collapsiblebound" ) ) {
-
- collapsibleParent
- .jqmData( "collapsiblebound", true )
- .bind( "expand", function( event ) {
-
- $( event.target )
- .closest( ".ui-collapsible" )
- .siblings( ".ui-collapsible" )
- .trigger( "collapse" );
-
- });
-
- var set = collapsibleParent.children( ":jqmData(role='collapsible')" );
-
- set.first()
- .find( "a:eq(0)" )
- .addClass( "ui-corner-top" )
- .find( ".ui-btn-inner" )
- .addClass( "ui-corner-top" );
-
- set.last()
- .jqmData( "collapsible-last", true )
- .find( "a:eq(0)" )
- .addClass( "ui-corner-bottom" )
- .find( ".ui-btn-inner" )
- .addClass( "ui-corner-bottom" );
- }
-
collapsibleHeading
.bind( "vclick", function( event ) {
@@ -116,5 +116,50 @@
]);
});
+ module( "Theming", {});
+
+ asyncTest( "Collapsible", 6, function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage( "#collapsible-with-theming" );
+ },
+
+ function() {
+ var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
+ 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");
+ 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");
+ 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");
+ ok( collapsibles.eq(1).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-b" ), "Content of second collapsible should have class ui-btn-up-b");
+ 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");
+ ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-c" ), "Content of third collapsible should have class ui-btn-up-c");
+ start();
+ }
+ ]);
+ });
+
+
+ asyncTest( "Collapsible Set", function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage( "#collapsible-set-with-theming" );
+ },
+
+ function() {
+ var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
+ 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");
+ 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");
+ 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");
+ 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");
+ ok( collapsibles.eq(1).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-b" ), "Content of second collapsible should have class ui-btn-up-b");
+ 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");
+ ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-d" ), "Content of third collapsible should have class ui-btn-up-d");
+ 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");
+ 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");
+ ok( collapsibles.eq(3).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-d" ), "Content of fourth collapsible should have class ui-btn-up-d");
+ start();
+ }
+ ]);
+ });
+
})( jQuery );
Oops, something went wrong.

0 comments on commit 5bd72c7

Please sign in to comment.