responsivewebframework
Version:
Jalasoft Foundation Front End Framework ========================================
115 lines (108 loc) • 4.77 kB
JavaScript
frameworkObject.percentageGraphDiv = new function() {
var PercentageGraphDivs = function (idGraph) {
var PercentageGraphDivsTurnRight = function (id, grados, label) {
if (grados <= 180) {
$(id).find('.percentage-graph-div-caption').text(label);
PercentageGraphDivsShowPanel1(id, grados);
PercentageGraphDivsShowPanel2(id, grados);
}
if (grados > 180) {
$(id).find('.percentage-graph-div-caption').text(label);
PercentageGraphDivsShowPanel1(id, 180);
PercentageGraphDivsShowPanel2(id, grados);
var delay = 300;
setTimeout(function () {
$(id).find('.percentage-graph-div-containerc2').css('display', 'inherit');
PercentageGraphDivsShowPanel2(id, grados);
}, delay);
}
};
var PercentageGraphDivsTurnLeft = function (id, grados, label) {
if (grados <= 180) {
var delay = 300;
PercentageGraphDivsShowPanel2(id, 180);
setTimeout(function () {
$(id).find('.percentage-graph-div-containerc2').css('display', 'none');
$(id).find('.percentage-graph-div-caption').text(label);
PercentageGraphDivsShowPanel1(id, grados);
PercentageGraphDivsShowPanel2(id, grados);
}, delay);
}
if (grados > 180) {
$(id).find('.percentage-graph-div-caption').text(label);
PercentageGraphDivsShowPanel2(id, grados);
}
};
var PercentageGraphDivsShowPanel1 = function (id, angulo) {
$(id).find('.percentage-graph-div-containerc1').css('transform', 'rotate(' + angulo + 'deg)');
};
var PercentageGraphDivsShowPanel2 = function (id, angulo) {
$(id).find('.percentage-graph-div-containerc2').css('transform', 'rotate(' + angulo + 'deg)');
};
var idGraph = '#' + idGraph;
var angle = 0;
var label = "0%";
var element = '<div class = "percentage-graph-div-oclgray1">' +
'</div>' +
'<div class = "percentage-graph-div-oclgray2">' +
'</div>' +
'<div class="percentage-graph-div-containerc2" >' +
'<div class = "percentage-graph-div-oc3">' +
'</div>' +
'<div class = "percentage-graph-div-oc4">' +
'</div>' +
'</div>' +
'<div class="percentage-graph-div-containerc1">' +
'<div class = "percentage-graph-div-oc1">' +
'</div>' +
'<div class = "percentage-graph-div-oc2">' +
'</div>' +
'</div>' +
'<div class = "percentage-graph-div-circle-center">' +
'<div class="percentage-graph-div-caption">0%</div>' +
'</div>';
$(idGraph).text("");
$(idGraph).append(element);
var color = "#F09700";
if ($(idGraph).attr('color'))
color = $(idGraph).attr('color');
if (!color == "") {
$(idGraph).find('.percentage-graph-div-oc1').css('background', color);
$(idGraph).find('.percentage-graph-div-oc2').css('background', color);
$(idGraph).find('.percentage-graph-div-oc3').css('background', color);
$(idGraph).find('.percentage-graph-div-oc4').css('background', color);
$(idGraph).find('.percentage-graph-div-caption').css('color', color);
}
this.value = function (percentage) {
percentage = parseInt(percentage);
if (percentage >= 0 && percentage <= 100) {
var newAngle = (percentage * 360) / 100;
label = percentage + "%";
if (parseInt(newAngle) > parseInt(angle)) {
PercentageGraphDivsTurnRight(idGraph, newAngle, label);
angle = newAngle;
}
if (parseInt(newAngle) < parseInt(angle)) {
PercentageGraphDivsTurnLeft(idGraph, newAngle, label);
angle = newAngle;
}
}
}
};
var listPercentagesDivs = [];
this.add = function(id) {
listPercentagesDivs[id] = new PercentageGraphDivs(id);
};
this.value = function(id,value) {
id = id.substring(1,id.length);
listPercentagesDivs[id].value(value);
}
}
jQuery.fn.extend({
frameworkPercentageGraphDiv: function() {
$(this).each(function(index, element) {
var id = $(element).attr('id');
frameworkObject.percentageGraphDiv.add(id);
})
}
});