trAvis - MANAGER
Edit File: circle-progress.js
(function(a){function b(a){this.init(a)}b.prototype={value:0,size:100,startAngle:-Math.PI,thickness:"auto",fill:{gradient:["#3aeabb","#fdd250"]},emptyFill:"rgba(0, 0, 0, .1)",animation:{duration:1200,easing:"circleProgressEasing"},animationStartValue:0,reverse:!1,lineCap:"butt",constructor:b,el:null,canvas:null,ctx:null,radius:0,arcFill:null,lastFrameValue:0,init:function(b){a.extend(this,b),this.radius=this.size/2,this.initWidget(),this.initFill(),this.draw()},initWidget:function(){var b=this.canvas=this.canvas||a("<canvas>").prependTo(this.el)[0];b.width=this.size,b.height=this.size,this.ctx=b.getContext("2d")},initFill:function(){function b(){var b=a("<canvas>")[0];b.width=c.size,b.height=c.size,b.getContext("2d").drawImage(o,0,0,f,f),c.arcFill=c.ctx.createPattern(b,"no-repeat"),c.drawFrame(c.lastFrameValue)}var c=this,d=this.fill,e=this.ctx,f=this.size;if(!d)throw Error("The fill is not specified!");if(d.color&&(this.arcFill=d.color),d.gradient){var g=d.gradient;if(1==g.length)this.arcFill=g[0];else if(1<g.length){for(var h=d.gradientAngle||0,j=d.gradientDirection||[f/2*(1-Math.cos(h)),f/2*(1+Math.sin(h)),f/2*(1+Math.cos(h)),f/2*(1-Math.sin(h))],k=e.createLinearGradient.apply(e,j),l=0;l<g.length;l++){var m=g[l],n=l/(g.length-1);a.isArray(m)&&(n=m[1],m=m[0]),k.addColorStop(n,m)}this.arcFill=k}}if(d.image){var o;d.image instanceof Image?o=d.image:(o=new Image,o.src=d.image),o.complete?b():o.onload=b}},draw:function(){this.animation?this.drawAnimated(this.value):this.drawFrame(this.value)},drawFrame:function(a){this.lastFrameValue=a,this.ctx.clearRect(0,0,this.size,this.size),this.drawEmptyArc(a),this.drawArc(a)},drawArc:function(b){var c=this.ctx,d=this.radius,e=this.getThickness(),f=this.startAngle;c.save(),c.beginPath(),this.reverse?c.arc(d,d,d-e/2,f-2*Math.PI*b,f):c.arc(d,d,d-e/2,f,f+2*Math.PI*b),c.lineWidth=e,c.lineCap=this.lineCap,c.strokeStyle=this.arcFill,c.stroke(),c.restore()},drawEmptyArc:function(b){var c=this.ctx,d=this.radius,e=this.getThickness(),f=this.startAngle;1>b&&(c.save(),c.beginPath(),0>=b?c.arc(d,d,d-e/2,0,2*Math.PI):this.reverse?c.arc(d,d,d-e/2,f,f-2*Math.PI*b):c.arc(d,d,d-e/2,f+2*Math.PI*b,f),c.lineWidth=e,c.strokeStyle=this.emptyFill,c.stroke(),c.restore())},drawAnimated:function(b){var c=this,d=this.el,e=a(this.canvas);e.stop(!0,!1),d.trigger("circle-animation-start"),e.css({animationProgress:0}).animate({animationProgress:1},a.extend({},this.animation,{step:function(a){var e=c.animationStartValue*(1-a)+b*a;c.drawFrame(e),d.trigger("circle-animation-progress",[a,e])}})).promise().always(function(){d.trigger("circle-animation-end")})},getThickness:function(){return a.isNumeric(this.thickness)?this.thickness:this.size/14},getValue:function(){return this.value},setValue:function(a){this.animation&&(this.animationStartValue=this.lastFrameValue),this.value=a,this.draw()}},a.circleProgress={defaults:b.prototype},a.easing.circleProgressEasing=function(a,e,f,b,c){return 1>(e/=c/2)?b/2*e*e*e+f:b/2*((e-=2)*e*e+2)+f},a.fn.circleProgress=function(c,d){var e=this.data("circle-progress");if("widget"==c){if(!e)throw Error("Calling \"widget\" method on not initialized instance is forbidden");return e.canvas}if("value"==c){if(!e)throw Error("Calling \"value\" method on not initialized instance is forbidden");if("undefined"==typeof d)return e.getValue();var f=arguments[1];return this.each(function(){a(this).data("circle-progress").setValue(f)})}return this.each(function(){var d=a(this),e=d.data("circle-progress"),f=a.isPlainObject(c)?c:{};if(e)e.init(f);else{var g=a.extend({},d.data());"string"==typeof g.fill&&(g.fill=JSON.parse(g.fill)),"string"==typeof g.animation&&(g.animation=JSON.parse(g.animation)),f=a.extend(g,f),f.el=d,e=new b(f),d.data("circle-progress",e)}})}})(jQuery);