# all files / src/mixins/ TitledElement.js

96.88% Statements 31/32
87.5% Branches 21/24
100% Functions 5/5
96.88% Lines 31/32

    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

    1×

    48631×

    48631×
    48631×

    48631×
    48631×

    1×

    1×

    1×
    48631×

    48631×
    48631×
    5856×

    1×
    48636×
    48636×

    48636×
    5856×
    5856×

    48636×

    1×
    51409×
    51409×
    45553×

    10956×
    10836×

    10956×

    34597×

    51409×

    1×
    51409×

     /**
     * TitledElement is mixed into other classes to provide a `title` attribute.
     * Titles are rendered by the browser and are made visible when the user moves
     * the mouse over the element. Titles are not visible on touch devices.
     *
     *     @example
     *     // TitledElement provides a 'title' attribute to the
     *     // ButtonWidget class
     *     var button = new OO.ui.ButtonWidget( {
     *         label: 'Button with Title',
     *         title: 'I am a button'
     *     } );
     *     $( 'body' ).append( button.$element );
     *
     * @abstract
     * @class
     *
     * @constructor
     * @param {Object} [config] Configuration options
     * @cfg {jQuery} [$titled] The element to which the `title` attribute is applied.
     *  If this config is omitted, the title functionality is applied to $element, the
     *  element created by the class.
     * @cfg {string|Function} [title] The title text or a function that returns text. If
     *  this config is omitted, the value of the {@link #static-title static title} property is used.
     */
    OO.ui.mixin.TitledElement = function OoUiMixinTitledElement( config ) {
    	// Configuration initialization
    	config = config || {};

    	// Properties
    	this.$titled = null;
    	this.title = null;

    	// Initialization
    	this.setTitle( config.title !== undefined ? config.title : this.constructor.static.title );
    	this.setTitledElement( config.$titled || this.$element );
    };

    /* Setup */

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

    /* Static Properties */

    /**
     * The title text, a function that returns text, or `null` for no title. The value of the static property
     * is overridden if the #title config option is used.
     *
     * @static
     * @inheritable
     * @property {string|Function|null}
     */
    OO.ui.mixin.TitledElement.static.title = null;

    /* Methods */

    /**
     * Set the titled element.
     *
     * This method is used to retarget a titledElement mixin so that its functionality applies to the specified element.
     * If an element is already set, the mixin’s effect on that element is removed before the new element is set up.
     *
     * @param {jQuery} $titled Element that should use the 'titled' functionality
     */
    OO.ui.mixin.TitledElement.prototype.setTitledElement = function ( $titled ) {
    	Iif ( this.$titled ) {
    		this.$titled.removeAttr( 'title' );
    	}

    	this.$titled = $titled;
    	if ( this.title ) {
    		this.updateTitle();
    	}
    };

    /**
     * Set title.
     *
     * @param {string|Function|null} title Title text, a function that returns text, or `null` for no title
     * @chainable
     */
    OO.ui.mixin.TitledElement.prototype.setTitle = function ( title ) {
    	title = typeof title === 'function' ? OO.ui.resolveMsg( title ) : title;
    	title = ( typeof title === 'string' && title.length ) ? title : null;

    	if ( this.title !== title ) {
    		this.title = title;
    		this.updateTitle();
    	}

    	return this;
    };

    /**
     * Update the title attribute, in case of changes to title or accessKey.
     *
     * @protected
     * @chainable
     */
    OO.ui.mixin.TitledElement.prototype.updateTitle = function () {
    	var title = this.getTitle();
    	if ( this.$titled ) {
    		if ( title !== null ) {
    			// Only if this is an AccessKeyedElement
    			if ( this.formatTitleWithAccessKey ) {
    				title = this.formatTitleWithAccessKey( title );
    			}
    			this.$titled.attr( 'title', title );
    		} else {
    			this.$titled.removeAttr( 'title' );
    		}
    	}
    	return this;
    };

    /**
     * Get title.
     *
     * @return {string} Title string
     */
    OO.ui.mixin.TitledElement.prototype.getTitle = function () {
    	return this.title;
    };