Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

[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 gabrielschulhof authored
Showing with 60 additions and 25 deletions.
  1. +58 −22 js/jquery.mobile.buttonMarkup.js
  2. +2 −3 js/jquery.mobile.forms.button.js
80 js/jquery.mobile.buttonMarkup.js
View
@@ -27,17 +27,34 @@ $.fn.buttonMarkup = function( options ) {
textClass = "ui-btn-text",
buttonClass, iconClass,
// Button inner markup
- buttonInner = document.createElement( o.wrapperEls ),
- buttonText = document.createElement( o.wrapperEls ),
- buttonIcon = o.icon ? document.createElement( "span" ) : null;
-
- // if this is a button, check if it's been enhanced and, if not, use the right function
- if( e.tagName === "BUTTON" ) {
- if ( !$( e.parentNode ).hasClass( "ui-btn" ) ) $( e ).button();
- continue;
- }
+ buttonInner,
+ buttonText,
+ buttonIcon,
+ buttonElements;
+
+ $.each(o, function(key, value) {
+ e.setAttribute( "data-" + $.mobile.ns + key, value );
+ });
+
+ // Check if this element is already enhanced
+ buttonElements = $.data(((e.tagName === "INPUT" || e.tagName === "BUTTON") ? e.parentNode : e), "buttonElements")
+
+ if (buttonElements) {
+ e = buttonElements.outer;
+ el = $(e);
+ buttonInner = buttonElements.inner;
+ buttonText = buttonElements.text;
+ // We will recreate this icon below
+ $(buttonElements.icon).remove();
+ buttonElements.icon = null;
+ }
+ else {
+ buttonInner = document.createElement( o.wrapperEls );
+ buttonText = document.createElement( o.wrapperEls );
+ }
+ buttonIcon = o.icon ? document.createElement( "span" ) : null;
- if ( attachEvents ) {
+ if ( attachEvents && !buttonElements) {
attachEvents();
}
@@ -84,29 +101,48 @@ $.fn.buttonMarkup = function( options ) {
buttonClass += " ui-shadow";
}
- e.setAttribute( "data-" + $.mobile.ns + "theme", o.theme );
- el.removeClass( "ui-link" ).addClass( buttonClass );
+ // Remove all button-related classes and re-add the ones calculated this time
+ el.removeClass( function(idx, klass) {
+ var newClass = "";
+ $.each((klass || "").split(" "), function(key, value) {
+ if (value.substring(0, 6) === "ui-btn" || value === "ui-shadow" || value === "ui-link")
+ newClass += value + " ";
+ });
+ return newClass;
+ }).addClass( buttonClass );
buttonInner.className = innerClass;
buttonText.className = textClass;
- buttonInner.appendChild( buttonText );
-
+ if (!buttonElements)
+ buttonInner.appendChild( buttonText );
if ( buttonIcon ) {
buttonIcon.className = iconClass;
- buttonInner.appendChild( buttonIcon );
+ if (!(buttonElements && buttonElements.icon))
+ buttonInner.appendChild( buttonIcon );
}
- while ( e.firstChild ) {
+ while ( e.firstChild && !buttonElements) {
buttonText.appendChild( e.firstChild );
}
- e.appendChild( buttonInner );
-
- // TODO obviously it would be nice to pull this element out instead of
- // retrieving it from the DOM again, but this change is much less obtrusive
- // and 1.0 draws nigh
- $.data( e, 'textWrapper', $( buttonText ) );
+ if (!buttonElements)
+ e.appendChild( buttonInner );
+
+ // Assign a structure containing the elements of this button to the elements of this button. This
+ // will allow us to recognize this as an already-enhanced button in future calls to buttonMarkup().
+ buttonElements = {
+ outer : e,
+ inner : buttonInner,
+ text : buttonText,
+ icon : buttonIcon
+ };
+
+ $.data(e, 'buttonElements', buttonElements);
+ $.data(buttonInner, 'buttonElements', buttonElements);
+ $.data(buttonText, 'buttonElements', buttonElements);
+ if (buttonIcon)
+ $.data(buttonIcon, 'buttonElements', buttonElements);
}
return this;
5 js/jquery.mobile.forms.button.js
View
@@ -110,9 +110,8 @@ $.widget( "mobile.button", $.mobile.widget, {
this.enable();
}
- // the textWrapper is stored as a data element on the button object
- // to prevent referencing by it's implementation details (eg 'class')
- this.button.data( 'textWrapper' ).text( $el.text() || $el.val() );
+ // Grab the button's text element from its implementation-independent data item
+ $(this.button.data( 'buttonElements' ).text).text( $el.text() || $el.val() );
}
});
Please sign in to comment.
Something went wrong with that request. Please try again.