From 23125066bcdfc56be81bb66fd9204f450fc95e2c Mon Sep 17 00:00:00 2001 From: Kangsik Kim Date: Fri, 8 Nov 2013 17:22:01 +0900 Subject: [PATCH 1/2] Collapsible: fix the bug about collapsedIcon Closes gh-6708 Fixes gh-7089 --- js/widgets/collapsible.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/js/widgets/collapsible.js b/js/widgets/collapsible.js index 933edbf8827..08d5588799e 100644 --- a/js/widgets/collapsible.js +++ b/js/widgets/collapsible.js @@ -201,8 +201,11 @@ $.widget( "mobile.collapsible", { if ( currentOpts.collapsedIcon ) { anchor.removeClass( "ui-icon-" + currentOpts.collapsedIcon ); } - if ( opts.collapsedIcon ) { - anchor.addClass( "ui-icon-" + opts.collapsedIcon ); + if ( /false/i.test( opts.collapsedIcon ) ) { + anchor.removeClass( "ui-btn-icon-" + ( currentOpts.iconPos === "right" ? "right" : "left" ) ); + } else { + anchor.addClass( "ui-icon-" + opts.collapsedIcon ) + .toggleClass( "ui-btn-icon-" + ( currentOpts.iconPos === "right" ? "right" : "left" ), true ); } } } else { From 6f4a15bca818aff797915547c88f18f556003639 Mon Sep 17 00:00:00 2001 From: Gabriel Schulhof Date: Fri, 7 Feb 2014 01:21:35 +0200 Subject: [PATCH 2/2] Collapsible: Handle icon-related option setting uniformly This adds tests for Closes gh-7081 --- js/widgets/collapsible.js | 72 ++++++++++++------- .../collapsible/collapsible_core.js | 23 ++++++ tests/integration/collapsible/index.html | 8 +++ 3 files changed, 77 insertions(+), 26 deletions(-) diff --git a/js/widgets/collapsible.js b/js/widgets/collapsible.js index 08d5588799e..cc5d6201b58 100644 --- a/js/widgets/collapsible.js +++ b/js/widgets/collapsible.js @@ -174,7 +174,7 @@ $.widget( "mobile.collapsible", { }, _applyOptions: function( options ) { - var isCollapsed, newTheme, oldTheme, hasCorners, + var isCollapsed, newTheme, oldTheme, hasCorners, hasIcon, elem = this.element, currentOpts = this._renderedOptions, ui = this._ui, @@ -191,41 +191,61 @@ $.widget( "mobile.collapsible", { isCollapsed = elem.hasClass( "ui-collapsible-collapsed" ); - // Only options referring to the current state need to be applied right away - // It is enough to store options covering the alternate in this.options. + // We only need to apply the cue text for the current state right away. + // The cue text for the alternate state will be stored in the options + // and applied the next time the collapsible's state is toggled if ( isCollapsed ) { if ( opts.expandCueText !== undefined ) { status.text( opts.expandCueText ); } - if ( opts.collapsedIcon !== undefined ) { - if ( currentOpts.collapsedIcon ) { - anchor.removeClass( "ui-icon-" + currentOpts.collapsedIcon ); - } - if ( /false/i.test( opts.collapsedIcon ) ) { - anchor.removeClass( "ui-btn-icon-" + ( currentOpts.iconPos === "right" ? "right" : "left" ) ); - } else { - anchor.addClass( "ui-icon-" + opts.collapsedIcon ) - .toggleClass( "ui-btn-icon-" + ( currentOpts.iconPos === "right" ? "right" : "left" ), true ); - } - } } else { if ( opts.collapseCueText !== undefined ) { status.text( opts.collapseCueText ); } - if ( opts.expandedIcon !== undefined ) { - if ( currentOpts.expandedIcon ) { - anchor.removeClass( "ui-icon-" + currentOpts.expandedIcon ); - } - if ( opts.expandedIcon ) { - anchor.addClass( "ui-icon-" + opts.expandedIcon ); - } - } } - if ( opts.iconpos !== undefined ) { - anchor - .removeClass( iconposClass( currentOpts.iconpos ) ) - .addClass( iconposClass( opts.iconpos ) ); + // Update icon + + // Is it supposed to have an icon? + hasIcon = + + // If the collapsedIcon is being set, consult that + ( opts.collapsedIcon !== undefined ? opts.collapsedIcon !== false : + + // Otherwise consult the existing option value + currentOpts.collapsedIcon !== false ); + + + // If any icon-related options have changed, make sure the new icon + // state is reflected by first removing all icon-related classes + // reflecting the current state and then adding all icon-related + // classes for the new state + if ( !( opts.iconpos === undefined && + opts.collapsedIcon === undefined && + opts.expandedIcon === undefined ) ) { + + // Remove all current icon-related classes + anchor.removeClass( [ iconposClass( currentOpts.iconpos ) ] + .concat( ( currentOpts.expandedIcon ? + [ "ui-icon-" + currentOpts.expandedIcon ] : [] ) ) + .concat( ( currentOpts.collapsedIcon ? + [ "ui-icon-" + currentOpts.collapsedIcon ] : [] ) ) + .join( " " ) ); + + // Add new classes if an icon is supposed to be present + if ( hasIcon ) { + anchor.addClass( + [ iconposClass( opts.iconpos !== undefined ? + opts.iconpos : currentOpts.iconpos ) ] + .concat( isCollapsed ? + [ "ui-icon-" + ( opts.collapsedIcon !== undefined ? + opts.collapsedIcon : + currentOpts.collapsedIcon ) ] : + [ "ui-icon-" + ( opts.expandedIcon !== undefined ? + opts.expandedIcon : + currentOpts.expandedIcon ) ] ) + .join( " " ) ); + } } if ( opts.theme !== undefined ) { diff --git a/tests/integration/collapsible/collapsible_core.js b/tests/integration/collapsible/collapsible_core.js index 7d1b65c3998..05c6d68a0f2 100644 --- a/tests/integration/collapsible/collapsible_core.js +++ b/tests/integration/collapsible/collapsible_core.js @@ -210,6 +210,29 @@ module( "Icons", {}); + test( "expandedIcon behavior when collapsedIcon set to false", function() { + var collapsible = $( "#collapsible-collapsed-icon-false-expanded-icon" ); + collapsible.collapsible( "expand" ); + collapsible.collapsible( "option", "collapsedIcon", false ); + deepEqual( collapsible.find( "a" ).hasClass( "ui-icon-minus" ), + false, "Turning off collapsedIcon makes expanded icon disappear" ); + deepEqual( collapsible.find( "a" ).hasClass( "ui-btn-icon-left" ), + false, "Turning off collapsedIcon makes iconpos class disappear" ); + collapsible.collapsible( "option", "collapsedIcon", "plus" ); + deepEqual( collapsible.find( "a" ).hasClass( "ui-icon-minus" ), + true, "Turning on collapsedIcon makes expanded icon reappear" ); + deepEqual( collapsible.find( "a" ).hasClass( "ui-btn-icon-left" ), + true, "Turning on collapsedIcon makes iconpos class reappear" ); + }); + + test( "iconpos behavior when collapsedIcon set to false", function() { + var collapsible = $( "#collapsible-collapsed-icon-false-iconpos" ); + collapsible.collapsible( "option", "collapsedIcon", false ); + collapsible.collapsible( "option", "iconpos", "top" ); + deepEqual( collapsible.find( "a" ).hasClass( "ui-btn-icon-top" ), + false, "Setting iconpos while collapsedIcon is off has no effect" ); + }); + test( "Collapsible with custom icons", function(){ var collapsibles = $( "#collapsible-with-custom-icons" ).find( ".ui-collapsible" ); diff --git a/tests/integration/collapsible/index.html b/tests/integration/collapsible/index.html index 050630f1a20..da9e16b7073 100644 --- a/tests/integration/collapsible/index.html +++ b/tests/integration/collapsible/index.html @@ -36,6 +36,14 @@
+
+

Header

+

Contents

+
+
+

Header

+

Contents

+

Header

Contents