126 lines
2.0 KiB
JavaScript
126 lines
2.0 KiB
JavaScript
|
|
||
|
/**
|
||
|
* Expose `Progress`.
|
||
|
*/
|
||
|
|
||
|
module.exports = Progress;
|
||
|
|
||
|
/**
|
||
|
* Initialize a new `Progress` indicator.
|
||
|
*/
|
||
|
|
||
|
function Progress() {
|
||
|
this.percent = 0;
|
||
|
this.size(0);
|
||
|
this.fontSize(11);
|
||
|
this.font('helvetica, arial, sans-serif');
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Set progress size to `n`.
|
||
|
*
|
||
|
* @param {Number} n
|
||
|
* @return {Progress} for chaining
|
||
|
* @api public
|
||
|
*/
|
||
|
|
||
|
Progress.prototype.size = function(n){
|
||
|
this._size = n;
|
||
|
return this;
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* Set text to `str`.
|
||
|
*
|
||
|
* @param {String} str
|
||
|
* @return {Progress} for chaining
|
||
|
* @api public
|
||
|
*/
|
||
|
|
||
|
Progress.prototype.text = function(str){
|
||
|
this._text = str;
|
||
|
return this;
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* Set font size to `n`.
|
||
|
*
|
||
|
* @param {Number} n
|
||
|
* @return {Progress} for chaining
|
||
|
* @api public
|
||
|
*/
|
||
|
|
||
|
Progress.prototype.fontSize = function(n){
|
||
|
this._fontSize = n;
|
||
|
return this;
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* Set font `family`.
|
||
|
*
|
||
|
* @param {String} family
|
||
|
* @return {Progress} for chaining
|
||
|
*/
|
||
|
|
||
|
Progress.prototype.font = function(family){
|
||
|
this._font = family;
|
||
|
return this;
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* Update percentage to `n`.
|
||
|
*
|
||
|
* @param {Number} n
|
||
|
* @return {Progress} for chaining
|
||
|
*/
|
||
|
|
||
|
Progress.prototype.update = function(n){
|
||
|
this.percent = n;
|
||
|
return this;
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* Draw on `ctx`.
|
||
|
*
|
||
|
* @param {CanvasRenderingContext2d} ctx
|
||
|
* @return {Progress} for chaining
|
||
|
*/
|
||
|
|
||
|
Progress.prototype.draw = function(ctx){
|
||
|
var percent = Math.min(this.percent, 100)
|
||
|
, size = this._size
|
||
|
, half = size / 2
|
||
|
, x = half
|
||
|
, y = half
|
||
|
, rad = half - 1
|
||
|
, fontSize = this._fontSize;
|
||
|
|
||
|
ctx.font = fontSize + 'px ' + this._font;
|
||
|
|
||
|
var angle = Math.PI * 2 * (percent / 100);
|
||
|
ctx.clearRect(0, 0, size, size);
|
||
|
|
||
|
// outer circle
|
||
|
ctx.strokeStyle = '#9f9f9f';
|
||
|
ctx.beginPath();
|
||
|
ctx.arc(x, y, rad, 0, angle, false);
|
||
|
ctx.stroke();
|
||
|
|
||
|
// inner circle
|
||
|
ctx.strokeStyle = '#eee';
|
||
|
ctx.beginPath();
|
||
|
ctx.arc(x, y, rad - 1, 0, angle, true);
|
||
|
ctx.stroke();
|
||
|
|
||
|
// text
|
||
|
var text = this._text || (percent | 0) + '%'
|
||
|
, w = ctx.measureText(text).width;
|
||
|
|
||
|
ctx.fillText(
|
||
|
text
|
||
|
, x - w / 2 + 1
|
||
|
, y + fontSize / 2 - 1);
|
||
|
|
||
|
return this;
|
||
|
};
|