# all files / src/widgets/ MultioptionWidget.js

95% Statements 19/20
75% Branches 3/4
66.67% Functions 2/3
95% Lines 19/20

    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

    1×

    520×

    520×

    520×
    520×

    520×

    520×

    520×

    1×
    1×
    1×

    1×

    1×
    3120×
    3120×
    520×
    520×
    520×

    3120×

     /**
     * MultioptionWidgets are special elements that can be selected and configured with data. The
     * data is often unique for each option, but it does not have to be. MultioptionWidgets are used
     * with OO.ui.SelectWidget to create a selection of mutually exclusive options. For more information
     * and examples, please see the [OOjs UI documentation on MediaWiki][1].
     *
     * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Selects_and_Multioptions
     *
     * @class
     * @extends OO.ui.Widget
     * @mixins OO.ui.mixin.ItemWidget
     * @mixins OO.ui.mixin.LabelElement
     *
     * @constructor
     * @param {Object} [config] Configuration options
     * @cfg {boolean} [selected=false] Whether the option is initially selected
     */
    OO.ui.MultioptionWidget = function OoUiMultioptionWidget( config ) {
    	// Configuration initialization
    	config = config || {};

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

    	// Mixin constructors
    	OO.ui.mixin.ItemWidget.call( this );
    	OO.ui.mixin.LabelElement.call( this, config );

    	// Properties
    	this.selected = null;

    	// Initialization
    	this.$element
    		.addClass( 'oo-ui-multioptionWidget' )
    		.append( this.$label );
    	this.setSelected( config.selected );
    };

    /* Setup */

    OO.inheritClass( OO.ui.MultioptionWidget, OO.ui.Widget );
    OO.mixinClass( OO.ui.MultioptionWidget, OO.ui.mixin.ItemWidget );
    OO.mixinClass( OO.ui.MultioptionWidget, OO.ui.mixin.LabelElement );

    /* Events */

    /**
     * @event change
     *
     * A change event is emitted when the selected state of the option changes.
     *
     * @param {boolean} selected Whether the option is now selected
     */

    /* Methods */

    /**
     * Check if the option is selected.
     *
     * @return {boolean} Item is selected
     */
    OO.ui.MultioptionWidget.prototype.isSelected = function () {
    	return this.selected;
    };

    /**
     * Set the option’s selected state. In general, all modifications to the selection
     * should be handled by the SelectWidget’s {@link OO.ui.SelectWidget#selectItem selectItem( [item] )}
     * method instead of this method.
     *
     * @param {boolean} [state=false] Select option
     * @chainable
     */
    OO.ui.MultioptionWidget.prototype.setSelected = function ( state ) {
    	state = !!state;
    	if ( this.selected !== state ) {
    		this.selected = state;
    		this.emit( 'change', state );
    		this.$element.toggleClass( 'oo-ui-multioptionWidget-selected', state );
    	}
    	return this;
    };