Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Decoupled collapsible and collapsible set #3010

Merged
merged 5 commits into from

2 participants

@gseguin
Collaborator

No description provided.

@gseguin gseguin closed this
@gseguin gseguin reopened this
@gseguin gseguin merged commit 3d17a69 into jquery:master
@johnbender

@Wilto @gseguin

I could be wrong here but I think this commit covers more than a variable rename. This appears to be the cause of #3529. Can you guys sort out what should and shouldn't be there and add some tests to prevent this regression in the future? Happy presidents day!

Collaborator

@johnbender

I remember now! This code was moved to jquery.mobile.collapsibleSet.js. Though you're right, the comment is very misleading.

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.
View
1  js/index.php
@@ -18,6 +18,7 @@
'jquery.mobile.dialog.js',
'jquery.mobile.page.sections.js',
'jquery.mobile.collapsible.js',
+ 'jquery.mobile.collapsibleSet.js',
'jquery.mobile.fieldContain.js',
'jquery.mobile.grid.js',
'jquery.mobile.navbar.js',
View
52 js/jquery.mobile.collapsible.js
@@ -22,8 +22,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
collapsible = $el.addClass( "ui-collapsible" ),
collapsibleHeading = $el.children( o.heading ).first(),
collapsibleContent = collapsible.wrapInner( "<div class='ui-collapsible-content'></div>" ).find( ".ui-collapsible-content" ),
- collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" ),
- collapsiblesInSet = collapsibleSet.children( ":jqmData(role='collapsible')" );
+ collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" );
// Replace collapsibleHeading if it's a legend
if ( collapsibleHeading.is( "legend" ) ) {
@@ -60,52 +59,9 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
iconPos: "left",
icon: "plus",
theme: o.theme
- });
-
- if ( !collapsibleSet.length ) {
- collapsibleHeading
- .find( "a" ).first().add( collapsibleHeading.find( ".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" );
-
- });
- }
-
- collapsiblesInSet.first()
- .find( "a" )
- .first()
- .addClass( "ui-corner-top" )
- .find( ".ui-btn-inner" )
- .addClass( "ui-corner-top" );
-
- collapsiblesInSet.last()
- .jqmData( "collapsible-last", true )
- .find( "a" )
- .first()
- .addClass( "ui-corner-bottom" )
- .find( ".ui-btn-inner" )
- .addClass( "ui-corner-bottom" );
-
-
- if ( collapsible.jqmData( "collapsible-last" ) ) {
- collapsibleHeading
- .find( "a" ).first().add ( collapsibleHeading.find( ".ui-btn-inner" ) )
- .addClass( "ui-corner-bottom" );
- }
- }
+ })
+ .add( ".ui-btn-inner" )
+ .addClass( "ui-corner-top ui-corner-bottom" );
//events
collapsible
View
82 js/jquery.mobile.collapsibleSet.js
@@ -0,0 +1,82 @@
+/*
+* "collapsibleset" plugin
+*/
+
+(function( $, undefined ) {
+
+$.widget( "mobile.collapsibleset", $.mobile.widget, {
+ options: {
+ initSelector: ":jqmData(role='collapsible-set')"
+ },
+ _create: function() {
+ var $el = this.element.addClass( "ui-collapsible-set" ),
+ o = this.options,
+ collapsiblesInSet = $el.children( ":jqmData(role='collapsible')" );
+
+ // Inherit the theme from collapsible-set
+ if ( !o.theme ) {
+ o.theme = $el.jqmData( "theme" );
+ }
+ // Inherit the content-theme from collapsible-set
+ if ( !o.contentTheme ) {
+ o.contentTheme = $el.jqmData( "content-theme" );
+ }
+
+ // Initialize the collapsible set if it's not already initialized
+ if ( !$el.jqmData( "collapsiblebound" ) ) {
+
+ $el
+ .jqmData( "collapsiblebound", true )
+ .bind( "expand collapse", function( event ) {
+ var isCollapse = ( event.type === "collapse" ),
+ collapsible = $( event.target ).closest( ".ui-collapsible" ),
+ widget = collapsible.data( "collapsible" ),
+ contentTheme = widget.options.contentTheme;
+ if ( contentTheme && collapsible.jqmData( "collapsible-last" ) ) {
+ collapsible.find( widget.options.heading ).first()
+ .find( "a" ).first()
+ .add( ".ui-btn-inner" )
+ .toggleClass( "ui-corner-bottom", isCollapse );
+ collapsible.find( ".ui-collapsible-content" ).toggleClass( "ui-corner-bottom", !isCollapse );
+ }
+ })
+ .bind( "expand", function( event ) {
+ $( event.target )
+ .closest( ".ui-collapsible" )
+ .siblings( ".ui-collapsible" )
+ .trigger( "collapse" );
+
+ });
+
+ // clean up borders
+ collapsiblesInSet.each( function() {
+ $( this ).find( $.mobile.collapsible.prototype.options.heading )
+ .find( "a" ).first()
+ .add( ".ui-btn-inner" )
+ .removeClass( "ui-corner-top ui-corner-bottom" );
+ });
+
+ collapsiblesInSet.first()
+ .find( "a" )
+ .first()
+ .addClass( "ui-corner-top" )
+ .find( ".ui-btn-inner" )
+ .addClass( "ui-corner-top" );
+
+ collapsiblesInSet.last()
+ .jqmData( "collapsible-last", true )
+ .find( "a" )
+ .first()
+ .addClass( "ui-corner-bottom" )
+ .find( ".ui-btn-inner" )
+ .addClass( "ui-corner-bottom" );
+ }
+ }
+});
+
+//auto self-init widgets
+$( document ).bind( "pagecreate create", function( e ){
+ $( $.mobile.collapsibleset.prototype.options.initSelector, e.target ).collapsibleset();
+});
+
+})( jQuery );
Something went wrong with that request. Please try again.