r100376 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r100375‎ | r100376 | r100377 >
Date:21:08, 20 October 2011
Author:kaldari
Status:ok
Tags:fundraising 
Comment:
splitting webitects_2_3step into payflowpro and globalcollect versions
Modified paths:
  • /trunk/extensions/DonationInterface/gateway_forms/includes/loading-green.gif (added) (history)
  • /trunk/extensions/DonationInterface/gateway_forms/includes/loading-white.gif (added) (history)
  • /trunk/extensions/DonationInterface/gateway_forms/includes/security-code.png (added) (history)
  • /trunk/extensions/DonationInterface/gateway_forms/rapidhtml/RapidHtmlResources.php (modified) (history)
  • /trunk/extensions/DonationInterface/gateway_forms/rapidhtml/html/webitects_2_3step.html (deleted) (history)
  • /trunk/extensions/DonationInterface/gateway_forms/rapidhtml/js/webitects_2_3step.js (deleted) (history)
  • /trunk/extensions/DonationInterface/globalcollect_gateway/forms/html/webitects_2_3step.html (added) (history)
  • /trunk/extensions/DonationInterface/globalcollect_gateway/forms/js/webitects_2_3step.js (added) (history)
  • /trunk/extensions/DonationInterface/payflowpro_gateway/forms/html/webitects_2_3step.html (added) (history)
  • /trunk/extensions/DonationInterface/payflowpro_gateway/forms/js/webitects_2_3step.js (added) (history)

Diff [purge]

Index: trunk/extensions/DonationInterface/payflowpro_gateway/forms/html/webitects_2_3step.html
——@@ -0,0 +1,243 @@
 2+<script type="text/javascript">
 3+ mw.loader.load('pfp.form.rapidhtml.webitects');
 4+ var extensionPath = mw.config.get( 'wgServer' ) + mw.config.get( 'wgScriptPath' ) + '/extensions/DonationInterface';
 5+ mw.loader.load( extensionPath + '/payflowpro_gateway/forms/js/webitects_2_3step.js', 'text/javascript' );
 6+ // these must go through RapidHTML and thus are inline
 7+ var amountErrors = ['#general|escape','#retryMsg|escape','#amount|escape'],
 8+ billingErrors = ['#fname|escape','#lname|escape','#city|escape','#country|escape',
 9+ '#street|escape','#state|escape','#zip|escape','#emailAdd|escape'],
 10+ paymentErrors = ['#card_num|escape','#card_type|escape','#cvv|escape'],
 11+ actionURL = "@action",
 12+ scriptPath = "@script_path";
 13+
 14+</script>
 15+<!--[if lt IE 7]><style type="text/css">body{behavior:url("@script_path/skins/vector/csshover.min.htc")}</style><![endif]-->
 16+<!-- start Webitects styles -->
 17+<style type="text/css">
 18+ #errorMessages { font-size: 0.75em; color: #FF0000; }
 19+ /* Force vertical scrollbar
 20+ html { overflow-y: scroll; }
 21+ */
 22+ /* Accordion */
 23+ #accordion h3 { background: #FFFFFF; border: none; font-size: 1.1em; margin: 0; padding: 0.5em 0.9em; outline: 0; }
 24+ .accordion-content { padding: 0.9em; }
 25+ #step2accordion { display:none; }
 26+
 27+ /* Callouts */
 28+ .call-l, .call-r { width: 270px; }
 29+
 30+ /* Layout */
 31+ #appeal { float: left; width: 100%; }
 32+ #appeal-content { padding-right: 380px; }
 33+ .clear { clear: both; }
 34+ #donate { float: left; margin-left: -350px; width: 350px; }
 35+ #donate-content { background-color: #FFFFFF; border: 1px solid #000000; padding: 1em 0;
 36+ font-size: 0.95em;
 37+ /* Maybe */ width: 348px;
 38+ }
 39+ #amount-table-white label { font-size: 1.1em; }
 40+
 41+ #donate-body { width: 348px; }
 42+ #donate-body h3 { font-size: 17px; }
 43+
 44+ #step1wrapper, #step2wrapper, #step3wrapper { width: 325px; }
 45+ /* Initially hide steps 2 and 3 */
 46+ #step2wrapper, #step2header, #step3wrapper, #step3header { display: none; }
 47+ #where-content { font-size: 13px; line-height: 19px; width: 325px; }
 48+
 49+ #amtErrorMessages, #billingErrorMessages, #paymentErrorMessages { color: #F00; }
 50+
 51+</style>
 52+<!--[if lt IE 7]><style>
 53+/* style for IE6 + IE5.5 + IE5.0 */
 54+.gainlayout { height: 0; }
 55+</style><![endif]-->
 56+
 57+<!--[if IE 7]><style>
 58+.gainlayout { zoom: 1; height: 1%; }
 59+</style><![endif]-->
 60+
 61+<div class="ltr">
 62+ <div id="appeal">
 63+ <div id="appeal-content">
 64+ <h2 id="appeal-head"> <span class="mw-headline" id="From_Wikipedia_programmer_Brandon_Harris">From Wikipedia programmer Brandon Harris</span></h2>
 65+ <div id="appeal-body" class="plainlinks">
 66+ <p>I feel like I'm living the first line of my obituary.</p>
 67+ <p>I don't think there will be anything else that I do in my life as important as what I do now for Wikipedia. We're not just building an encyclopedia, we're working to make people free. When we have access to free knowledge, we are better people. We understand the world is bigger than us, and we become infected with tolerance and understanding.</p>
 68+ <p>Wikipedia is the 5th largest website in the world. I work at the small non-profit that keeps it on the web. We don't run ads because doing so would sacrifice our independence. The site is not and should never be a propaganda tool.</p>
 69+ <p>Our work is possible because of donations from our readers. Will you help protect Wikipedia by donating $5, $10, $20 or whatever you can afford?</p>
 70+ <p>I work at the Wikimedia Foundation because everything in my soul tells me it's the right thing to do. I've worked at huge tech companies, doing some job to build some crappy thing that's designed to steal money from some kid who doesn't know it. I would come home from work crushed.</p>
 71+ <p>You might not know this, but the Wikimedia Foundation operates with a very small staff. Most other top-ten sites have tens of thousands of people and massive budgets. But they produce a fraction of what we pull off with sticks and wire.</p>
 72+ <p>When you give to Wikipedia, you're supporting free knowledge around the world. You're not only leaving a legacy for your children and for their children, you're elevating people around the world who have access to this treasure. You're assuring that one day everyone else will too.</p>
 73+ <p>Thank you,</p>
 74+ <p><strong>Brandon Harris</strong><br /></p>
 75+ <p>Programmer, Wikimedia Foundation</p>
 76+ </div>
 77+ </div>
 78+ </div>
 79+
 80+ <div id="donate">
 81+ <div id="donate-content">
 82+ <div id="donate-body" style="padding: 0 1em;">
 83+ <div id="step1header"><h3>Donation amount <span id="selected-amount"></span> <span class="mute" id="change-amount" style="display: none;">(<a href="#">Change</a>)</span></h3></div>
 84+
 85+ <form method="post" name="paypalcontribution">
 86+ <div id="step1wrapper">
 87+ <div id="amtErrorMessages" class="small"></div>
 88+ <table id="amount-table-white">
 89+ <tr>
 90+ <td><label><input type="radio" name="amountRadio" value="5" /> $5</label></td>
 91+ <td><label><input type="radio" name="amountRadio" value="10" /> $10</label></td>
 92+ <td><label><input type="radio" name="amountRadio" value="20" /> $20</label></td>
 93+ <td><label><input type="radio" name="amountRadio" value="35" /> $35</label></td>
 94+ </tr>
 95+ <tr>
 96+ <td><label><input type="radio" name="amountRadio" value="50" /> $50</label></td>
 97+ <td><label><input type="radio" name="amountRadio" value="100" /> $100</label></td>
 98+ <td><label><input type="radio" name="amountRadio" value="250" /> $250</label></td>
 99+ <td><input type="radio" name="amountRadio" id="input_amount_other" value="other" /> <label>$<input type="text" class="txt-sm hint" name="amountGiven" size="4" id="other-amount" title="Other..." onfocus="this.form.input_amount_other.checked=true;"/></label></td>
 100+ </tr>
 101+ </table>
 102+
 103+ <p class="donate-options">
 104+ <input class="btn" id="cc" type="button" value="Donate by Credit Card" /><br />
 105+ <input class="btn" id="pp" type="button" value="Donate via PayPal"/><span id='loading'></span>
 106+ </p>
 107+ </div>
 108+ <div id="step2header"><h3>Billing Address <span class="mute" id="change-billing" style="display: none;">(<a href="#">Change</a>)</span></h3></div>
 109+ <div id="step2wrapper">
 110+ <div id="billing-content" class="gainlayout">
 111+ <div id="billingErrorMessages" class="small"></div>
 112+ <div class="name-fields">
 113+ <span class="name-first"><input class="txt hint" id="fname" name="fname" title="First name" value="@fname" /></span>
 114+ <span class="name-last"><input class="txt hint" id="lname" name="lname" title="Last name" value="@lname" /></span>
 115+ </div>
 116+ <div class="loc-fields">
 117+ <span class="loc-street"><input class="txt hint" id="street" name="street" title="Street address" value="@street" /></span>
 118+ <span class="loc-city"><input class="txt hint" id="city" name="city" title="City" value="@city" /></span>
 119+ <span class="loc-state">
 120+ <select id="state" name="state" class="txt" value="@state" >
 121+ <option value=""></option>
 122+ <option value="AK">AK</option><option value="AL">AL</option><option value="AR">AR</option><option value="AZ">AZ</option><option value="CA">CA</option><option value="CO">CO</option><option value="CT">CT</option><option value="DC">DC</option><option value="DE">DE</option><option value="FL">FL</option><option value="GA">GA</option><option value="HI">HI</option><option value="IA">IA</option><option value="ID">ID</option><option value="IL">IL</option><option value="IN">IN</option><option value="KS">KS</option><option value="KY">KY</option><option value="LA">LA</option><option value="MA">MA</option><option value="MD">MD</option><option value="ME">ME</option><option value="MI">MI</option><option value="MN">MN</option><option value="MO">MO</option><option value="MS">MS</option><option value="MT">MT</option><option value="NC">NC</option><option value="ND">ND</option><option value="NE">NE</option><option value="NH">NH</option><option value="NJ">NJ</option><option value="NM">NM</option><option value="NV">NV</option><option value="NY">NY</option><option value="OH">OH</option><option value="OK">OK</option><option value="OR">OR</option><option value="PA">PA</option><option value="PR">PR</option><option value="RI">RI</option><option value="SC">SC</option><option value="SD">SD</option><option value="TN">TN</option><option value="TX">TX</option><option value="UT">UT</option><option value="VA">VA</option><option value="VT">VT</option><option value="WA">WA</option><option value="WI">WI</option><option value="WV">WV</option><option value="WY">WY</option><option value="AA">AA</option><option value="AE">AE</option><option value="AP">AP</option>
 123+ </select>
 124+ </span>
 125+ <span class="loc-postal"><input class="txt hint" id="zip" name="zip" title="Zip" value="@zip"/></span>
 126+ </div>
 127+ <p><input class="txt hint" title="Email address" id="emailAdd" name="emailAdd" value="@emailAdd"/></p>
 128+
 129+ <dl class="">
 130+ <dt><span class="label">Select credit card</span></dt>
 131+ <dd class="field" style="margin-bottom: 0;">
 132+ <ul class="options-h" id="cards" style="margin: 0;">
 133+ <li><input id="cc-visa" name="cardtype" type="radio" value="Visa" class="cardradio" /> <label for="cc-visa"><img alt="Visa" src="@script_path/extensions/DonationInterface/gateway_forms/includes/card-visa.png" /></label></li>
 134+ <li><input id="cc-mastercard" name="cardtype" type="radio" value="MasterCard" class="cardradio" /> <label for="cc-mastercard"><img alt="MasterCard" src="@script_path/extensions/DonationInterface/gateway_forms/includes/card-mastercard.png" /></label></li>
 135+ <li><input id="cc-amex" name="cardtype" type="radio" value="American Express" class="cardradio" /> <label for="cc-amex"><img alt="American Express" src="@script_path/extensions/DonationInterface/gateway_forms/includes/card-amex.png" /></label></li>
 136+ <li><input id="cc-discover" name="cardtype" type="radio" value="Discover" class="cardradio" /> <label for="cc-discover"><img alt="Discover" src="@script_path/extensions/DonationInterface/gateway_forms/includes/card-discover.png" /></label></li>
 137+ </ul>
 138+ <div id="paymentContinue" style="margin-top: 10px; display: none;"> <input class="btn" id="paymentContinueBtn" type="button" value="Continue" /></div>
 139+ </dd>
 140+ </dl>
 141+ </div>
 142+ </div>
 143+ <div id="step3header"><h3>Payment Information <span class="mute" id="change-payment" style="display: none;">(<a href="#">Change</a>)</span></h3></div>
 144+ <div id="step3wrapper" style="display: none;">
 145+ <div id="payment" class="gainlayout">
 146+ <div id="paymentErrorMessages" class="small"></div>
 147+ <dl class="form">
 148+ <dt><span class="label"><label for="card_num">Card number</label></span></dt>
 149+ <dd class="field"><input class="txt" id="card_num" name="card_num" value="@card_num"/></dd>
 150+
 151+ <dt></dt>
 152+ <dd class="field">
 153+ <div class="l" style="margin-right: 5%;">
 154+ <span class="label">Expiration date</span>
 155+ <select id="mos" name="mos">
 156+ <option value="">Month</option>
 157+ <option value="01">01 - January</option>
 158+ <option value="02">02 - February</option>
 159+ <option value="03">03 - March</option>
 160+ <option value="04">04 - April</option>
 161+ <option value="05">05 - May</option>
 162+ <option value="06">06 - June</option>
 163+ <option value="07">07 - July</option>
 164+ <option value="08">08 - August</option>
 165+ <option value="09">09 - September</option>
 166+ <option value="10">10 - October</option>
 167+ <option value="11">11 - November</option>
 168+ <option value="12">12 - December</option>
 169+ </select>
 170+
 171+ <select id="year" name="year">
 172+ <option value="">Year</option>
 173+ <option value="2011">2011</option>
 174+ <option value="2012">2012</option>
 175+ <option value="2013">2013</option>
 176+ <option value="2014">2014</option>
 177+ <option value="2015">2015</option>
 178+ <option value="2016">2016</option>
 179+ <option value="2017">2017</option>
 180+ <option value="2018">2018</option>
 181+ <option value="2019">2019</option>
 182+ <option value="2020">2020</option>
 183+ </select>
 184+ </div>
 185+ <div class="l">
 186+ <label class="label" for="cvv">Security code</label>
 187+ <input class="txt-sm" id="cvv" name="cvv" value="@cvv"/>
 188+ <a class="mute" href="#" id="where">Where?</a>
 189+ </div>
 190+
 191+ <div class="clear" id="codes" style="display: none;"><img alt="Security codes" src="@script_path/extensions/DonationInterface/gateway_forms/includes/security-code.png" /></div>
 192+ </dd>
 193+
 194+ <dt></dt>
 195+ <dd class="field">
 196+ <input id="submitcreditcard" class="btn" type="button" value="Submit donation" />
 197+ <p class="mute"><img alt="" src="@script_path/extensions/DonationInterface/gateway_forms/includes/padlock.gif" /> Your credit card will be securely processed.</p>
 198+ </dd>
 199+ </dl>
 200+ </div>
 201+ </div>
 202+
 203+ <input type="hidden" name="gateway" value="payflowpro" id="gateway" />
 204+ <input type="hidden" name="returnto" value="Thank_You/en" />
 205+ <input type="hidden" value="0" name="PaypalRedirect" id="PaypalRedirect">
 206+ <input type="hidden" value="@card" name="card" id="card">
 207+
 208+ <input type="hidden" value="@amount" name="amount" />
 209+ <input type="hidden" value="US" name="country" id="country" />
 210+ <input type="hidden" value="@expiration" name="expiration" id="expiration"/>
 211+ <input type="hidden" value="@currency_code" name="currency_code" />
 212+ <input type="hidden" value="@utm_source" name="utm_source"/>
 213+ <input type="hidden" value="@utm_medium" name="utm_medium"/>
 214+ <input type="hidden" value="@utm_campaign" name="utm_campaign"/>
 215+ <input type="hidden" value="@language" name="language"/>
 216+ <input type="hidden" value="@referrer" name="referrer"/>
 217+ <input type="hidden" value="@comment" name="comment"/>
 218+ <input type="hidden" value="@comment-option" name="comment-option"/>
 219+ <input type="hidden" value="@email-opt" name="email-opt"/>
 220+ <input type="hidden" value="processed" name="payment_method"/>
 221+ <input type="hidden" value="@token" name="token"/>
 222+ <input type="hidden" value="@order_id" name="order_id"/>
 223+ <input type="hidden" value="@numAttempt" name="numAttempt"/>
 224+ <input type="hidden" value="@contribution_tracking_id" name="contribution_tracking_id"/>
 225+ <input type="hidden" value="@data_hash" name="data_hash"/>
 226+ <input type="hidden" value="@owa_session" name="owa_session"/>
 227+ <input type="hidden" value="@owa_ref" name="owa_ref"/>
 228+ </form>
 229+ <div id="where-content">
 230+ <hr />
 231+ <h3>Where your donation goes</h3>
 232+ <p><strong>Technology:</strong> Servers, bandwidth, maintenance, development. Wikipedia is the #5 website in the world and it runs on a fraction of what other top websites spend.</p>
 233+ <p><strong>People:</strong> The other top 10 website have thousands of employees. We have fewer than 100, making your donation a great investment in a highly-efficient not-for-profit organization.</p>
 234+ </div>
 235+ </div>
 236+ </div>
 237+ <p>We do not store your credit card information, and your personal data is subject to our <a target="_blank" href="https://www.mediawiki.org//wikimediafoundation.org/wiki/Donor_policy"> donor privacy policy</a>.</p>
 238+ <p><a target="_blank" href="https://www.mediawiki.org//wikimediafoundation.org/wiki/Ways_to_Give/en">More information or other ways to give</a><br /><a target="_blank" href="https://www.mediawiki.org//wikimediafoundation.org/wiki/FAQ/en">Answers to frequently asked questions</a></p>
 239+ </div>
 240+</div>
 241+
 242+<!-- Wikimedia Project logo
 243+<li id="footer-copyrightico"><a href="https://www.mediawiki.org//wikimediafoundation.org/"><img src="//bits.wikimedia.org/images/wikimedia-button.png" width="88" height="31" alt="Wikimedia Foundation"/></a></li>
 244+ -->
Property changes on: trunk/extensions/DonationInterface/payflowpro_gateway/forms/html/webitects_2_3step.html
___________________________________________________________________
Added: svn:eol-style
1245 + native
Index: trunk/extensions/DonationInterface/payflowpro_gateway/forms/js/webitects_2_3step.js
——@@ -0,0 +1,236 @@
 2+/*
 3+ * The following variable are declared inline in webitects_2_3step.html:
 4+ * amountErrors, billingErrors, paymentErrors, scriptPath, actionURL
 5+ */
 6+$( document ).ready( function () {
 7+
 8+ // check for RapidHtml errors and display, if any
 9+ var amountErrorString = "",
 10+ billingErrorString = "",
 11+ paymentErrorString = "";
 12+
 13+ // generate formatted errors to display
 14+ var temp = [];
 15+ for ( var e in amountErrors )
 16+ if ( amountErrors[e] != "" )
 17+ temp[temp.length] = amountErrors[e];
 18+ amountErrorString = temp.join( "<br />" );
 19+
 20+ temp = [];
 21+ for ( var f in billingErrors )
 22+ if ( billingErrors[f] != "" )
 23+ temp[temp.length] = billingErrors[f];
 24+ billingErrorString = temp.join( "<br />" );
 25+
 26+ temp = [];
 27+ for ( var g in paymentErrors )
 28+ if ( paymentErrors[g] != "" )
 29+ temp[temp.length] = paymentErrors[g];
 30+ paymentErrorString = temp.join( "<br />" );
 31+
 32+ // show the errors
 33+ var prevError = false;
 34+ if ( amountErrorString != "" ) {
 35+ $( "#amtErrorMessages" ).html( amountErrorString );
 36+ prevError = true;
 37+ showStep2(); // init the headers
 38+ showStep3();
 39+ showStep1(); // should be default, but ensure
 40+ }
 41+ if ( billingErrorString != "" ) {
 42+ $( "#billingErrorMessages" ).html( billingErrorString );
 43+ if ( !prevError ) {
 44+ showStep1(); // init the headers
 45+ showStep3();
 46+ showStep2();
 47+ prevError = true;
 48+ }
 49+ showAmount( $( 'input[name="amount"]' ) ); // lets go ahead and assume there is something to show
 50+ }
 51+ if ( paymentErrorString != "" ) {
 52+ $( "#paymentErrorMessages" ).html( paymentErrorString );
 53+ if ( !prevError ) {
 54+ showStep1(); // init the headers
 55+ showStep2();
 56+ showStep3();
 57+ }
 58+ showAmount( $( 'input[name="amount"]' ) ); // lets go ahead and assume there is something to show
 59+ }
 60+ // Init inline labels
 61+ $( ".hint" ).ezpz_hint();
 62+
 63+ $( "#cc" ).click( function() {
 64+ if ( validateAmount() ) {
 65+ showAmount( $( 'input[name="amount"]' ) );
 66+ showStep2();
 67+ }
 68+ } );
 69+
 70+ $( "#pp" ).click( function() {
 71+ if ( validateAmount() ) {
 72+ // set the action to go to PayPal
 73+ $( 'input[name="gateway"]' ).val( "paypal" );
 74+ $( 'input[name="PaypalRedirect"]' ).val( "1" );
 75+ $( "#loading" ).html( "<img src=" + scriptPath + "'/extensions/DonationInterface/payflowpro_gateway/forms/rapidhtml/images/loading-white.gif' /> Redirecting to PayPal…" );
 76+ document.paypalcontribution.action = actionURL;
 77+ document.paypalcontribution.submit();
 78+ }
 79+ } );
 80+ $( "#paymentContinueBtn" ).live( "click", function() {
 81+ if ( validate_personal( document.paypalcontribution ) ) {
 82+ showStep3();
 83+ }
 84+ } );
 85+ // Set the cards to progress to step 3
 86+ $( ".cardradio" ).live( "click", function() {
 87+ if ( validate_personal( document.paypalcontribution ) ) {
 88+ showStep3();
 89+ }
 90+ else {
 91+ // show the continue button to indicate how to get to step 3 since they
 92+ // have already clicked on a card image
 93+ $( "#paymentContinue" ).show();
 94+ }
 95+ } );
 96+
 97+ $( "#submitcreditcard" ).click( function() {
 98+ // set country to US TODO: make this dynamic
 99+ $( 'input[name="country"]' ).val( "US" );
 100+
 101+ if ( validate_cc() ) {
 102+ // set the hidden expiration date input from the two selects
 103+ $( 'input[name="expiration"]' ).val(
 104+ $( 'select[name="mos"]' ).val() + $( 'select[name="year"]' ).val().substring( 2, 4 )
 105+ );
 106+ document.paypalcontribution.action = actionURL;
 107+ document.paypalcontribution.submit();
 108+ }
 109+ } );
 110+ // init all of the header actions
 111+ $( "#step1header" ).click( function() {
 112+ showStep1();
 113+ } );
 114+ $( "#step2header" ).click( function() {
 115+ showStep2();
 116+ } );
 117+ $( "#step3header" ).click( function() {
 118+ showStep3();
 119+ } );
 120+ // Set selected amount to amount
 121+ $( 'input[name="amountRadio"]' ).click( function() {
 122+ setAmount( $( this ) );
 123+ } );
 124+ // reset the amount field when "other" is changed
 125+ $( "#other-amount" ).change( function() {
 126+ setAmount( $( this ) );
 127+ } );
 128+
 129+ // show the CVV help image on click
 130+ $( "#where" ).click( function() {
 131+ $( "#codes" ).toggle();
 132+ return false;
 133+ } );
 134+
 135+} );
 136+
 137+function showStep1() {
 138+ // show the correct sections
 139+ $( "#step1wrapper" ).slideDown();
 140+ $( "#step2wrapper" ).slideUp();
 141+ $( "#step3wrapper" ).slideUp();
 142+ $( "#change-amount" ).hide();
 143+ $( "#change-billing" ).show();
 144+ $( "#change-payment" ).show();
 145+ $( "#step1header" ).show(); // just in case
 146+}
 147+
 148+function showStep2() {
 149+ // show the correct sections
 150+ $( "#step1wrapper" ).slideUp();
 151+ $( "#step2wrapper" ).slideDown();
 152+ $( "#step3wrapper" ).slideUp();
 153+ $( "#change-amount" ).show();
 154+ $( "#change-billing" ).hide();
 155+ $( "#change-payment" ).show();
 156+ $( "#step2header" ).show(); // just in case
 157+}
 158+
 159+function showStep3() {
 160+ // show the correct sections
 161+ $( "#step1wrapper" ).slideUp();
 162+ $( "#step2wrapper" ).slideUp();
 163+ $( "#step3wrapper" ).slideDown();
 164+ $( "#change-amount" ).show();
 165+ $( "#change-billing" ).show();
 166+ $( "#change-payment" ).hide();
 167+ $( "#step3header" ).show(); // just in case
 168+}
 169+// Fix behavior of images in labels
 170+// TODO: check that disabling this is okay in things other than Chrome
 171+// $("label img").live("click", function() { $("#" + $(this).parents( "label" ).attr( "for" )).click(); });
 172+
 173+// set the hidden amount input to the value of the selected element
 174+function setAmount( e ) {
 175+ $( 'input[name="amount"]' ).val( e.val() );
 176+}
 177+// Display selected amount
 178+function showAmount( e ) {
 179+ $( "#selected-amount" ).html( "($" + e.val() + ")" );
 180+ $( "#change-amount" ).show();
 181+}
 182+function validateAmount() {
 183+ var minimums = {
 184+ 'USD' : 1
 185+ };
 186+ var error = true;
 187+ var amount = $( 'input[name="amount"]' ).val(); // get the amount
 188+ amount = amount.replace( /[,.](\d)$/, '\:$10' );
 189+ amount = amount.replace( /[,.](\d)(\d)$/, '\:$1$2' );
 190+ amount = amount.replace( /[,.]/g, '' );
 191+ amount = amount.replace( /:/, '.' );
 192+ $( 'input[name="amount"]' ).val( amount ); // set the new amount back into the form
 193+
 194+ // Check amount is a real number, sets error as true (good) if no issues
 195+ error = ( amount == null || isNaN( amount ) || amount.value <= 0 );
 196+
 197+ // Check amount is at least the minimum
 198+ var currency_code = 'USD'; // hard-coded for these forms and tests
 199+ $( 'input[name="currency_code"]' ).val( currency_code );
 200+ if ( typeof( minimums[currency_code] ) == 'undefined' ) {
 201+ minimums[currency_code] = 1;
 202+ }
 203+ if ( amount < minimums[currency_code] || error ) {
 204+ alert( 'You must contribute at least $1'.replace( '$1', minimums[currency_code] + ' ' + currency_code ) );
 205+ error = true;
 206+ }
 207+ return !error;
 208+}
 209+
 210+function validate_cc() {
 211+ // reset the errors
 212+ $( "#paymentErrorMessages" ).html( '' );
 213+ var error = false;
 214+ if ( $( 'input[name="card_num"]' ).val() == '' ) {
 215+ $( "#paymentErrorMessages" ).append( "Please enter a valid credit card number" );
 216+ error = true;
 217+ }
 218+ if ( $( 'select[name="mos"]' ).val() == '' ) {
 219+ if ( $( "#paymentErrorMessages" ).html() != "" )
 220+ $( "#paymentErrorMessages" ).append( "<br />" );
 221+ $( "#paymentErrorMessages" ).append( "Please enter a valid month for the expiration date" );
 222+ error = true;
 223+ }
 224+ if ( $( 'select[name="year"]' ).val() == '' ) {
 225+ if ( $( "#paymentErrorMessages" ).html() != "" )
 226+ $( "#paymentErrorMessages" ).append( "<br />" );
 227+ $( "#paymentErrorMessages" ).append( "Please enter a valid year for the expiration date" );
 228+ error = true;
 229+ }
 230+ if ( $( 'input[name="cvv"]' ).val() == '' ) {
 231+ if ( $( "#paymentErrorMessages" ).html() != "" )
 232+ $( "#paymentErrorMessages" ).append( "<br />" );
 233+ $( "#paymentErrorMessages" ).append( "Please enter a valid security code" );
 234+ error = true;
 235+ }
 236+ return !error;
 237+}
\ No newline at end of file
Property changes on: trunk/extensions/DonationInterface/payflowpro_gateway/forms/js/webitects_2_3step.js
___________________________________________________________________
Added: svn:eol-style
1238 + native
Index: trunk/extensions/DonationInterface/gateway_forms/rapidhtml/html/webitects_2_3step.html
——@@ -1,241 +0,0 @@
2 -<script type="text/javascript">
3 - mw.loader.load('pfp.form.rapidhtml.webitects_2_3step');
4 - // these must go through RapidHTML and thus are inline
5 - var amountErrors = ['#general|escape','#retryMsg|escape','#amount|escape'],
6 - billingErrors = ['#fname|escape','#lname|escape','#city|escape','#country|escape',
7 - '#street|escape','#state|escape','#zip|escape','#emailAdd|escape'],
8 - paymentErrors = ['#card_num|escape','#card|escape','#cvv|escape'],
9 - actionURL = "@action",
10 - scriptPath = "@script_path";
11 -
12 -</script>
13 -<!--[if lt IE 7]><style type="text/css">body{behavior:url("@script_path/skins/vector/csshover.min.htc")}</style><![endif]-->
14 -<!-- start Webitects styles -->
15 -<style type="text/css">
16 - #errorMessages { font-size: 0.75em; color: #FF0000; }
17 - /* Force vertical scrollbar
18 - html { overflow-y: scroll; }
19 - */
20 - /* Accordion */
21 - #accordion h3 { background: #FFFFFF; border: none; font-size: 1.1em; margin: 0; padding: 0.5em 0.9em; outline: 0; }
22 - .accordion-content { padding: 0.9em; }
23 - #step2accordion { display:none; }
24 -
25 - /* Callouts */
26 - .call-l, .call-r { width: 270px; }
27 -
28 - /* Layout */
29 - #appeal { float: left; width: 100%; }
30 - #appeal-content { padding-right: 380px; }
31 - .clear { clear: both; }
32 - #donate { float: left; margin-left: -350px; width: 350px; }
33 - #donate-content { background-color: #FFFFFF; border: 1px solid #000000; padding: 1em 0;
34 - font-size: 0.95em;
35 - /* Maybe */ width: 348px;
36 - }
37 - #amount-table-white label { font-size: 1.1em; }
38 -
39 - #donate-body { width: 348px; }
40 - #donate-body h3 { font-size: 17px; }
41 -
42 - #step1wrapper, #step2wrapper, #step3wrapper { width: 325px; }
43 - /* Initially hide steps 2 and 3 */
44 - #step2wrapper, #step2header, #step3wrapper, #step3header { display: none; }
45 - #where-content { font-size: 13px; line-height: 19px; width: 325px; }
46 -
47 - #amtErrorMessages, #billingErrorMessages, #paymentErrorMessages { color: #F00; }
48 -
49 -</style>
50 -<!--[if lt IE 7]><style>
51 -/* style for IE6 + IE5.5 + IE5.0 */
52 -.gainlayout { height: 0; }
53 -</style><![endif]-->
54 -
55 -<!--[if IE 7]><style>
56 -.gainlayout { zoom: 1; height: 1%; }
57 -</style><![endif]-->
58 -
59 -<div class="ltr">
60 - <div id="appeal">
61 - <div id="appeal-content">
62 - <h2 id="appeal-head"> <span class="mw-headline" id="From_Wikipedia_programmer_Brandon_Harris">From Wikipedia programmer Brandon Harris</span></h2>
63 - <div id="appeal-body" class="plainlinks">
64 - <p>I feel like I'm living the first line of my obituary.</p>
65 - <p>I don't think there will be anything else that I do in my life as important as what I do now for Wikipedia. We're not just building an encyclopedia, we're working to make people free. When we have access to free knowledge, we are better people. We understand the world is bigger than us, and we become infected with tolerance and understanding.</p>
66 - <p>Wikipedia is the 5th largest website in the world. I work at the small non-profit that keeps it on the web. We don't run ads because doing so would sacrifice our independence. The site is not and should never be a propaganda tool.</p>
67 - <p>Our work is possible because of donations from our readers. Will you help protect Wikipedia by donating $5, $10, $20 or whatever you can afford?</p>
68 - <p>I work at the Wikimedia Foundation because everything in my soul tells me it's the right thing to do. I've worked at huge tech companies, doing some job to build some crappy thing that's designed to steal money from some kid who doesn't know it. I would come home from work crushed.</p>
69 - <p>You might not know this, but the Wikimedia Foundation operates with a very small staff. Most other top-ten sites have tens of thousands of people and massive budgets. But they produce a fraction of what we pull off with sticks and wire.</p>
70 - <p>When you give to Wikipedia, you're supporting free knowledge around the world. You're not only leaving a legacy for your children and for their children, you're elevating people around the world who have access to this treasure. You're assuring that one day everyone else will too.</p>
71 - <p>Thank you,</p>
72 - <p><strong>Brandon Harris</strong><br /></p>
73 - <p>Programmer, Wikimedia Foundation</p>
74 - </div>
75 - </div>
76 - </div>
77 -
78 - <div id="donate">
79 - <div id="donate-content">
80 - <div id="donate-body" style="padding: 0 1em;">
81 - <div id="step1header"><h3>Donation amount <span id="selected-amount"></span> <span class="mute" id="change-amount" style="display: none;">(<a href="#">Change</a>)</span></h3></div>
82 -
83 - <form method="post" name="paypalcontribution">
84 - <div id="step1wrapper">
85 - <div id="amtErrorMessages" class="small"></div>
86 - <table id="amount-table-white">
87 - <tr>
88 - <td><label><input type="radio" name="amountRadio" value="5" /> $5</label></td>
89 - <td><label><input type="radio" name="amountRadio" value="10" /> $10</label></td>
90 - <td><label><input type="radio" name="amountRadio" value="20" /> $20</label></td>
91 - <td><label><input type="radio" name="amountRadio" value="35" /> $35</label></td>
92 - </tr>
93 - <tr>
94 - <td><label><input type="radio" name="amountRadio" value="50" /> $50</label></td>
95 - <td><label><input type="radio" name="amountRadio" value="100" /> $100</label></td>
96 - <td><label><input type="radio" name="amountRadio" value="250" /> $250</label></td>
97 - <td><input type="radio" name="amountRadio" id="input_amount_other" value="other" /> <label>$<input type="text" class="txt-sm hint" name="amountGiven" size="4" id="other-amount" title="Other..." onfocus="this.form.input_amount_other.checked=true;"/></label></td>
98 - </tr>
99 - </table>
100 -
101 - <p class="donate-options">
102 - <input class="btn" id="cc" type="button" value="Donate by Credit Card" /><br />
103 - <input class="btn" id="pp" type="button" value="Donate via PayPal"/><span id='loading'></span>
104 - </p>
105 - </div>
106 - <div id="step2header"><h3>Billing Address <span class="mute" id="change-billing" style="display: none;">(<a href="#">Change</a>)</span></h3></div>
107 - <div id="step2wrapper">
108 - <div id="billing-content" class="gainlayout">
109 - <div id="billingErrorMessages" class="small"></div>
110 - <div class="name-fields">
111 - <span class="name-first"><input class="txt hint" id="fname" name="fname" title="First name" value="@fname" /></span>
112 - <span class="name-last"><input class="txt hint" id="lname" name="lname" title="Last name" value="@lname" /></span>
113 - </div>
114 - <div class="loc-fields">
115 - <span class="loc-street"><input class="txt hint" id="street" name="street" title="Street address" value="@street" /></span>
116 - <span class="loc-city"><input class="txt hint" id="city" name="city" title="City" value="@city" /></span>
117 - <span class="loc-state">
118 - <select id="state" name="state" class="txt" value="@state" >
119 - <option value=""></option>
120 - <option value="AK">AK</option><option value="AL">AL</option><option value="AR">AR</option><option value="AZ">AZ</option><option value="CA">CA</option><option value="CO">CO</option><option value="CT">CT</option><option value="DC">DC</option><option value="DE">DE</option><option value="FL">FL</option><option value="GA">GA</option><option value="HI">HI</option><option value="IA">IA</option><option value="ID">ID</option><option value="IL">IL</option><option value="IN">IN</option><option value="KS">KS</option><option value="KY">KY</option><option value="LA">LA</option><option value="MA">MA</option><option value="MD">MD</option><option value="ME">ME</option><option value="MI">MI</option><option value="MN">MN</option><option value="MO">MO</option><option value="MS">MS</option><option value="MT">MT</option><option value="NC">NC</option><option value="ND">ND</option><option value="NE">NE</option><option value="NH">NH</option><option value="NJ">NJ</option><option value="NM">NM</option><option value="NV">NV</option><option value="NY">NY</option><option value="OH">OH</option><option value="OK">OK</option><option value="OR">OR</option><option value="PA">PA</option><option value="PR">PR</option><option value="RI">RI</option><option value="SC">SC</option><option value="SD">SD</option><option value="TN">TN</option><option value="TX">TX</option><option value="UT">UT</option><option value="VA">VA</option><option value="VT">VT</option><option value="WA">WA</option><option value="WI">WI</option><option value="WV">WV</option><option value="WY">WY</option><option value="AA">AA</option><option value="AE">AE</option><option value="AP">AP</option>
121 - </select>
122 - </span>
123 - <span class="loc-postal"><input class="txt hint" id="zip" name="zip" title="Zip" value="@zip"/></span>
124 - </div>
125 - <p><input class="txt hint" title="Email address" id="emailAdd" name="emailAdd" value="@emailAdd"/></p>
126 -
127 - <dl class="">
128 - <dt><span class="label">Select credit card</span></dt>
129 - <dd class="field" style="margin-bottom: 0;">
130 - <ul class="options-h" id="cards" style="margin: 0;">
131 - <li><input id="cc-visa" name="cardtype" type="radio" value="Visa" class="cardradio" /> <label for="cc-visa"><img alt="Visa" src="@script_path/extensions/DonationInterface/gateway_forms/includes/card-visa.png" /></label></li>
132 - <li><input id="cc-mastercard" name="cardtype" type="radio" value="MasterCard" class="cardradio" /> <label for="cc-mastercard"><img alt="MasterCard" src="@script_path/extensions/DonationInterface/gateway_forms/includes/card-mastercard.png" /></label></li>
133 - <li><input id="cc-amex" name="cardtype" type="radio" value="American Express" class="cardradio" /> <label for="cc-amex"><img alt="American Express" src="@script_path/extensions/DonationInterface/gateway_forms/includes/card-amex.png" /></label></li>
134 - <li><input id="cc-discover" name="cardtype" type="radio" value="Discover" class="cardradio" /> <label for="cc-discover"><img alt="Discover" src="@script_path/extensions/DonationInterface/gateway_forms/includes/card-discover.png" /></label></li>
135 - </ul>
136 - <div id="paymentContinue" style="margin-top: 10px; display: none;"> <input class="btn" id="paymentContinueBtn" type="button" value="Continue" /></div>
137 - </dd>
138 - </dl>
139 - </div>
140 - </div>
141 - <div id="step3header"><h3>Payment Information <span class="mute" id="change-payment" style="display: none;">(<a href="#">Change</a>)</span></h3></div>
142 - <div id="step3wrapper" style="display: none;">
143 - <div id="payment" class="gainlayout">
144 - <div id="paymentErrorMessages" class="small"></div>
145 - <dl class="form">
146 - <dt><span class="label"><label for="card_num">Card number</label></span></dt>
147 - <dd class="field"><input class="txt" id="card_num" name="card_num" value="@card_num"/></dd>
148 -
149 - <dt></dt>
150 - <dd class="field">
151 - <div class="l" style="margin-right: 5%;">
152 - <span class="label">Expiration date</span>
153 - <select id="mos" name="mos">
154 - <option value="">Month</option>
155 - <option value="01">01 - January</option>
156 - <option value="02">02 - February</option>
157 - <option value="03">03 - March</option>
158 - <option value="04">04 - April</option>
159 - <option value="05">05 - May</option>
160 - <option value="06">06 - June</option>
161 - <option value="07">07 - July</option>
162 - <option value="08">08 - August</option>
163 - <option value="09">09 - September</option>
164 - <option value="10">10 - October</option>
165 - <option value="11">11 - November</option>
166 - <option value="12">12 - December</option>
167 - </select>
168 -
169 - <select id="year" name="year">
170 - <option value="">Year</option>
171 - <option value="2011">2011</option>
172 - <option value="2012">2012</option>
173 - <option value="2013">2013</option>
174 - <option value="2014">2014</option>
175 - <option value="2015">2015</option>
176 - <option value="2016">2016</option>
177 - <option value="2017">2017</option>
178 - <option value="2018">2018</option>
179 - <option value="2019">2019</option>
180 - <option value="2020">2020</option>
181 - </select>
182 - </div>
183 - <div class="l">
184 - <label class="label" for="cvv">Security code</label>
185 - <input class="txt-sm" id="cvv" name="cvv" value="@cvv"/>
186 - <a class="mute" href="#" id="where">Where?</a>
187 - </div>
188 -
189 - <div class="clear" id="codes" style="display: none;"><img alt="Security codes" src="@script_path/extensions/DonationInterface/payflowpro_gateway/forms/rapidhtml/images/security-code.png" /></div>
190 - </dd>
191 -
192 - <dt></dt>
193 - <dd class="field">
194 - <input id="submitcreditcard" class="btn" type="button" value="Submit donation" />
195 - <p class="mute"><img alt="" src="@script_path/extensions/DonationInterface/gateway_forms/includes/padlock.gif" /> Your credit card will be securely processed.</p>
196 - </dd>
197 - </dl>
198 - </div>
199 - </div>
200 -
201 - <input type="hidden" name="gateway" value="payflowpro" id="gateway" />
202 - <input type="hidden" name="returnto" value="Thank_You/en" />
203 - <input type="hidden" value="0" name="PaypalRedirect" id="PaypalRedirect">
204 - <input type="hidden" value="@card" name="card" id="card">
205 -
206 - <input type="hidden" value="@amount" name="amount" />
207 - <input type="hidden" value="US" name="country" id="country" />
208 - <input type="hidden" value="@expiration" name="expiration" id="expiration"/>
209 - <input type="hidden" value="@currency_code" name="currency_code" />
210 - <input type="hidden" value="@utm_source" name="utm_source"/>
211 - <input type="hidden" value="@utm_medium" name="utm_medium"/>
212 - <input type="hidden" value="@utm_campaign" name="utm_campaign"/>
213 - <input type="hidden" value="@language" name="language"/>
214 - <input type="hidden" value="@referrer" name="referrer"/>
215 - <input type="hidden" value="@comment" name="comment"/>
216 - <input type="hidden" value="@comment-option" name="comment-option"/>
217 - <input type="hidden" value="@email-opt" name="email-opt"/>
218 - <input type="hidden" value="processed" name="payment_method"/>
219 - <input type="hidden" value="@token" name="token"/>
220 - <input type="hidden" value="@order_id" name="order_id"/>
221 - <input type="hidden" value="@numAttempt" name="numAttempt"/>
222 - <input type="hidden" value="@contribution_tracking_id" name="contribution_tracking_id"/>
223 - <input type="hidden" value="@data_hash" name="data_hash"/>
224 - <input type="hidden" value="@owa_session" name="owa_session"/>
225 - <input type="hidden" value="@owa_ref" name="owa_ref"/>
226 - </form>
227 - <div id="where-content">
228 - <hr />
229 - <h3>Where your donation goes</h3>
230 - <p><strong>Technology:</strong> Servers, bandwidth, maintenance, development. Wikipedia is the #5 website in the world and it runs on a fraction of what other top websites spend.</p>
231 - <p><strong>People:</strong> The other top 10 website have thousands of employees. We have fewer than 100, making your donation a great investment in a highly-efficient not-for-profit organization.</p>
232 - </div>
233 - </div>
234 - </div>
235 - <p>We do not store your credit card information, and your personal data is subject to our <a target="_blank" href="https://www.mediawiki.org//wikimediafoundation.org/wiki/Donor_policy"> donor privacy policy</a>.</p>
236 - <p><a target="_blank" href="https://www.mediawiki.org//wikimediafoundation.org/wiki/Ways_to_Give/en">More information or other ways to give</a><br /><a target="_blank" href="https://www.mediawiki.org//wikimediafoundation.org/wiki/FAQ/en">Answers to frequently asked questions</a></p>
237 - </div>
238 -</div>
239 -
240 -<!-- Wikimedia Project logo
241 -<li id="footer-copyrightico"><a href="https://www.mediawiki.org//wikimediafoundation.org/"><img src="//bits.wikimedia.org/images/wikimedia-button.png" width="88" height="31" alt="Wikimedia Foundation"/></a></li>
242 - -->
Index: trunk/extensions/DonationInterface/gateway_forms/rapidhtml/RapidHtmlResources.php
——@@ -42,7 +42,6 @@
4343 'position' => 'top',
4444 );
4545
46 -
4746 /**
4847 * webitects
4948 */
——@@ -61,12 +60,6 @@
6261 'localBasePath' => dirname( __FILE__ ),
6362 'remoteExtPath' => $wgPayflowRapidHtmlRemoteExtPath,
6463 );
65 -$wgResourceModules[ 'pfp.form.rapidhtml.webitects_2_3step' ] = array(
66 - 'scripts' => 'js/webitects_2_3step.js',
67 - 'dependencies' => 'pfp.form.rapidhtml.webitects',
68 - 'localBasePath' => dirname( __FILE__ ),
69 - 'remoteExtPath' => $wgPayflowRapidHtmlRemoteExtPath,
70 -);
7164
7265 /**
7366 * globalcollect_test
Index: trunk/extensions/DonationInterface/gateway_forms/rapidhtml/js/webitects_2_3step.js
——@@ -1,236 +0,0 @@
2 -/*
3 - * The following variable are declared inline in webitects_2_3step.html:
4 - * amountErrors, billingErrors, paymentErrors, scriptPath, actionURL
5 - */
6 -$( document ).ready( function () {
7 -
8 - // check for RapidHtml errors and display, if any
9 - var amountErrorString = "",
10 - billingErrorString = "",
11 - paymentErrorString = "";
12 -
13 - // generate formatted errors to display
14 - var temp = [];
15 - for ( var e in amountErrors )
16 - if ( amountErrors[e] != "" )
17 - temp[temp.length] = amountErrors[e];
18 - amountErrorString = temp.join( "<br />" );
19 -
20 - temp = [];
21 - for ( var f in billingErrors )
22 - if ( billingErrors[f] != "" )
23 - temp[temp.length] = billingErrors[f];
24 - billingErrorString = temp.join( "<br />" );
25 -
26 - temp = [];
27 - for ( var g in paymentErrors )
28 - if ( paymentErrors[g] != "" )
29 - temp[temp.length] = paymentErrors[g];
30 - paymentErrorString = temp.join( "<br />" );
31 -
32 - // show the errors
33 - var prevError = false;
34 - if ( amountErrorString != "" ) {
35 - $( "#amtErrorMessages" ).html( amountErrorString );
36 - prevError = true;
37 - showStep2(); // init the headers
38 - showStep3();
39 - showStep1(); // should be default, but ensure
40 - }
41 - if ( billingErrorString != "" ) {
42 - $( "#billingErrorMessages" ).html( billingErrorString );
43 - if ( !prevError ) {
44 - showStep1(); // init the headers
45 - showStep3();
46 - showStep2();
47 - prevError = true;
48 - }
49 - showAmount( $( 'input[name="amount"]' ) ); // lets go ahead and assume there is something to show
50 - }
51 - if ( paymentErrorString != "" ) {
52 - $( "#paymentErrorMessages" ).html( paymentErrorString );
53 - if ( !prevError ) {
54 - showStep1(); // init the headers
55 - showStep2();
56 - showStep3();
57 - }
58 - showAmount( $( 'input[name="amount"]' ) ); // lets go ahead and assume there is something to show
59 - }
60 - // Init inline labels
61 - $( ".hint" ).ezpz_hint();
62 -
63 - $( "#cc" ).click( function() {
64 - if ( validateAmount() ) {
65 - showAmount( $( 'input[name="amount"]' ) );
66 - showStep2();
67 - }
68 - } );
69 -
70 - $( "#pp" ).click( function() {
71 - if ( validateAmount() ) {
72 - // set the action to go to PayPal
73 - $( 'input[name="gateway"]' ).val( "paypal" );
74 - $( 'input[name="PaypalRedirect"]' ).val( "1" );
75 - $( "#loading" ).html( "<img src=" + scriptPath + "'/extensions/DonationInterface/payflowpro_gateway/forms/rapidhtml/images/loading-white.gif' /> Redirecting to PayPal…" );
76 - document.paypalcontribution.action = actionURL;
77 - document.paypalcontribution.submit();
78 - }
79 - } );
80 - $( "#paymentContinueBtn" ).live( "click", function() {
81 - if ( validate_personal( document.paypalcontribution ) ) {
82 - showStep3();
83 - }
84 - } );
85 - // Set the cards to progress to step 3
86 - $( ".cardradio" ).live( "click", function() {
87 - if ( validate_personal( document.paypalcontribution ) ) {
88 - showStep3();
89 - }
90 - else {
91 - // show the continue button to indicate how to get to step 3 since they
92 - // have already clicked on a card image
93 - $( "#paymentContinue" ).show();
94 - }
95 - } );
96 -
97 - $( "#submitcreditcard" ).click( function() {
98 - // set country to US TODO: make this dynamic
99 - $( 'input[name="country"]' ).val( "US" );
100 -
101 - if ( validate_cc() ) {
102 - // set the hidden expiration date input from the two selects
103 - $( 'input[name="expiration"]' ).val(
104 - $( 'select[name="mos"]' ).val() + $( 'select[name="year"]' ).val().substring( 2, 4 )
105 - );
106 - document.paypalcontribution.action = actionURL;
107 - document.paypalcontribution.submit();
108 - }
109 - } );
110 - // init all of the header actions
111 - $( "#step1header" ).click( function() {
112 - showStep1();
113 - } );
114 - $( "#step2header" ).click( function() {
115 - showStep2();
116 - } );
117 - $( "#step3header" ).click( function() {
118 - showStep3();
119 - } );
120 - // Set selected amount to amount
121 - $( 'input[name="amountRadio"]' ).click( function() {
122 - setAmount( $( this ) );
123 - } );
124 - // reset the amount field when "other" is changed
125 - $( "#other-amount" ).change( function() {
126 - setAmount( $( this ) );
127 - } );
128 -
129 - // show the CVV help image on click
130 - $( "#where" ).click( function() {
131 - $( "#codes" ).toggle();
132 - return false;
133 - } );
134 -
135 -} );
136 -
137 -function showStep1() {
138 - // show the correct sections
139 - $( "#step1wrapper" ).slideDown();
140 - $( "#step2wrapper" ).slideUp();
141 - $( "#step3wrapper" ).slideUp();
142 - $( "#change-amount" ).hide();
143 - $( "#change-billing" ).show();
144 - $( "#change-payment" ).show();
145 - $( "#step1header" ).show(); // just in case
146 -}
147 -
148 -function showStep2() {
149 - // show the correct sections
150 - $( "#step1wrapper" ).slideUp();
151 - $( "#step2wrapper" ).slideDown();
152 - $( "#step3wrapper" ).slideUp();
153 - $( "#change-amount" ).show();
154 - $( "#change-billing" ).hide();
155 - $( "#change-payment" ).show();
156 - $( "#step2header" ).show(); // just in case
157 -}
158 -
159 -function showStep3() {
160 - // show the correct sections
161 - $( "#step1wrapper" ).slideUp();
162 - $( "#step2wrapper" ).slideUp();
163 - $( "#step3wrapper" ).slideDown();
164 - $( "#change-amount" ).show();
165 - $( "#change-billing" ).show();
166 - $( "#change-payment" ).hide();
167 - $( "#step3header" ).show(); // just in case
168 -}
169 -// Fix behavior of images in labels
170 -// TODO: check that disabling this is okay in things other than Chrome
171 -// $("label img").live("click", function() { $("#" + $(this).parents( "label" ).attr( "for" )).click(); });
172 -
173 -// set the hidden amount input to the value of the selected element
174 -function setAmount( e ) {
175 - $( 'input[name="amount"]' ).val( e.val() );
176 -}
177 -// Display selected amount
178 -function showAmount( e ) {
179 - $( "#selected-amount" ).html( "($" + e.val() + ")" );
180 - $( "#change-amount" ).show();
181 -}
182 -function validateAmount() {
183 - var minimums = {
184 - 'USD' : 1
185 - };
186 - var error = true;
187 - var amount = $( 'input[name="amount"]' ).val(); // get the amount
188 - amount = amount.replace( /[,.](\d)$/, '\:$10' );
189 - amount = amount.replace( /[,.](\d)(\d)$/, '\:$1$2' );
190 - amount = amount.replace( /[,.]/g, '' );
191 - amount = amount.replace( /:/, '.' );
192 - $( 'input[name="amount"]' ).val( amount ); // set the new amount back into the form
193 -
194 - // Check amount is a real number, sets error as true (good) if no issues
195 - error = ( amount == null || isNaN( amount ) || amount.value <= 0 );
196 -
197 - // Check amount is at least the minimum
198 - var currency_code = 'USD'; // hard-coded for these forms and tests
199 - $( 'input[name="currency_code"]' ).val( currency_code );
200 - if ( typeof( minimums[currency_code] ) == 'undefined' ) {
201 - minimums[currency_code] = 1;
202 - }
203 - if ( amount < minimums[currency_code] || error ) {
204 - alert( 'You must contribute at least $1'.replace( '$1', minimums[currency_code] + ' ' + currency_code ) );
205 - error = true;
206 - }
207 - return !error;
208 -}
209 -
210 -function validate_cc() {
211 - // reset the errors
212 - $( "#paymentErrorMessages" ).html( '' );
213 - var error = false;
214 - if ( $( 'input[name="card_num"]' ).val() == '' ) {
215 - $( "#paymentErrorMessages" ).append( "Please enter a valid credit card number" );
216 - error = true;
217 - }
218 - if ( $( 'select[name="mos"]' ).val() == '' ) {
219 - if ( $( "#paymentErrorMessages" ).html() != "" )
220 - $( "#paymentErrorMessages" ).append( "<br />" );
221 - $( "#paymentErrorMessages" ).append( "Please enter a valid month for the expiration date" );
222 - error = true;
223 - }
224 - if ( $( 'select[name="year"]' ).val() == '' ) {
225 - if ( $( "#paymentErrorMessages" ).html() != "" )
226 - $( "#paymentErrorMessages" ).append( "<br />" );
227 - $( "#paymentErrorMessages" ).append( "Please enter a valid year for the expiration date" );
228 - error = true;
229 - }
230 - if ( $( 'input[name="cvv"]' ).val() == '' ) {
231 - if ( $( "#paymentErrorMessages" ).html() != "" )
232 - $( "#paymentErrorMessages" ).append( "<br />" );
233 - $( "#paymentErrorMessages" ).append( "Please enter a valid security code" );
234 - error = true;
235 - }
236 - return !error;
237 -}
\ No newline at end of file
Index: trunk/extensions/DonationInterface/gateway_forms/includes/loading-green.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/extensions/DonationInterface/gateway_forms/includes/loading-green.gif
___________________________________________________________________
Added: svn:mime-type
2381 + application/octet-stream
Index: trunk/extensions/DonationInterface/gateway_forms/includes/loading-white.gif
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/extensions/DonationInterface/gateway_forms/includes/loading-white.gif
___________________________________________________________________
Added: svn:mime-type
2392 + application/octet-stream
Index: trunk/extensions/DonationInterface/gateway_forms/includes/security-code.png
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Property changes on: trunk/extensions/DonationInterface/gateway_forms/includes/security-code.png
___________________________________________________________________
Added: svn:mime-type
2403 + application/octet-stream
Index: trunk/extensions/DonationInterface/globalcollect_gateway/forms/html/webitects_2_3step.html
——@@ -0,0 +1,243 @@
 2+<script type="text/javascript">
 3+ mw.loader.load('pfp.form.rapidhtml.webitects');
 4+ var extensionPath = mw.config.get( 'wgServer' ) + mw.config.get( 'wgScriptPath' ) + '/extensions/DonationInterface';
 5+ mw.loader.load( extensionPath + '/globalcollect_gateway/forms/js/webitects_2_3step.js', 'text/javascript' );
 6+ // these must go through RapidHTML and thus are inline
 7+ var amountErrors = ['#general|escape','#retryMsg|escape','#amount|escape'],
 8+ billingErrors = ['#fname|escape','#lname|escape','#city|escape','#country|escape',
 9+ '#street|escape','#state|escape','#zip|escape','#emailAdd|escape'],
 10+ paymentErrors = ['#card_num|escape','#card_type|escape','#cvv|escape'],
 11+ actionURL = "@action",
 12+ scriptPath = "@script_path";
 13+
 14+</script>
 15+<!--[if lt IE 7]><style type="text/css">body{behavior:url("@script_path/skins/vector/csshover.min.htc")}</style><![endif]-->
 16+<!-- start Webitects styles -->
 17+<style type="text/css">
 18+ #errorMessages { font-size: 0.75em; color: #FF0000; }
 19+ /* Force vertical scrollbar
 20+ html { overflow-y: scroll; }
 21+ */
 22+ /* Accordion */
 23+ #accordion h3 { background: #FFFFFF; border: none; font-size: 1.1em; margin: 0; padding: 0.5em 0.9em; outline: 0; }
 24+ .accordion-content { padding: 0.9em; }
 25+ #step2accordion { display:none; }
 26+
 27+ /* Callouts */
 28+ .call-l, .call-r { width: 270px; }
 29+
 30+ /* Layout */
 31+ #appeal { float: left; width: 100%; }
 32+ #appeal-content { padding-right: 380px; }
 33+ .clear { clear: both; }
 34+ #donate { float: left; margin-left: -350px; width: 350px; }
 35+ #donate-content { background-color: #FFFFFF; border: 1px solid #000000; padding: 1em 0;
 36+ font-size: 0.95em;
 37+ /* Maybe */ width: 348px;
 38+ }
 39+ #amount-table-white label { font-size: 1.1em; }
 40+
 41+ #donate-body { width: 348px; }
 42+ #donate-body h3 { font-size: 17px; }
 43+
 44+ #step1wrapper, #step2wrapper, #step3wrapper { width: 325px; }
 45+ /* Initially hide steps 2 and 3 */
 46+ #step2wrapper, #step2header, #step3wrapper, #step3header { display: none; }
 47+ #where-content { font-size: 13px; line-height: 19px; width: 325px; }
 48+
 49+ #amtErrorMessages, #billingErrorMessages, #paymentErrorMessages { color: #F00; }
 50+
 51+</style>
 52+<!--[if lt IE 7]><style>
 53+/* style for IE6 + IE5.5 + IE5.0 */
 54+.gainlayout { height: 0; }
 55+</style><![endif]-->
 56+
 57+<!--[if IE 7]><style>
 58+.gainlayout { zoom: 1; height: 1%; }
 59+</style><![endif]-->
 60+
 61+<div class="ltr">
 62+ <div id="appeal">
 63+ <div id="appeal-content">
 64+ <h2 id="appeal-head"> <span class="mw-headline" id="From_Wikipedia_programmer_Brandon_Harris">From Wikipedia programmer Brandon Harris</span></h2>
 65+ <div id="appeal-body" class="plainlinks">
 66+ <p>I feel like I'm living the first line of my obituary.</p>
 67+ <p>I don't think there will be anything else that I do in my life as important as what I do now for Wikipedia. We're not just building an encyclopedia, we're working to make people free. When we have access to free knowledge, we are better people. We understand the world is bigger than us, and we become infected with tolerance and understanding.</p>
 68+ <p>Wikipedia is the 5th largest website in the world. I work at the small non-profit that keeps it on the web. We don't run ads because doing so would sacrifice our independence. The site is not and should never be a propaganda tool.</p>
 69+ <p>Our work is possible because of donations from our readers. Will you help protect Wikipedia by donating $5, $10, $20 or whatever you can afford?</p>
 70+ <p>I work at the Wikimedia Foundation because everything in my soul tells me it's the right thing to do. I've worked at huge tech companies, doing some job to build some crappy thing that's designed to steal money from some kid who doesn't know it. I would come home from work crushed.</p>
 71+ <p>You might not know this, but the Wikimedia Foundation operates with a very small staff. Most other top-ten sites have tens of thousands of people and massive budgets. But they produce a fraction of what we pull off with sticks and wire.</p>
 72+ <p>When you give to Wikipedia, you're supporting free knowledge around the world. You're not only leaving a legacy for your children and for their children, you're elevating people around the world who have access to this treasure. You're assuring that one day everyone else will too.</p>
 73+ <p>Thank you,</p>
 74+ <p><strong>Brandon Harris</strong><br /></p>
 75+ <p>Programmer, Wikimedia Foundation</p>
 76+ </div>
 77+ </div>
 78+ </div>
 79+
 80+ <div id="donate">
 81+ <div id="donate-content">
 82+ <div id="donate-body" style="padding: 0 1em;">
 83+ <div id="step1header"><h3>Donation amount <span id="selected-amount"></span> <span class="mute" id="change-amount" style="display: none;">(<a href="#">Change</a>)</span></h3></div>
 84+
 85+ <form method="post" name="paypalcontribution">
 86+ <div id="step1wrapper">
 87+ <div id="amtErrorMessages" class="small"></div>
 88+ <table id="amount-table-white">
 89+ <tr>
 90+ <td><label><input type="radio" name="amountRadio" value="5" /> $5</label></td>
 91+ <td><label><input type="radio" name="amountRadio" value="10" /> $10</label></td>
 92+ <td><label><input type="radio" name="amountRadio" value="20" /> $20</label></td>
 93+ <td><label><input type="radio" name="amountRadio" value="35" /> $35</label></td>
 94+ </tr>
 95+ <tr>
 96+ <td><label><input type="radio" name="amountRadio" value="50" /> $50</label></td>
 97+ <td><label><input type="radio" name="amountRadio" value="100" /> $100</label></td>
 98+ <td><label><input type="radio" name="amountRadio" value="250" /> $250</label></td>
 99+ <td><input type="radio" name="amountRadio" id="input_amount_other" value="other" /> <label>$<input type="text" class="txt-sm hint" name="amountGiven" size="4" id="other-amount" title="Other..." onfocus="this.form.input_amount_other.checked=true;"/></label></td>
 100+ </tr>
 101+ </table>
 102+
 103+ <p class="donate-options">
 104+ <input class="btn" id="cc" type="button" value="Donate by Credit Card" /><br />
 105+ <input class="btn" id="pp" type="button" value="Donate via PayPal"/><span id='loading'></span>
 106+ </p>
 107+ </div>
 108+ <div id="step2header"><h3>Billing Address <span class="mute" id="change-billing" style="display: none;">(<a href="#">Change</a>)</span></h3></div>
 109+ <div id="step2wrapper">
 110+ <div id="billing-content" class="gainlayout">
 111+ <div id="billingErrorMessages" class="small"></div>
 112+ <div class="name-fields">
 113+ <span class="name-first"><input class="txt hint" id="fname" name="fname" title="First name" value="@fname" /></span>
 114+ <span class="name-last"><input class="txt hint" id="lname" name="lname" title="Last name" value="@lname" /></span>
 115+ </div>
 116+ <div class="loc-fields">
 117+ <span class="loc-street"><input class="txt hint" id="street" name="street" title="Street address" value="@street" /></span>
 118+ <span class="loc-city"><input class="txt hint" id="city" name="city" title="City" value="@city" /></span>
 119+ <span class="loc-state">
 120+ <select id="state" name="state" class="txt" value="@state" >
 121+ <option value=""></option>
 122+ <option value="AK">AK</option><option value="AL">AL</option><option value="AR">AR</option><option value="AZ">AZ</option><option value="CA">CA</option><option value="CO">CO</option><option value="CT">CT</option><option value="DC">DC</option><option value="DE">DE</option><option value="FL">FL</option><option value="GA">GA</option><option value="HI">HI</option><option value="IA">IA</option><option value="ID">ID</option><option value="IL">IL</option><option value="IN">IN</option><option value="KS">KS</option><option value="KY">KY</option><option value="LA">LA</option><option value="MA">MA</option><option value="MD">MD</option><option value="ME">ME</option><option value="MI">MI</option><option value="MN">MN</option><option value="MO">MO</option><option value="MS">MS</option><option value="MT">MT</option><option value="NC">NC</option><option value="ND">ND</option><option value="NE">NE</option><option value="NH">NH</option><option value="NJ">NJ</option><option value="NM">NM</option><option value="NV">NV</option><option value="NY">NY</option><option value="OH">OH</option><option value="OK">OK</option><option value="OR">OR</option><option value="PA">PA</option><option value="PR">PR</option><option value="RI">RI</option><option value="SC">SC</option><option value="SD">SD</option><option value="TN">TN</option><option value="TX">TX</option><option value="UT">UT</option><option value="VA">VA</option><option value="VT">VT</option><option value="WA">WA</option><option value="WI">WI</option><option value="WV">WV</option><option value="WY">WY</option><option value="AA">AA</option><option value="AE">AE</option><option value="AP">AP</option>
 123+ </select>
 124+ </span>
 125+ <span class="loc-postal"><input class="txt hint" id="zip" name="zip" title="Zip" value="@zip"/></span>
 126+ </div>
 127+ <p><input class="txt hint" title="Email address" id="emailAdd" name="emailAdd" value="@emailAdd"/></p>
 128+
 129+ <dl class="">
 130+ <dt><span class="label">Select credit card</span></dt>
 131+ <dd class="field" style="margin-bottom: 0;">
 132+ <ul class="options-h" id="cards" style="margin: 0;">
 133+ <li><input id="cc-visa" name="cardtype" type="radio" value="Visa" class="cardradio" /> <label for="cc-visa"><img alt="Visa" src="@script_path/extensions/DonationInterface/gateway_forms/includes/card-visa.png" /></label></li>
 134+ <li><input id="cc-mastercard" name="cardtype" type="radio" value="MasterCard" class="cardradio" /> <label for="cc-mastercard"><img alt="MasterCard" src="@script_path/extensions/DonationInterface/gateway_forms/includes/card-mastercard.png" /></label></li>
 135+ <li><input id="cc-amex" name="cardtype" type="radio" value="American Express" class="cardradio" /> <label for="cc-amex"><img alt="American Express" src="@script_path/extensions/DonationInterface/gateway_forms/includes/card-amex.png" /></label></li>
 136+ <li><input id="cc-discover" name="cardtype" type="radio" value="Discover" class="cardradio" /> <label for="cc-discover"><img alt="Discover" src="@script_path/extensions/DonationInterface/gateway_forms/includes/card-discover.png" /></label></li>
 137+ </ul>
 138+ <div id="paymentContinue" style="margin-top: 10px; display: none;"> <input class="btn" id="paymentContinueBtn" type="button" value="Continue" /></div>
 139+ </dd>
 140+ </dl>
 141+ </div>
 142+ </div>
 143+ <div id="step3header"><h3>Payment Information <span class="mute" id="change-payment" style="display: none;">(<a href="#">Change</a>)</span></h3></div>
 144+ <div id="step3wrapper" style="display: none;">
 145+ <div id="payment" class="gainlayout">
 146+ <div id="paymentErrorMessages" class="small"></div>
 147+ <dl class="form">
 148+ <dt><span class="label"><label for="card_num">Card number</label></span></dt>
 149+ <dd class="field"><input class="txt" id="card_num" name="card_num" value="@card_num"/></dd>
 150+
 151+ <dt></dt>
 152+ <dd class="field">
 153+ <div class="l" style="margin-right: 5%;">
 154+ <span class="label">Expiration date</span>
 155+ <select id="mos" name="mos">
 156+ <option value="">Month</option>
 157+ <option value="01">01 - January</option>
 158+ <option value="02">02 - February</option>
 159+ <option value="03">03 - March</option>
 160+ <option value="04">04 - April</option>
 161+ <option value="05">05 - May</option>
 162+ <option value="06">06 - June</option>
 163+ <option value="07">07 - July</option>
 164+ <option value="08">08 - August</option>
 165+ <option value="09">09 - September</option>
 166+ <option value="10">10 - October</option>
 167+ <option value="11">11 - November</option>
 168+ <option value="12">12 - December</option>
 169+ </select>
 170+
 171+ <select id="year" name="year">
 172+ <option value="">Year</option>
 173+ <option value="2011">2011</option>
 174+ <option value="2012">2012</option>
 175+ <option value="2013">2013</option>
 176+ <option value="2014">2014</option>
 177+ <option value="2015">2015</option>
 178+ <option value="2016">2016</option>
 179+ <option value="2017">2017</option>
 180+ <option value="2018">2018</option>
 181+ <option value="2019">2019</option>
 182+ <option value="2020">2020</option>
 183+ </select>
 184+ </div>
 185+ <div class="l">
 186+ <label class="label" for="cvv">Security code</label>
 187+ <input class="txt-sm" id="cvv" name="cvv" value="@cvv"/>
 188+ <a class="mute" href="#" id="where">Where?</a>
 189+ </div>
 190+
 191+ <div class="clear" id="codes" style="display: none;"><img alt="Security codes" src="@script_path/extensions/DonationInterface/gateway_forms/includes/security-code.png" /></div>
 192+ </dd>
 193+
 194+ <dt></dt>
 195+ <dd class="field">
 196+ <input id="submitcreditcard" class="btn" type="button" value="Submit donation" />
 197+ <p class="mute"><img alt="" src="@script_path/extensions/DonationInterface/gateway_forms/includes/padlock.gif" /> Your credit card will be securely processed.</p>
 198+ </dd>
 199+ </dl>
 200+ </div>
 201+ </div>
 202+
 203+ <input type="hidden" name="gateway" value="payflowpro" id="gateway" />
 204+ <input type="hidden" name="returnto" value="Thank_You/en" />
 205+ <input type="hidden" value="0" name="PaypalRedirect" id="PaypalRedirect">
 206+ <input type="hidden" value="@card" name="card" id="card">
 207+
 208+ <input type="hidden" value="@amount" name="amount" />
 209+ <input type="hidden" value="US" name="country" id="country" />
 210+ <input type="hidden" value="@expiration" name="expiration" id="expiration"/>
 211+ <input type="hidden" value="@currency_code" name="currency_code" />
 212+ <input type="hidden" value="@utm_source" name="utm_source"/>
 213+ <input type="hidden" value="@utm_medium" name="utm_medium"/>
 214+ <input type="hidden" value="@utm_campaign" name="utm_campaign"/>
 215+ <input type="hidden" value="@language" name="language"/>
 216+ <input type="hidden" value="@referrer" name="referrer"/>
 217+ <input type="hidden" value="@comment" name="comment"/>
 218+ <input type="hidden" value="@comment-option" name="comment-option"/>
 219+ <input type="hidden" value="@email-opt" name="email-opt"/>
 220+ <input type="hidden" value="processed" name="payment_method"/>
 221+ <input type="hidden" value="@token" name="token"/>
 222+ <input type="hidden" value="@order_id" name="order_id"/>
 223+ <input type="hidden" value="@numAttempt" name="numAttempt"/>
 224+ <input type="hidden" value="@contribution_tracking_id" name="contribution_tracking_id"/>
 225+ <input type="hidden" value="@data_hash" name="data_hash"/>
 226+ <input type="hidden" value="@owa_session" name="owa_session"/>
 227+ <input type="hidden" value="@owa_ref" name="owa_ref"/>
 228+ </form>
 229+ <div id="where-content">
 230+ <hr />
 231+ <h3>Where your donation goes</h3>
 232+ <p><strong>Technology:</strong> Servers, bandwidth, maintenance, development. Wikipedia is the #5 website in the world and it runs on a fraction of what other top websites spend.</p>
 233+ <p><strong>People:</strong> The other top 10 website have thousands of employees. We have fewer than 100, making your donation a great investment in a highly-efficient not-for-profit organization.</p>
 234+ </div>
 235+ </div>
 236+ </div>
 237+ <p>We do not store your credit card information, and your personal data is subject to our <a target="_blank" href="https://www.mediawiki.org//wikimediafoundation.org/wiki/Donor_policy"> donor privacy policy</a>.</p>
 238+ <p><a target="_blank" href="https://www.mediawiki.org//wikimediafoundation.org/wiki/Ways_to_Give/en">More information or other ways to give</a><br /><a target="_blank" href="https://www.mediawiki.org//wikimediafoundation.org/wiki/FAQ/en">Answers to frequently asked questions</a></p>
 239+ </div>
 240+</div>
 241+
 242+<!-- Wikimedia Project logo
 243+<li id="footer-copyrightico"><a href="https://www.mediawiki.org//wikimediafoundation.org/"><img src="//bits.wikimedia.org/images/wikimedia-button.png" width="88" height="31" alt="Wikimedia Foundation"/></a></li>
 244+ -->
Index: trunk/extensions/DonationInterface/globalcollect_gateway/forms/js/webitects_2_3step.js
——@@ -0,0 +1,236 @@
 2+/*
 3+ * The following variable are declared inline in webitects_2_3step.html:
 4+ * amountErrors, billingErrors, paymentErrors, scriptPath, actionURL
 5+ */
 6+$( document ).ready( function () {
 7+
 8+ // check for RapidHtml errors and display, if any
 9+ var amountErrorString = "",
 10+ billingErrorString = "",
 11+ paymentErrorString = "";
 12+
 13+ // generate formatted errors to display
 14+ var temp = [];
 15+ for ( var e in amountErrors )
 16+ if ( amountErrors[e] != "" )
 17+ temp[temp.length] = amountErrors[e];
 18+ amountErrorString = temp.join( "<br />" );
 19+
 20+ temp = [];
 21+ for ( var f in billingErrors )
 22+ if ( billingErrors[f] != "" )
 23+ temp[temp.length] = billingErrors[f];
 24+ billingErrorString = temp.join( "<br />" );
 25+
 26+ temp = [];
 27+ for ( var g in paymentErrors )
 28+ if ( paymentErrors[g] != "" )
 29+ temp[temp.length] = paymentErrors[g];
 30+ paymentErrorString = temp.join( "<br />" );
 31+
 32+ // show the errors
 33+ var prevError = false;
 34+ if ( amountErrorString != "" ) {
 35+ $( "#amtErrorMessages" ).html( amountErrorString );
 36+ prevError = true;
 37+ showStep2(); // init the headers
 38+ showStep3();
 39+ showStep1(); // should be default, but ensure
 40+ }
 41+ if ( billingErrorString != "" ) {
 42+ $( "#billingErrorMessages" ).html( billingErrorString );
 43+ if ( !prevError ) {
 44+ showStep1(); // init the headers
 45+ showStep3();
 46+ showStep2();
 47+ prevError = true;
 48+ }
 49+ showAmount( $( 'input[name="amount"]' ) ); // lets go ahead and assume there is something to show
 50+ }
 51+ if ( paymentErrorString != "" ) {
 52+ $( "#paymentErrorMessages" ).html( paymentErrorString );
 53+ if ( !prevError ) {
 54+ showStep1(); // init the headers
 55+ showStep2();
 56+ showStep3();
 57+ }
 58+ showAmount( $( 'input[name="amount"]' ) ); // lets go ahead and assume there is something to show
 59+ }
 60+ // Init inline labels
 61+ $( ".hint" ).ezpz_hint();
 62+
 63+ $( "#cc" ).click( function() {
 64+ if ( validateAmount() ) {
 65+ showAmount( $( 'input[name="amount"]' ) );
 66+ showStep2();
 67+ }
 68+ } );
 69+
 70+ $( "#pp" ).click( function() {
 71+ if ( validateAmount() ) {
 72+ // set the action to go to PayPal
 73+ $( 'input[name="gateway"]' ).val( "paypal" );
 74+ $( 'input[name="PaypalRedirect"]' ).val( "1" );
 75+ $( "#loading" ).html( "<img src=" + scriptPath + "'/extensions/DonationInterface/payflowpro_gateway/forms/rapidhtml/images/loading-white.gif' /> Redirecting to PayPal…" );
 76+ document.paypalcontribution.action = actionURL;
 77+ document.paypalcontribution.submit();
 78+ }
 79+ } );
 80+ $( "#paymentContinueBtn" ).live( "click", function() {
 81+ if ( validate_personal( document.paypalcontribution ) ) {
 82+ showStep3();
 83+ }
 84+ } );
 85+ // Set the cards to progress to step 3
 86+ $( ".cardradio" ).live( "click", function() {
 87+ if ( validate_personal( document.paypalcontribution ) ) {
 88+ showStep3();
 89+ }
 90+ else {
 91+ // show the continue button to indicate how to get to step 3 since they
 92+ // have already clicked on a card image
 93+ $( "#paymentContinue" ).show();
 94+ }
 95+ } );
 96+
 97+ $( "#submitcreditcard" ).click( function() {
 98+ // set country to US TODO: make this dynamic
 99+ $( 'input[name="country"]' ).val( "US" );
 100+
 101+ if ( validate_cc() ) {
 102+ // set the hidden expiration date input from the two selects
 103+ $( 'input[name="expiration"]' ).val(
 104+ $( 'select[name="mos"]' ).val() + $( 'select[name="year"]' ).val().substring( 2, 4 )
 105+ );
 106+ document.paypalcontribution.action = actionURL;
 107+ document.paypalcontribution.submit();
 108+ }
 109+ } );
 110+ // init all of the header actions
 111+ $( "#step1header" ).click( function() {
 112+ showStep1();
 113+ } );
 114+ $( "#step2header" ).click( function() {
 115+ showStep2();
 116+ } );
 117+ $( "#step3header" ).click( function() {
 118+ showStep3();
 119+ } );
 120+ // Set selected amount to amount
 121+ $( 'input[name="amountRadio"]' ).click( function() {
 122+ setAmount( $( this ) );
 123+ } );
 124+ // reset the amount field when "other" is changed
 125+ $( "#other-amount" ).change( function() {
 126+ setAmount( $( this ) );
 127+ } );
 128+
 129+ // show the CVV help image on click
 130+ $( "#where" ).click( function() {
 131+ $( "#codes" ).toggle();
 132+ return false;
 133+ } );
 134+
 135+} );
 136+
 137+function showStep1() {
 138+ // show the correct sections
 139+ $( "#step1wrapper" ).slideDown();
 140+ $( "#step2wrapper" ).slideUp();
 141+ $( "#step3wrapper" ).slideUp();
 142+ $( "#change-amount" ).hide();
 143+ $( "#change-billing" ).show();
 144+ $( "#change-payment" ).show();
 145+ $( "#step1header" ).show(); // just in case
 146+}
 147+
 148+function showStep2() {
 149+ // show the correct sections
 150+ $( "#step1wrapper" ).slideUp();
 151+ $( "#step2wrapper" ).slideDown();
 152+ $( "#step3wrapper" ).slideUp();
 153+ $( "#change-amount" ).show();
 154+ $( "#change-billing" ).hide();
 155+ $( "#change-payment" ).show();
 156+ $( "#step2header" ).show(); // just in case
 157+}
 158+
 159+function showStep3() {
 160+ // show the correct sections
 161+ $( "#step1wrapper" ).slideUp();
 162+ $( "#step2wrapper" ).slideUp();
 163+ $( "#step3wrapper" ).slideDown();
 164+ $( "#change-amount" ).show();
 165+ $( "#change-billing" ).show();
 166+ $( "#change-payment" ).hide();
 167+ $( "#step3header" ).show(); // just in case
 168+}
 169+// Fix behavior of images in labels
 170+// TODO: check that disabling this is okay in things other than Chrome
 171+// $("label img").live("click", function() { $("#" + $(this).parents( "label" ).attr( "for" )).click(); });
 172+
 173+// set the hidden amount input to the value of the selected element
 174+function setAmount( e ) {
 175+ $( 'input[name="amount"]' ).val( e.val() );
 176+}
 177+// Display selected amount
 178+function showAmount( e ) {
 179+ $( "#selected-amount" ).html( "($" + e.val() + ")" );
 180+ $( "#change-amount" ).show();
 181+}
 182+function validateAmount() {
 183+ var minimums = {
 184+ 'USD' : 1
 185+ };
 186+ var error = true;
 187+ var amount = $( 'input[name="amount"]' ).val(); // get the amount
 188+ amount = amount.replace( /[,.](\d)$/, '\:$10' );
 189+ amount = amount.replace( /[,.](\d)(\d)$/, '\:$1$2' );
 190+ amount = amount.replace( /[,.]/g, '' );
 191+ amount = amount.replace( /:/, '.' );
 192+ $( 'input[name="amount"]' ).val( amount ); // set the new amount back into the form
 193+
 194+ // Check amount is a real number, sets error as true (good) if no issues
 195+ error = ( amount == null || isNaN( amount ) || amount.value <= 0 );
 196+
 197+ // Check amount is at least the minimum
 198+ var currency_code = 'USD'; // hard-coded for these forms and tests
 199+ $( 'input[name="currency_code"]' ).val( currency_code );
 200+ if ( typeof( minimums[currency_code] ) == 'undefined' ) {
 201+ minimums[currency_code] = 1;
 202+ }
 203+ if ( amount < minimums[currency_code] || error ) {
 204+ alert( 'You must contribute at least $1'.replace( '$1', minimums[currency_code] + ' ' + currency_code ) );
 205+ error = true;
 206+ }
 207+ return !error;
 208+}
 209+
 210+function validate_cc() {
 211+ // reset the errors
 212+ $( "#paymentErrorMessages" ).html( '' );
 213+ var error = false;
 214+ if ( $( 'input[name="card_num"]' ).val() == '' ) {
 215+ $( "#paymentErrorMessages" ).append( "Please enter a valid credit card number" );
 216+ error = true;
 217+ }
 218+ if ( $( 'select[name="mos"]' ).val() == '' ) {
 219+ if ( $( "#paymentErrorMessages" ).html() != "" )
 220+ $( "#paymentErrorMessages" ).append( "<br />" );
 221+ $( "#paymentErrorMessages" ).append( "Please enter a valid month for the expiration date" );
 222+ error = true;
 223+ }
 224+ if ( $( 'select[name="year"]' ).val() == '' ) {
 225+ if ( $( "#paymentErrorMessages" ).html() != "" )
 226+ $( "#paymentErrorMessages" ).append( "<br />" );
 227+ $( "#paymentErrorMessages" ).append( "Please enter a valid year for the expiration date" );
 228+ error = true;
 229+ }
 230+ if ( $( 'input[name="cvv"]' ).val() == '' ) {
 231+ if ( $( "#paymentErrorMessages" ).html() != "" )
 232+ $( "#paymentErrorMessages" ).append( "<br />" );
 233+ $( "#paymentErrorMessages" ).append( "Please enter a valid security code" );
 234+ error = true;
 235+ }
 236+ return !error;
 237+}
\ No newline at end of file

Follow-up revisions

RevisionCommit summaryAuthorDate
r100929Followup r100376; setting correct mime-type for imagesawjrichards01:28, 27 October 2011

Status & tagging log