appeal: Progress bar emphasizes current match program.
This commit is contained in:
		
							parent
							
								
									dd8d159fcb
								
							
						
					
					
						commit
						6908c135f2
					
				
					 2 changed files with 22 additions and 102 deletions
				
			
		|  | @ -21,106 +21,34 @@ $window.load(function() { | ||||||
| $(document).ready(function() { | $(document).ready(function() { | ||||||
|     var siteFinalGoal = $('span#site-fundraiser-final-goal').text(); |     var siteFinalGoal = $('span#site-fundraiser-final-goal').text(); | ||||||
|     var noCommaSiteFinalGoal = parseInt(siteFinalGoal.replace(/,/g, "")); |     var noCommaSiteFinalGoal = parseInt(siteFinalGoal.replace(/,/g, "")); | ||||||
|     var siteMiddleGoal = $('span#site-fundraiser-middle-goal').text(); |  | ||||||
|     var noCommaSiteMiddleGoal = parseInt(siteMiddleGoal.replace(/,/g, "")); |  | ||||||
|     if (!noCommaSiteMiddleGoal) { |  | ||||||
|         noCommaSiteMiddleGoal = 0; |  | ||||||
|     } |  | ||||||
|     var siteSoFar = $('span#site-fundraiser-so-far').text(); |  | ||||||
|     var noCommaSiteSoFar = parseInt(siteSoFar.replace(/,/g, "")); |  | ||||||
|     var siteMatchCount = $('span#site-fundraiser-match-count').text(); |     var siteMatchCount = $('span#site-fundraiser-match-count').text(); | ||||||
|     var noCommaSiteMatchCount = parseInt(siteMatchCount.replace(/,/g, "")); |     var noCommaSiteMatchCount = parseInt(siteMatchCount.replace(/,/g, "")); | ||||||
|     if (! noCommaSiteMatchCount) { |     if (! noCommaSiteMatchCount) { | ||||||
|         noCommaSiteMatchCount = "0"; |         noCommaSiteMatchCount = "0"; | ||||||
|     } |     } | ||||||
|     var noCommaMatchFinalGoal = noCommaSiteFinalGoal - noCommaSiteMatchCount; |     var barParts = [{ | ||||||
|     var goal  = $('span#fundraiser-goal').text(); |         value: (noCommaSiteMatchCount / noCommaSiteFinalGoal) * 100, | ||||||
|     var soFar = $('span#fundraiser-so-far').text(); |         text: noCommaSiteMatchCount.toLocaleString() + " matched!", | ||||||
|     var donationCount = $('span#fundraiser-donation-count').text(); |         barClass: "progress", | ||||||
|     var noCommaGoal = parseFloat(goal.replace(/,/g, "")); |         textClass: "soFarText", | ||||||
|     var noCommaSoFar = parseFloat(soFar.replace(/,/g, "")); |     }]; | ||||||
|     var noCommaDonationCount = parseInt(donationCount.replace(/,/g, "")); |     if (barParts[0].value < 100) { | ||||||
|     var percentage = (parseFloat(noCommaSoFar) / parseFloat(noCommaGoal)) * 100; |         var matchesLeft = noCommaSiteFinalGoal - noCommaSiteMatchCount; | ||||||
|     var curValue = 0.00; |         barParts.push({ | ||||||
|     var incrementSoFar = 0.00; |             value: 100, | ||||||
|     var curDonationCount = 0; |             text: matchesLeft.toLocaleString() + " to go!", | ||||||
|     var riseLevelPercent = 0.5; |             barClass: "final-goal", | ||||||
|     var incrementDonationCount = Math.round( (riseLevelPercent / 100) * noCommaDonationCount ); |             textClass: "goalText", | ||||||
|     $('#siteprogressbar').empty(); |         }); | ||||||
| 
 |  | ||||||
|     if (noCommaSiteSoFar >= noCommaSiteMiddleGoal) { |  | ||||||
|         // We've got
 |  | ||||||
|         var leftOver = noCommaMatchFinalGoal - noCommaSiteSoFar; |  | ||||||
|         var supporterProgress = (noCommaSiteSoFar / noCommaSiteFinalGoal) * 100; |  | ||||||
|         var needProgress = (leftOver / noCommaSiteFinalGoal) * 100; |  | ||||||
| 
 |  | ||||||
|         $('#siteprogressbar'). |  | ||||||
|             multiprogressbar({ parts: [ |  | ||||||
|                 { value: supporterProgress, |  | ||||||
|                   text: noCommaSiteSoFar.toLocaleString() + " have joined!", |  | ||||||
|                   barClass: "progress", textClass: "soFarText" }, |  | ||||||
|                 { value: needProgress, |  | ||||||
|                   text: leftOver.toLocaleString() + " more needed", |  | ||||||
|                   barClass: "final-goal", textClass: "goalText" }, |  | ||||||
|                 { value: 100, |  | ||||||
|                   text: noCommaSiteMatchCount.toLocaleString() + " matched!", |  | ||||||
|                   barClass: "progress", textClass: "soFarText" }, |  | ||||||
|             ]}); |  | ||||||
|     } else { |  | ||||||
|         $('#siteprogressbar'). |  | ||||||
|             multiprogressbar({ parts: [ |  | ||||||
|                 { value: (noCommaSiteSoFar / noCommaSiteFinalGoal) * 100, |  | ||||||
|                   text: siteSoFar + " joined!", |  | ||||||
|                   barClass: "progress", textClass: "soFarText" }, |  | ||||||
|                 { value: ((noCommaSiteMiddleGoal - noCommaSiteSoFar) / noCommaSiteFinalGoal) * 100, |  | ||||||
|                   text: siteMiddleGoal + " will save our basic work", |  | ||||||
|                   barClass: "middle-goal", textClass: "goalText" }, |  | ||||||
|                 { value: |  | ||||||
|                   ((noCommaMatchFinalGoal - noCommaSiteMiddleGoal) / noCommaSiteFinalGoal) * 100, |  | ||||||
|                   text: noCommaMatchFinalGoal.toLocaleString() + " will save license compliance", |  | ||||||
|                   barClass: "final-goal", textClass: "goalText" }, |  | ||||||
|                 {  value: 100, |  | ||||||
|                    text: siteMatchCount + " matched!", |  | ||||||
|                    barClass: "progress", textClass: "soFarText" }, |  | ||||||
|             ]}); |  | ||||||
|     } |     } | ||||||
|  |     $('#siteprogressbar').empty().multiprogressbar(barParts); | ||||||
|  | 
 | ||||||
|     $('span#fundraiser-percentage').css({ 'color'        : 'green', |     $('span#fundraiser-percentage').css({ 'color'        : 'green', | ||||||
|                                           'font-weight'  : 'bold', |                                           'font-weight'  : 'bold', | ||||||
|                                           'float'        : 'right', |                                           'float'        : 'right', | ||||||
|                                           'margin-right' : '40%', |                                           'margin-right' : '40%', | ||||||
|                                           'margin-top'   : '2.5%', |                                           'margin-top'   : '2.5%', | ||||||
|                                           'text-align'   : 'inherit'}); |                                           'text-align'   : 'inherit'}); | ||||||
|     function riseDonationProgressBar() { |  | ||||||
|         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 += riseLevelPercent; |  | ||||||
|             setTimeout(riseDonationProgressBar, 50); |  | ||||||
|         } |  | ||||||
|     } |  | ||||||
|     function riseDonationCount() { |  | ||||||
|         if (curDonationCount >= noCommaDonationCount) { |  | ||||||
|             $('span#fundraiser-donation-count').text(donationCount); |  | ||||||
|         } else { |  | ||||||
|             $('span#fundraiser-donation-count').text(curDonationCount.toLocaleString()); |  | ||||||
|             curDonationCount += incrementDonationCount; |  | ||||||
|             setTimeout(riseDonationCount, 50); |  | ||||||
|         } |  | ||||||
|     } |  | ||||||
|     if (noCommaDonationCount > 0) { |  | ||||||
|         $('span#fundraiser-donation-count').text(""); |  | ||||||
|         riseDonationCount(); |  | ||||||
|     } |  | ||||||
|     if (noCommaSoFar > 0.00 && noCommaGoal > 0.00) { |  | ||||||
|         $('span#fundraiser-percentage').text(""); |  | ||||||
|         $("#progressbar").progressbar({ value:  curValue }); |  | ||||||
|         riseDonationProgressBar(); |  | ||||||
|     } |  | ||||||
| 
 | 
 | ||||||
|     $('.toggle-content').hide(); |     $('.toggle-content').hide(); | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -60,12 +60,7 @@ PIA will match up to 416. | ||||||
|     <div class="fundraiser-top-text"> |     <div class="fundraiser-top-text"> | ||||||
|       <em> |       <em> | ||||||
|         Let's stand up for software freedom together! |         Let's stand up for software freedom together! | ||||||
|         {% if sitefundgoal.fundraiser_goal_amount > sitefundgoal.fundraiser_so_far_amount %} |         {% if sitefundgoal.fundraiser_donation_count_disclose_threshold >= 1076 %} | ||||||
|         We still need |  | ||||||
|         {{ sitefundgoal.fundraiser_goal_amount|subtract:sitefundgoal.fundraiser_donation_count_disclose_threshold|subtract:sitefundgoal.fundraiser_so_far_amount|intcomma }} |  | ||||||
|         more Supporters to maintain our full range of activities in 2017. |  | ||||||
|         {% endif %} |  | ||||||
|         {% if sitefundgoal.fundraiser_donation_count_disclose_threshold > 1076 %} |  | ||||||
|         416 Supporters were matched |         416 Supporters were matched | ||||||
|         {% else %} |         {% else %} | ||||||
|         The next {{ 1076|subtract:sitefundgoal.fundraiser_donation_count_disclose_threshold|intcomma }} Supporters who join or renew by January 15 <a href="/news/2016/nov/29/private-internet-access-2016-fundraising-match/">will count twice</a>, |         The next {{ 1076|subtract:sitefundgoal.fundraiser_donation_count_disclose_threshold|intcomma }} Supporters who join or renew by January 15 <a href="/news/2016/nov/29/private-internet-access-2016-fundraising-match/">will count twice</a>, | ||||||
|  | @ -74,16 +69,13 @@ PIA will match up to 416. | ||||||
|       </em> |       </em> | ||||||
| <div id="siteprogressbar"> | <div id="siteprogressbar"> | ||||||
| <a href="/supporter"> | <a href="/supporter"> | ||||||
|   <span id="site-fundraiser-so-far">{{ sitefundgoal.fundraiser_so_far_amount|intcomma }}</span> have joined so far. |   {% if sitefundgoal.fundraiser_donation_count_disclose_threshold < 1076 %} | ||||||
|   <span id="site-fundraiser-match-count">{{ sitefundgoal.fundraiser_donation_count_disclose_threshold|intcomma }}</span> Supporters have been matched. |   <span id="site-fundraiser-match-count">{{ sitefundgoal.fundraiser_donation_count_disclose_threshold|subtract:660|intcomma }}</span> | ||||||
|   {% if sitefundgoal.fundraiser_goal_amount > sitefundgoal.fundraiser_so_far_amount %} |  | ||||||
|   We still need |  | ||||||
|   {{ sitefundgoal.fundraiser_goal_amount|subtract:sitefundgoal.fundraiser_donation_count_disclose_threshold|subtract:sitefundgoal.fundraiser_so_far_amount|intcomma }} |  | ||||||
|   more Supporters to reach |  | ||||||
|   {% else %} |   {% else %} | ||||||
|   That means we reached |   <span id="site-fundraiser-match-count">416</span> | ||||||
|   {% endif %} |   {% endif %} | ||||||
|   our goal of <span id="site-fundraiser-final-goal">{{ sitefundgoal.fundraiser_goal_amount|intcomma }}</span>. |   Supporters have been matched, out of | ||||||
|  |   <span id="site-fundraiser-final-goal">416</span> possible. | ||||||
| </a> | </a> | ||||||
| </div> | </div> | ||||||
| </div> | </div> | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		
		Reference in a new issue
	
	 Brett Smith
						Brett Smith