Changeset - 674261e0f0c2
Parent rev.
Child rev.
[Not reviewed]
0 2 0
Bradley Kuhn (bkuhn) - 9 years ago 2014-12-05 15:07:27
bkuhn@ebb.org
Start errors in shown state for non-Javascript.

Since the error messages have important information, and since the
Javascript code is the only "enforcer" of the minimum donation, the
errors really should be displayed by default if the browser is not
Javascript-capable. This change does that, but also toggles the state
back so that errors are not shown until needed in Javascript-capable
browsers.

I believe this still fits graceful degradation, since browsers without
Javascript and CSS were already showing the errors anyway, so now the
only real change is that everyone sees the errors by default.

It *might* make sense to not show the errors in red in non-Javascript
browsers (i.e., make the default CSS color black for the form-error-show
class, and then change it to red in the Javascript). I didn't make that
so, because it's not clear to me that's right, and we *do* want to draw
attention to the errors lest people become a supporter below the
minimum (which has happened once already -- that precipitated this
change).

I'm still annoyed that PayPal doesn't provide a "minimum but no maximum"
variable donation box of its own, which would solve this problem
outright.
2 files changed with 9 insertions and 2 deletions:
www/conservancy/static/supporter-page.js
7
www/conservancy/static/supporter/index.html
2
2
0 comments (0 inline, 0 general)
www/conservancy/static/supporter-page.js
➞
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 https://sfconservancy.org/GPLv3
 
*/
 

			




	
	
	
		
 
$(document).ready(function() {


			




	
	
	
		
 
    $('.toggle-content').hide();


			




	
	
	
		
 

			




	
	
	
		
 
    $('.toggle-control')


			




	
	
	
		
 
     .addClass('clickable')


			




	
	
	
		
 
     .bind('click', function() {


			




	
	
	
		
 
        var $control = $(this);


			




	
	
	
		
 
        var $parent = $control.parents('.toggle-unit');


			




	
	
	
		
 

			




	
	
	
		
 
        $parent.toggleClass('expanded');


			




	
	
	
		
 
        $parent.find('.toggle-content').slideToggle();


			




	
	
	
		
 

			




	
	
	
		
 
        // if control has HTML5 data attributes, use to update text


			




	
	
	
		
 
        if ($parent.hasClass('expanded')) {


			




	
	
	
		
 
            $control.html($control.attr('data-expanded-text'));


			




	
	
	
		
 
        } else {


			




	
	
	
		
 
            $control.html($control.attr('data-text'));


			




	
	
	
		
 
        }


			




	
	
	
		
 
    });


			




	
	
	
		
 
    $('a.donate-now')


			




	
	
	
		
 
      .addClass('clickable')


			




	
	
	
		
 
      .bind('click', function() {


			




	
	
	
		
 
        var $control = $('#donate-box');


			




	
	
	
		
 

			




	
	
	
		
 
        $control.toggleClass('expanded');


			




	
	
	
		
 
        $control.find('.toggle-content').slideUp("slow");


			




	
	
	
		
 
        $control.find('.toggle-content').slideDown("slow");


			




	
	
	
		
 
    });


			




	
	
	
		
 
    $(".t-shirt-size-selector").hide();


			




	
	
	
		
 
    $('input[name=os1]: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 == "Yes") {


			




	
	
	
		
 
            tShirtSelector.show();


			




	
	
	
		
 
            noShippingSelector.val("2");


			




	
	
	
		
 
        } else {


			




	
	
	
		
 
            tShirtSelector.hide();


			




	
	
	
		
 
            noShippingSelector.val("0");


			




	
	
	
		
 
        }


			




	
	
	
		
 
    });


			




	
	
	
		
 

			




	
	
	
		
 
    // 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.


			




	
	
	
		
 
    $('*#amount').addClass("valid");


			




	
	
	
		
 
    $('.supporter-form-inputs .form-error-show')


			




	
	
	
		
 
        .removeClass('form-error-show').addClass('form-error');


			




	
	
	
		
 

			




	
	
	
		
 
    $('*#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)  {


			




	
	
	
		
 
           input.removeClass("invalid").addClass("valid");


			




	
	
	
		
 
           errorElement.removeClass("form-error-show").addClass("form-error");


			




	
	
	
		
 
           $("#form-correction-needed").removeClass("form-error-show").addClass("form-error");


			




	
	
	
		
 
        }


			




	
	
	
		
 
        else {


			




	
	
	
		
 
            input.removeClass("valid").addClass("invalid");


			




	
	
	
		
 
            errorElement.removeClass("form-error").addClass("form-error-show");


			




	
	
	
		
 
        }


			




	
	
	
		
 
    });


			




	
	
	
		
 
    var validateFormAtSubmission = function(element, event) {


			




	
	
	
		
 
            var valid = element.hasClass("valid");


			




	
	
	
		
 
            if (! valid) {


			




	
	
	
		
 
                $("#form-correction-needed").removeClass("form-error").addClass("form-error-show")


			




	
	
	
		
 
                                        .css("font-weight", "bold").css("font-size", "150%");


			




	
	
	
		
 
	        event.preventDefault();


			




	
	
	
		
 
            } else {


			




	
	
	
		
 
                $("#form-correction-needed").removeClass("form-error-show").addClass("form-error");


			




	
	
	
		
 
            }


			




	
	
	
		
 
    };


			




	
	
	
		
 
    $(".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);


			




	
	
	
		
 
    });


			




	
	
	
		
 
    /* Handle toggling of annual/monthly form selections */


			




	
	
	
		
 
    $('.supporter-type-selection#monthly').hide();


			




	
	
	
		
 
    $('#annualSelector').css("font-weight", "bold").css("font-size", "127%");


			




	
	
	
		
 

			




	
	
	
		
 
    $("a[href$='monthly']").bind('click', function() {


			




	
	
	
		
 
        $('.supporter-type-selection#annual').hide();


			




	
	
	
		
 
        $('.supporter-type-selection#monthly').show();


			




	
	
	
		
 
        $('#monthlySelector').css("font-weight", "bold").css("font-size", "127%");


			




	
	
	
		
 
        $('#annualSelector').css("font-weight", "normal").css("font-size", "125%");


			




	
	
	
		
 
        $("#form-correction-needed").removeClass("form-error-show").addClass("form-error");


			




	
	
	
		
 
    });


			




	
	
	
		
 
    $("a[href$='annual']").bind('click', function() {


			




	
	
	
		
 
        $('.supporter-type-selection#annual').show();


			




        

    


    
    

    

        

                

                    www/conservancy/static/supporter/index.html
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	...
	
		
 
@@ -97,161 +97,161 @@ href="https://copyleft.org/">copyleft.org</a>


			




	
	
	
		
 
or sign up to join the <a 

			




	
	
	
		
 
href="http://sfconservancy.org/news/2014/aug/12/tax-exempt-working-group/">


			




	
	
	
		
 
tax exempt working group</a>.</li>


			




	
	
	
		
 

			




	
	
	
		
 
<li>we seek to solve problems for the public through free and open 

			




	
	
	
		
 
source


			




	
	
	
		
 
software.  We've launched a <a href="http://npoacct.sfconservancy.org/">


			




	
	
	
		
 
nonprofits accounting project</a> to help all


			




	
	
	
		
 
nonprofits (in free software and in other fields) avoid paying millions


			




	
	
	
		
 
of dollars in licensing fees for subpar accounting software.</li>


			




	
	
	
		
 

			




	
	
	
		
 
<li>as part of Conservancy's partnership in the program, we support Karen as


			




	
	
	
		
 
  a co-organizer of the Free and Open Source Software Outreach Program.</li>


			




	
	
	
		
 

			




	
	
	
		
 
<li>we encourage and support our employees to do volunteer work in the


			




	
	
	
		
 
    community.  For example, Bradley and Karen together host an oggcast


			




	
	
	
		
 
    called <cite><a href="http://faif.us">Free as in Freedom</a></cite> which


			




	
	
	
		
 
    discusses important legal and policy issues in open source and free


			




	
	
	
		
 
    software.</li></ul>


			




	
	
	
		
 

			




	
	
	
		
 
<img class="appeal-footer" alt="*" src="/img/conservancy-supporter-heart.png"/>


			




	
	
	
		
 

			




	
	
	
		
 
<p>As an organization, we try to do do everything transparently; even 

			




	
	
	
		
 
our


			




	
	
	
		
 
<a 

			




	
	
	
		
 
href="https://gitorious.org/conservancy/policies/source/master:">


			




	
	
	
		
 
internal policies</a> are published and available for scrutiny.</p>


			




	
	
	
		
 

			




	
	
	
		
 
<p>Please <a href="#donate-box" class="donate-now">join our Supporter program</a> and spread software freedom!</p>


			




	
	
	
		
 

			




	
	
	
		
 
<p class="footnote"><sup><a href="#return-footnote-shirts-when">1</a></sup><a id="footnote-shirts-when"></a><span class="footnote-1-text">The


			




	
	
	
		
 
    shirts will ship during Q1 2015.</span></p>


			




	
	
	
		
 

			




	
	
	
		
 
<div class="supporter-type-selector">


			




	
	
	
		
 
<hr/>


			




	
	
	
		
 
  <strong>Become a Supporter Now:</strong>  <a id="annualSelector" href="#annual">Annual</a> | <a id="monthlySelector" href="#monthly">Monthly</a></div>


			




	
	
	
		
 
<div id="annual" class="supporter-type-selection">


			




	
	
	
		
 
<h3>Join as an Annual Supporter</h3>


			




	
	
	
		
 
<a id="annual"></a>


			




	
	
	
		
 
<form id="annual" class="supporter-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" name="supporter">


			




	
	
	
		
 
<div class="supporter-form-inputs">


			




	
	
	
		
 
            <input type="hidden" name="return" value="https://sfconservancy.org/supporter/thank-you.html" />


			




	
	
	
		
 
            <input type="hidden" name="cmd" value="_xclick" />


			




	
	
	
		
 
            <input type="hidden" name="business" value="supporter@sfconservancy.org" />


			




	
	
	
		
 
            <input type="hidden" name="item_name" value="Conservancy Supporter, Annual" />


			




	
	
	
		
 
            <input id="no_shipping" type="hidden" name="no_shipping" value="0" />


			




	
	
	
		
 
  <label for="amount"><strong>Amount:</strong> $</label>


			




	
	
	
		
 
  <input id="amount" type="text" name="amount" size="7" minimum="120" value="120" />


			




	
	
	
		
 
  <span id="error" class="form-error">$120 is a minimum for Conservancy


			




	
	
	
		
 
  <span id="error" class="form-error-show">$120 is a minimum for Conservancy


			




	
	
	
		
 
  Supporters.  <a href="/donate">Donate smaller amounts here</a>.</span><br/>


			




	
	
	
		
 

			




	
	
	
		
 
                      <label for="wantGift"><strong>Do you want to receive a t-shirt? </strong></label>


			




	
	
	
		
 
                      <input type="hidden" name="on1" value="wantGift" />


			




	
	
	
		
 
                      <input type="radio" name="os1" value="Yes" />Yes


			




	
	
	
		
 
                      <input type="radio" checked="checked" name="os1" value="No" />No


			




	
	
	
		
 
                      <br />


			




	
	
	
		
 
                      <span class="t-shirt-size-selector">


			




	
	
	
		
 
                      <label for="wantGift"><strong>T-shirt size: </strong></label>


			




	
	
	
		
 
                      <input type="hidden" name="on3" value="size"/>


			




	
	
	
		
 
                      <select name="os3" id="os3">


			




	
	
	
		
 
                        <option name="os3" id="os3" value="MenS">Men's S</option>


			




	
	
	
		
 
                        <option name="os3" id="os3" value="MenM">Men's M</option>


			




	
	
	
		
 
                        <option name="os3" id="os3" value="MenL">Men's L</option>


			




	
	
	
		
 
                        <option name="os3" id="os3" value="MenXL">Men's XL</option>


			




	
	
	
		
 
                        <option name="os3" id="os3" value="Men2XL">Men's 2XL</option>


			




	
	
	
		
 
                        <option name="os3" id="os3" value="LadiesS">Ladies' S</option>


			




	
	
	
		
 
                        <option name="os3" id="os3" value="LadiesM">Ladies' M</option>


			




	
	
	
		
 
                        <option name="os3" id="os3" value="LadiesL">Ladies' L</option>


			




	
	
	
		
 
                         <option name="os3" id="os3" value="LadiesXL">Ladies' XL</option>


			




	
	
	
		
 
                      </select><br/></span>


			




	
	
	
		
 
                      <label for="publicAck"><strong>


			




	
	
	
		
 
                          Should we <a href="/sponsors#supporters">list you publicly</a> as a Conservancy Supporter? </strong></label>


			




	
	
	
		
 
                      <input type="hidden" name="on2" value="publicAck" />


			




	
	
	
		
 
                      <input type="radio" checked="checked" name="os2" value="Yes" />Yes


			




	
	
	
		
 
                      <input type="radio" name="os2" value="No" />No<br/>


			




	
	
	
		
 
            

			




	
	
	
		
 
                      <label for="joinList"><strong>Join Conservancy's


			




	
	
	
		
 
                      Low-Traffic Announcement Email List? </strong></label>


			




	
	
	
		
 
                      <input type="hidden" name="on4" value="joinList" />


			




	
	
	
		
 
                      <input type="radio" checked="checked" name="os4" value="Yes" />Yes


			




	
	
	
		
 
                      <input type="radio" name="os4" value="No" />No<br>


			




	
	
	
		
 
                      <br /></div>


			




	
	
	
		
 
                      <div id="annual" class="supporter-form-submit">


			




	
	
	
		
 
                      <input type="image"


			




	
	
	
		
 
                             src="/img/supporter-payment-button-annual.png"


			




	
	
	
		
 
                             height="81" width="188"


			




	
	
	
		
 
                             border="0" name="submit" alt="Become an Annual Supporter Now!">


			




	
	
	
		
 
                      <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">


			




	
	
	
		
 
<br/><br/><small>Button above redirects to PayPal's site for credit


			




	
	
	
		
 
        card, bank account or PayPal balance payment methods.  Select options first.</small>


			




	
	
	
		
 
                      </div>


			




	
	
	
		
 

			




	
	
	
		
 
</form>


			




	
	
	
		
 
</div>


			




	
	
	
		
 
<div id="monthly" class="supporter-type-selection">


			




	
	
	
		
 
<h3>Join as an Monthly Supporter</h3>


			




	
	
	
		
 
<a id="monthly"></a>


			




	
	
	
		
 
<p>Monthly supporters will not receive any supporter benefits (including the t-shirt) until they've been


			




	
	
	
		
 
  monthly supporters for 12 months.</p>


			




	
	
	
		
 
<form id="monthly" class="supporter-form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">


			




	
	
	
		
 
<div class="supporter-form-inputs">


			




	
	
	
		
 
            <input type="hidden" name="business" value="supporter@sfconservancy.org" />


			




	
	
	
		
 
            <input type="hidden" name="item_name" value="Conservancy Supporter, Monthly" />


			




	
	
	
		
 
            <input type="hidden" name="return" value="https://sfconservancy.org/supporter/thank-you.html" />


			




	
	
	
		
 
            <input type="hidden" name="cmd" value="_xclick-subscriptions">


			




	
	
	
		
 
            <input id="no_shipping" type="hidden" name="no_shipping" value="0" />


			




	
	
	
		
 
            <input type="hidden" name="lc" value="US">


			




	
	
	
		
 
            <input type="hidden" name="no_note" value="1">


			




	
	
	
		
 
            <input type="hidden" name="t3" value="M" />


			




	
	
	
		
 
            <input type="hidden" name="p3" value="1" />


			




	
	
	
		
 
            <input type="hidden" name="src" value="1" />


			




	
	
	
		
 
            <input type="hidden" name="srt" value="0" />


			




	
	
	
		
 
            <input type="hidden" name="item_name" value="Conservancy Supporter, Monthly" />


			




	
	
	
		
 
  <label for="amount"><strong>Monthly Amount:</strong> $</label>


			




	
	
	
		
 
  <input id="amount" type="text" name="a3" size="5" minimum="10" value="10" />


			




	
	
	
		
 
  <span id="error" class="form-error">$10/month is a minimum for Conservancy


			




	
	
	
		
 
  <span id="error" class="form-error-show">$10/month is a minimum for Conservancy


			




	
	
	
		
 
  Supporters.  <a href="/donate">Donate smaller amounts here</a>.</span><br/>


			




	
	
	
		
 
                      <label for="wantGift"><strong>Do you want to receive a t-shirt? </strong></label>


			




	
	
	
		
 
                      <input type="hidden" name="on1" value="wantGift" />


			




	
	
	
		
 
                      <input type="radio" name="os1" value="Yes" />Yes


			




	
	
	
		
 
                      <input type="radio" checked="checked" name="os1" value="No" />No


			




	
	
	
		
 
                      <br />


			




	
	
	
		
 
                      <span class="t-shirt-size-selector">


			




	
	
	
		
 
                      <label for="wantGift"><strong>T-shirt size: </strong></label>


			




	
	
	
		
 
                      <input type="hidden" name="on3" value="size"/>


			




	
	
	
		
 
                      <select name="os3" id="os3">


			




	
	
	
		
 
                        <option name="os3" id="os3" value="MenS">Men's S</option>


			




	
	
	
		
 
                        <option name="os3" id="os3" value="MenM">Men's M</option>


			




	
	
	
		
 
                        <option name="os3" id="os3" value="MenL">Men's L</option>


			




	
	
	
		
 
                        <option name="os3" id="os3" value="MenXL">Men's XL</option>


			




	
	
	
		
 
                        <option name="os3" id="os3" value="Men2XL">Men's 2XL</option>


			




	
	
	
		
 
                        <option name="os3" id="os3" value="LadiesS">Ladies' S</option>


			




	
	
	
		
 
                        <option name="os3" id="os3" value="LadiesM">Ladies' M</option>


			




	
	
	
		
 
                        <option name="os3" id="os3" value="LadiesL">Ladies' L</option>


			




	
	
	
		
 
                         <option name="os3" id="os3" value="LadiesXL">Ladies' XL</option>


			




	
	
	
		
 
                      </select><br/></span>


			




	
	
	
		
 
                      <label for="publicAck"><strong>


			




	
	
	
		
 
                          Should we  <a href="/sponsors#supporters">list you publicly</a> as a Conservancy Supporter? </strong></label>


			




	
	
	
		
 
                      <input type="hidden" name="on2" value="publicAck" />


			




	
	
	
		
 
                      <input type="radio" checked="checked" name="os2" value="Yes" />Yes


			




	
	
	
		
 
                      <input type="radio" name="os2" value="No" />No<br/>


			




	
	
	
		
 
                      <label for="joinList"><strong>Join Conservancy's


			




	
	
	
		
 
                      Low-Traffic Announcement Email List? </strong></label>


			




	
	
	
		
 
                      <input type="hidden" name="on4" value="joinList" />


			




	
	
	
		
 
                      <input type="radio" checked="checked" name="os4" value="Yes" />Yes


			




	
	
	
		
 
                      <input type="radio" name="os4" value="No" />No<br>


			




	
	
	
		
 
                      <br /></div>


			




	
	
	
		
 
                      <div id="monthly" class="supporter-form-submit">


			




	
	
	
		
 
                      <input type="image"


			




	
	
	
		
 
                      src="/img/supporter-payment-button-monthly.png"


			




	
	
	
		
 
                      height="81" width="188"


			




	
	
	
		
 
                      border="0" name="submit" alt="Become a Monthly Supporter Now!">


			




	
	
	
		
 
<br/><br/><small>Button above redirects to PayPal's site for credit


			




	
	
	
		
 
        card, bank account or PayPal balance payment methods.  Select


			




	
	
	
		
 
                      options first.</small>


			




	
	
	
		
 
                      </div>


			




	
	
	
		
 
</form>


			




	
	
	
		
 
</div>


			




	
	
	
		
 
<span id="form-correction-needed" class="form-error">Please ensure all form data above is correct.</span>


			




	
	
	
		
 
</div>


			




	
	
	
		
 
{% endblock %}


			




        

    



    


    



    



      

      





    
    0 comments (0 inline, 0 general)
    





    


  

  







    


    

  


    








    
        Server instance: kapok.sfconservancy.org-15141
    
    
        This site is powered by
            Kallithea 0.6.3,
        which is
        © 2010–2020 by various authors & licensed under GPLv3.
            – Support
        – Privacy Policy