Subscribe to:
Post Comments
(
Atom
)
It's my words that make me worthy enough.
project counter
(function ( $ ) {
var global_settings = {};
var methods = {
init : function(options) {
// This is the easiest way to have default options.
var settings = $.extend({
// These are the defaults.
color: "#000000",
height: "300px",
width: "300px",
line_width: 8,
starting_position: 25,
percent: 100,
counter_clockwise: false,
percentage: true,
text: ''
}, options );
global_settings = settings;
// Create percentage
var percentage = $("");
if(!global_settings.percentage) {
percentage.text(global_settings.percentage);
}
$(this).append(percentage);
// Create text
var text = $("");
// Custom text
if(global_settings.text != "percent") {
text.text(global_settings.text);
}
$(this).append(text);
// Correct any invalid values
if(global_settings.starting_position != 100) {
global_settings.starting_position = global_settings.starting_position % 100;
}
if(global_settings.ending_position != 100) {
global_settings.ending_position = global_settings.ending_position % 100;
}
// No 'px' or '%', add 'px'
appendUnit(global_settings.width);
appendUnit(global_settings.height);
// Apply global_settings
$(this).css({
"height": global_settings.height,
"width": global_settings.width
});
$(this).addClass("circular-progress-bar");
// Remove old canvas
$(this).find("canvas").remove();
// Put canvas inside this
$(this).append(createCanvas($(this)));
// Return allows for chaining
return this;
},
percent : function(value) {
// Change percent
global_settings.percent = value;
// Apply global_settings
$(this).css({
"height": global_settings.height,
"width": global_settings.width
});
// Remove old canvas
$(this).children("canvas").remove();
// Put canvas inside this
$(this).append(createCanvas($(this)));
// Return allows for chaining
return this;
},
animate : function(value, time) {
// Apply global_settings
$(this).css({
"height": global_settings.height,
"width": global_settings.width
});
// Number of intervals, 10ms interval
var num_of_steps = time / 10;
// Amount of change each step
var percent_change = (value - global_settings.percent) / num_of_steps;
// Variable conflict, rename this
var scope = $(this);
var theInterval = setInterval(function() {
if(global_settings.percent < value) {
// Remove old canvas
scope.children("canvas").remove();
// Increment percent
global_settings.percent += percent_change;
// Put canvas inside this
scope.append(createCanvas(scope));
} else {
clearInterval(theInterval);
}
}, 10);
// Return allows for chaining
return this;
}
};
$.fn.circularProgress = function(methodOrOptions) {
if (methods[methodOrOptions]) {
// Method found
return methods[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
// Default to "init", object passed in or nothing passed in
return methods.init.apply( this, arguments );
} else {
$.error('Method ' + methodOrOptions + ' does not exist.');
}
};
/* =========================================================================
PRIVATE FUNCTIONS
========================================================================= */
// return string without 'px' or '%'
function removeUnit(apples) {
if(apples.indexOf("px")) {
return apples.substring(0, apples.length - 2);
} else if(canvas_height.indexOf("%")) {
return apples.substring(0, apples.length - 1);
}
};
// return string with 'px'
function appendUnit(apples) {
if(apples.toString().indexOf("px") < -1 && apples.toString().indexOf("%") < -1) {
return apples += "px";
}
};
// calculate starting position on canvas
function calcPos(apples, percent) {
if(percent < 0) {
// Calculate starting position
var starting_degree = (parseInt(apples) / 100) * 360;
var starting_radian = starting_degree * (Math.PI / 180);
return starting_radian - (Math.PI / 2);
} else {
// Calculate ending position
var ending_degree = ((parseInt(apples) + parseInt(percent)) / 100) * 360;
var ending_radian = ending_degree * (Math.PI / 180);
return ending_radian - (Math.PI / 2);
}
};
// Put percentage or custom text inside progress circle
function insertText(scope) {
$(".progress-percentage").text(Math.round(global_settings.percent) + "%");
}
// create canvas
function createCanvas(scope) {
// Remove 'px' or '%'
var canvas_height = removeUnit(global_settings.height.toString());
var canvas_width = removeUnit(global_settings.width.toString());
// Create canvas
var canvas = document.createElement("canvas");
canvas.height = canvas_height;
canvas.width = canvas_width;
// Create drawable canvas and apply properties
var ctx = canvas.getContext("2d");
ctx.strokeStyle = global_settings.color;
ctx.lineWidth = global_settings.line_width;
// Draw arc
ctx.beginPath();
// Calculate starting and ending positions
var starting_radian = calcPos(global_settings.starting_position, -1);
var ending_radian = calcPos(global_settings.starting_position, global_settings.percent);
// Calculate radius and x,y coordinates
var radius = 0;
var xcoord = canvas_width / 2;
var ycoord = canvas_height / 2;
// Height or width greater
if(canvas_height >= canvas_width) {
radius = canvas_width * 0.9 / 2 - (global_settings.line_width * 2);
} else {
radius = canvas_height * 0.9 / 2 - (global_settings.line_width * 2);
}
/*
x coordinate
y coordinate
radius of circle
starting angle in radians
ending angle in radians
clockwise (false, default) or counter-clockwise (true)
*/
ctx.arc(xcoord, ycoord, radius, starting_radian, ending_radian, global_settings.counter_clockwise);
ctx.stroke();
// Add text
if(global_settings.percentage) {
insertText(scope);
}
return canvas;
};
}( jQuery ));
recent in career
2/career/post-per-tag
Important Links
Created By Sora Templates & Blogger Templates
Powered by Blogger.
No comments