Showing with 113 additions and 19 deletions.
  1. +17 −19 js/widgets/collapsible.js
  2. +79 −0 tests/integration/collapsible/collapsible_core.js
  3. +17 −0 tests/integration/collapsible/index.html
36 js/widgets/collapsible.js
View file
@@ -42,14 +42,13 @@ $.widget( "mobile.collapsible", {
var elem = this.element,
ui = {
accordion: elem
.closest( ":jqmData(role='collapsible-set')" +
.closest( ":jqmData(role='collapsible-set'),:jqmData(role='collapsibleset')" +
( $.mobile.collapsibleset ? ", :mobile-collapsibleset" : "" ) )
.addClass( "ui-collapsible-set" )
};

$.extend( this, {
_ui: ui
});
this._ui = ui;
this._renderedOptions = this._getOptions( this.options );

if ( this.options.enhanced ) {
ui.heading = $( ".ui-collapsible-heading", this.element[ 0 ] );
@@ -113,7 +112,7 @@ $.widget( "mobile.collapsible", {

_enhance: function( elem, ui ) {
var iconclass,
opts = this._getOptions( this.options ),
opts = this._renderedOptions,
contentThemeClass = this._themeClassFromOption( "ui-body-", opts.contentTheme );

elem.addClass( "ui-collapsible " +
@@ -164,19 +163,14 @@ $.widget( "mobile.collapsible", {
},

refresh: function() {
var key, options = {};

for ( key in $.mobile.collapsible.defaults ) {
options[ key ] = this.options[ key ];
}

this._setOptions( options );
this._applyOptions( this.options );
this._renderedOptions = this._getOptions( this.options );
},

_setOptions: function( options ) {
_applyOptions: function( options ) {
var isCollapsed, newTheme, oldTheme, hasCorners,
elem = this.element,
currentOpts = this._getOptions( this.options ),
currentOpts = this._renderedOptions,
ui = this._ui,
anchor = ui.anchor,
status = ui.status,
@@ -220,8 +214,8 @@ $.widget( "mobile.collapsible", {
}

if ( opts.iconpos !== undefined ) {
anchor.removeClass( "ui-btn-icon-" + ( currentOpts.iconPos === "right" ? "right" : "left" ) );
anchor.addClass( "ui-btn-icon-" + ( opts.iconPos === "right" ? "right" : "left" ) );
anchor.removeClass( "ui-btn-icon-" + ( currentOpts.iconpos === "right" ? "right" : "left" ) );
anchor.addClass( "ui-btn-icon-" + ( opts.iconpos === "right" ? "right" : "left" ) );
}

if ( opts.theme !== undefined ) {
@@ -231,8 +225,8 @@ $.widget( "mobile.collapsible", {
}

if ( opts.contentTheme !== undefined ) {
oldTheme = this._themeClassFromOption( "ui-body-", currentOpts.theme );
newTheme = this._themeClassFromOption( "ui-body-", opts.theme );
oldTheme = this._themeClassFromOption( "ui-body-", currentOpts.contentTheme );
newTheme = this._themeClassFromOption( "ui-body-", opts.contentTheme );
ui.content.removeClass( oldTheme ).addClass( newTheme );
}

@@ -252,12 +246,16 @@ $.widget( "mobile.collapsible", {
if ( opts.mini !== undefined ) {
anchor.toggleClass( "ui-mini", opts.mini );
}
},

_setOptions: function( options ) {
this._applyOptions( options );
this._super( options );
this._renderedOptions = this._getOptions( this.options );
},

_handleExpandCollapse: function( isCollapse ) {
var opts = this._getOptions( this.options ),
var opts = this._renderedOptions,
ui = this._ui;

ui.status.text( isCollapse ? opts.expandCueText : opts.collapseCueText );
79 tests/integration/collapsible/collapsible_core.js
View file
@@ -257,4 +257,83 @@
$inplace.collapsibleset().collapsibleset( "destroy" );
ok( $.testHelper.domEqual( $inplace, $orig ), "Collapsible set after instantiation and destruction is identical to a clone of the original." );
});

module( "Collapsible inherits options from parent collapsibleset" );
test( "theme", function() {
$( "#inherit-test" ).collapsibleset( "option", "theme", "b" );

deepEqual( $( "#inherits" ).collapsible( "option", "theme" ), null,
"Option not set on inheriting child collapsible" );
deepEqual( $( "#explicit" ).collapsible( "option", "theme" ), "a",
"Option not set on explicitly assigned child collapsible" );
deepEqual( $( "#inherits" ).find( "a" ).hasClass( "ui-btn-b" ), true,
"Inheriting collapsible has theme 'b'" );
deepEqual( $( "#explicit" ).find( "a" ).hasClass( "ui-btn-a" ), true,
"Explicitly assigned collapsible has theme 'a'" );
});
test( "contentTheme", function() {
$( "#inherit-test" ).collapsibleset( "option", "contentTheme", "b" );

deepEqual( $( "#inherits" ).collapsible( "option", "contentTheme" ),
null, "Option not set on inheriting child collapsible" );
deepEqual( $( "#explicit" ).collapsible( "option", "contentTheme" ),
"a", "Option not set on explicitly assigned child collapsible" );
deepEqual( $( "#inherits" ).children().last().hasClass( "ui-body-b" ),
true, "Inheriting collapsible has content theme 'b'" );
deepEqual( $( "#explicit" ).children().last().hasClass( "ui-body-a" ),
true, "Explicitly assigned collapsible has content theme 'a'" );
});
test( "collapsedIcon", function() {
$( "#inherit-test" ).collapsibleset( "option", "collapsedIcon",
"forward" );

deepEqual( $( "#inherits" ).collapsible( "option", "collapsedIcon" ),
null, "Option not set on inheriting child collapsible" );
deepEqual( $( "#explicit" ).collapsible( "option", "collapsedIcon" ),
"plus", "Option not set on explicitly assigned child collapsible" );
deepEqual( $( "#inherits" ).find( "a" ).hasClass( "ui-icon-forward" ),
true, "Inheriting collapsible has collapsedIcon 'forward'" );
deepEqual( $( "#explicit" ).find( "a" ).hasClass( "ui-icon-plus" ),
true, "Explicitly assigned collapsible has collapsedIcon 'plus'" );
});
test( "expandedIcon", function() {
$( "#inherit-test" ).collapsibleset( "option", "expandedIcon", "back" );

deepEqual( $( "#inherits" ).collapsible( "option", "expandedIcon" ),
null, "Option not set on inheriting child collapsible" );
deepEqual( $( "#explicit" ).collapsible( "option", "expandedIcon" ),
"minus",
"Option not set on explicitly assigned child collapsible" );
$( "#inherits" ).collapsible( "expand" );
deepEqual( $( "#inherits" ).find( "a" ).hasClass( "ui-icon-back" ),
true, "Inheriting collapsible has expandedIcon 'back'" );
$( "#explicit" ).collapsible( "expand" );
deepEqual( $( "#explicit" ).find( "a" ).hasClass( "ui-icon-minus" ),
true, "Explicitly assigned collapsible has expandedIcon 'minus'" );
});
test( "iconpos", function() {
$( "#inherit-test" ).collapsibleset( "option", "iconpos", "right" );

deepEqual( $( "#inherits" ).collapsible( "option", "iconpos" ),
null, "Option not set on inheriting child collapsible" );
deepEqual( $( "#explicit" ).collapsible( "option", "iconpos" ),
"left",
"Option not set on explicitly assigned child collapsible" );
deepEqual( $( "#inherits" ).find( "a" ).hasClass( "ui-btn-icon-right" ),
true, "Inheriting collapsible has iconpos 'right'" );
deepEqual( $( "#explicit" ).find( "a" ).hasClass( "ui-btn-icon-left" ),
true, "Explicitly assigned collapsible has iconpos 'left'" );
});
test( "mini", function() {
$( "#inherit-test" ).collapsibleset( "option", "mini", "true" );

deepEqual( $( "#inherits" ).collapsible( "option", "mini" ),
null, "Option not set on inheriting child collapsible" );
deepEqual( $( "#explicit" ).collapsible( "option", "mini" ), false,
"Option not set on explicitly assigned child collapsible" );
deepEqual( $( "#inherits" ).find( "a" ).hasClass( "ui-mini" ),
true, "Inheriting collapsible is mini" );
deepEqual( $( "#explicit" ).find( "a" ).hasClass( "ui-mini" ),
false, "Explicitly assigned collapsible is not mini" );
});
})( jQuery );
17 tests/integration/collapsible/index.html
View file
@@ -293,6 +293,23 @@ <h3>Section D</h3>
have the "collapsed" state; you need to expand the header to see me.</p>
</div>
</div>
<div data-nstest-role="collapsibleset" id="inherit-test">
<div data-nstest-role="collapsible" id="inherits">
<h4>Heading</h4>
<p>Contents</p>
</div>
<div data-nstest-role="collapsible"
id="explicit"
data-nstest-theme="a"
data-nstest-content-theme="a"
data-nstest-collapsed-icon="plus"
data-nstest-expanded-icon="minus"
data-nstest-iconpos="left"
data-nstest-mini="false">
<h4>Heading</h4>
<p>Contents</p>
</div>
</div>
<form id="destroy-test" data-nstest-theme="a" data-nstest-content-theme="b">
<div>
<h3>This is the heading</h3>