Skip to content
This repository

Decoupled collapsible and collapsible set #3010

Merged
merged 5 commits into from over 2 years ago

2 participants

Ghislain Seguin John Bender
Ghislain Seguin
Collaborator

No description provided.

Ghislain Seguin gseguin closed this
Ghislain Seguin gseguin reopened this
Ghislain Seguin gseguin merged commit 3d17a69 into from
Ghislain Seguin gseguin closed this
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!

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.
1  js/index.php
@@ -18,6 +18,7 @@
18 18
 	'jquery.mobile.dialog.js',
19 19
 	'jquery.mobile.page.sections.js',
20 20
 	'jquery.mobile.collapsible.js',
  21
+	'jquery.mobile.collapsibleSet.js',
21 22
 	'jquery.mobile.fieldContain.js',
22 23
 	'jquery.mobile.grid.js',
23 24
 	'jquery.mobile.navbar.js',
52  js/jquery.mobile.collapsible.js
@@ -22,8 +22,7 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
22 22
 			collapsible = $el.addClass( "ui-collapsible" ),
23 23
 			collapsibleHeading = $el.children( o.heading ).first(),
24 24
 			collapsibleContent = collapsible.wrapInner( "<div class='ui-collapsible-content'></div>" ).find( ".ui-collapsible-content" ),
25  
-			collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" ),
26  
-			collapsiblesInSet = collapsibleSet.children( ":jqmData(role='collapsible')" );
  25
+			collapsibleSet = $el.closest( ":jqmData(role='collapsible-set')" ).addClass( "ui-collapsible-set" );
27 26
 
28 27
 		// Replace collapsibleHeading if it's a legend
29 28
 		if ( collapsibleHeading.is( "legend" ) ) {
@@ -60,52 +59,9 @@ $.widget( "mobile.collapsible", $.mobile.widget, {
60 59
 					iconPos: "left",
61 60
 					icon: "plus",
62 61
 					theme: o.theme
63  
-				});
64  
-
65  
-		if ( !collapsibleSet.length ) {
66  
-			collapsibleHeading
67  
-				.find( "a" ).first().add( collapsibleHeading.find( ".ui-btn-inner" ) )
68  
-					.addClass( "ui-corner-top ui-corner-bottom" );
69  
-		} else {
70  
-			// If we are in a collapsible set
71  
-
72  
-			// Initialize the collapsible set if it's not already initialized
73  
-			if ( !collapsibleSet.jqmData( "collapsiblebound" ) ) {
74  
-
75  
-				collapsibleSet
76  
-					.jqmData( "collapsiblebound", true )
77  
-					.bind( "expand", function( event ) {
78  
-
79  
-						$( event.target )
80  
-							.closest( ".ui-collapsible" )
81  
-							.siblings( ".ui-collapsible" )
82  
-							.trigger( "collapse" );
83  
-
84  
-					});
85  
-			}
86  
-
87  
-			collapsiblesInSet.first()
88  
-				.find( "a" )
89  
-					.first()
90  
-					.addClass( "ui-corner-top" )
91  
-						.find( ".ui-btn-inner" )
92  
-							.addClass( "ui-corner-top" );
93  
-
94  
-			collapsiblesInSet.last()
95  
-				.jqmData( "collapsible-last", true )
96  
-				.find( "a" )
97  
-					.first()
98  
-					.addClass( "ui-corner-bottom" )
99  
-						.find( ".ui-btn-inner" )
100  
-							.addClass( "ui-corner-bottom" );
101  
-
102  
-
103  
-			if ( collapsible.jqmData( "collapsible-last" ) ) {
104  
-				collapsibleHeading
105  
-					.find( "a" ).first().add ( collapsibleHeading.find( ".ui-btn-inner" ) )
106  
-						.addClass( "ui-corner-bottom" );
107  
-			}
108  
-		}
  62
+				})
  63
+			.add( ".ui-btn-inner" )
  64
+				.addClass( "ui-corner-top ui-corner-bottom" );
109 65
 
110 66
 		//events
111 67
 		collapsible
82  js/jquery.mobile.collapsibleSet.js
... ...
@@ -0,0 +1,82 @@
  1
+/*
  2
+* "collapsibleset" plugin
  3
+*/
  4
+
  5
+(function( $, undefined ) {
  6
+
  7
+$.widget( "mobile.collapsibleset", $.mobile.widget, {
  8
+	options: {
  9
+		initSelector: ":jqmData(role='collapsible-set')"
  10
+	},
  11
+	_create: function() {
  12
+		var $el = this.element.addClass( "ui-collapsible-set" ),
  13
+			o = this.options,
  14
+			collapsiblesInSet = $el.children( ":jqmData(role='collapsible')" );
  15
+
  16
+		// Inherit the theme from collapsible-set
  17
+		if ( !o.theme ) {
  18
+			o.theme = $el.jqmData( "theme" );
  19
+		}
  20
+		// Inherit the content-theme from collapsible-set
  21
+		if ( !o.contentTheme ) {
  22
+			o.contentTheme = $el.jqmData( "content-theme" );
  23
+		}
  24
+
  25
+		// Initialize the collapsible set if it's not already initialized
  26
+		if ( !$el.jqmData( "collapsiblebound" ) ) {
  27
+
  28
+			$el
  29
+				.jqmData( "collapsiblebound", true )
  30
+				.bind( "expand collapse", function( event ) {
  31
+					var isCollapse = ( event.type === "collapse" ),
  32
+						collapsible = $( event.target ).closest( ".ui-collapsible" ),
  33
+						widget = collapsible.data( "collapsible" ),
  34
+					    contentTheme = widget.options.contentTheme;
  35
+					if ( contentTheme && collapsible.jqmData( "collapsible-last" ) ) {
  36
+						collapsible.find( widget.options.heading ).first()
  37
+							.find( "a" ).first()
  38
+							.add( ".ui-btn-inner" )
  39
+							.toggleClass( "ui-corner-bottom", isCollapse );
  40
+						collapsible.find( ".ui-collapsible-content" ).toggleClass( "ui-corner-bottom", !isCollapse );
  41
+					}
  42
+				})
  43
+				.bind( "expand", function( event ) {
  44
+					$( event.target )
  45
+						.closest( ".ui-collapsible" )
  46
+						.siblings( ".ui-collapsible" )
  47
+						.trigger( "collapse" );
  48
+
  49
+				});
  50
+
  51
+			// clean up borders
  52
+			collapsiblesInSet.each( function() {
  53
+				$( this ).find( $.mobile.collapsible.prototype.options.heading )
  54
+					.find( "a" ).first()
  55
+					.add( ".ui-btn-inner" )
  56
+					.removeClass( "ui-corner-top ui-corner-bottom" );
  57
+			});
  58
+
  59
+			collapsiblesInSet.first()
  60
+				.find( "a" )
  61
+					.first()
  62
+					.addClass( "ui-corner-top" )
  63
+						.find( ".ui-btn-inner" )
  64
+							.addClass( "ui-corner-top" );
  65
+
  66
+			collapsiblesInSet.last()
  67
+				.jqmData( "collapsible-last", true )
  68
+				.find( "a" )
  69
+					.first()
  70
+					.addClass( "ui-corner-bottom" )
  71
+						.find( ".ui-btn-inner" )
  72
+							.addClass( "ui-corner-bottom" );
  73
+		}
  74
+	}
  75
+});
  76
+
  77
+//auto self-init widgets
  78
+$( document ).bind( "pagecreate create", function( e ){
  79
+	$( $.mobile.collapsibleset.prototype.options.initSelector, e.target ).collapsibleset();
  80
+});
  81
+
  82
+})( jQuery );
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.