From ec8e92453e68517104ba1000ef35665862a6c960 Mon Sep 17 00:00:00 2001 From: gseguin Date: Thu, 15 Sep 2011 16:27:54 -0700 Subject: [PATCH 01/13] Removed buttonMarkup around +/- icon --- js/jquery.mobile.collapsible.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js index 0acc0c63..b9227561 100644 --- a/js/jquery.mobile.collapsible.js +++ b/js/jquery.mobile.collapsible.js @@ -47,15 +47,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, { icon: "plus", theme: o.theme }) - .find( ".ui-icon" ) - .removeAttr( "class" ) - .buttonMarkup({ - shadow: true, - corners: true, - iconPos: "notext", - icon: "plus", - theme: o.iconTheme - }); if ( !collapsibleParent.length ) { collapsibleHeading From 43c5037bd89a722c4885c0991d5ad23b444ceb08 Mon Sep 17 00:00:00 2001 From: gseguin Date: Fri, 16 Sep 2011 09:10:08 -0700 Subject: [PATCH 02/13] Changed behavior of .jqmData() only when called with no argument. It now returns undefined as per discussion on #jquerymobile-dev --- docs/api/methods.html | 1 + js/jquery.mobile.core.js | 6 +++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/docs/api/methods.html b/docs/api/methods.html index 4df918d5..cb62c63e 100755 --- a/docs/api/methods.html +++ b/docs/api/methods.html @@ -150,6 +150,7 @@ $.mobile.loadPage( "searchresults.php", {
· Arguments:
See jQuery's data and removeData methods
+ Note: Calling jqmData() with no argument will return undefined. This behavior is subject to change in future versions.
· Also:
When finding elements by their jQuery Mobile data attribute, please use the custom selector :jqmData(), as it automatically incorporates namespaced data attributes into the lookup when they are in use. For example, instead of calling $("div[data-role='page']"), you should use $("div:jqmData(role='page')"), which internally maps to $("div[data-"+ $.mobile.ns +"role='page']") without forcing you to concatenate a namespace into your selectors manually.
diff --git a/js/jquery.mobile.core.js b/js/jquery.mobile.core.js index bd30b2ff..f566dc9c 100644 --- a/js/jquery.mobile.core.js +++ b/js/jquery.mobile.core.js @@ -128,7 +128,11 @@ // Mobile version of data and removeData and hasData methods // ensures all data is set and retrieved using jQuery Mobile's data namespace $.fn.jqmData = function( prop, value ) { - return this.data( prop ? $.mobile.nsNormalize( prop ) : prop, value ); + var result; + if ( typeof prop != "undefined" ) { + result = this.data( prop ? $.mobile.nsNormalize( prop ) : prop, value ); + } + return result; }; $.jqmData = function( elem, prop, value ) { From 6dbdbfe4bcd1bc3444dfc3260cb6fb9440b4330d Mon Sep 17 00:00:00 2001 From: gseguin Date: Fri, 16 Sep 2011 09:12:43 -0700 Subject: [PATCH 03/13] Revert "Changed behavior of .jqmData() only when called with no argument. It now returns undefined as per discussion on #jquerymobile-dev" This reverts commit 43c5037bd89a722c4885c0991d5ad23b444ceb08. --- docs/api/methods.html | 1 - js/jquery.mobile.core.js | 6 +----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/docs/api/methods.html b/docs/api/methods.html index cb62c63e..4df918d5 100755 --- a/docs/api/methods.html +++ b/docs/api/methods.html @@ -150,7 +150,6 @@ $.mobile.loadPage( "searchresults.php", {
· Arguments:
See jQuery's data and removeData methods
- Note: Calling jqmData() with no argument will return undefined. This behavior is subject to change in future versions.
· Also:
When finding elements by their jQuery Mobile data attribute, please use the custom selector :jqmData(), as it automatically incorporates namespaced data attributes into the lookup when they are in use. For example, instead of calling $("div[data-role='page']"), you should use $("div:jqmData(role='page')"), which internally maps to $("div[data-"+ $.mobile.ns +"role='page']") without forcing you to concatenate a namespace into your selectors manually.
diff --git a/js/jquery.mobile.core.js b/js/jquery.mobile.core.js index f566dc9c..bd30b2ff 100644 --- a/js/jquery.mobile.core.js +++ b/js/jquery.mobile.core.js @@ -128,11 +128,7 @@ // Mobile version of data and removeData and hasData methods // ensures all data is set and retrieved using jQuery Mobile's data namespace $.fn.jqmData = function( prop, value ) { - var result; - if ( typeof prop != "undefined" ) { - result = this.data( prop ? $.mobile.nsNormalize( prop ) : prop, value ); - } - return result; + return this.data( prop ? $.mobile.nsNormalize( prop ) : prop, value ); }; $.jqmData = function( elem, prop, value ) { From e6665522742f27bd08a1910a887c379619abe66b Mon Sep 17 00:00:00 2001 From: gseguin Date: Wed, 21 Sep 2011 21:56:23 -0700 Subject: [PATCH 04/13] Added data-content-theme to collapsible and collapsible-set --- js/jquery.mobile.collapsible.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js index b9227561..e8605d55 100644 --- a/js/jquery.mobile.collapsible.js +++ b/js/jquery.mobile.collapsible.js @@ -20,7 +20,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, { var $el = this.element, o = this.options, - expandedCls = "ui-btn-up-" + (o.theme || "c"), collapsible = $el.addClass( "ui-collapsible" ), collapsibleHeading = $el.find( o.heading ).eq( 0 ), collapsibleContent = collapsible.wrapInner( "
" ).find( ".ui-collapsible-content" ), @@ -67,7 +66,9 @@ $.widget( "mobile.collapsible", $.mobile.widget, { event.preventDefault(); - var isCollapse = ( event.type === "collapse" ); + var isCollapse = ( event.type === "collapse" ), + contentTheme = collapsible.jqmData( "content-theme" ), + expandedCls = ( contentTheme ) ? ( "ui-btn-up-" + contentTheme ) : ""; collapsibleHeading .toggleClass( "ui-collapsible-heading-collapsed", isCollapse) @@ -80,9 +81,11 @@ $.widget( "mobile.collapsible", $.mobile.widget, { collapsible.toggleClass( "ui-collapsible-collapsed", isCollapse ); collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse ); - collapsibleContent.toggleClass( expandedCls, !isCollapse ); + if ( expandedCls ) { + collapsibleContent.toggleClass( expandedCls, !isCollapse ); + } - if ( !collapsibleParent.length || collapsible.jqmData( "collapsible-last" ) ) { + if ( contentTheme && ( !collapsibleParent.length || collapsible.jqmData( "collapsible-last" ) ) ) { collapsibleHeading .find( "a:eq(0), .ui-btn-inner" ) .toggleClass( "ui-corner-bottom", isCollapse ); @@ -108,6 +111,8 @@ $.widget( "mobile.collapsible", $.mobile.widget, { var set = collapsibleParent.children( ":jqmData(role='collapsible')" ); + set.jqmData( "content-theme", collapsibleParent.jqmData( "content-theme" ) ); + set.first() .find( "a:eq(0)" ) .addClass( "ui-corner-top" ) From 66e63651a753eaaf282221a526b592dc731f6e41 Mon Sep 17 00:00:00 2001 From: gseguin Date: Wed, 21 Sep 2011 22:25:12 -0700 Subject: [PATCH 05/13] Added docs for data-content-theme --- docs/content/content-themes.html | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/docs/content/content-themes.html b/docs/content/content-themes.html index 7ce05325..f3a5e6c3 100755 --- a/docs/content/content-themes.html +++ b/docs/content/content-themes.html @@ -24,10 +24,12 @@

Theming the content area

The main content area of a page (container with the data-role="content" attribute) should be themed by adding the data-theme attribute to the data-role="page" container to ensure that the background colors are applied to the full page, regardless of the content length. (If you add to the data-theme to the content container, the background color will stop after the content so there may be a gap in color between the content and fixed footer.)

- +

Additionally, the content area can be themed to match the theme of the collapsible header using the data-content-theme attribute.

+ -<div data-role="page" data-theme="a"> - +<div data-role="page" data-theme="a" data-content-theme="a"> + +

Theming collapsible blocks

To set the color of the collapsible header, add the data-theme attribute to the collapsible container. The icon and body are not currently themable through data attributes, but can be styled directly with custom css.

@@ -44,6 +46,10 @@

I'm an themed collapsible

I have data-theme attribute set manually on my container to set the color to match the content block I'm in.

+
+

I'm a themed collapsible with a themed content

+

I have data-content-theme attribute set manually on my container to set the color to match the content block I'm in.

+

B theme swatch on content & collapsible

@@ -54,6 +60,10 @@

I'm an themed collapsible

I have data-theme attribute set manually on my container to set the color to match the content block I'm in.

+
+

I'm a themed collapsible with a themed content

+

I have data-content-theme attribute set manually on my container to set the color to match the content block I'm in.

+

C theme swatch on content & collapsible

@@ -64,6 +74,10 @@

I'm an themed collapsible

I have data-theme attribute set manually on my container to set the color to match the content block I'm in.

+
+

I'm a themed collapsible with a themed content

+

I have data-content-theme attribute set manually on my container to set the color to match the content block I'm in.

+

D theme swatch on content & collapsible

@@ -74,6 +88,10 @@

I'm an themed collapsible

I have data-theme attribute set manually on my container to set the color to match the content block I'm in.

+
+

I'm a themed collapsible with a themed content

+

I have data-content-theme attribute set manually on my container to set the color to match the content block I'm in.

+

E theme swatch on content & collapsible

@@ -84,6 +102,10 @@

I'm an themed collapsible

I have data-theme attribute set manually on my container to set the color to match the content block I'm in.

+
+

I'm a themed collapsible with a themed content

+

I have data-content-theme attribute set manually on my container to set the color to match the content block I'm in.

+
From 46e6c6b3203c3e2d272ac8c201301845546301c2 Mon Sep 17 00:00:00 2001 From: gseguin Date: Thu, 22 Sep 2011 09:21:56 -0700 Subject: [PATCH 06/13] fixed data-content-theme in collapsible-set for collapsible expanded by default --- docs/content/content-collapsible.html | 4 +- js/jquery.mobile.collapsible.js | 64 +++++++++++++-------------- 2 files changed, 34 insertions(+), 34 deletions(-) diff --git a/docs/content/content-collapsible.html b/docs/content/content-collapsible.html index 4fce248b..fb6ed055 100755 --- a/docs/content/content-collapsible.html +++ b/docs/content/content-collapsible.html @@ -63,9 +63,9 @@

Collapsible example

This page has 4 collapsible containers with different types of content inside.

-
+

Section 1: Collapsed text block

-

I'm closed when the page loads because I have the data-collapsed="true" attribute on my container.

+

I'm closed when the page loads because that's the default state of a collapsible.

I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content. I'm the collapsible content.

diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js index e8605d55..2a9cef08 100644 --- a/js/jquery.mobile.collapsible.js +++ b/js/jquery.mobile.collapsible.js @@ -59,6 +59,38 @@ $.widget( "mobile.collapsible", $.mobile.widget, { } } + // Close others in a set + if ( collapsibleParent.length && !collapsibleParent.jqmData( "collapsiblebound" ) ) { + + collapsibleParent + .jqmData( "collapsiblebound", true ) + .bind( "expand", function( event ) { + + $( event.target ) + .closest( ".ui-collapsible" ) + .siblings( ".ui-collapsible" ) + .trigger( "collapse" ); + + }); + + var set = collapsibleParent.children( ":jqmData(role='collapsible')" ); + + set.jqmData( "content-theme", collapsibleParent.jqmData( "content-theme" ) ); + + set.first() + .find( "a:eq(0)" ) + .addClass( "ui-corner-top" ) + .find( ".ui-btn-inner" ) + .addClass( "ui-corner-top" ); + + set.last() + .jqmData( "collapsible-last", true ) + .find( "a:eq(0)" ) + .addClass( "ui-corner-bottom" ) + .find( ".ui-btn-inner" ) + .addClass( "ui-corner-bottom" ); + } + //events collapsible .bind( "expand collapse", function( event ) { @@ -95,38 +127,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, { }) .trigger( o.collapsed ? "collapse" : "expand" ); - // Close others in a set - if ( collapsibleParent.length && !collapsibleParent.jqmData( "collapsiblebound" ) ) { - - collapsibleParent - .jqmData( "collapsiblebound", true ) - .bind( "expand", function( event ) { - - $( event.target ) - .closest( ".ui-collapsible" ) - .siblings( ".ui-collapsible" ) - .trigger( "collapse" ); - - }); - - var set = collapsibleParent.children( ":jqmData(role='collapsible')" ); - - set.jqmData( "content-theme", collapsibleParent.jqmData( "content-theme" ) ); - - set.first() - .find( "a:eq(0)" ) - .addClass( "ui-corner-top" ) - .find( ".ui-btn-inner" ) - .addClass( "ui-corner-top" ); - - set.last() - .jqmData( "collapsible-last", true ) - .find( "a:eq(0)" ) - .addClass( "ui-corner-bottom" ) - .find( ".ui-btn-inner" ) - .addClass( "ui-corner-bottom" ); - } - collapsibleHeading .bind( "vclick", function( event ) { From 1692c0f378a171b00e583e901df48829c192fad7 Mon Sep 17 00:00:00 2001 From: gseguin Date: Thu, 22 Sep 2011 09:49:36 -0700 Subject: [PATCH 07/13] Added doc/sample for data-content-theme --- docs/content/content-collapsible-set.html | 19 +++++++++++++++++++ docs/content/content-collapsible.html | 9 ++++++++- 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/docs/content/content-collapsible-set.html b/docs/content/content-collapsible-set.html index ad2e7513..c0c5da6c 100644 --- a/docs/content/content-collapsible-set.html +++ b/docs/content/content-collapsible-set.html @@ -72,6 +72,25 @@
+ +

Here is an example of a collapsible with 3 sections and data-content-theme set

+ +
+
+

Section F

+

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.

+
+
+

Section G

+

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.

+ +
+
+

Section H

+

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.

+ +
+
diff --git a/docs/content/content-collapsible.html b/docs/content/content-collapsible.html index fb6ed055..4cb9ecd4 100755 --- a/docs/content/content-collapsible.html +++ b/docs/content/content-collapsible.html @@ -25,7 +25,9 @@

Collapsible content markup

To create a collapsible blocks of content, create a container and add the data-role="collapsible" attribute.

- + +

Using data-content-theme attribute allows you to set a theme for the content of the collapsible.

+

Directly inside this container, add any header element (H1-H6). The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.

After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.

@@ -106,6 +108,11 @@
  • Ford
    • + +
    +

    Section 5: themed content

    +

    I have data-content-theme attribute set manually on my container to set the color to match the content block I'm in.

    +

    Nested Collapsibles

    From fb06381176736a16891f6dd497d027a5af0f6a14 Mon Sep 17 00:00:00 2001 From: gseguin Date: Thu, 22 Sep 2011 10:28:56 -0700 Subject: [PATCH 08/13] Set content-theme to collapsible in a set only if it's not already set --- js/jquery.mobile.collapsible.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js index 2a9cef08..dbc9a443 100644 --- a/js/jquery.mobile.collapsible.js +++ b/js/jquery.mobile.collapsible.js @@ -75,7 +75,12 @@ $.widget( "mobile.collapsible", $.mobile.widget, { var set = collapsibleParent.children( ":jqmData(role='collapsible')" ); - set.jqmData( "content-theme", collapsibleParent.jqmData( "content-theme" ) ); + set.each(function() { + var $this = $( this ); + if ( !$this.jqmData( "content-theme" ) ) { + $this.jqmData( "content-theme", collapsibleParent.jqmData( "content-theme" ) ); + } + }); set.first() .find( "a:eq(0)" ) From bdaa477f68e0f04345292616f23a8ca192a2b21d Mon Sep 17 00:00:00 2001 From: gseguin Date: Sat, 24 Sep 2011 17:22:55 -0700 Subject: [PATCH 09/13] Fix for #1899 Added data-content-theme to style the content of the collapsible data-theme and data-content-theme inherit collapsible-set's --- js/jquery.mobile.collapsible.js | 108 ++++++++++++++++++-------------- 1 file changed, 61 insertions(+), 47 deletions(-) diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js index dbc9a443..95b0e973 100644 --- a/js/jquery.mobile.collapsible.js +++ b/js/jquery.mobile.collapsible.js @@ -13,6 +13,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, { collapsed: true, heading: ">:header,>legend", theme: null, + contentTheme: null, iconTheme: "d", initSelector: ":jqmData(role='collapsible')" }, @@ -23,7 +24,8 @@ $.widget( "mobile.collapsible", $.mobile.widget, { collapsible = $el.addClass( "ui-collapsible" ), collapsibleHeading = $el.find( o.heading ).eq( 0 ), collapsibleContent = collapsible.wrapInner( "
    " ).find( ".ui-collapsible-content" ), - collapsibleParent = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" ); + collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" ), + colllapsiblesInSet = collapsibleSet.children( ":jqmData(role='collapsible')" ); // Replace collapsibleHeading if it's a legend if ( collapsibleHeading.is( "legend" ) ) { @@ -31,6 +33,41 @@ $.widget( "mobile.collapsible", $.mobile.widget, { collapsibleHeading.next().remove(); } + // Close others in a set + if ( collapsibleSet.length && !collapsibleSet.jqmData( "collapsiblebound" ) ) { + + collapsibleSet + .bind( "expand", function( event ) { + + $( event.target ) + .closest( ".ui-collapsible" ) + .siblings( ".ui-collapsible" ) + .trigger( "collapse" ); + + }); + + // Inherit the theme from collapsible-set + if ( !o.theme ) { + o.theme = collapsibleSet.jqmData( "theme" ); + } + // Inherit the content-theme from collapsible-set + if ( !o.contentTheme ) { + o.contentTheme = collapsibleSet.jqmData( "content-theme" ); + } + + colllapsiblesInSet.each(function() { + var $this = $( this ); + if ( !$this.jqmData( "theme" ) ) { + $this.jqmData( "theme", collapsibleSet.jqmData( "theme" ) ); + } + if ( !$this.jqmData( "content-theme" ) ) { + $this.jqmData( "content-theme", collapsibleSet.jqmData( "content-theme" ) ); + } + }); + } + + collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-btn-up-" + o.contentTheme ) : ""); + collapsibleHeading //drop heading in before content .insertBefore( collapsibleContent ) @@ -47,7 +84,24 @@ $.widget( "mobile.collapsible", $.mobile.widget, { theme: o.theme }) - if ( !collapsibleParent.length ) { + if ( collapsibleSet.length && !collapsibleSet.jqmData( "collapsiblebound" ) ) { + collapsibleSet.jqmData( "collapsiblebound", true ); + + colllapsiblesInSet.first() + .find( "a:eq(0)" ) + .addClass( "ui-corner-top" ) + .find( ".ui-btn-inner" ) + .addClass( "ui-corner-top" ); + + colllapsiblesInSet.last() + .jqmData( "collapsible-last", true ) + .find( "a:eq(0)" ) + .addClass( "ui-corner-bottom" ) + .find( ".ui-btn-inner" ) + .addClass( "ui-corner-bottom" ); + } + + if ( !collapsibleSet.length ) { collapsibleHeading .find( "a:eq(0), .ui-btn-inner" ) .addClass( "ui-corner-top ui-corner-bottom" ); @@ -59,43 +113,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, { } } - // Close others in a set - if ( collapsibleParent.length && !collapsibleParent.jqmData( "collapsiblebound" ) ) { - - collapsibleParent - .jqmData( "collapsiblebound", true ) - .bind( "expand", function( event ) { - - $( event.target ) - .closest( ".ui-collapsible" ) - .siblings( ".ui-collapsible" ) - .trigger( "collapse" ); - - }); - - var set = collapsibleParent.children( ":jqmData(role='collapsible')" ); - - set.each(function() { - var $this = $( this ); - if ( !$this.jqmData( "content-theme" ) ) { - $this.jqmData( "content-theme", collapsibleParent.jqmData( "content-theme" ) ); - } - }); - - set.first() - .find( "a:eq(0)" ) - .addClass( "ui-corner-top" ) - .find( ".ui-btn-inner" ) - .addClass( "ui-corner-top" ); - - set.last() - .jqmData( "collapsible-last", true ) - .find( "a:eq(0)" ) - .addClass( "ui-corner-bottom" ) - .find( ".ui-btn-inner" ) - .addClass( "ui-corner-bottom" ); - } - //events collapsible .bind( "expand collapse", function( event ) { @@ -103,9 +120,9 @@ $.widget( "mobile.collapsible", $.mobile.widget, { event.preventDefault(); - var isCollapse = ( event.type === "collapse" ), - contentTheme = collapsible.jqmData( "content-theme" ), - expandedCls = ( contentTheme ) ? ( "ui-btn-up-" + contentTheme ) : ""; + var $this = $( this ), + isCollapse = ( event.type === "collapse" ), + contentTheme = o.contentTheme; collapsibleHeading .toggleClass( "ui-collapsible-heading-collapsed", isCollapse) @@ -116,13 +133,10 @@ $.widget( "mobile.collapsible", $.mobile.widget, { .toggleClass( "ui-icon-minus", !isCollapse ) .toggleClass( "ui-icon-plus", isCollapse ); - collapsible.toggleClass( "ui-collapsible-collapsed", isCollapse ); + $this.toggleClass( "ui-collapsible-collapsed", isCollapse ); collapsibleContent.toggleClass( "ui-collapsible-content-collapsed", isCollapse ).attr( "aria-hidden", isCollapse ); - if ( expandedCls ) { - collapsibleContent.toggleClass( expandedCls, !isCollapse ); - } - if ( contentTheme && ( !collapsibleParent.length || collapsible.jqmData( "collapsible-last" ) ) ) { + if ( contentTheme && ( !collapsibleSet.length || collapsible.jqmData( "collapsible-last" ) ) ) { collapsibleHeading .find( "a:eq(0), .ui-btn-inner" ) .toggleClass( "ui-corner-bottom", isCollapse ); From 553de2d2657585422d18fbbf95d4279a3dc1b499 Mon Sep 17 00:00:00 2001 From: gseguin Date: Sat, 24 Sep 2011 17:24:07 -0700 Subject: [PATCH 10/13] Unit tests for collapsible and collapsible-set following commit bdaa477f68e0f04345292616f23a8ca192a2b21d --- tests/unit/collapsible/collapsible_core.js | 45 ++++++++++++++ tests/unit/collapsible/index.html | 69 ++++++++++++++++++++++ 2 files changed, 114 insertions(+) diff --git a/tests/unit/collapsible/collapsible_core.js b/tests/unit/collapsible/collapsible_core.js index 40db47fe..6be405f3 100644 --- a/tests/unit/collapsible/collapsible_core.js +++ b/tests/unit/collapsible/collapsible_core.js @@ -116,5 +116,50 @@ ]); }); + module( "Theming", {}); + + asyncTest( "Collapsible", 6, function(){ + $.testHelper.pageSequence([ + function(){ + $.testHelper.openPage( "#collapsible-with-theming" ); + }, + + function() { + var collapsibles = $.mobile.activePage.find( ".ui-collapsible" ); + ok( collapsibles.eq(0).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-a" ), "Heading of first collapsible should have class ui-btn-up-a"); + ok( !collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-a" ), "Content of first collapsible should NOT have class ui-btn-up-a"); + ok( collapsibles.eq(1).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-b" ), "Heading of second collapsible should have class ui-btn-up-b"); + ok( !collapsibles.eq(1).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-b" ), "Content of second collapsible should NOT have class ui-btn-up-b"); + ok( collapsibles.eq(2).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-c" ), "Heading of third collapsible should have class ui-btn-up-c"); + ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-c" ), "Content of third collapsible should have class ui-btn-up-c"); + start(); + } + ]); + }); + + + asyncTest( "Collapsible Set", function(){ + $.testHelper.pageSequence([ + function(){ + $.testHelper.openPage( "#collapsible-set-with-theming" ); + }, + + function() { + var collapsibles = $.mobile.activePage.find( ".ui-collapsible" ); + ok( collapsibles.eq(0).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-a" ), "Heading of first collapsible should have class ui-btn-up-a"); + ok( !collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-a" ), "Content of first collapsible should NOT have class ui-btn-up-a"); + ok( collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-d" ), "Content of first collapsible should NOT have class ui-btn-up-d"); + ok( collapsibles.eq(1).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-b" ), "Heading of second collapsible should have class ui-btn-up-b"); + ok( collapsibles.eq(1).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-b" ), "Content of second collapsible should have class ui-btn-up-b"); + ok( collapsibles.eq(2).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-d" ), "Heading of third collapsible should have class ui-btn-up-d"); + ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-d" ), "Content of third collapsible should have class ui-btn-up-d"); + ok( !collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-collapsible-content-collapsed" ), "Content of third collapsible should NOT have class ui-collapsible-content-collapsed"); + ok( collapsibles.eq(3).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-d" ), "Heading of fourth collapsible should have class ui-btn-up-d"); + ok( collapsibles.eq(3).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-d" ), "Content of fourth collapsible should have class ui-btn-up-d"); + start(); + } + ]); + }); + })( jQuery ); diff --git a/tests/unit/collapsible/index.html b/tests/unit/collapsible/index.html index 579b73b7..dbb46640 100644 --- a/tests/unit/collapsible/index.html +++ b/tests/unit/collapsible/index.html @@ -89,6 +89,75 @@ have the "collapsed" state; you need to expand the header to see me.

    + +
    +

    Section E

    + +

    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.

    +
    + + + +
    +
    +

    Themed collapsibles

    +
    +
    +
    +

    Section A

    + +

    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.

    +
    +
    +

    Section B

    + +

    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.

    +
    +
    +

    Section B

    + +

    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.

    +
    + +
    +
    + +
    +
    +

    Themed collapsibles

    +
    +
    +
    +
    +

    Section A

    + +

    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.

    +
    +
    +

    Section B

    + +

    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.

    +
    +
    +

    Section C

    + +

    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.

    +
    +
    +

    Section D

    + +

    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.

    +
    +
    +
    From 3ecbf8e38350b665312060561bfdae5790a1ae72 Mon Sep 17 00:00:00 2001 From: gseguin Date: Sat, 24 Sep 2011 21:41:20 -0700 Subject: [PATCH 11/13] Simplified code. Don't add data-* attr if not set by user --- js/jquery.mobile.collapsible.js | 63 ++++++++++++++------------------- 1 file changed, 27 insertions(+), 36 deletions(-) diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js index 95b0e973..127c1349 100644 --- a/js/jquery.mobile.collapsible.js +++ b/js/jquery.mobile.collapsible.js @@ -33,18 +33,36 @@ $.widget( "mobile.collapsible", $.mobile.widget, { collapsibleHeading.next().remove(); } - // Close others in a set - if ( collapsibleSet.length && !collapsibleSet.jqmData( "collapsiblebound" ) ) { + // If we are in a collapsible set + if ( collapsibleSet.length ) { - collapsibleSet - .bind( "expand", function( event ) { + // Initialize the collapsible set if it's not already initialized + if ( !collapsibleSet.jqmData( "collapsiblebound" ) ) { - $( event.target ) - .closest( ".ui-collapsible" ) - .siblings( ".ui-collapsible" ) - .trigger( "collapse" ); + collapsibleSet + .jqmData( "collapsiblebound", true ) + .bind( "expand", function( event ) { - }); + $( event.target ) + .closest( ".ui-collapsible" ) + .siblings( ".ui-collapsible" ) + .trigger( "collapse" ); + + }); + } + + colllapsiblesInSet.first() + .find( "a:eq(0)" ) + .addClass( "ui-corner-top" ) + .find( ".ui-btn-inner" ) + .addClass( "ui-corner-top" ); + + colllapsiblesInSet.last() + .jqmData( "collapsible-last", true ) + .find( "a:eq(0)" ) + .addClass( "ui-corner-bottom" ) + .find( ".ui-btn-inner" ) + .addClass( "ui-corner-bottom" ); // Inherit the theme from collapsible-set if ( !o.theme ) { @@ -54,16 +72,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, { if ( !o.contentTheme ) { o.contentTheme = collapsibleSet.jqmData( "content-theme" ); } - - colllapsiblesInSet.each(function() { - var $this = $( this ); - if ( !$this.jqmData( "theme" ) ) { - $this.jqmData( "theme", collapsibleSet.jqmData( "theme" ) ); - } - if ( !$this.jqmData( "content-theme" ) ) { - $this.jqmData( "content-theme", collapsibleSet.jqmData( "content-theme" ) ); - } - }); } collapsibleContent.addClass( ( o.contentTheme ) ? ( "ui-btn-up-" + o.contentTheme ) : ""); @@ -84,23 +92,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, { theme: o.theme }) - if ( collapsibleSet.length && !collapsibleSet.jqmData( "collapsiblebound" ) ) { - collapsibleSet.jqmData( "collapsiblebound", true ); - - colllapsiblesInSet.first() - .find( "a:eq(0)" ) - .addClass( "ui-corner-top" ) - .find( ".ui-btn-inner" ) - .addClass( "ui-corner-top" ); - - colllapsiblesInSet.last() - .jqmData( "collapsible-last", true ) - .find( "a:eq(0)" ) - .addClass( "ui-corner-bottom" ) - .find( ".ui-btn-inner" ) - .addClass( "ui-corner-bottom" ); - } - if ( !collapsibleSet.length ) { collapsibleHeading .find( "a:eq(0), .ui-btn-inner" ) From 276f27fbfa2d7da77733d7082067d39b38865bb8 Mon Sep 17 00:00:00 2001 From: gseguin Date: Sat, 24 Sep 2011 21:58:04 -0700 Subject: [PATCH 12/13] Fixed missing top corner on collapsible set with only one collapsible --- js/jquery.mobile.collapsible.js | 60 +++++++++++++++++---------------- 1 file changed, 31 insertions(+), 29 deletions(-) diff --git a/js/jquery.mobile.collapsible.js b/js/jquery.mobile.collapsible.js index 127c1349..33e8fd18 100644 --- a/js/jquery.mobile.collapsible.js +++ b/js/jquery.mobile.collapsible.js @@ -35,35 +35,6 @@ $.widget( "mobile.collapsible", $.mobile.widget, { // If we are in a collapsible set if ( collapsibleSet.length ) { - - // Initialize the collapsible set if it's not already initialized - if ( !collapsibleSet.jqmData( "collapsiblebound" ) ) { - - collapsibleSet - .jqmData( "collapsiblebound", true ) - .bind( "expand", function( event ) { - - $( event.target ) - .closest( ".ui-collapsible" ) - .siblings( ".ui-collapsible" ) - .trigger( "collapse" ); - - }); - } - - colllapsiblesInSet.first() - .find( "a:eq(0)" ) - .addClass( "ui-corner-top" ) - .find( ".ui-btn-inner" ) - .addClass( "ui-corner-top" ); - - colllapsiblesInSet.last() - .jqmData( "collapsible-last", true ) - .find( "a:eq(0)" ) - .addClass( "ui-corner-bottom" ) - .find( ".ui-btn-inner" ) - .addClass( "ui-corner-bottom" ); - // Inherit the theme from collapsible-set if ( !o.theme ) { o.theme = collapsibleSet.jqmData( "theme" ); @@ -97,6 +68,37 @@ $.widget( "mobile.collapsible", $.mobile.widget, { .find( "a:eq(0), .ui-btn-inner" ) .addClass( "ui-corner-top ui-corner-bottom" ); } else { + // If we are in a collapsible set + + // Initialize the collapsible set if it's not already initialized + if ( !collapsibleSet.jqmData( "collapsiblebound" ) ) { + + collapsibleSet + .jqmData( "collapsiblebound", true ) + .bind( "expand", function( event ) { + + $( event.target ) + .closest( ".ui-collapsible" ) + .siblings( ".ui-collapsible" ) + .trigger( "collapse" ); + + }); + } + + colllapsiblesInSet.first() + .find( "a:eq(0)" ) + .addClass( "ui-corner-top" ) + .find( ".ui-btn-inner" ) + .addClass( "ui-corner-top" ); + + colllapsiblesInSet.last() + .jqmData( "collapsible-last", true ) + .find( "a:eq(0)" ) + .addClass( "ui-corner-bottom" ) + .find( ".ui-btn-inner" ) + .addClass( "ui-corner-bottom" ); + + if ( collapsible.jqmData( "collapsible-last" ) ) { collapsibleHeading .find( "a:eq(0), .ui-btn-inner" ) From 16c34ce3ac2fca22160433987f7fb943dcd8ae39 Mon Sep 17 00:00:00 2001 From: gseguin Date: Sat, 24 Sep 2011 22:02:18 -0700 Subject: [PATCH 13/13] Behavior changed, fixed test --- tests/unit/collapsible/collapsible_core.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/unit/collapsible/collapsible_core.js b/tests/unit/collapsible/collapsible_core.js index 6be405f3..48907752 100644 --- a/tests/unit/collapsible/collapsible_core.js +++ b/tests/unit/collapsible/collapsible_core.js @@ -129,7 +129,7 @@ ok( collapsibles.eq(0).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-a" ), "Heading of first collapsible should have class ui-btn-up-a"); ok( !collapsibles.eq(0).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-a" ), "Content of first collapsible should NOT have class ui-btn-up-a"); ok( collapsibles.eq(1).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-b" ), "Heading of second collapsible should have class ui-btn-up-b"); - ok( !collapsibles.eq(1).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-b" ), "Content of second collapsible should NOT have class ui-btn-up-b"); + ok( collapsibles.eq(1).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-b" ), "Content of second collapsible should have class ui-btn-up-b"); ok( collapsibles.eq(2).find( ".ui-collapsible-heading-toggle" ).hasClass( "ui-btn-up-c" ), "Heading of third collapsible should have class ui-btn-up-c"); ok( collapsibles.eq(2).find( ".ui-collapsible-content" ).hasClass( "ui-btn-up-c" ), "Content of third collapsible should have class ui-btn-up-c"); start();