Olu Amey
89 lines
2.7 KiB
JavaScript
89 lines
2.7 KiB
JavaScript
var DevSolutionSkill = {
|
|
init: function (e, t) {
|
|
this.diagram(e)
|
|
},
|
|
diagram: function (e) {
|
|
var t = e,
|
|
n = 160,
|
|
r = 160,
|
|
i = n / 2,
|
|
s = r / 2,
|
|
o = jQuery("#" + e).data("forground") ? jQuery("#" + e).data("forground") : "#fff",
|
|
u = jQuery("#" + e).data("background") ? jQuery("#" + e).data("background") : "#0076f9",
|
|
f = 13,
|
|
how=1,
|
|
l = jQuery("#" + e).data("percent"),
|
|
c = 20,
|
|
h = jQuery("#" + e).data("fontsize") ? jQuery("#" + e).data("fontsize") : "32px",
|
|
p = jQuery("#" + e).data("percentsize") ? jQuery("#" + e).data("percentsize") : "32px",
|
|
d = jQuery("#" + e).data("fontcolor") ? jQuery("#" + e).data("fontcolor") : "#cccccc",
|
|
v = jQuery("#" + e).data("font") ? jQuery("#" + e).data("font") : "Open Sans";
|
|
if (l == 100) {
|
|
c = 45
|
|
} else if (l < 10) {
|
|
c = 20
|
|
} else if (l > 100) {
|
|
alert("you can't set more then 100");
|
|
return false
|
|
}
|
|
var m = Raphael(t, n, r);
|
|
m.customAttributes.arc = function (e, t, n) {
|
|
var r = 3.6 * e,
|
|
o = r == 360 ? 359.99 : r,
|
|
u = 90;
|
|
a = (u - o) * Math.PI / 180, b = u * Math.PI / 180, sx = i + n * Math.cos(b), sy = s - n * Math.sin(b), x = i + n * Math.cos(a), y = s - n * Math.sin(a), path = [
|
|
["M", sx, sy],
|
|
["A", n, n, 0, +(o > 180), 1, x, y]
|
|
];
|
|
return {
|
|
path: path,
|
|
stroke: t
|
|
}
|
|
};
|
|
var g = m.path().attr({
|
|
arc: [100, o, 70],
|
|
"stroke-width": f - 1
|
|
});
|
|
var w = m.path().attr({
|
|
arc: [l, u, 70],
|
|
"stroke-width": f
|
|
});
|
|
w.animate({
|
|
transform: "r360" + "," + 80 + "," + 80
|
|
}, 2e3);
|
|
var E = m.text(n, r, l).attr({
|
|
font: h + " " + v,
|
|
fill: d,
|
|
cx: 0,
|
|
cy: 0,
|
|
x: i - 10,
|
|
y: s
|
|
}).toFront();
|
|
E.stop().animate({
|
|
opacity: 0
|
|
}, 0, ">", function () {
|
|
this.attr({
|
|
text: l
|
|
}).animate({
|
|
opacity: 1
|
|
}, 2e3, "<")
|
|
});
|
|
var S = m.text(n, r, "%").attr({
|
|
font: p + " " + v,
|
|
fill: d,
|
|
cx: 0,
|
|
cy: 0,
|
|
x: i + c,
|
|
y: s
|
|
}).toFront();
|
|
S.stop().animate({
|
|
opacity: 0
|
|
}, 0, ">", function () {
|
|
this.attr({
|
|
text: "%"
|
|
}).animate({
|
|
opacity: 1
|
|
}, 2e3, "<")
|
|
})
|
|
}
|
|
} |