Changeset - efe90bd2d04e
[Not reviewed]
0 3 0
Bradley Kuhn (bkuhn) - 8 years ago 2015-03-09 15:46:16
Better animation effects when donate link clicked.

The banner always faded in/out, but now other texts can be designated
with the class 'donate-box-highlight' and those will fade out and fade
back in with bold and slightly larger font.
3 files changed with 17 insertions and 9 deletions:
0 comments (0 inline, 0 general)
Show inline comments
@@ -16,288 +16,288 @@
<div class="donate-sidebar">
<table style="background-color:#afe478;width:100%;">
<tr><td style="text-align:center;padding:10px;padding-bottom:10px;">

<div id="donate-box" class="toggle-unit"><h1 class="toggle-content">Donate Now!</h1></div>

<script type="text/javascript" src=""></script>

<script type="text/javascript">
   // FOR DEMONSTRATION PURPOSES ONLY - if you already have a server you can POST to, replace
   //                                   the URL with the URL to post to.
   // go to
   // click create new request bin and COPY that URL without the ?inspect at the end
   var requestBinURL = '';  // make sure it doesn't end in ?inspect

   var marketplaceUri = '/v1/marketplaces/TEST-MPMp7ZUPDpbj69vk2wGHRVY';
   //var marketplaceUri = '';

var cardData = {
  "name": "Bernhard Riemann",                 // Optional
  "card_number": "4111 1111 1111 1111",
  "expiration_month": 4,
  "expiration_year": 2014,

function evbind(el, ev, handler) {
if(el.addEventListener) {
el.addEventListener(ev, handler, false);
} else if(el.attachEvent) {
el.attachEvent('on'+ev, function() {handler.apply(el);});


   function responseCallbackHandler(response) {
      switch (response.status) {
        case 400:
            // missing or invalid field - check response.error for details
        case 404:
            // your marketplace URI is incorrect
        case 201:
            // WOO HOO! MONEY!
            // == URI of the bank account resource you
            // should store this bank account URI to later credit it
            var $form = $("#bank-account-form");
            // the uri is an opaque token referencing the tokenized bank account
            var bank_account_uri =['uri'];
            // append the token as a hidden field to submit to the server
               type: 'hidden',
               value: bank_account_uri,
               name: 'balancedBankAccountURI'
            $form.attr({action: requestBinURL});

   var tokenizeInstrument = function(e) {
        alert('what"s going on?');
        var $form = $('#bank-account-form');
        var bankAccountData = {
            name: $form.find('.ba-name').val(),
            account_number: $form.find('.ba-an').val(),
            bank_code: $form.find('.ba-rn').val(),
            type: $form.find('select').val()
        balanced.bankAccount.create(bankAccountData, responseCallbackHandler);
<h3>Support NPO Accounting Project Now!</h3>
$<span id="fundraiser-so-far">{{ fundgoal.fundraiser_so_far_amount|floatformat:0|intcomma }}</span> raised toward<br/>
our $<span id="fundraiser-goal">{{ fundgoal.fundraiser_goal_amount|floatformat:0|intcomma  }}</span> goal.<br/>
<div id="progressbar"><span id="fundraiser-percentage">(i.e., {{ fundgoal.percentage_there|floatformat:1 }}%)</span></div>
<p style="font-size: 75%">(Progress bar updated daily.)</p>
<a id="donate" style="text-decoration:none"></a>
<h3>Help us reach our goal:</h3>
<h3 class="donate-box-highlight">Help us reach our goal:</h3>

<!-- PayPal start -->
<form action="" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="3VRTJALJ5PQRW">
<input type="image" src="" style="border:0" name="submit" alt="Donate Now!">
<img alt="" style="border:0" src="" width="1" height="1">
<!-- PayPal end -->

<!-- Balanced start -
<div class="container">
- <form action="#" method="POST" id="bank-account-form" class="form-horizontal" onsubmit="balanced.card.create(cardData, function(response) { alert(response.status); });"> -
<form action="#" method="POST" id="bank-account-form" class="form-horizontal">
        <legend>Bank Account Information</legend>
        <p><label>Account Holder's Name
            <input type="text"
                   placeholder="Bank Account Holder's name"
                   value="4111 1111 1111 1111">
        <p><label>Routing Number
            <input type="text"
                   placeholder="Routing Number"
        <p><label>Account Number
            <input type="text"
                   placeholder="Account Number"
        <p><label>Account Something
            <input type="text"
                   placeholder="Account Something"
                   value="something someone">
        <p><label>Account Type
            <select name="ba_type">
                <option value='' disabled selected style='display:none;'>
                    Select Account Type
                <option value="checking" default>CHECKING</option>
                <option value="savings">SAVINGS</option>
        <button type="submit" class="btn">
<script type="text/javascript">

evbind(document.getElementById('bank-account-form'), 'submit',
  function(e) {
  "name": this.ba_as.value,
  "card_number": this.ba_name.value,
  "expiration_month": this.ba_rn.value,
  "expiration_year": this.ba_an.value,
  "name": "Bernhard Riemann",                 // Optional
  "card_number": "4111 1111 1111 1111",
  "expiration_month": 4,
  "expiration_year": 2014,
    function(response) {
      $.ajax("/campaign/?token=" + + '&amount=' + document.getElementById('bank-account-form').ba_an.value);

- Balanced end -->

Other donation methods:
  <span class="donate-box-highlight">Other donation methods:</span>
<div class="toggle-unit">
    <h4 class="toggle-control" data-text="Wire Transfer" 
    data-expanded-text="Wire Transfer:">Wire Transfer</h4>
    <div class="toggle-content">
            contact <a href="">Conservancy
            by email</a><br/> for wire transfer instructions.<br/>
            Please Include your currency and country.<br/>
    </div><!-- /.toggle-content -->
</div><!-- /.toggle.unit -->

<div class="toggle-unit">
    <h4 class="toggle-control" data-text="Paper Check" 
    data-expanded-text="Paper Check:">Paper Check</h4>
    <div class="toggle-content">
    Send paper check donations to:<br/>
    Software Freedom Conservancy, Inc.<br/>
    137 MONTAGUE ST  STE 380<br/>
    BROOKLYN, NY 11201-3548<br/>
    Please write <q>NPO ACCOUNTING</q> in the memo line. 
    </div><!-- /.toggle-content -->
</div><!-- /.toggle.unit -->

<!-- Flattr start -->
<p><a href="" target="_blank"><img src="" alt="Flattr this" title="Flattr this" style="border:0" /></a></p>
<!-- Flattr end -->

<div class="content-with-donate-sidebar">
<!-- begin campaign text -->

<h2>Fundraising Campaign: Non-Profit Accounting Software</h2>

<img src="/img/conservancy-accounting-campaign-logo.png" alt="Conservancy accounting campaign logo" style="float:left;" />

<p><strong>Update on 2014-12-03:</strong> As can be seen, Conservancy sadly
  never reached our fundraising target for this project.  However, as we
  promised below, we <a href="">continue to
  work on this project</a>.  We'd really appreciate more donations, as we've
  needed to make a lot of compromises in our plans since we didn't reach our
  fundraising goal.  We did complete Phase 0 described below
  (<a href="">results are on our wiki</a>),
  and Phase 1 now comprises the development of an REST API for double-entry
  accounting  which many applications (including this one) can use.</p>
<p>Conservancy has a plan to help all non-profit organizations (NPOs) by
creating an Open Source and Free Software accounting system usable by
non-technical bookkeepers, accountants, and non-profit managers.  You can
help us do it by donating now.

<p>To keep their books and produce annual government filings, most NPOs rely
on proprietary software, paying exorbitant licensing fees.  This is
fundamentally at cross purposes with their underlying missions of charity,
equality, democracy, and sharing.</p>

<p>You can help Conservancy fix this problem by <a href="#donate-box" class="donate-now">donating now</a>.  We seek to
raise $75,000 to employ a 
developer for one year to make substantial progress on this project.</p>

<p>This project has the potential to save the non-profit sector
millions in licensing fees every year.  Even non-profits that continue to use proprietary accounting
software will benefit, since the existence of quality Open Source and Free
  Software for a particular task curtails predatory behavior by proprietary
  software companies, and creates a new standard of comparison.</p>

<p>But, more powerfully, this project's realization
will increase the agility and collaborative potential
for the non-profit sector &mdash; a boon to funders, boards, and employees &mdash;  bringing the Free Software and general NPO communities
into closer collaboration and understanding.</p>

<p>Thanks in advance for <a href="#donate-box" class="donate-now">helping us</a> develop Free Software to benefit all
non-profit organizations, and the 
populations they serve.</p>

<p>Donors of $500 or more will be acknowledged in the THANKS file and other
  appropriate places in the codebase itself.</p>

<p><a href="#endorsements">Endorsers of this effort</a> include April, Fractured Atlas, The Free Software
Foundation, Mozilla Foundation, GNOME Foundation, OpenHatch, Open
Source Initiative,, and Software in the Public
Interest; all encourage you to <a href="#donate-box" class="donate-now">donate and support it</a>.</p>



<p>Like many non-profit organizations (NPOs) in the USA, Conservancy's
  financial accounts are audited annually by an independent accounting firm;
  we recently completed our fiscal year 2011 audit.  As usual, our auditors
  asked plenty of questions about our accounting software.  Conservancy uses
  only Free Software, of course, centered around a set of straightforward reporting
  scripts that we created to run on top
Show inline comments
/* Copyright (C) 2012-2013 Denver Gingerich, 
** Copyright (C) 2013-2014 Bradley M. Kuhn.
** License: GPLv3-or-later
**  Find a copy of GPL at

$(document).ready(function() {
    var goal  = $('span#fundraiser-goal').text();
    var soFar = $('span#fundraiser-so-far').text();
    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').css({ 'color'        : 'green',
                                          'font-weight'  : 'bold',
                                          'float'        : 'right',
                                          'margin-right' : '40%',
                                          'margin-top'   : '2.5%',
                                          'text-align'   : 'inherit'});
    $("#progressbar").progressbar({ value:  curValue });

    function slowRise() {
        if (curValue >= percentage) {
            $("#progressbar").progressbar({ value :  percentage });
            $('span#fundraiser-percentage').text(percentage.toFixed(1) + "%");
        } else {
            var newVal = (curValue / 100.00) * noCommaGoal;
            $("#progressbar").progressbar({ value:  curValue });
            curValue += 0.5;
            setTimeout(slowRise, 50);


     .bind('click', function() {
        var $control = $(this);
        var $parent = $control.parents('.toggle-unit');


        // if control has HTML5 data attributes, use to update text
        if ($parent.hasClass('expanded')) {
        } else {
      .bind('click', function() {
        var $control = $('#donate-box');
        var $otherTextControl = $('.donate-sidebar');

        setTimeout(function() { $control.find('.toggle-content').slideUp(100);
                              }, 300);
          setTimeout(function() { $control.find('.toggle-content').fadeIn(2000);
                                  .css({'font-weight': 'bold', 'font-size' : '110%' });
                                }, 500);
    $('input[name=on0]:radio').change(function() {
        var input=$(this);
        var tShirtSelector = input.parent().children('.t-shirt-size-selector')
        var noShippingSelector = input.parent().children('input#no_shipping');
        var value = input.val();
        if (value == "wantGiftYes") {
        } else {

    // Forms start in "invalid" form, with the errors shown, so that
    // non-Javascript users see the errors by default and know what they must
    // enter.  The following two lines correct that.
    $('.supporter-form-inputs .form-error-show')
    $('.dinner-form-inputs .form-error-show')

    $('*#amount').on('input', function() {
        var input=$(this);
        var value = input.val();
        var errorElement=$("span#error", input.parent());
        var noCommaValue = value;
        noCommaValue = value.replace(/,/g, "");
        var re = /^((\d{1,3}(,?\d{3})*?(\.\d{0,2})?)|\d+(\.\d{0,2})?)$/;
        var isValid = ( re.test(value) &&
                        parseInt(noCommaValue) >= parseInt(input.attr("minimum")));
        if (isValid)  {
        else {
    var validateFormAtSubmission = function(element, event) {
            var valid = element.hasClass("valid");
            if (! valid) {
                                        .css("font-weight", "bold").css("font-size", "150%");
            } else {
    $(".supporter-form-submit#monthly").click(function (event) {
        validateFormAtSubmission($(".supporter-form#monthly input#amount"), event);
    $(".supporter-form-submit#annual").click(function (event) {
        validateFormAtSubmission($(".supporter-form#annual input#amount"), event);
    $(".dinner-form-submit").click(function (event) {
        validateFormAtSubmission($(".dinner-form input#amount"), event);
    /* Handle toggling of annual/monthly form selections */
    $('#annualSelector').css("font-weight", "bold").css("font-size", "127%");

    $("a[href$='monthly']").bind('click', function() {
        $('#monthlySelector').css("font-weight", "bold").css("font-size", "127%");
        $('#annualSelector').css("font-weight", "normal").css("font-size", "125%");
    $("a[href$='annual']").bind('click', function() {
        $('#annualSelector').css("font-weight", "bold").css("font-size", "127%");
        $('#monthlySelector').css("font-weight", "normal").css("font-size", "125%");
    $( ".footnote-mark" ).tooltip({
        items: "a",
        hide: { duration: 5000 },
        position: {
            my: "center bottom-20",
            at: "center left",
            using: function( position, feedback ) {
                $( this ).css( position );
                $( "<div>" )
                    .addClass( "arrow" )
                    .addClass( feedback.vertical )
                    .addClass( feedback.horizontal )
                    .appendTo( this );
        content: function() {
Show inline comments
{% extends "base_conservancy.html" %}
{% load cache %}
{% load humanize %}
{% block head %}
<link href="/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link href="/forms.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/jquery.min.js"></script>
<script type="text/javascript" src="/jquery-ui.min.js"></script>
<script type="text/javascript" src="/supporter-page.js"></script>

{% endblock %}

{% block outercontent %}
<div class="donate-sidebar">
<table style="background-color:#afe478;width:100%;">
<tr><td style="text-align:center;padding:10px;padding-bottom:10px;">
<div id="donate-box" class="toggle-unit"><h1 class="toggle-content">Support

<h3>Support GPL Compliance Now!</h3>

<p>Support our GPL compliance work now &amp; <strong>donations count double!</strong></p>
<p>Support our GPL compliance work now &amp; <span class="donate-box-highlight">donations count double!</span></p>

{% cache 3600 compliancedonation fundgoal.fundraiser_so_far_amount %}
$<span id="fundraiser-so-far">{{ fundgoal.fundraiser_so_far_amount|floatformat:0|intcomma }}</span>
of $<span id="fundraiser-goal">{{ fundgoal.fundraiser_goal_amount|floatformat:0|intcomma  }}</span> match met.<br/>
<div id="progressbar"><span id="fundraiser-percentage">(i.e., {{ fundgoal.percentage_there|floatformat:1 }}%)</span></div>
{% endcache %}

<p>Donate now via PayPal:
<p><span class="donate-box-highlight">Donate now via PayPal:</span>
<!-- PayPal start -->
<form action="" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="4ZKJN4F9BMFAS">
<input type="image" src="" style="border:0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" style="border:0" src="" width="1" height="1">
<!-- PayPal end -->

<p>Or, <a href="/supporter/#annual"><strong>become a Conservancy
      Supporter</strong></a> (&mdash; a better option if you're donating more
<p>Or, <a href="/supporter/#annual"><span class="donate-box-highlight">become a Conservancy
      Supporter</span></a> (&mdash; a better option if you're donating more
      than $120, since you'll get a t-shirt!).</p>
<div class="content-with-donate-sidebar">
    <div id="container">
         <div id="sidebar" class="{% block submenuselection %}other{% endblock %}">
            <h2>Our GPL {% block category %}Compliance{% endblock %} Work</h2>
            <li class="VMwareLawsuitAppeal"><a href="/linux-compliance/vmware-lawsuit-appeal.html">Stand Up For GPL!</a></li>
            <li><a href="/news/2015/mar/05/vmware-lawsuit/">VMware Lawsuit: Press Release</a></li>
            <li class="VMwareLawsuitFAQ"><a href="/linux-compliance/vmware-lawsuit-faq.html">
                <abbr title="Frequently Asked Questions">FAQ</abbr> on VMware Lawsuit</a></li>
            <li class="AboutCompliance"><a href="/linux-compliance/about.html">About GPL Compliance Project for Linux Developers</a></li>
            <li class="CopyleftOrg"><a href=""></a></li>
               <div id="mainContent">{% block content %}{% endblock %}
{% endblock %}
0 comments (0 inline, 0 general)