Permalink
Browse files

Collapsible: Correctly inherit options from set and fix iconpos handling

Fixes gh-7044
Fixes gh-7062
  • Loading branch information...
1 parent 92d58bd commit 24630f69c4c7b85879c5d8847f4de1fd66fa22de @gabrielschulhof gabrielschulhof committed Feb 1, 2014
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 @@
<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 @@ <h4 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
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.