| //>>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"); |