Permalink
Browse files

Fix for #1899

Added data-content-theme to style the content of the collapsible
data-theme and data-content-theme inherit collapsible-set's
  • Loading branch information...
1 parent fb06381 commit bdaa477f68e0f04345292616f23a8ca192a2b21d @gseguin gseguin committed Sep 25, 2011
Showing with 60 additions and 46 deletions.
  1. +60 −46 js/jquery.mobile.collapsible.js
@@ -13,6 +13,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
collapsed: true,
heading: ">:header,>legend",
theme: null,
+ contentTheme: null,
iconTheme: "d",
initSelector: ":jqmData(role='collapsible')"
},
@@ -23,47 +24,19 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
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();
}
- collapsibleHeading
- //drop heading in before content
- .insertBefore( collapsibleContent )
- //modify markup & attributes
- .addClass( "ui-collapsible-heading" )
- .append( "<span class='ui-collapsible-heading-status'></span>" )
- .wrapInner( "<a href='#' class='ui-collapsible-heading-toggle'></a>" )
- .find( "a:eq(0)" )
- .buttonMarkup({
- shadow: false,
- corners: false,
- iconPos: "left",
- icon: "plus",
- theme: o.theme
- })
-
- if ( !collapsibleParent.length ) {
- collapsibleHeading
- .find( "a:eq(0), .ui-btn-inner" )
- .addClass( "ui-corner-top ui-corner-bottom" );
- } else {
- if ( collapsible.jqmData( "collapsible-last" ) ) {
- collapsibleHeading
- .find( "a:eq(0), .ui-btn-inner" )
- .addClass( "ui-corner-bottom" );
- }
- }
-
// Close others in a set
- if ( collapsibleParent.length && !collapsibleParent.jqmData( "collapsiblebound" ) ) {
+ if ( collapsibleSet.length && !collapsibleSet.jqmData( "collapsiblebound" ) ) {
- collapsibleParent
- .jqmData( "collapsiblebound", true )
+ collapsibleSet
.bind( "expand", function( event ) {
$( event.target )
@@ -73,39 +46,83 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
});
- var set = collapsibleParent.children( ":jqmData(role='collapsible')" );
+ // 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" );
+ }
- set.each(function() {
+ colllapsiblesInSet.each(function() {
var $this = $( this );
+ if ( !$this.jqmData( "theme" ) ) {
+ $this.jqmData( "theme", collapsibleSet.jqmData( "theme" ) );
+ }
if ( !$this.jqmData( "content-theme" ) ) {
- $this.jqmData( "content-theme", collapsibleParent.jqmData( "content-theme" ) );
+ $this.jqmData( "content-theme", collapsibleSet.jqmData( "content-theme" ) );
}
});
+ }
- set.first()
+ collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-btn-up-" + o.contentTheme ) : "");
+
+ collapsibleHeading
+ //drop heading in before content
+ .insertBefore( collapsibleContent )
+ //modify markup & attributes
+ .addClass( "ui-collapsible-heading" )
+ .append( "<span class='ui-collapsible-heading-status'></span>" )
+ .wrapInner( "<a href='#' class='ui-collapsible-heading-toggle'></a>" )
+ .find( "a:eq(0)" )
+ .buttonMarkup({
+ shadow: false,
+ corners: false,
+ iconPos: "left",
+ icon: "plus",
+ theme: o.theme
+ })
+
+ if ( collapsibleSet.length && !collapsibleSet.jqmData( "collapsiblebound" ) ) {
+ collapsibleSet.jqmData( "collapsiblebound", true );
+
+ colllapsiblesInSet.first()
.find( "a:eq(0)" )
.addClass( "ui-corner-top" )
.find( ".ui-btn-inner" )
.addClass( "ui-corner-top" );
- set.last()
+ colllapsiblesInSet.last()
.jqmData( "collapsible-last", true )
.find( "a:eq(0)" )
.addClass( "ui-corner-bottom" )
.find( ".ui-btn-inner" )
.addClass( "ui-corner-bottom" );
}
-
+
+ if ( !collapsibleSet.length ) {
+ collapsibleHeading
+ .find( "a:eq(0), .ui-btn-inner" )
+ .addClass( "ui-corner-top ui-corner-bottom" );
+ } else {
+ if ( collapsible.jqmData( "collapsible-last" ) ) {
+ collapsibleHeading
+ .find( "a:eq(0), .ui-btn-inner" )
+ .addClass( "ui-corner-bottom" );
+ }
+ }
+
//events
collapsible
.bind( "expand collapse", function( event ) {
if ( !event.isDefaultPrevented() ) {
event.preventDefault();
- var isCollapse = ( event.type === "collapse" ),
- contentTheme = collapsible.jqmData( "content-theme" ),
- expandedCls = ( contentTheme ) ? ( "ui-btn-up-" + contentTheme ) : "";
+ var $this = $( this ),
+ isCollapse = ( event.type === "collapse" ),
+ contentTheme = o.contentTheme;
collapsibleHeading
.toggleClass( "ui-collapsible-heading-collapsed", isCollapse)
@@ -116,13 +133,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 );
- if ( expandedCls ) {
- collapsibleContent.toggleClass( expandedCls, !isCollapse );
- }
- if ( contentTheme && ( !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 );

0 comments on commit bdaa477

Please sign in to comment.