Permalink
Browse files

Collapsible: Correctly inherit options from set and fix iconpos handling

Fixes gh-7044
Fixes gh-7062
  • Loading branch information...
gabrielschulhof committed Feb 1, 2014
1 parent 92d58bd commit 24630f69c4c7b85879c5d8847f4de1fd66fa22de
View
@@ -19,7 +19,12 @@ define( [
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {
var rInitialLetter = /([A-Z])/g;
var rInitialLetter = /([A-Z])/g,
// Construct iconpos class from iconpos value
iconposClass = function( iconpos ) {
return ( "ui-btn-icon-" + ( iconpos === null ? "left" : iconpos ) );
};
$.widget( "mobile.collapsible", {
options: {
@@ -42,14 +47,15 @@ $.widget( "mobile.collapsible", {
var elem = this.element,
ui = {
accordion: elem
.closest( ":jqmData(role='collapsible-set')" +
( $.mobile.collapsibleset ? ", :mobile-collapsibleset" : "" ) )
.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 +119,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 " +
@@ -149,8 +155,7 @@ $.widget( "mobile.collapsible", {
.first()
.addClass( "ui-btn " +
( iconclass ? iconclass + " " : "" ) +
( iconclass ? ( "ui-btn-icon-" +
( opts.iconpos === "right" ? "right" : "left" ) ) +
( iconclass ? iconposClass( opts.iconpos ) +
" " : "" ) +
this._themeClassFromOption( "ui-btn-", opts.theme ) + " " +
( opts.mini ? "ui-mini " : "" ) );
@@ -164,19 +169,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 +220,9 @@ $.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( iconposClass( currentOpts.iconpos ) )
.addClass( iconposClass( opts.iconpos ) );
}
if ( opts.theme !== undefined ) {
@@ -231,8 +232,10 @@ $.widget( "mobile.collapsible", {
}
if ( opts.contentTheme !== undefined ) {
oldTheme = this._themeClassFromOption( "ui-body-", currentOpts.contentTheme );
newTheme = this._themeClassFromOption( "ui-body-", opts.contentTheme );
oldTheme = this._themeClassFromOption( "ui-body-",
currentOpts.contentTheme );
newTheme = this._themeClassFromOption( "ui-body-",
opts.contentTheme );
ui.content.removeClass( oldTheme ).addClass( newTheme );
}
@@ -252,12 +255,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 );
@@ -7,8 +7,14 @@
function testExpandCollapse( selector ) {
var collapsible = $( selector );
deepEqual( collapsible.hasClass( "ui-collapsible-collapsed" ), true, selector + " should be collapsed");
deepEqual( collapsible.find( "a span" ).text(),
$.mobile.collapsible.defaults.expandCueText,
"expand cue text should be set to default" );
$( selector + " >:header a" ).first().click();
deepEqual( collapsible.hasClass( "ui-collapsible-collapsed" ), false, selector + " should be expanded after click");
deepEqual( collapsible.find( "a span" ).text(),
$.mobile.collapsible.defaults.collapseCueText,
"collapse cue text should be set to default" );
collapsible.collapsible( "option", "expandedIcon", "arrow-up" );
deepEqual( $( selector + ">:header a" ).hasClass( "ui-icon-arrow-up" ), true, selector + " when expanded and after setting expanded icon to 'arrow-up' should have class ui-icon-arrow-up." );
@@ -70,6 +76,19 @@
testCornersAndInset( "#pre-rendered-collapsible", "collapsible" );
});
test( "iconpos option accepts arbitrary values", function() {
var collapsible = $( "#collapsible-iconpos-test" );
deepEqual( collapsible.find( "a" ).hasClass( "ui-btn-icon-xyzzy" ),
true, "Initially anchor has class ui-btn-icon-xyzzy" );
collapsible.collapsible( "option", "iconpos", "gnurbles" );
deepEqual( collapsible.find( "a" ).hasClass( "ui-btn-icon-xyzzy" ),
false, "After setting iconpos option anchor no longer has class " +
"ui-btn-icon-xyzzy" );
deepEqual( collapsible.find( "a" ).hasClass( "ui-btn-icon-gnurbles" ),
true, "After setting iconpos option anchor has class " +
"ui-btn-icon-gnurbles" );
});
module( "Collapsible set", {});
test( "The page should be enhanced correctly", function(){
@@ -257,4 +276,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 );
@@ -36,6 +36,10 @@
<div data-nstest-role="page">
<div data-nstest-role="content">
<div id="collapsible-iconpos-test" data-nstest-role="collapsible" data-nstest-iconpos="xyzzy">
<h4>Header</h4>
<p>Contents</p>
</div>
<div id="collapsed-collapsible" data-nstest-role="collapsible" data-nstest-expanded-icon="minus">
<h3>Section A</h3>
@@ -55,7 +59,7 @@ <h3>Section B</h3>
<h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-plus">
Heading
<div class="ui-collapsible-heading-status"> click to expand contents</div>
<span class="ui-collapsible-heading-status"> click to expand contents</span>
</a>
</h4>
<div class="ui-collapsible-content ui-collapsible-content-collapsed" aria-hidden="true">
@@ -293,6 +297,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>

0 comments on commit 24630f6

Please sign in to comment.