diff options
Diffstat (limited to 'vendor/oojs/oojs-ui/src/widgets/ProgressBarWidget.js')
-rw-r--r-- | vendor/oojs/oojs-ui/src/widgets/ProgressBarWidget.js | 96 |
1 files changed, 96 insertions, 0 deletions
diff --git a/vendor/oojs/oojs-ui/src/widgets/ProgressBarWidget.js b/vendor/oojs/oojs-ui/src/widgets/ProgressBarWidget.js new file mode 100644 index 00000000..a4676282 --- /dev/null +++ b/vendor/oojs/oojs-ui/src/widgets/ProgressBarWidget.js @@ -0,0 +1,96 @@ +/** + * 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.super.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 */ + +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 ); +}; |