Current state
This commit is contained in:
@@ -0,0 +1,20 @@
|
||||
.circliful {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.circle-text, .circle-info, .circle-text-half, .circle-info-half {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.circle-info, .circle-info-half {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.circliful .fa {
|
||||
margin: -10px 3px 0 3px;
|
||||
position: relative;
|
||||
bottom: 4px;
|
||||
}
|
||||
191
public/assets/plugins/charts-circliful/js/jquery.circliful.js
Normal file
191
public/assets/plugins/charts-circliful/js/jquery.circliful.js
Normal file
@@ -0,0 +1,191 @@
|
||||
(function( $ ) {
|
||||
|
||||
$.fn.circliful = function(options) {
|
||||
|
||||
var settings = $.extend({
|
||||
// These are the defaults.
|
||||
foregroundColor: "#556b2f",
|
||||
backgroundColor: "#eee",
|
||||
fillColor: false,
|
||||
width: 15,
|
||||
dimension: 200,
|
||||
size: 15,
|
||||
percent: 50,
|
||||
animationStep: 1.0
|
||||
}, options );
|
||||
return this.each(function() {
|
||||
var dimension = '';
|
||||
var text = '';
|
||||
var info = '';
|
||||
var width = '';
|
||||
var size = 0;
|
||||
var percent = 0;
|
||||
var endPercent = 100;
|
||||
var fgcolor = '';
|
||||
var bgcolor = '';
|
||||
var icon = '';
|
||||
var animationstep = 0.0;
|
||||
|
||||
$(this).addClass('circliful');
|
||||
|
||||
if($(this).data('dimension') != undefined) {
|
||||
dimension = $(this).data('dimension');
|
||||
} else {
|
||||
dimension = settings.dimension;
|
||||
}
|
||||
|
||||
if($(this).data('width') != undefined) {
|
||||
width = $(this).data('width');
|
||||
} else {
|
||||
width = settings.width;
|
||||
}
|
||||
|
||||
if($(this).data('fontsize') != undefined) {
|
||||
size = $(this).data('fontsize');
|
||||
} else {
|
||||
size = settings.size;
|
||||
}
|
||||
|
||||
if($(this).data('percent') != undefined) {
|
||||
percent = $(this).data('percent') / 100;
|
||||
endPercent = $(this).data('percent');
|
||||
} else {
|
||||
percent = settings.percent / 100;
|
||||
}
|
||||
|
||||
if($(this).data('fgcolor') != undefined) {
|
||||
fgcolor = $(this).data('fgcolor');
|
||||
} else {
|
||||
fgcolor = settings.foregroundColor;
|
||||
}
|
||||
|
||||
if($(this).data('bgcolor') != undefined) {
|
||||
bgcolor = $(this).data('bgcolor');
|
||||
} else {
|
||||
bgcolor = settings.backgroundColor;
|
||||
}
|
||||
|
||||
if($(this).data('animation-step') != undefined) {
|
||||
animationstep = parseFloat($(this).data('animation-step'));
|
||||
} else {
|
||||
animationstep = settings.animationStep;
|
||||
}
|
||||
if($(this).data('text') != undefined) {
|
||||
text = $(this).data('text');
|
||||
|
||||
if($(this).data('icon') != undefined) {
|
||||
icon = '<i class="fa ' + $(this).data('icon') + '"></i>';
|
||||
}
|
||||
|
||||
if($(this).data('type') != undefined) {
|
||||
type = $(this).data('type');
|
||||
|
||||
if(type == 'half') {
|
||||
$(this).append('<span class="circle-text-half">' + icon + text + '</span>');
|
||||
$(this).find('.circle-text-half').css({'line-height': (dimension / 1.45) + 'px', 'font-size' : size + 'px' });
|
||||
} else {
|
||||
$(this).append('<span class="circle-text">' + icon + text + '</span>');
|
||||
$(this).find('.circle-text').css({'line-height': dimension + 'px', 'font-size' : size + 'px' });
|
||||
}
|
||||
} else {
|
||||
$(this).append('<span class="circle-text">' + icon + text + '</span>');
|
||||
$(this).find('.circle-text').css({'line-height': dimension + 'px', 'font-size' : size + 'px' });
|
||||
}
|
||||
} else if($(this).data('icon') != undefined) {
|
||||
|
||||
}
|
||||
|
||||
if($(this).data('info') != undefined) {
|
||||
info = $(this).data('info');
|
||||
|
||||
if($(this).data('type') != undefined) {
|
||||
type = $(this).data('type');
|
||||
|
||||
if(type == 'half') {
|
||||
$(this).append('<span class="circle-info-half">' + info + '</span>');
|
||||
$(this).find('.circle-info-half').css({'line-height': (dimension * 0.9) + 'px', });
|
||||
} else {
|
||||
$(this).append('<span class="circle-info">' + info + '</span>');
|
||||
$(this).find('.circle-info').css({'line-height': (dimension * 1.25) + 'px', });
|
||||
}
|
||||
} else {
|
||||
$(this).append('<span class="circle-info">' + info + '</span>');
|
||||
$(this).find('.circle-info').css({'line-height': (dimension * 1.25) + 'px', });
|
||||
}
|
||||
}
|
||||
|
||||
$(this).width(dimension + 'px');
|
||||
|
||||
var canvas = $('<canvas></canvas>').attr({ width: dimension, height: dimension }).appendTo($(this)).get(0);
|
||||
var context = canvas.getContext('2d');
|
||||
var x = canvas.width / 2;
|
||||
var y = canvas.height / 2;
|
||||
var degrees = percent * 360.0;
|
||||
var radians = degrees * (Math.PI / 180);
|
||||
var radius = canvas.width / 2.5;
|
||||
var startAngle = 2.3 * Math.PI;
|
||||
var endAngle = 0;
|
||||
var counterClockwise = false;
|
||||
var curPerc = animationstep === 0.0 ? endPercent : 0.0;
|
||||
var curStep = Math.max(animationstep, 0.0);
|
||||
var circ = Math.PI * 2;
|
||||
var quart = Math.PI / 2;
|
||||
var type = '';
|
||||
var fill = false;
|
||||
|
||||
if($(this).data('type') != undefined) {
|
||||
type = $(this).data('type');
|
||||
|
||||
if(type == 'half') {
|
||||
var startAngle = 2.0 * Math.PI;
|
||||
var endAngle = 3.13;
|
||||
var circ = Math.PI * 1.0;
|
||||
var quart = Math.PI / 0.996;
|
||||
}
|
||||
}
|
||||
|
||||
if($(this).data('fill') != undefined) {
|
||||
fill = $(this).data('fill');
|
||||
} else {
|
||||
fill = settings.fillColor;
|
||||
}
|
||||
//animate foreground circle
|
||||
function animate(current) {
|
||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
context.beginPath();
|
||||
context.arc(x, y, radius, endAngle, startAngle, false);
|
||||
context.lineWidth = width - 1;
|
||||
|
||||
// line color
|
||||
context.strokeStyle = bgcolor;
|
||||
context.stroke();
|
||||
|
||||
if(fill) {
|
||||
context.fillStyle = fill;
|
||||
context.fill();
|
||||
}
|
||||
|
||||
context.beginPath();
|
||||
context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
|
||||
context.lineWidth = width;
|
||||
// line color
|
||||
context.strokeStyle = fgcolor;
|
||||
context.stroke();
|
||||
|
||||
if (curPerc < endPercent) {
|
||||
curPerc += curStep;
|
||||
requestAnimationFrame(function () {
|
||||
animate(Math.min(curPerc, endPercent) / 100);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
animate(curPerc / 100);
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
}( jQuery ));
|
||||
1
public/assets/plugins/charts-circliful/js/jquery.circliful.min.js
vendored
Normal file
1
public/assets/plugins/charts-circliful/js/jquery.circliful.min.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
(function(a){a.fn.circliful=function(b){var c=a.extend({foregroundColor:"#556b2f",backgroundColor:"#eee",fillColor:false,width:15,dimension:200,size:15,percent:50,animationStep:1},b);return this.each(function(){var F="";var s="";var E="";var v="";var t=0;var e=0;var l=100;var B="";var d="";var D="";var q=0;a(this).addClass("circliful");if(a(this).data("dimension")!=undefined){F=a(this).data("dimension")}else{F=c.dimension}if(a(this).data("width")!=undefined){v=a(this).data("width")}else{v=c.width}if(a(this).data("fontsize")!=undefined){t=a(this).data("fontsize")}else{t=c.size}if(a(this).data("percent")!=undefined){e=a(this).data("percent")/100;l=a(this).data("percent")}else{e=c.percent/100}if(a(this).data("fgcolor")!=undefined){B=a(this).data("fgcolor")}else{B=c.foregroundColor}if(a(this).data("bgcolor")!=undefined){d=a(this).data("bgcolor")}else{d=c.backgroundColor}if(a(this).data("animation-step")!=undefined){q=parseFloat(a(this).data("animation-step"))}else{q=c.animationStep}if(a(this).data("text")!=undefined){s=a(this).data("text");if(a(this).data("icon")!=undefined){D='<i class="fa '+a(this).data("icon")+'"></i>'}if(a(this).data("type")!=undefined){i=a(this).data("type");if(i=="half"){a(this).append('<span class="circle-text-half">'+D+s+"</span>");a(this).find(".circle-text-half").css({"line-height":(F/1.45)+"px","font-size":t+"px"})}else{a(this).append('<span class="circle-text">'+D+s+"</span>");a(this).find(".circle-text").css({"line-height":F+"px","font-size":t+"px"})}}else{a(this).append('<span class="circle-text">'+D+s+"</span>");a(this).find(".circle-text").css({"line-height":F+"px","font-size":t+"px"})}}else{if(a(this).data("icon")!=undefined){}}if(a(this).data("info")!=undefined){E=a(this).data("info");if(a(this).data("type")!=undefined){i=a(this).data("type");if(i=="half"){a(this).append('<span class="circle-info-half">'+E+"</span>");a(this).find(".circle-info-half").css({"line-height":(F*0.9)+"px",})}else{a(this).append('<span class="circle-info">'+E+"</span>");a(this).find(".circle-info").css({"line-height":(F*1.25)+"px",})}}else{a(this).append('<span class="circle-info">'+E+"</span>");a(this).find(".circle-info").css({"line-height":(F*1.25)+"px",})}}a(this).width(F+"px");var h=a("<canvas></canvas>").attr({width:F,height:F}).appendTo(a(this)).get(0);var f=h.getContext("2d");var p=h.width/2;var o=h.height/2;var A=e*360;var G=A*(Math.PI/180);var j=h.width/2.5;var z=2.3*Math.PI;var u=0;var C=false;var m=q===0?l:0;var n=Math.max(q,0);var r=Math.PI*2;var g=Math.PI/2;var i="";var w=false;if(a(this).data("type")!=undefined){i=a(this).data("type");if(i=="half"){var z=2*Math.PI;var u=3.13;var r=Math.PI*1;var g=Math.PI/0.996}}if(a(this).data("fill")!=undefined){w=a(this).data("fill")}else{w=c.fillColor}function k(x){f.clearRect(0,0,h.width,h.height);f.beginPath();f.arc(p,o,j,u,z,false);f.lineWidth=v-1;f.strokeStyle=d;f.stroke();if(w){f.fillStyle=w;f.fill()}f.beginPath();f.arc(p,o,j,-(g),((r)*x)-g,false);f.lineWidth=v;f.strokeStyle=B;f.stroke();if(m<l){m+=n;requestAnimationFrame(function(){k(Math.min(m,l)/100)})}}k(m/100)})}}(jQuery));
|
||||
Reference in New Issue
Block a user