Permalink
Browse files

Button: Implement widget(), _destroy(), and perform _setOptions() via…

… buttonMarkup()
  • Loading branch information...
gabrielschulhof committed Mar 4, 2013
1 parent ab07a96 commit 981cae71f7669dfd74e4cec3220da59c68338288
Showing with 65 additions and 44 deletions.
  1. +65 −44 js/widgets/forms/button.js
View
@@ -9,6 +9,24 @@ define( [ "jquery", "../../jquery.mobile.widget", "../../jquery.mobile.buttonMar
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {
function splitOptions( o ) {
var key, ret = { btn: {}, widget: {} };
for ( key in o ) {
if ( o[ key ] !== null ) {
if ( key === "disabled" ) {
ret.widget.disabled = o[ key ];
ret.haveWidget = true;
} else if ( key !== "initSelector" ) {
ret.btn[ key ] = o[ key ];
ret.haveBtn = true;
}
}
}
return ret;
}
$.widget( "mobile.button", $.mobile.widget, {
options: {
theme: null,
@@ -21,10 +39,11 @@ $.widget( "mobile.button", $.mobile.widget, {
mini: null,
initSelector: "button, [type='button'], [type='submit'], [type='reset']"
},
_create: function() {
var $el = this.element,
$button,
o,
var $button,
o = this.options,
$el = this.element,
classes = "";
// if this is a link, check if it's been enhanced and, if not, use the right function
@@ -34,53 +53,44 @@ $.widget( "mobile.button", $.mobile.widget, {
}
return;
}
// create a copy of this.options we can pass to buttonMarkup
o = ( function( tdo ) {
var key, ret = {};
for ( key in tdo ) {
if ( tdo[ key ] !== null && key !== "initSelector" ) {
ret[ key ] = tdo[ key ];
}
}
return ret;
} )( this.options );
// get the inherited theme
// TODO centralize for all widgets
if ( !this.options.theme ) {
this.options.theme = $.mobile.getInheritedTheme( this.element, "c" );
if ( !o.theme ) {
o.theme = $.mobile.getInheritedTheme( $el, "c" );
}
o.disabled = $el.prop( "disabled" );
o = splitOptions( o );
// TODO: Post 1.1--once we have time to test thoroughly--any classes manually applied to the original element should be carried over to the enhanced element, with an `-enhanced` suffix. See https://github.com/jquery/jquery-mobile/issues/3577
/* if ( $el[0].className.length ) {
classes = $el[0].className;
} */
if ( !!~$el[0].className.indexOf( "ui-btn-left" ) ) {
if ( !!~$el[ 0 ].className.indexOf( "ui-btn-left" ) ) {
classes = "ui-btn-left";
}
if ( !!~$el[0].className.indexOf( "ui-btn-right" ) ) {
if ( !!~$el[ 0 ].className.indexOf( "ui-btn-right" ) ) {
classes = "ui-btn-right";
}
if ( $el.attr( "type" ) === "submit" || $el.attr( "type" ) === "reset" ) {
classes ? classes += " ui-submit" : classes = "ui-submit";
if ( $el.attr( "type" ) === "submit" || $el.attr( "type" ) === "reset" ) {
classes ? classes += " ui-submit" : classes = "ui-submit";
}
$( "label[for='" + $el.attr( "id" ) + "']" ).addClass( "ui-submit" );
// Add ARIA role
this.button = $( "<div></div>" )
[ $el.html() ? "html" : "text" ]( $el.html() || $el.val() )
.insertBefore( $el )
.buttonMarkup( o )
.buttonMarkup( o.btn )
.addClass( classes )
.append( $el.addClass( "ui-btn-hidden" ) );
this._setOption( "disabled", o.widget.disabled );
$button = this.button;
$button = this.button;
$el.bind({
this._on( $el, {
focus: function() {
$button.addClass( $.mobile.focusClass );
},
@@ -89,42 +99,53 @@ $.widget( "mobile.button", $.mobile.widget, {
$button.removeClass( $.mobile.focusClass );
}
});
},
widget: function() {
return this.button;
},
this.refresh();
_destroy: function() {
var b = this.button;
this.element.insertBefore( b );
b.remove();
},
_setOptions: function( o ) {
o = splitOptions( o );
// Resolve the buttonMarkup options
if ( o.haveBtn ) {
this.button.buttonMarkup( o.btn );
}
// ... and pass the rest up
if ( o.haveWidget ) {
this._super( o.widget );
}
},
_setOption: function( key, value ) {
var op = {};
op[ key ] = value;
if ( key !== "initSelector" ) {
if ( key === "disabled" ) {
value = !!value;
this.element.prop( "disabled", value );
// FIXME: We should be using ui-state-disabled, so we can get rid of this line
this.button.toggleClass( "ui-disabled", value );
} else if ( key !== "initSelector" ) {
this.button.buttonMarkup( op );
// Record the option change in the options and in the DOM data-* attributes
this.element.attr( "data-" + ( $.mobile.ns || "" ) + ( key.replace( /([A-Z])/, "-$1" ).toLowerCase() ), value );
}
this._super( "_setOption", key, value );
},
enable: function() {
this.element.attr( "disabled", false );
this.button.removeClass( "ui-disabled" ).attr( "aria-disabled", false );
return this._setOption( "disabled", false );
},
disable: function() {
this.element.attr( "disabled", true );
this.button.addClass( "ui-disabled" ).attr( "aria-disabled", true );
return this._setOption( "disabled", true );
this._super( key, value );
},
refresh: function() {
var $el = this.element;
if ( $el.prop("disabled") ) {
this.disable();
} else {
this.enable();
}
this._setOption( "disabled", $el.prop( "disabled" ) );
// Grab the button's text element from its implementation-independent data item
$( this.button.data( 'buttonElements' ).text )[ $el.html() ? "html" : "text" ]( $el.html() || $el.val() );

0 comments on commit 981cae7

Please sign in to comment.