# all files / src/widgets/ RadioInputWidget.js

85.19% Statements 23/27
60% Branches 6/10
75% Functions 6/8
85.19% Lines 23/27

    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

    1×

    1904×

    1904×

    1904×

    1904×

    1×

    1×

    1×
    692×
    692×
    692×

    1×
    1212×

    1×

    1×

    2216×
    2216×

    1×
    692×

    1×

    1×
    692×
    692×

     /**
     * RadioInputWidget creates a single radio button. Because radio buttons are usually used as a set,
     * in most cases you will want to use a {@link OO.ui.RadioSelectWidget radio select}
     * with {@link OO.ui.RadioOptionWidget radio options} instead of this class. For more information,
     * please see the [OOjs UI documentation on MediaWiki][1].
     *
     * This widget can be used inside an HTML form, such as a OO.ui.FormLayout.
     *
     *     @example
     *     // An example of selected, unselected, and disabled radio inputs
     *     var radio1 = new OO.ui.RadioInputWidget( {
     *         value: 'a',
     *         selected: true
     *     } );
     *     var radio2 = new OO.ui.RadioInputWidget( {
     *         value: 'b'
     *     } );
     *     var radio3 = new OO.ui.RadioInputWidget( {
     *         value: 'c',
     *         disabled: true
     *     } );
     *     // Create a fieldset layout with fields for each radio button.
     *     var fieldset = new OO.ui.FieldsetLayout( {
     *         label: 'Radio inputs'
     *     } );
     *     fieldset.addItems( [
     *         new OO.ui.FieldLayout( radio1, { label: 'Selected', align: 'inline' } ),
     *         new OO.ui.FieldLayout( radio2, { label: 'Unselected', align: 'inline' } ),
     *         new OO.ui.FieldLayout( radio3, { label: 'Disabled', align: 'inline' } ),
     *     ] );
     *     $( 'body' ).append( fieldset.$element );
     *
     * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Inputs
     *
     * @class
     * @extends OO.ui.InputWidget
     *
     * @constructor
     * @param {Object} [config] Configuration options
     * @cfg {boolean} [selected=false] Select the radio button initially. By default, the radio button is not selected.
     */
    OO.ui.RadioInputWidget = function OoUiRadioInputWidget( config ) {
    	// Configuration initialization
    	config = config || {};

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

    	// Initialization
    	this.$element
    		.addClass( 'oo-ui-radioInputWidget' )
    		// Required for pretty styling in WikimediaUI theme
    		.append( $( '<span>' ) );
    	this.setSelected( config.selected !== undefined ? config.selected : false );
    };

    /* Setup */

    OO.inheritClass( OO.ui.RadioInputWidget, OO.ui.InputWidget );

    /* Static Properties */

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

    /* Static Methods */

    /**
     * @inheritdoc
     */
    OO.ui.RadioInputWidget.static.gatherPreInfuseState = function ( node, config ) {
    	var state = OO.ui.RadioInputWidget.parent.static.gatherPreInfuseState( node, config );
    	state.checked = config.$input.prop( 'checked' );
    	return state;
    };

    /* Methods */

    /**
     * @inheritdoc
     * @protected
     */
    OO.ui.RadioInputWidget.prototype.getInputElement = function () {
    	return $( '<input>' ).attr( 'type', 'radio' );
    };

    /**
     * @inheritdoc
     */
    OO.ui.RadioInputWidget.prototype.onEdit = function () {
    	// RadioInputWidget doesn't track its state.
    };

    /**
     * Set selection state of this radio button.
     *
     * @param {boolean} state `true` for selected
     * @chainable
     */
    OO.ui.RadioInputWidget.prototype.setSelected = function ( state ) {
    	// RadioInputWidget doesn't track its state.
    	this.$input.prop( 'checked', state );
    	return this;
    };

    /**
     * Check if this radio button is selected.
     *
     * @return {boolean} Radio is selected
     */
    OO.ui.RadioInputWidget.prototype.isSelected = function () {
    	return this.$input.prop( 'checked' );
    };

    /**
     * @inheritdoc
     */
    OO.ui.RadioInputWidget.prototype.simulateLabelClick = function () {
    	if ( !this.isDisabled() ) {
    		this.$input.click();
    	}
    	this.focus();
    };

    /**
     * @inheritdoc
     */
    OO.ui.RadioInputWidget.prototype.restorePreInfuseState = function ( state ) {
    	OO.ui.RadioInputWidget.parent.prototype.restorePreInfuseState.call( this, state );
    	Iif ( state.checked !== undefined && state.checked !== this.isSelected() ) {
    		this.setSelected( state.checked );
    	}
    };