| /** |
| * 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){ |
| try { |
| 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); |
| } catch (ex) {} //don't fail if we can't render progress |
| return this; |
| }; |