-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathjquery.mambo.min.js
5 lines (5 loc) · 4.08 KB
/
jquery.mambo.min.js
1
2
3
4
5
/*
* Mambo jQuery Plugin
* @author: Valerio Barrila aka NinjaTux
* @twitter: ninjatux2k
*/(function(a,b,c,d){"use strict";function i(b,c){this.element=b;this.options=a.extend(!0,{},f,c);this._defaults=f;this._name=e;this.init()}var e="mambo",f={percentage:100,circleColor:"#F2AC29",circleBorder:"#FFF",ringStyle:"percentage",ringColor:"#F2762E",ringBackground:"#CCC",labelColor:"#FFF",displayValue:!0,drawShadow:!1},g=Math.PI/180,h=2*Math.PI;i.prototype={init:function(){if(this.checkCanvas()){this.context=this.element.getContext("2d");this.percentage=this.options.percentage*3.6;this.points=this.getPoints();a(this.element).css({width:this.points.width+"px",height:this.points.width+"px"});this.linesAndRadiuses=this.getLinesAndRadiuses();this.drawPercentage();this.options.ringStyle==="full"&&this.percentage!==360&&this.drawExtraPercentage();this.drawInternalCircle();this.options.drawShadow&&this.drawShadow();this.options.image?this.drawImage():this.drawText()}},drawInternalCircle:function(){this.context.beginPath();this.context.moveTo(this.points.x,this.points.x);this.context.arc(this.points.x,this.points.x,this.linesAndRadiuses.internalRadius,0,h,!1);this.context.fillStyle=this.options.circleColor;this.context.lineWidth=this.linesAndRadiuses.internalLine;this.context.closePath();this.context.strokeStyle=this.options.circleBorder;this.context.stroke();this.context.fill()},drawPercentage:function(){this.context.beginPath();this.context.moveTo(this.points.x,this.points.x);this.context.arc(this.points.x,this.points.x,this.linesAndRadiuses.externalRadius,this.points.angle.start,this.points.angle.end,!1);this.context.closePath();this.context.fillStyle=this.options.ringColor;this.context.fill()},drawExtraPercentage:function(){this.context.beginPath();this.context.moveTo(this.points.x,this.points.x);this.context.arc(this.points.x,this.points.x,this.linesAndRadiuses.externalRadius,this.points.angle.start,this.points.angle.end,!0);this.context.closePath();this.context.fillStyle=this.options.ringBackground;this.context.fill()},drawShadow:function(){this.context.beginPath();this.context.arc(this.points.x,this.points.x,this.linesAndRadiuses.shadowRadius,0,h,!1);this.context.shadowColor="#cbcbcb";this.context.lineWidth=this.linesAndRadiuses.shadowLine;this.context.strokeStyle="rgba(255,255,255, 0.3)";this.context.stroke()},drawImage:function(){var a=(this.linesAndRadiuses.internalRadius-this.linesAndRadiuses.internalLine)*Math.sqrt(2),b=new Image,c,d,e=this;b.src=this.options.image;b.onload=function(){if(b.width>b.height){c=a;d=Math.round(d*(c()/b.width)*100)/100}else if(b.width<b.height){d=a;c=Math.round(c*(d()/b.height)*100)/100}else c=d=a;e.context.drawImage(b,(e.points.width-c)/2,(e.points.width-d)/2,c,d)}},drawText:function(){var a;this.context.textAlign="center";this.context.fillStyle=this.options.labelColor;this.context.textBaseline="bottom";if(this.options.displayValue){a=this.points.width/3.5;this.context.font="bold "+a+"px helvetica";if(this.options.label&&this.options.label.length>0){this.context.fillText(this.options.label,this.points.x,this.points.x+this.linesAndRadiuses.internalRadius/25);this.context.fillText(this.options.percentage+"%",this.points.x,this.points.x+this.linesAndRadiuses.internalRadius/1.5)}else this.context.fillText(this.options.percentage+"%",this.points.x,this.points.x+this.linesAndRadiuses.internalRadius/2.3)}else{a=this.points.width/2.5;this.context.font="bold "+a+"px helvetica";this.context.fillText(this.options.label,this.points.x,this.points.x+this.linesAndRadiuses.internalRadius/1.8)}},checkCanvas:function(){return!!this.element.getContext&&!!this.element.getContext("2d")},getPoints:function(){return{width:this.element.width,x:this.element.width/2,angle:{start:this.percentage===360?0:270*g,end:this.percentage===360?h:(this.percentage-90)*g}}},getLinesAndRadiuses:function(){var a=this.points.width/30,b=this.points.x-a/2,c=b,d=this.points.width/35,e=c*.8;return{shadowLine:a,shadowRadius:b,externalRadius:c,internalLine:d,internalRadius:e}}};a.fn[e]=function(b){return this.each(function(){a.data(this,"plugin_"+e)||a.data(this,"plugin_"+e,new i(this,b))})}})(jQuery,window,document);