blob: 687df6763b2ee39ea2eaaa33acf328bf9bc4ffc6 [file] [log] [blame]
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
//>>description: For creating grouped collapsible content areas.
//>>label: Collapsible Sets (Accordions)
//>>group: Widgets
//>>css.structure: ../css/structure/jquery.mobile.collapsible.css
//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
define( [ "jquery", "../jquery.mobile.widget", "./collapsible" ], function( jQuery ) {
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {
$.widget( "mobile.collapsibleset", $.mobile.widget, {
options: {
initSelector: ":jqmData(role='collapsible-set')"
},
_create: function() {
var $el = this.element.addClass( "ui-collapsible-set" ),
o = this.options;
// Inherit the theme from collapsible-set
if ( !o.theme ) {
o.theme = $.mobile.getInheritedTheme( $el, "c" );
}
// Inherit the content-theme from collapsible-set
if ( !o.contentTheme ) {
o.contentTheme = $.mobile.getAttrFixed( $el[0], "data-" + $.mobile.ns + "content-theme" );
}
if ( $.mobile.getAttrFixed( $el[0], "data-" + $.mobile.ns + "inset" ) !== undefined ) {
o.inset = $.mobile.getAttrFixed( $el[0], "data-" + $.mobile.ns + "inset" );
}
o.inset = o.inset !== undefined ? o.inset : true;
// Initialize the collapsible set if it's not already initialized
if ( !$el.jqmData( "collapsiblebound" ) ) {
$el
.jqmData( "collapsiblebound", true )
.bind( "expand collapse", function( event ) {
var isCollapse = ( event.type === "collapse" ),
collapsible = $( event.target ).closest( ".ui-collapsible" ),
widget = collapsible.data( "collapsible" );
if ( collapsible.jqmData( "collapsible-last" ) && !!o.inset ) {
collapsible.find( ".ui-collapsible-heading" ).first()
.find( "a" ).first()
.toggleClass( "ui-corner-bottom", isCollapse )
.find( ".ui-btn-inner" )
.toggleClass( "ui-corner-bottom", isCollapse );
collapsible.find( ".ui-collapsible-content" ).toggleClass( "ui-corner-bottom", !isCollapse );
}
})
.bind( "expand", function( event ) {
var closestCollapsible = $( event.target )
.closest( ".ui-collapsible" );
if ( closestCollapsible.parent().is( ":jqmData(role='collapsible-set')" ) ) {
closestCollapsible
.siblings( ".ui-collapsible" )
.trigger( "collapse" );
}
});
}
},
_init: function() {
var $el = this.element,
collapsiblesInSet = $el.children( ":jqmData(role='collapsible')" ),
expanded = collapsiblesInSet.filter( ":jqmData(collapsed='false')" );
this.refresh();
// Because the corners are handled by the collapsible itself and the default state is collapsed
// That was causing https://github.com/jquery/jquery-mobile/issues/4116
expanded.trigger( "expand" );
},
refresh: function() {
var $el = this.element,
o = this.options,
collapsiblesInSet = $el.children( ":jqmData(role='collapsible')" );
$.mobile.collapsible.prototype.enhance( collapsiblesInSet.not( ".ui-collapsible" ) );
// clean up borders
if ( !!o.inset ) {
collapsiblesInSet.each(function() {
$( this ).jqmRemoveData( "collapsible-last" )
.find( ".ui-collapsible-heading" )
.find( "a" ).first()
.removeClass( "ui-corner-top ui-corner-bottom" )
.find( ".ui-btn-inner" )
.removeClass( "ui-corner-top ui-corner-bottom" );
});
collapsiblesInSet.first()
.find( "a" )
.first()
.addClass( "ui-corner-top" )
.find( ".ui-btn-inner" )
.addClass( "ui-corner-top" );
collapsiblesInSet.last()
.jqmData( "collapsible-last", true )
.find( "a" )
.first()
.addClass( "ui-corner-bottom" )
.find( ".ui-btn-inner" )
.addClass( "ui-corner-bottom" );
}
}
});
//delegate auto self-init widgets
$.delegateSelfInitWithSingleSelector( $.mobile.collapsibleset );
})( jQuery );
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
});
//>>excludeEnd("jqmBuildExclude");