blob: d39007112cfc506109cd1bcec43faa0e07dbe17d [file] [log] [blame]
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
//>>description: Custom-styled native input/buttons
//>>label: Buttons: Input or button-based
//>>group: Forms
//>>css.structure: ../css/structure/jquery.mobile.button.css
//>>css.theme: ../css/themes/default/jquery.mobile.theme.css
define( [ "jquery", "../../jquery.mobile.widget", "../../jquery.mobile.buttonMarkup" ], function( jQuery ) {
//>>excludeEnd("jqmBuildExclude");
(function( $, undefined ) {
$.widget( "mobile.button", $.mobile.widget, {
options: {
theme: null,
icon: null,
iconpos: null,
corners: true,
shadow: true,
iconshadow: true,
initSelector: "button, [type='button'], [type='submit'], [type='reset']"
},
_create: function() {
var $el = this.element,
$button,
o = this.options,
type,
name,
inline = o.inline || $.mobile.getAttrFixed( $el[0], "data-" + $.mobile.ns + "inline" ),
mini = o.mini || $.mobile.getAttrFixed( $el[0], "data-" + $.mobile.ns + "mini" ),
classes = "",
$buttonPlaceholder;
// if this is a link, check if it's been enhanced and, if not, use the right function
if ( $el[ 0 ].tagName === "A" ) {
if ( !$el.hasClass( "ui-btn" ) ) {
$el.buttonMarkup();
}
return;
}
// get the inherited theme
// TODO centralize for all widgets
if ( !this.options.theme ) {
this.options.theme = $.mobile.getInheritedTheme( this.element, "c" );
}
// 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" ) ) {
classes = "ui-btn-left";
}
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";
}
$( "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({
theme: o.theme,
icon: o.icon,
iconpos: o.iconpos,
inline: inline,
corners: o.corners,
shadow: o.shadow,
iconshadow: o.iconshadow,
mini: mini
})
.addClass( classes )
.append( $el.addClass( "ui-btn-hidden" ) );
$button = this.button;
type = $el.attr( "type" );
name = $el.attr( "name" );
// Add hidden input during submit if input type="submit" has a name.
if ( type !== "button" && type !== "reset" && name ) {
$el.bind( "vclick", function() {
// Add hidden input if it doesn't already exist.
if ( $buttonPlaceholder === undefined ) {
$buttonPlaceholder = $( "<input>", {
type: "hidden",
name: $el.attr( "name" ),
value: $el.attr( "value" )
}).insertBefore( $el );
// Bind to doc to remove after submit handling
$.mobile.$document.one( "submit", function() {
$buttonPlaceholder.remove();
// reset the local var so that the hidden input
// will be re-added on subsequent clicks
$buttonPlaceholder = undefined;
});
}
});
}
$el.bind({
focus: function() {
$button.addClass( $.mobile.focusClass );
},
blur: function() {
$button.removeClass( $.mobile.focusClass );
}
});
this.refresh();
},
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 );
},
refresh: function() {
var $el = this.element;
if ( $el.prop("disabled") ) {
this.disable();
} else {
this.enable();
}
// 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() );
}
});
//auto self-init widgets
$.mobile.$document.bind( "pagecreate create", function( e ) {
$.mobile.button.prototype.enhanceWithin( e.target, true );
});
})( jQuery );
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
});
//>>excludeEnd("jqmBuildExclude");