# all files / src/mixins/ IndicatorElement.js

79.07% Statements 34/43
65.71% Branches 23/35
83.33% Functions 5/6
79.07% Lines 34/43

    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
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171

    1×

    32136×

    32136×
    32136×
    32136×

    32136×
    32136×
    32136×

    1×

    1×

    1×

    1×
    32136×

    32136×

    32136×

    32136×

    1×
    37549×

    37549×
    7933×
    381×

    381×
    381×

    7933×

    37549×
    37549×

    37549×

    1×
    32136×

    32136×

    32136×

    1×
    17491×

    1×

     /**
     * IndicatorElement is often mixed into other classes to generate an indicator.
     * Indicators are small graphics that are generally used in two ways:
     *
     * - To draw attention to the status of an item. For example, an indicator might be
     *   used to show that an item in a list has errors that need to be resolved.
     * - To clarify the function of a control that acts in an exceptional way (a button
     *   that opens a menu instead of performing an action directly, for example).
     *
     * For a list of indicators included in the library, please see the
     * [OOjs UI documentation on MediaWiki] [1].
     *
     * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Icons,_Indicators,_and_Labels#Indicators
     *
     * @abstract
     * @class
     *
     * @constructor
     * @param {Object} [config] Configuration options
     * @cfg {jQuery} [$indicator] The indicator element created by the class. If this
     *  configuration is omitted, the indicator element will use a generated `<span>`.
     * @cfg {string} [indicator] Symbolic name of the indicator (e.g., ‘alert’ or  ‘down’).
     *  See the [OOjs UI documentation on MediaWiki][2] for a list of indicators included
     *  in the library.
     * [2]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Icons,_Indicators,_and_Labels#Indicators
     * @cfg {string|Function} [indicatorTitle] A text string used as the indicator title,
     *  or a function that returns title text. The indicator title is displayed when users move
     *  the mouse over the indicator.
     */
    OO.ui.mixin.IndicatorElement = function OoUiMixinIndicatorElement( config ) {
    	// Configuration initialization
    	config = config || {};

    	// Properties
    	this.$indicator = null;
    	this.indicator = null;
    	this.indicatorTitle = null;

    	// Initialization
    	this.setIndicator( config.indicator || this.constructor.static.indicator );
    	this.setIndicatorTitle( config.indicatorTitle || this.constructor.static.indicatorTitle );
    	this.setIndicatorElement( config.$indicator || $( '<span>' ) );
    };

    /* Setup */

    OO.initClass( OO.ui.mixin.IndicatorElement );

    /* Static Properties */

    /**
     * Symbolic name of the indicator (e.g., ‘alert’ or  ‘down’).
     * The static property will be overridden if the #indicator configuration is used.
     *
     * @static
     * @inheritable
     * @property {string|null}
     */
    OO.ui.mixin.IndicatorElement.static.indicator = null;

    /**
     * A text string used as the indicator title, a function that returns title text, or `null`
     * for no title. The static property will be overridden if the #indicatorTitle configuration is used.
     *
     * @static
     * @inheritable
     * @property {string|Function|null}
     */
    OO.ui.mixin.IndicatorElement.static.indicatorTitle = null;

    /* Methods */

    /**
     * Set the indicator element.
     *
     * If an element is already set, it will be cleaned up before setting up the new element.
     *
     * @param {jQuery} $indicator Element to use as indicator
     */
    OO.ui.mixin.IndicatorElement.prototype.setIndicatorElement = function ( $indicator ) {
    	Iif ( this.$indicator ) {
    		this.$indicator
    			.removeClass( 'oo-ui-indicatorElement-indicator oo-ui-indicator-' + this.indicator )
    			.removeAttr( 'title' );
    	}

    	this.$indicator = $indicator
    		.addClass( 'oo-ui-indicatorElement-indicator' )
    		.toggleClass( 'oo-ui-indicator-' + this.indicator, !!this.indicator );
    	Iif ( this.indicatorTitle !== null ) {
    		this.$indicator.attr( 'title', this.indicatorTitle );
    	}

    	this.updateThemeClasses();
    };

    /**
     * Set the indicator by its symbolic name: ‘alert’, ‘down’, ‘next’, ‘previous’, ‘required’, ‘up’. Use `null` to remove the indicator.
     *
     * @param {string|null} indicator Symbolic name of indicator, or `null` for no indicator
     * @chainable
     */
    OO.ui.mixin.IndicatorElement.prototype.setIndicator = function ( indicator ) {
    	indicator = typeof indicator === 'string' && indicator.length ? indicator.trim() : null;

    	if ( this.indicator !== indicator ) {
    		if ( this.$indicator ) {
    			Iif ( this.indicator !== null ) {
    				this.$indicator.removeClass( 'oo-ui-indicator-' + this.indicator );
    			}
    			Eif ( indicator !== null ) {
    				this.$indicator.addClass( 'oo-ui-indicator-' + indicator );
    			}
    		}
    		this.indicator = indicator;
    	}

    	this.$element.toggleClass( 'oo-ui-indicatorElement', !!this.indicator );
    	this.updateThemeClasses();

    	return this;
    };

    /**
     * Set the indicator title.
     *
     * The title is displayed when a user moves the mouse over the indicator.
     *
     * @param {string|Function|null} indicatorTitle Indicator title text, a function that returns text, or
     *   `null` for no indicator title
     * @chainable
     */
    OO.ui.mixin.IndicatorElement.prototype.setIndicatorTitle = function ( indicatorTitle ) {
    	indicatorTitle =
    		( typeof indicatorTitle === 'function' || ( typeof indicatorTitle === 'string' && indicatorTitle.length ) ) ?
    			OO.ui.resolveMsg( indicatorTitle ) : null;

    	Iif ( this.indicatorTitle !== indicatorTitle ) {
    		this.indicatorTitle = indicatorTitle;
    		if ( this.$indicator ) {
    			if ( this.indicatorTitle !== null ) {
    				this.$indicator.attr( 'title', indicatorTitle );
    			} else {
    				this.$indicator.removeAttr( 'title' );
    			}
    		}
    	}

    	return this;
    };

    /**
     * Get the symbolic name of the indicator (e.g., ‘alert’ or  ‘down’).
     *
     * @return {string} Symbolic name of indicator
     */
    OO.ui.mixin.IndicatorElement.prototype.getIndicator = function () {
    	return this.indicator;
    };

    /**
     * Get the indicator title.
     *
     * The title is displayed when a user moves the mouse over the indicator.
     *
     * @return {string} Indicator title text
     */
    OO.ui.mixin.IndicatorElement.prototype.getIndicatorTitle = function () {
    	return this.indicatorTitle;
    };