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

Ghislain Seguin John Bender
Ghislain Seguin
Owner

No description provided.

Ghislain Seguin gseguin closed this
Ghislain Seguin gseguin reopened this
Ghislain Seguin gseguin merged commit 3d17a69 into from
John Bender

@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!

Owner

@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.
1  js/index.php
View
@@ -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',
52 js/jquery.mobile.collapsible.js
View
@@ -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
82 js/jquery.mobile.collapsibleSet.js
View
@@ -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.