Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Commit

Permalink
Merge branch 'collapsible-redesign'
Browse files Browse the repository at this point in the history
  • Loading branch information
@gseguin
gseguin committed Sep 25, 2011
2 parents e81e3b1 + 16c34ce commit 5bd72c7
Show file tree
Hide file tree
Showing 6 changed files with 222 additions and 52 deletions.
19 changes: 19 additions & 0 deletions docs/content/content-collapsible-set.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,25 @@ <h3>Section E</h3>

</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 -->

Expand Down
13 changes: 10 additions & 3 deletions docs/content/content-collapsible.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,9 @@ <h1>Collapsible content</h1>

<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>
Expand Down Expand Up @@ -63,9 +65,9 @@ <h3>I'm a header</h3>
<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 -->

Expand Down Expand Up @@ -106,6 +108,11 @@ <h3>Section 4: Collapsed list</h3>
<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">
Expand Down
28 changes: 25 additions & 3 deletions docs/content/content-themes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,12 @@ <h1>Theming content</h1>
<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>

Expand All @@ -44,6 +46,10 @@ <h1>H1 Heading</h1>
<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>
Expand All @@ -54,6 +60,10 @@ <h1>H1 Heading</h1>
<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>
Expand All @@ -64,6 +74,10 @@ <h1>H1 Heading</h1>
<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>
Expand All @@ -74,6 +88,10 @@ <h1>H1 Heading</h1>
<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>
Expand All @@ -84,6 +102,10 @@ <h1>H1 Heading</h1>
<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 -->


Expand Down
100 changes: 54 additions & 46 deletions js/jquery.mobile.collapsible.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 )
Expand All @@ -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" )
Expand All @@ -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)
Expand All @@ -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 );
Expand All @@ -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 ) {

Expand Down
45 changes: 45 additions & 0 deletions tests/unit/collapsible/collapsible_core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Loading

0 comments on commit 5bd72c7

Please sign in to comment.