-
Notifications
You must be signed in to change notification settings - Fork 0
/
thermometer.js
91 lines (74 loc) · 3.21 KB
/
thermometer.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
//originally from
// http:https://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript
// Added Additional 'pledge' scale
function formatCurrency(n, c, d, t) {
"use strict";
var s, i, j;
c = isNaN(c = Math.abs(c)) ? 2 : c;
d = d === undefined ? "." : d;
t = t === undefined ? "," : t;
s = n < 0 ? "-" : "";
i = parseInt(n = Math.abs(+n || 0).toFixed(c), 10) + "";
j = (j = i.length) > 3 ? j % 3 : 0;
return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
}
/**
* http:https://community.sitepoint.com/t/code-for-a-fundraising-thermometer/21832/13
* Thermometer Progress meter.
* This function will update the progress element in the "thermometer"
* to the updated percentage.
* If no parameters are passed in it will read them from the DOM
*
* @param {Number} goalAmount The Goal amount, this represents the 100% mark
* @param {Number} progressAmount The progress amount is the current amount
* @param {Boolean} animate Whether to animate the height or not
*
*/
function thermometer(goalAmount, pledgeAmount, progressAmount, animate) {
"use strict";
var $thermo = $("#thermometer"),
$progress = $(".progress", $thermo),
$pledge = $(".pledge", $thermo),
$goal = $(".goal", $thermo),
percentageAmount, percentagePledge;
goalAmount = goalAmount || parseFloat( $goal.text() ),
pledgeAmount = progressAmount || parseFloat( $pledge.text() ),
progressAmount = progressAmount || parseFloat( $progress.text() ),
percentagePledge = Math.min( Math.round(pledgeAmount / goalAmount * 1000) / 10, 100); //make sure we have 1 decimal point
percentageAmount = Math.min( Math.round(progressAmount / goalAmount * 1000) / 10, 100); //make sure we have 1 decimal point
//let's format the numbers and put them back in the DOM
$goal.find(".amount").text( "목표액 $" + formatCurrency( goalAmount, 0 ) );
$pledge.find(".amount").text( "약정액 $" + formatCurrency( pledgeAmount, 0 ) );
$progress.find(".amount").text( "입금액 $" + formatCurrency( progressAmount, 0 ) );
//let's set the progress indicator
$pledge.find(".amount").hide();
$progress.find(".amount").hide();
if (animate !== false) {
// THe pledge amount first
$pledge.animate({
"height": percentagePledge + "%"
}, 1200, function(){
$(this).find(".amount").fadeIn(500);
// Then the actual amount
$progress.animate({
"height": percentageAmount + "%"
}, 1200, function(){
$(this).find(".amount").fadeIn(500);
});
});
}
else {
$progress.css({
"height": percentageAmount + "%"
});
$progress.find(".amount").fadeIn(500);
}
}
$(document).ready(function(){
//call without the parameters to have it read from the DOM
thermometer();
// or with parameters if you want to update it using JavaScript.
// you can update it live, and choose whether to show the animation
// (which you might not if the updates are relatively small)
//thermometer( 1000000, 425610, false );
});