181 lines
4.1 KiB
JavaScript
181 lines
4.1 KiB
JavaScript
|
/*!
|
||
|
* jQuery UI Progressbar 1.13.1
|
||
|
* http://jqueryui.com
|
||
|
*
|
||
|
* Copyright jQuery Foundation and other contributors
|
||
|
* Released under the MIT license.
|
||
|
* http://jquery.org/license
|
||
|
*/
|
||
|
|
||
|
//>>label: Progressbar
|
||
|
//>>group: Widgets
|
||
|
/* eslint-disable max-len */
|
||
|
//>>description: Displays a status indicator for loading state, standard percentage, and other progress indicators.
|
||
|
/* eslint-enable max-len */
|
||
|
//>>docs: http://api.jqueryui.com/progressbar/
|
||
|
//>>demos: http://jqueryui.com/progressbar/
|
||
|
//>>css.structure: ../../themes/base/core.css
|
||
|
//>>css.structure: ../../themes/base/progressbar.css
|
||
|
//>>css.theme: ../../themes/base/theme.css
|
||
|
|
||
|
( function( factory ) {
|
||
|
"use strict";
|
||
|
|
||
|
if ( typeof define === "function" && define.amd ) {
|
||
|
|
||
|
// AMD. Register as an anonymous module.
|
||
|
define( [
|
||
|
"jquery",
|
||
|
"./core"
|
||
|
], factory );
|
||
|
} else {
|
||
|
|
||
|
// Browser globals
|
||
|
factory( jQuery );
|
||
|
}
|
||
|
} )( function( $ ) {
|
||
|
"use strict";
|
||
|
|
||
|
return $.widget( "ui.progressbar", {
|
||
|
version: "1.13.1",
|
||
|
options: {
|
||
|
classes: {
|
||
|
"ui-progressbar": "ui-corner-all",
|
||
|
"ui-progressbar-value": "ui-corner-left",
|
||
|
"ui-progressbar-complete": "ui-corner-right"
|
||
|
},
|
||
|
max: 100,
|
||
|
value: 0,
|
||
|
|
||
|
change: null,
|
||
|
complete: null
|
||
|
},
|
||
|
|
||
|
min: 0,
|
||
|
|
||
|
_create: function() {
|
||
|
|
||
|
// Constrain initial value
|
||
|
this.oldValue = this.options.value = this._constrainedValue();
|
||
|
|
||
|
this.element.attr( {
|
||
|
|
||
|
// Only set static values; aria-valuenow and aria-valuemax are
|
||
|
// set inside _refreshValue()
|
||
|
role: "progressbar",
|
||
|
"aria-valuemin": this.min
|
||
|
} );
|
||
|
this._addClass( "ui-progressbar", "ui-widget ui-widget-content" );
|
||
|
|
||
|
this.valueDiv = $( "<div>" ).appendTo( this.element );
|
||
|
this._addClass( this.valueDiv, "ui-progressbar-value", "ui-widget-header" );
|
||
|
this._refreshValue();
|
||
|
},
|
||
|
|
||
|
_destroy: function() {
|
||
|
this.element.removeAttr( "role aria-valuemin aria-valuemax aria-valuenow" );
|
||
|
|
||
|
this.valueDiv.remove();
|
||
|
},
|
||
|
|
||
|
value: function( newValue ) {
|
||
|
if ( newValue === undefined ) {
|
||
|
return this.options.value;
|
||
|
}
|
||
|
|
||
|
this.options.value = this._constrainedValue( newValue );
|
||
|
this._refreshValue();
|
||
|
},
|
||
|
|
||
|
_constrainedValue: function( newValue ) {
|
||
|
if ( newValue === undefined ) {
|
||
|
newValue = this.options.value;
|
||
|
}
|
||
|
|
||
|
this.indeterminate = newValue === false;
|
||
|
|
||
|
// Sanitize value
|
||
|
if ( typeof newValue !== "number" ) {
|
||
|
newValue = 0;
|
||
|
}
|
||
|
|
||
|
return this.indeterminate ? false :
|
||
|
Math.min( this.options.max, Math.max( this.min, newValue ) );
|
||
|
},
|
||
|
|
||
|
_setOptions: function( options ) {
|
||
|
|
||
|
// Ensure "value" option is set after other values (like max)
|
||
|
var value = options.value;
|
||
|
delete options.value;
|
||
|
|
||
|
this._super( options );
|
||
|
|
||
|
this.options.value = this._constrainedValue( value );
|
||
|
this._refreshValue();
|
||
|
},
|
||
|
|
||
|
_setOption: function( key, value ) {
|
||
|
if ( key === "max" ) {
|
||
|
|
||
|
// Don't allow a max less than min
|
||
|
value = Math.max( this.min, value );
|
||
|
}
|
||
|
this._super( key, value );
|
||
|
},
|
||
|
|
||
|
_setOptionDisabled: function( value ) {
|
||
|
this._super( value );
|
||
|
|
||
|
this.element.attr( "aria-disabled", value );
|
||
|
this._toggleClass( null, "ui-state-disabled", !!value );
|
||
|
},
|
||
|
|
||
|
_percentage: function() {
|
||
|
return this.indeterminate ?
|
||
|
100 :
|
||
|
100 * ( this.options.value - this.min ) / ( this.options.max - this.min );
|
||
|
},
|
||
|
|
||
|
_refreshValue: function() {
|
||
|
var value = this.options.value,
|
||
|
percentage = this._percentage();
|
||
|
|
||
|
this.valueDiv
|
||
|
.toggle( this.indeterminate || value > this.min )
|
||
|
.width( percentage.toFixed( 0 ) + "%" );
|
||
|
|
||
|
this
|
||
|
._toggleClass( this.valueDiv, "ui-progressbar-complete", null,
|
||
|
value === this.options.max )
|
||
|
._toggleClass( "ui-progressbar-indeterminate", null, this.indeterminate );
|
||
|
|
||
|
if ( this.indeterminate ) {
|
||
|
this.element.removeAttr( "aria-valuenow" );
|
||
|
if ( !this.overlayDiv ) {
|
||
|
this.overlayDiv = $( "<div>" ).appendTo( this.valueDiv );
|
||
|
this._addClass( this.overlayDiv, "ui-progressbar-overlay" );
|
||
|
}
|
||
|
} else {
|
||
|
this.element.attr( {
|
||
|
"aria-valuemax": this.options.max,
|
||
|
"aria-valuenow": value
|
||
|
} );
|
||
|
if ( this.overlayDiv ) {
|
||
|
this.overlayDiv.remove();
|
||
|
this.overlayDiv = null;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
if ( this.oldValue !== value ) {
|
||
|
this.oldValue = value;
|
||
|
this._trigger( "change" );
|
||
|
}
|
||
|
if ( value === this.options.max ) {
|
||
|
this._trigger( "complete" );
|
||
|
}
|
||
|
}
|
||
|
} );
|
||
|
|
||
|
} );
|