You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
2.9 KiB
131 lines
2.9 KiB
/* |
|
* @ Dmitry Farafonov |
|
*/ |
|
|
|
(function($){ |
|
$.ProgressBar = function(options) { |
|
this.element = $(options.boundingBox); |
|
if (options.on && options.on.complete){ |
|
this.onComplete = options.on.complete; |
|
} |
|
if (options.on && options.on.valueChange){ |
|
this.onValueChange = options.on.valueChange; |
|
} |
|
|
|
this._create(); |
|
|
|
if (options.label) |
|
this.set("label", options.label); |
|
if (options.value) |
|
this.value(options.value); |
|
if (options.max) |
|
this.set("max", options.max); |
|
}; |
|
$.ProgressBar.prototype = { |
|
options: { |
|
value: 0, |
|
max: 100 |
|
}, |
|
|
|
min: 0, |
|
|
|
_create: function() { |
|
this.element |
|
.addClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" ) |
|
.attr({ |
|
role: "progressbar", |
|
"aria-valuemin": this.min, |
|
"aria-valuemax": this.options.max, |
|
"aria-valuenow": this._value() |
|
}); |
|
|
|
this.valueDiv = $( "<div class='ui-progressbar-label'></div>" ) |
|
.appendTo( this.element ); |
|
|
|
this.valueDiv = $( "<div class='ui-progressbar-value ui-widget-header ui-corner-left'></div>" ) |
|
.appendTo( this.element ); |
|
|
|
this.oldValue = this._value(); |
|
this._refreshValue(); |
|
}, |
|
|
|
_destroy: function() { |
|
this.element |
|
.removeClass( "ui-progressbar ui-widget ui-widget-content ui-corner-all" ) |
|
.removeAttr( "role" ) |
|
.removeAttr( "aria-valuemin" ) |
|
.removeAttr( "aria-valuemax" ) |
|
.removeAttr( "aria-valuenow" ); |
|
|
|
this.valueDiv.remove(); |
|
}, |
|
|
|
value: function( newValue ) { |
|
if ( newValue === undefined ) { |
|
return this._value(); |
|
} |
|
|
|
this._setOption( "value", newValue ); |
|
return this; |
|
}, |
|
|
|
_setOption: function( key, value ) { |
|
if ( key === "value" ) { |
|
//var oldVal = this.options.value; |
|
this.options.value = value; |
|
this._refreshValue(); |
|
|
|
if (this.onValueChange) |
|
this.onValueChange.apply(this, [{oldVal: this.oldValue, newVal: value}]); |
|
|
|
if ( this._value() === this.options.max ) { |
|
//this._trigger( "complete" ); |
|
if (this.onComplete) |
|
this.onComplete.apply(this); |
|
} |
|
} else if (key === "label") { |
|
$(this.element).find(".ui-progressbar-label").html(value); |
|
} else if (key === "max") { |
|
this.options.max = value; |
|
} |
|
|
|
//this._super( key, value ); |
|
}, |
|
|
|
_value: function() { |
|
var val = this.options.value; |
|
// normalize invalid value |
|
if ( typeof val !== "number" ) { |
|
val = 0; |
|
} |
|
return Math.min( this.options.max, Math.max( this.min, val ) ); |
|
}, |
|
|
|
_percentage: function() { |
|
return 100 * this._value() / this.options.max; |
|
}, |
|
|
|
_refreshValue: function() { |
|
var value = this.value(), |
|
percentage = this._percentage(); |
|
|
|
if ( this.oldValue !== value ) { |
|
this.oldValue = value; |
|
//this._trigger( "change" ); |
|
} |
|
|
|
this.valueDiv |
|
.toggle( value > this.min ) |
|
.toggleClass( "ui-corner-right", value === this.options.max ) |
|
.width( percentage.toFixed(0) + "%" ); |
|
this.element.attr( "aria-valuenow", value ); |
|
|
|
//$(this.element).find(".ui-progressbar-label").html(value + "%"); |
|
}, |
|
|
|
set: function(key, value){ |
|
this._setOption(key, value); |
|
} |
|
}; |
|
|
|
})( jQuery ); |