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...
gseguin committed Sep 25, 2011
1 parent fb06381 commit bdaa477f68e0f04345292616f23a8ca192a2b21d
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.