# all files / src/widgets/ ButtonInputWidget.js

94.87% Statements 37/39
93.75% Branches 15/16
80% Functions 4/5
94.87% Lines 37/39

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143

    1×

    3216×

    3216×
    1608×

    3216×

    3216×

    3216×
    3216×
    3216×
    3216×
    3216×

    3216×
    3056×

    3216×

    1×
    1×
    1×
    1×
    1×
    1×

    1×

    1×
    1608×
    1608×
    1608×

    1×
    3216×

    3216×

    160×
    148×

    160×

    3216×

    1×
    3228×
    3056×

    3228×

    1×

     /**
     * ButtonInputWidget is used to submit HTML forms and is intended to be used within
     * a OO.ui.FormLayout. If you do not need the button to work with HTML forms, you probably
     * want to use OO.ui.ButtonWidget instead. Button input widgets can be rendered as either an
     * HTML `<button>` (the default) or an HTML `<input>` tags. See the
     * [OOUI documentation on MediaWiki] [1] for more information.
     *
     *     @example
     *     // A ButtonInputWidget rendered as an HTML button, the default.
     *     var button = new OO.ui.ButtonInputWidget( {
     *         label: 'Input button',
     *         icon: 'check',
     *         value: 'check'
     *     } );
     *     $( 'body' ).append( button.$element );
     *
     * [1]: https://www.mediawiki.org/wiki/OOUI/Widgets/Inputs#Button_inputs
     *
     * @class
     * @extends OO.ui.InputWidget
     * @mixins OO.ui.mixin.ButtonElement
     * @mixins OO.ui.mixin.IconElement
     * @mixins OO.ui.mixin.IndicatorElement
     * @mixins OO.ui.mixin.LabelElement
     * @mixins OO.ui.mixin.TitledElement
     *
     * @constructor
     * @param {Object} [config] Configuration options
     * @cfg {string} [type='button'] The value of the HTML `'type'` attribute: 'button', 'submit' or 'reset'.
     * @cfg {boolean} [useInputTag=false] Use an `<input>` tag instead of a `<button>` tag, the default.
     *  Widgets configured to be an `<input>` do not support {@link #icon icons} and {@link #indicator indicators},
     *  non-plaintext {@link #label labels}, or {@link #value values}. In general, useInputTag should only
     *  be set to `true` when there’s need to support IE 6 in a form with multiple buttons.
     */
    OO.ui.ButtonInputWidget = function OoUiButtonInputWidget( config ) {
    	// Configuration initialization
    	config = $.extend( { type: 'button', useInputTag: false }, config );

    	// See InputWidget#reusePreInfuseDOM about config.$input
    	if ( config.$input ) {
    		config.$input.empty();
    	}

    	// Properties (must be set before parent constructor, which calls #setValue)
    	this.useInputTag = config.useInputTag;

    	// Parent constructor
    	OO.ui.ButtonInputWidget.parent.call( this, config );

    	// Mixin constructors
    	OO.ui.mixin.ButtonElement.call( this, $.extend( {}, config, { $button: this.$input } ) );
    	OO.ui.mixin.IconElement.call( this, config );
    	OO.ui.mixin.IndicatorElement.call( this, config );
    	OO.ui.mixin.LabelElement.call( this, config );
    	OO.ui.mixin.TitledElement.call( this, $.extend( {}, config, { $titled: this.$input } ) );

    	// Initialization
    	if ( !config.useInputTag ) {
    		this.$input.append( this.$icon, this.$label, this.$indicator );
    	}
    	this.$element.addClass( 'oo-ui-buttonInputWidget' );
    };

    /* Setup */

    OO.inheritClass( OO.ui.ButtonInputWidget, OO.ui.InputWidget );
    OO.mixinClass( OO.ui.ButtonInputWidget, OO.ui.mixin.ButtonElement );
    OO.mixinClass( OO.ui.ButtonInputWidget, OO.ui.mixin.IconElement );
    OO.mixinClass( OO.ui.ButtonInputWidget, OO.ui.mixin.IndicatorElement );
    OO.mixinClass( OO.ui.ButtonInputWidget, OO.ui.mixin.LabelElement );
    OO.mixinClass( OO.ui.ButtonInputWidget, OO.ui.mixin.TitledElement );

    /* Static Properties */

    /**
     * @static
     * @inheritdoc
     */
    OO.ui.ButtonInputWidget.static.tagName = 'span';

    /* Methods */

    /**
     * @inheritdoc
     * @protected
     */
    OO.ui.ButtonInputWidget.prototype.getInputElement = function ( config ) {
    	var type;
    	type = [ 'button', 'submit', 'reset' ].indexOf( config.type ) !== -1 ? config.type : 'button';
    	return $( '<' + ( config.useInputTag ? 'input' : 'button' ) + ' type="' + type + '">' );
    };

    /**
     * Set label value.
     *
     * If #useInputTag is `true`, the label is set as the `value` of the `<input>` tag.
     *
     * @param {jQuery|string|Function|null} label Label nodes, text, a function that returns nodes or
     *  text, or `null` for no label
     * @chainable
     */
    OO.ui.ButtonInputWidget.prototype.setLabel = function ( label ) {
    	Iif ( typeof label === 'function' ) {
    		label = OO.ui.resolveMsg( label );
    	}

    	if ( this.useInputTag ) {
    		// Discard non-plaintext labels
    		if ( typeof label !== 'string' ) {
    			label = '';
    		}

    		this.$input.val( label );
    	}

    	return OO.ui.mixin.LabelElement.prototype.setLabel.call( this, label );
    };

    /**
     * Set the value of the input.
     *
     * This method is disabled for button inputs configured as {@link #useInputTag <input> tags}, as
     * they do not support {@link #value values}.
     *
     * @param {string} value New value
     * @chainable
     */
    OO.ui.ButtonInputWidget.prototype.setValue = function ( value ) {
    	if ( !this.useInputTag ) {
    		OO.ui.ButtonInputWidget.parent.prototype.setValue.call( this, value );
    	}
    	return this;
    };

    /**
     * @inheritdoc
     */
    OO.ui.ButtonInputWidget.prototype.getInputId = function () {
    	// Disable generating `<label>` elements for buttons. One would very rarely need additional label
    	// for a button, and it's already a big clickable target, and it causes unexpected rendering.
    	return null;
    };