From 6e3b2a22beddf310c5f2dffc596847a9aca02193 2015-03-09 07:28:05
From: Bradley M. Kuhn <bkuhn@ebb.org>
Date: 2015-03-09 07:28:05
Subject: [PATCH] Animate the progress bar at page load.

This is perhaps too flashy, but it does successfully animate the
progress bar up to the target amount, and also changes the amount until
it reaches the total raised so far.

---

diff --git a/www/conservancy/static/supporter-page.js b/www/conservancy/static/supporter-page.js
index d9825d041dc8368b0003465f5c27230b8f08c231..c2e6d52bfc3fe3a7d7d1b1e549ae75e48f78550f 100644
--- a/www/conservancy/static/supporter-page.js
+++ b/www/conservancy/static/supporter-page.js
@@ -10,16 +10,32 @@ $(document).ready(function() {
     var noCommaGoal = goal.replace(/,/g, "");
     var noCommaSoFar = soFar.replace(/,/g, "");
     var percentage = (parseFloat(noCommaSoFar) / parseFloat(noCommaGoal)) * 100;
+    var curValue = 0.00;
+    var incrementSoFar = 0.00;
 
-    $('span#fundraiser-percentage').text(percentage.toFixed(2) + "%");
+    $('span#fundraiser-percentage').text("");
     $('span#fundraiser-percentage').css({ 'color'        : 'green',
                                           'font-weight'  : 'bold',
                                           'float'        : 'right',
                                           'margin-right' : '40%',
                                           'margin-top'   : '2.5%',
                                           'text-align'   : 'inherit'});
+    $("#progressbar").progressbar({ value:  curValue });
 
-    $("#progressbar").progressbar({ value:  percentage });
+    function slowRise() {
+        if (curValue >= percentage) {
+            $('span#fundraiser-so-far').text(soFar);
+            $("#progressbar").progressbar({ value :  percentage });
+            $('span#fundraiser-percentage').text(percentage.toFixed(1) + "%");
+        } else {
+            var newVal = (curValue / 100.00) * noCommaGoal;
+            $("#progressbar").progressbar({ value:  curValue });
+            $('span#fundraiser-so-far').text(newVal.toLocaleString());
+            curValue += 0.5;
+            setTimeout(slowRise, 50);
+        }
+    }
+    slowRise();
 
     $('.toggle-content').hide();