Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Custom collapsible icons #3821

Merged
merged 4 commits into from

4 participants

Jake Boone Mat Marquis Todd Parker Ghislain Seguin
Jake Boone

Adds the ability to change the icon used for collapsible headers through data-* attributes and prototype options. Also includes documentation and tests.

Mat Marquis

Code, documentation, and tests? This, sir, is how pull requests are done. Great work.

Jake Boone

Thanks! I'm new to qUnit and js testing in general so I thought this would be a good opportunity to get my feet wet.

Jake Boone

@toddparker, any chance this makes it into 1.1.1? I've got a use case and would rather not wait for 1.2 or custom build. Nothing critical but would be nice to have.

Todd Parker

This is a nice feature, but for a maintenance release I don't think we'd add a feature or change the API like this. I would like to add this for 1.2 for sure.

Ghislain Seguin gseguin merged commit 3713010 into from
Todd Parker

@jakeboone02 this is now in master and queued for 1.2 (thanks @gseguin). Excellent work here, really appreciate your work on this.

Jake Boone

Thanks! Glad to help.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
22 docs/content/content-collapsible-options.html
View
@@ -57,6 +57,17 @@
</code></pre>
</dd>
+ <dt><code>collapsedIcon</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "plus"</p>
+ <p>Sets the icon for the header of the collapsible container when in a collapsed state. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.collapsible.prototype.options.collapsedIcon = "arrow-r";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-collapsed-icon=&quot;arrow-r&quot;</code>.</p>
+ </dd>
+
<dt><code>contentTheme</code> <em>string</em></dt>
<dd>
<p class="default">default: null, inherited from parent</p>
@@ -78,6 +89,17 @@
</code></pre>
</dd>
+ <dt><code>expandedIcon</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "plus"</p>
+ <p>Sets the icon for the header of the collapsible container when in an expanded state. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.collapsible.prototype.options.expandedIcon = "arrow-r";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-expanded-icon=&quot;arrow-r&quot;</code>.</p>
+ </dd>
+
<dt><code>heading</code> <em>string</em></dt>
<dd>
<p class="default">default: "h1,h2,h3,h4,h5,h6,legend"</p>
22 docs/content/content-collapsible-set-options.html
View
@@ -36,6 +36,28 @@
<p>The collapsible plugin has the following options:</p>
<dl>
+ <dt><code>collapsedIcon</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "plus"</p>
+ <p>Sets the icon for the headers of the collapsible containers when in a collapsed state. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.collapsibleset.prototype.options.collapsedIcon = "arrow-r";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-collapsed-icon=&quot;arrow-r&quot;</code>.</p>
+ </dd>
+
+ <dt><code>expandedIcon</code> <em>string</em></dt>
+ <dd>
+ <p class="default">default: "plus"</p>
+ <p>Sets the icon for the headers of the collapsible containers when in an expanded state. To set the value for all instances of this widget, bind this option to the <a href="../../api/globalconfig.html">mobileinit event</a>:</p>
+<pre><code>$( document ).bind( "mobileinit", function(){
+ <strong>$.mobile.collapsibleset.prototype.options.expandedIcon = "arrow-r";</strong>
+});
+</code></pre>
+ <p>This option is also exposed as a data attribute: <code>data-expanded-icon=&quot;arrow-r&quot;</code>.</p>
+ </dd>
+
<dt><code>iconpos</code> <em>string</em></dt>
<dd>
<p class="default">default: "left"</p>
18 docs/content/content-collapsible-set.html
View
@@ -98,6 +98,24 @@
</div>
</div>
+ <h2>Custom icons</h2>
+ <p>Collapsible headings’ default icons can be overridden by using the <code>data-collapsed-icon</code> and <code>data-expanded-icon</code> attributes, either at the <code>collapsible-set</code> level or on an individual collapsible basis.</p>
+
+ <div data-role="collapsible-set" data-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
+ <div data-role="collapsible">
+ <h3>Section 1</h3>
+ <p>Collapsible content</p>
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 2</h3>
+ <p>Collapsible content</p>
+ </div>
+ <div data-role="collapsible">
+ <h3>Section 3</h3>
+ <p>Collapsible content</p>
+ </div>
+ </div>
+
<h2>Icon positioning</h2>
<p>Collapsible headings’ default icon positioing can be overridden by using the <code>data-iconpos</code> attribute, either at the <code>collapsible-set</code> level or on an individual collapsible basis.</p>
8 docs/content/content-collapsible.html
View
@@ -84,6 +84,14 @@
<p>I'm the collapsible content. I'm expanded by default because I have the "collapsed" state set to false.</p>
</div>
+ <h2>Custom icons</h2>
+ <p>Collapsible headings’ default icons can be overridden by using the <code>data-collapsed-icon</code> and <code>data-expanded-icon</code> attributes. In the below case, <code>data-collapsed-icon="arrow-r"</code> and <code>data-expanded-icon="arrow-d"</code>.</p>
+
+ <div data-role="collapsible" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
+ <h3>I have custom icons</h3>
+ <p><code>data-collapsed-icon="arrow-r"</code> and <code>data-expanded-icon="arrow-d"</code></p>
+ </div>
+
<h2>Icon positioning</h2>
<p>Collapsible headings’ default icon positioing can be overridden by using the <code>data-iconpos</code> attribute. In the below case, <code>data-iconpos="right"</code>.</p>
20 js/jquery.mobile.collapsible.js
View
@@ -13,7 +13,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
heading: "h1,h2,h3,h4,h5,h6,legend",
theme: null,
contentTheme: null,
- iconTheme: "d",
mini: false,
initSelector: ":jqmData(role='collapsible')"
},
@@ -23,6 +22,8 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
o = this.options,
collapsible = $el.addClass( "ui-collapsible" ),
collapsibleHeading = $el.children( o.heading ).first(),
+ collapsedIcon = $el.jqmData("collapsed-icon") || o.collapsedIcon,
+ expandedIcon = $el.jqmData("expanded-icon") || o.expandedIcon,
collapsibleContent = collapsible.wrapInner( "<div class='ui-collapsible-content'></div>" ).find( ".ui-collapsible-content" ),
collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" );
@@ -43,6 +44,14 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
o.contentTheme = collapsibleSet.jqmData( "content-theme" );
}
+ // Get the preference for collapsed icon in the set
+ if ( !o.collapsedIcon ) {
+ o.collapsedIcon = collapsibleSet.jqmData( "collapsed-icon" );
+ }
+ // Get the preference for expanded icon in the set
+ if ( !o.expandedIcon ) {
+ o.expandedIcon = collapsibleSet.jqmData( "expanded-icon" );
+ }
// Gets the preference icon position in the set
if ( !o.iconPos ) {
o.iconPos = collapsibleSet.jqmData( "iconpos" );
@@ -54,6 +63,9 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
}
collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-body-" + o.contentTheme ) : "");
+ collapsedIcon = $el.jqmData( "collapsed-icon" ) || o.collapsedIcon || "plus";
+ expandedIcon = $el.jqmData( "expanded-icon" ) || o.expandedIcon || "minus";
+
collapsibleHeading
//drop heading in before content
.insertBefore( collapsibleContent )
@@ -67,7 +79,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
shadow: false,
corners: false,
iconpos: $el.jqmData( "iconpos" ) || o.iconPos || "left",
- icon: "plus",
+ icon: collapsedIcon,
mini: o.mini,
theme: o.theme
})
@@ -91,8 +103,8 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
.text( isCollapse ? o.expandCueText : o.collapseCueText )
.end()
.find( ".ui-icon" )
- .toggleClass( "ui-icon-minus", !isCollapse )
- .toggleClass( "ui-icon-plus", isCollapse );
+ .toggleClass( "ui-icon-" + expandedIcon, !isCollapse )
+ .toggleClass( "ui-icon-" + collapsedIcon, isCollapse );
$this.toggleClass( "ui-collapsible-collapsed", isCollapse );
collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse );
46 tests/unit/collapsible/collapsible_core.js
View
@@ -1,5 +1,5 @@
/*
- * mobile listview unit tests
+ * mobile collapsible unit tests
*/
// TODO split out into seperate test files
@@ -140,9 +140,9 @@
]);
});
- asyncTest( "Collapsible Set with static and dynamic content", function(){
- $.testHelper.pageSequence([
- function(){
+ asyncTest( "Collapsible Set with static and dynamic content", function(){
+ $.testHelper.pageSequence([
+ function(){
$.testHelper.openPage( "#collapsible-set-with-static-and-dynamic-content" );
},
@@ -164,6 +164,44 @@
]);
});
+ module( "Icons", {});
+
+ asyncTest( "Collapsible with custom icons", function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage( "#collapsible-with-custom-icons" );
+ },
+
+ function() {
+ var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
+ ok( collapsibles.eq(0).find( ".ui-icon" ).hasClass( "ui-icon-plus" ), "Heading of first collapsible should have class ui-icon-plus");
+ ok( collapsibles.eq(1).find( ".ui-icon" ).hasClass( "ui-icon-minus" ), "Heading of second collapsible should have class ui-icon-minus");
+ ok( collapsibles.eq(2).find( ".ui-icon" ).hasClass( "ui-icon-arrow-r" ), "Heading of third collapsible should have class ui-icon-arrow-r");
+ ok( collapsibles.eq(3).find( ".ui-icon" ).hasClass( "ui-icon-arrow-d" ), "Heading of fourth collapsible should have class ui-icon-arrow-d");
+ start();
+ }
+ ]);
+ });
+
+ asyncTest( "Collapsible sets with custom icons", function(){
+ $.testHelper.pageSequence([
+ function(){
+ $.testHelper.openPage( "#collapsible-set-with-custom-icons" );
+ },
+
+ function() {
+ var collapsibles = $.mobile.activePage.find( ".ui-collapsible" );
+ ok( collapsibles.eq(0).find( ".ui-icon" ).hasClass( "ui-icon-plus" ), "Heading of first collapsible should have class ui-icon-plus");
+ ok( collapsibles.eq(1).find( ".ui-icon" ).hasClass( "ui-icon-minus" ), "Heading of second collapsible should have class ui-icon-minus");
+ ok( collapsibles.eq(2).find( ".ui-icon" ).hasClass( "ui-icon-arrow-r" ), "Heading of third collapsible should have class ui-icon-arrow-r");
+ ok( collapsibles.eq(3).find( ".ui-icon" ).hasClass( "ui-icon-arrow-d" ), "Heading of fourth collapsible should have class ui-icon-arrow-d");
+ ok( collapsibles.eq(4).find( ".ui-icon" ).hasClass( "ui-icon-arrow-l" ), "Heading of fifth collapsible should have class ui-icon-arrow-l");
+ ok( collapsibles.eq(5).find( ".ui-icon" ).hasClass( "ui-icon-arrow-u" ), "Heading of sixth collapsible should have class ui-icon-arrow-u");
+ start();
+ }
+ ]);
+ });
+
module( "Theming", {});
asyncTest( "Collapsible", 6, function(){
82 tests/unit/collapsible/index.html
View
@@ -112,6 +112,88 @@ <h2 id="qunit-userAgent"></h2>
</div>
</div>
+<div data-nstest-role="page" id='collapsible-with-custom-icons'>
+ <div data-nstest-role="header">
+ <h1>Custom icons for collapsibles</h1>
+ </div>
+ <div data-nstest-role="content">
+ <div data-nstest-role="collapsible">
+ <h3>Section A</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ <div data-nstest-role="collapsible" data-nstest-collapsed="false">
+ <h3>Section B</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+
+ <div data-nstest-role="collapsible" data-nstest-collapsed-icon="arrow-r" data-nstest-expanded-icon="arrow-d">
+ <h3>Section C</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ <div data-nstest-role="collapsible" data-nstest-collapsed-icon="arrow-r" data-nstest-expanded-icon="arrow-d" data-nstest-collapsed="false">
+ <h3>Section D</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+
+ </div>
+</div>
+
+<div data-nstest-role="page" id='collapsible-set-with-custom-icons'>
+ <div data-nstest-role="header">
+ <h1>Custom icons for collapsible sets</h1>
+ </div>
+ <div data-nstest-role="content">
+ <div data-nstest-role="collapsible-set">
+ <div data-nstest-role="collapsible">
+ <h3>Section A</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ <div data-nstest-role="collapsible" data-nstest-collapsed="false">
+ <h3>Section B</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ </div>
+ <div data-nstest-role="collapsible-set" data-nstest-collapsed-icon="arrow-r" data-nstest-expanded-icon="arrow-d">
+ <div data-nstest-role="collapsible">
+ <h3>Section A</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ <div data-nstest-role="collapsible" data-nstest-collapsed="false">
+ <h3>Section B</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ <div data-nstest-role="collapsible" data-nstest-collapsed-icon="arrow-l" data-nstest-expanded-icon="arrow-u">
+ <h3>Section C</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ <div data-nstest-role="collapsible" data-nstest-collapsed-icon="arrow-l" data-nstest-expanded-icon="arrow-u" data-nstest-collapsed="false">
+ <h3>Section D</h3>
+
+ <p>I'm the collapsible content in a set so this feels like an accordion. I'm hidden by default because I
+ have the "collapsed" state; you need to expand the header to see me.</p>
+ </div>
+ </div>
+ </div>
+</div>
+
<div data-nstest-role="page" id='collapsible-with-theming'>
<div data-nstest-role="header">
<h1>Themed collapsibles</h1>
Something went wrong with that request. Please try again.