# all files / src/widgets/ ProgressBarWidget.js

95% Statements 19/20
83.33% Branches 5/6
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
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101

    1×

    60×

    60×

    60×
    60×

    60×
    60×
    60×

    1×

    1×

    1×

    1×
    60×

    60×
    36×
    36×

    24×
    24×

    60×

     /**
     * Progress bars visually display the status of an operation, such as a download,
     * and can be either determinate or indeterminate:
     *
     * - **determinate** process bars show the percent of an operation that is complete.
     *
     * - **indeterminate** process bars use a visual display of motion to indicate that an operation
     *   is taking place. Because the extent of an indeterminate operation is unknown, the bar does
     *   not use percentages.
     *
     * The value of the `progress` configuration determines whether the bar is determinate or indeterminate.
     *
     *     @example
     *     // Examples of determinate and indeterminate progress bars.
     *     var progressBar1 = new OO.ui.ProgressBarWidget( {
     *         progress: 33
     *     } );
     *     var progressBar2 = new OO.ui.ProgressBarWidget();
     *
     *     // Create a FieldsetLayout to layout progress bars
     *     var fieldset = new OO.ui.FieldsetLayout;
     *     fieldset.addItems( [
     *        new OO.ui.FieldLayout( progressBar1, {label: 'Determinate', align: 'top'}),
     *        new OO.ui.FieldLayout( progressBar2, {label: 'Indeterminate', align: 'top'})
     *     ] );
     *     $( 'body' ).append( fieldset.$element );
     *
     * @class
     * @extends OO.ui.Widget
     *
     * @constructor
     * @param {Object} [config] Configuration options
     * @cfg {number|boolean} [progress=false] The type of progress bar (determinate or indeterminate).
     *  To create a determinate progress bar, specify a number that reflects the initial percent complete.
     *  By default, the progress bar is indeterminate.
     */
    OO.ui.ProgressBarWidget = function OoUiProgressBarWidget( config ) {
    	// Configuration initialization
    	config = config || {};

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

    	// Properties
    	this.$bar = $( '<div>' );
    	this.progress = null;

    	// Initialization
    	this.setProgress( config.progress !== undefined ? config.progress : false );
    	this.$bar.addClass( 'oo-ui-progressBarWidget-bar' );
    	this.$element
    		.attr( {
    			role: 'progressbar',
    			'aria-valuemin': 0,
    			'aria-valuemax': 100
    		} )
    		.addClass( 'oo-ui-progressBarWidget' )
    		.append( this.$bar );
    };

    /* Setup */

    OO.inheritClass( OO.ui.ProgressBarWidget, OO.ui.Widget );

    /* Static Properties */

    /**
     * @static
     * @inheritdoc
     */
    OO.ui.ProgressBarWidget.static.tagName = 'div';

    /* Methods */

    /**
     * Get the percent of the progress that has been completed. Indeterminate progresses will return `false`.
     *
     * @return {number|boolean} Progress percent
     */
    OO.ui.ProgressBarWidget.prototype.getProgress = function () {
    	return this.progress;
    };

    /**
     * Set the percent of the process completed or `false` for an indeterminate process.
     *
     * @param {number|boolean} progress Progress percent or `false` for indeterminate
     */
    OO.ui.ProgressBarWidget.prototype.setProgress = function ( progress ) {
    	this.progress = progress;

    	if ( progress !== false ) {
    		this.$bar.css( 'width', this.progress + '%' );
    		this.$element.attr( 'aria-valuenow', this.progress );
    	} else {
    		this.$bar.css( 'width', '' );
    		this.$element.removeAttr( 'aria-valuenow' );
    	}
    	this.$element.toggleClass( 'oo-ui-progressBarWidget-indeterminate', progress === false );
    };