Skip to content
This repository
Browse code

[button] Make buttonMarkup reusable on the same element

Do not simply skip buttons that are already marked up. Instead, recover those
structural elements making up the button which were created during the first
buttonMarkup call and update them to conform to the current state of the
options.
  • Loading branch information...
commit a13793a769376c8bde29ed693e4a410c744a608f 1 parent 8ed986b
Gabriel "_|Nix|_" Schulhof authored February 10, 2012
80  js/jquery.mobile.buttonMarkup.js
@@ -27,17 +27,34 @@ $.fn.buttonMarkup = function( options ) {
27 27
 			textClass = "ui-btn-text",
28 28
 			buttonClass, iconClass,
29 29
 			// Button inner markup
30  
-			buttonInner = document.createElement( o.wrapperEls ),
31  
-			buttonText = document.createElement( o.wrapperEls ),
32  
-			buttonIcon = o.icon ? document.createElement( "span" ) : null;
33  
-
34  
-		// if this is a button, check if it's been enhanced and, if not, use the right function
35  
-		if( e.tagName === "BUTTON" ) {
36  
-	 	 	if ( !$( e.parentNode ).hasClass( "ui-btn" ) ) $( e ).button();
37  
-	 	 	continue;
38  
- 	 	}
  30
+			buttonInner,
  31
+			buttonText,
  32
+			buttonIcon,
  33
+			buttonElements;
  34
+
  35
+		$.each(o, function(key, value) {
  36
+			e.setAttribute( "data-" + $.mobile.ns + key, value );
  37
+		});
  38
+
  39
+		// Check if this element is already enhanced
  40
+		buttonElements = $.data(((e.tagName === "INPUT" || e.tagName === "BUTTON") ? e.parentNode : e), "buttonElements")
  41
+
  42
+		if (buttonElements) {
  43
+			e = buttonElements.outer;
  44
+			el = $(e);
  45
+			buttonInner = buttonElements.inner;
  46
+			buttonText = buttonElements.text;
  47
+			// We will recreate this icon below
  48
+			$(buttonElements.icon).remove();
  49
+			buttonElements.icon = null;
  50
+		}
  51
+		else {
  52
+			buttonInner = document.createElement( o.wrapperEls );
  53
+			buttonText = document.createElement( o.wrapperEls );
  54
+		}
  55
+		buttonIcon = o.icon ? document.createElement( "span" ) : null;
39 56
 
40  
-		if ( attachEvents ) {
  57
+		if ( attachEvents && !buttonElements) {
41 58
 			attachEvents();
42 59
 		}
43 60
 
@@ -84,29 +101,48 @@ $.fn.buttonMarkup = function( options ) {
84 101
 			buttonClass += " ui-shadow";
85 102
 		}
86 103
 
87  
-		e.setAttribute( "data-" + $.mobile.ns + "theme", o.theme );
88  
-		el.removeClass( "ui-link" ).addClass( buttonClass );
  104
+		// Remove all button-related classes and re-add the ones calculated this time
  105
+		el.removeClass( function(idx, klass) {
  106
+			var newClass = "";
  107
+			$.each((klass || "").split(" "), function(key, value) {
  108
+				if (value.substring(0, 6) === "ui-btn" || value === "ui-shadow" || value === "ui-link")
  109
+					newClass += value + " ";
  110
+			});
  111
+			return newClass;
  112
+		}).addClass( buttonClass );
89 113
 
90 114
 		buttonInner.className = innerClass;
91 115
 
92 116
 		buttonText.className = textClass;
93  
-		buttonInner.appendChild( buttonText );
94  
-
  117
+		if (!buttonElements)
  118
+			buttonInner.appendChild( buttonText );
95 119
 		if ( buttonIcon ) {
96 120
 			buttonIcon.className = iconClass;
97  
-			buttonInner.appendChild( buttonIcon );
  121
+			if (!(buttonElements && buttonElements.icon))
  122
+				buttonInner.appendChild( buttonIcon );
98 123
 		}
99 124
 
100  
-		while ( e.firstChild ) {
  125
+		while ( e.firstChild && !buttonElements) {
101 126
 			buttonText.appendChild( e.firstChild );
102 127
 		}
103 128
 
104  
-		e.appendChild( buttonInner );
105  
-
106  
-		// TODO obviously it would be nice to pull this element out instead of
107  
-		// retrieving it from the DOM again, but this change is much less obtrusive
108  
-		// and 1.0 draws nigh
109  
-		$.data( e, 'textWrapper', $( buttonText ) );
  129
+		if (!buttonElements)
  130
+			e.appendChild( buttonInner );
  131
+
  132
+		// Assign a structure containing the elements of this button to the elements of this button. This
  133
+		// will allow us to recognize this as an already-enhanced button in future calls to buttonMarkup().
  134
+		buttonElements = {
  135
+			outer : e,
  136
+			inner : buttonInner,
  137
+			text  : buttonText,
  138
+			icon  : buttonIcon
  139
+		};
  140
+
  141
+		$.data(e,           'buttonElements', buttonElements);
  142
+		$.data(buttonInner, 'buttonElements', buttonElements);
  143
+		$.data(buttonText,  'buttonElements', buttonElements);
  144
+		if (buttonIcon)
  145
+			$.data(buttonIcon, 'buttonElements', buttonElements);
110 146
 	}
111 147
 
112 148
 	return this;
5  js/jquery.mobile.forms.button.js
@@ -110,9 +110,8 @@ $.widget( "mobile.button", $.mobile.widget, {
110 110
 			this.enable();
111 111
 		}
112 112
 
113  
-		// the textWrapper is stored as a data element on the button object
114  
-		// to prevent referencing by it's implementation details (eg 'class')
115  
-		this.button.data( 'textWrapper' ).text( $el.text() || $el.val() );
  113
+                // Grab the button's text element from its implementation-independent data item
  114
+		$(this.button.data( 'buttonElements' ).text).text( $el.text() || $el.val() );
116 115
 	}
117 116
 });
118 117
 

0 notes on commit a13793a

Please sign in to comment.
Something went wrong with that request. Please try again.