r97202 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:r97201‎ | r97202 | r97203 >
Date:20:50, 15 September 2011
Author:pgehres
Status:ok
Tags:
Comment:
Tweaks to 1 and 1a, adding webitects_2
Modified paths:
  • /trunk/extensions/DonationInterface/payflowpro_gateway/forms/rapidhtml/html/webitects_1.html (modified) (history)
  • /trunk/extensions/DonationInterface/payflowpro_gateway/forms/rapidhtml/html/webitects_1a.html (modified) (history)
  • /trunk/extensions/DonationInterface/payflowpro_gateway/forms/rapidhtml/html/webitects_2.html (added) (history)

Diff [purge]

Index: trunk/extensions/DonationInterface/payflowpro_gateway/forms/rapidhtml/html/webitects_1.html
@@ -109,7 +109,7 @@
110110
111111 <div id="payment">
112112 <dl class="form">
113 - <dt><span class="label"><label for="cardnumber">Card number</label></span></dt>
 113+ <dt><span class="label"><label for="card_num">Card number</label></span></dt>
114114 <dd class="field"><input class="txt" id="card_num" name="card_num" value="@card_num"/></dd>
115115
116116 <dt></dt>
@@ -244,7 +244,7 @@
245245 // set the action to go to PayPal
246246 $("input[name=gateway]").val("paypal");
247247 document.paypalcontribution.action = "https://wikimediafoundation.org/wiki/Special:ContributionTracking/en";
248 - $("#loading").html("<img src='../images/loading.gif' /> Redirecting to PayPal...")
 248+ $("#loading").html("<img src='../images/loading.gif' /> Redirecting to PayPal…");
249249 document.paypalcontribution.submit();
250250 }
251251 });
@@ -255,11 +255,11 @@
256256 if ( validate_form(document.paypalcontribution) ){
257257 // set expiration date
258258 $("input[name=expiration]").val(
259 - $("select[name=mos]").val() + $("select[name=year]").val().substring(2,4)
 259+ $("select[name=mos]").val() + $("select[name=year]").val().substring(2,4);
260260 )
261261
262262 document.paypalcontribution.action = "@action";
263 - document.paypalcontribution.submit()
 263+ document.paypalcontribution.submit();
264264 }
265265 })
266266
Index: trunk/extensions/DonationInterface/payflowpro_gateway/forms/rapidhtml/html/webitects_1a.html
@@ -104,7 +104,7 @@
105105
106106 <div id="payment">
107107 <dl class="form">
108 - <dt><span class="label"><label for="cardnumber">Card number</label></span></dt>
 108+ <dt><span class="label"><label for="card_num">Card number</label></span></dt>
109109 <dd class="field"><input class="txt" id="card_num" name="card_num" value="@card_num"/></dd>
110110
111111 <dt></dt>
Index: trunk/extensions/DonationInterface/payflowpro_gateway/forms/rapidhtml/html/webitects_2.html
@@ -0,0 +1,352 @@
 2+<!-- load styles from original first steps -->
 3+<link rel="stylesheet" href="@script_path/extensions/DonationInterface/payflowpro_gateway/forms/rapidhtml/css/lp1.css" />
 4+<!--[if lt IE 7]><style type="text/css">body{behavior:url("/w/skins-1.17/vector/csshover.min.htc")}</style><![endif]-->
 5+<!-- start Webitects styles -->
 6+<link rel="stylesheet" href="@script_path/extensions/DonationInterface/payflowpro_gateway/forms/rapidhtml/css/Webitects.css" />
 7+<style type="text/css">
 8+ #errorMessages { font-size: 0.75em; color: #FF0000; }
 9+ /* Force vertical scrollbar
 10+ html { overflow-y: scroll; }
 11+ */
 12+ /* Accordion */
 13+ #accordion h3 { background: #FFFFFF; border: none; font-size: 1.1em; margin: 0; padding: 0.5em 0.9em; outline: 0; }
 14+ .accordion-content { padding: 0.9em; }
 15+ #step2accordion { display:none; }
 16+
 17+ /* Callouts */
 18+ .call-l, .call-r { width: 270px; }
 19+
 20+ /* Layout */
 21+ #appeal { float: left; width: 100%; }
 22+ #appeal-content { padding-right: 380px; }
 23+ .clear { clear: both; }
 24+ #donate { float: left; margin-left: -350px; width: 350px; }
 25+ #donate-content { background-color: #FFFFFF; border: 1px solid #000000; padding: 1em 0;
 26+ font-size: 0.95em;
 27+ }
 28+ #amount-table-white label { font-size: 1.1em; }
 29+
 30+ #donate-body h3 { font-size: 17px; }
 31+
 32+ #where-content { font-size: 13px; line-height: 19px; }
 33+
 34+</style>
 35+
 36+<div class="ltr">
 37+ <div id="appeal">
 38+ <div id="appeal-content">
 39+ <h2 id="appeal-head"> <span class="mw-headline" id="From_Wikipedia_programmer_Brandon_Harris">From Wikipedia programmer Brandon Harris</span></h2>
 40+ <div id="appeal-body" class="plainlinks">
 41+ <p>I feel like I'm living the first line of my obituary.</p>
 42+ <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>
 43+ <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>
 44+ <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>
 45+ <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>
 46+ <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>
 47+ <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>
 48+ <p>Thank you,</p>
 49+ <p><strong>Brandon Harris</strong><br /></p>
 50+ <p>Programmer, Wikimedia Foundation</p>
 51+ </div>
 52+ </div>
 53+ </div>
 54+
 55+ <div id="donate">
 56+ <div id="donate-content">
 57+ <div id="donate-body" style="padding: 0 1em;">
 58+ <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>
 59+
 60+ <form method="post" name="paypalcontribution">
 61+ <div id="amountamount" class="hideamountclass">
 62+ <table id="amount-table-white">
 63+ <tr>
 64+ <td><label><input type="radio" name="amountRadio" value="5" /> $5</label></td>
 65+ <td><label><input type="radio" name="amountRadio" value="10" /> $10</label></td>
 66+ <td><label><input type="radio" name="amountRadio" value="20" /> $20</label></td>
 67+ <td><label><input type="radio" name="amountRadio" value="35" /> $35</label></td>
 68+ </tr>
 69+ <tr>
 70+ <td><label><input type="radio" name="amountRadio" value="50" /> $50</label></td>
 71+ <td><label><input type="radio" name="amountRadio" value="100" /> $100</label></td>
 72+ <td><label><input type="radio" name="amountRadio" value="250" /> $250</label></td>
 73+ <td><label><input type="radio" name="amountRadio" id="input_amount_other" value="other" /> $<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>
 74+ </tr>
 75+ </table>
 76+
 77+ <p class="donate-options">
 78+ <input class="btn" id="cc" type="button" value="Donate by Credit Card" />
 79+ <input class="btn" id="pp" type="button" value="Donate via PayPal"/><span id='loading'></span>
 80+ </p>
 81+ </div>
 82+
 83+ <div id="step2wrapper" style="display: none;">
 84+ <div id="billing-content">
 85+ <h3>Billing and payment</h3>
 86+ <div id="errorMessages"></div>
 87+ <div class="name-fields">
 88+ <span class="name-first"><input class="txt hint" id="fname" name="fname" title="First name" value="@fname" /></span>
 89+ <span class="name-last"><input class="txt hint" id="lname" name="lname" title="Last name" value="@lname" /></span>
 90+ </div>
 91+ <div class="loc-fields">
 92+ <span class="loc-street"><input class="txt hint" id="street" name="street" title="Street address" value="@street" /></span>
 93+ <span class="loc-city"><input class="txt hint" id="city" name="city" title="City" value="@city" /></span>
 94+ <span class="loc-state">
 95+ <select id="state" name="state" class="txt" value="@state" >
 96+ <option value=""></option>
 97+ <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>
 98+ </select>
 99+ </span>
 100+ <span class="loc-postal"><input class="txt hint" id="zip" name="zip" title="Zip" value="@zip"/></span>
 101+ </div>
 102+ <p><input class="txt hint" title="Email address" id="emailAdd" name="emailAdd" value="@emailAdd"/></p>
 103+
 104+ <dl class="">
 105+ <dt><span class="label">Select credit card</span></dt>
 106+ <dd class="field" style="margin-bottom: 0;">
 107+ <ul class="options-h" id="cards" style="margin: 0;">
 108+ <li><input id="cc-visa" name="cardtype" type="radio" value="Visa" /> <label for="cc-visa"><img alt="Visa" src="@script_path/extensions/DonationInterface/payflowpro_gateway/includes/card-visa.png" /></label></li>
 109+ <li><input id="cc-mastercard" name="cardtype" type="radio" value="MasterCard" /> <label for="cc-mastercard"><img alt="MasterCard" src="@script_path/extensions/DonationInterface/payflowpro_gateway/includes/card-mastercard.png" /></label></li>
 110+ <li><input id="cc-amex" name="cardtype" type="radio" value="American Express" /> <label for="cc-amex"><img alt="American Express" src="@script_path/extensions/DonationInterface/payflowpro_gateway/includes/card-amex.png" /></label></li>
 111+ <li><input id="cc-discover" name="cardtype" type="radio" value="Discover" /> <label for="cc-discover"><img alt="Discover" src="@script_path/extensions/DonationInterface/payflowpro_gateway/includes/card-discover.png" /></label></li>
 112+ </ul>
 113+ </dd>
 114+ </dl>
 115+ </div>
 116+
 117+ <div id="payment">
 118+ <dl class="form">
 119+ <dt><span class="label"><label for="card_num">Card number</label></span></dt>
 120+ <dd class="field"><input class="txt" id="card_num" name="card_num" value="@card_num"/></dd>
 121+
 122+ <dt></dt>
 123+ <dd class="field">
 124+ <div class="l" style="margin-right: 5%;">
 125+ <span class="label">Expiration date</span>
 126+ <select id="mos" name="mos">
 127+ <option value="">Month</option>
 128+ <option value="01">01 - January</option>
 129+ <option value="02">02 - February</option>
 130+ <option value="03">03 - March</option>
 131+ <option value="04">04 - April</option>
 132+ <option value="05">05 - May</option>
 133+ <option value="06">06 - June</option>
 134+ <option value="07">07 - July</option>
 135+ <option value="08">08 - August</option>
 136+ <option value="09">09 - September</option>
 137+ <option value="10">10 - October</option>
 138+ <option value="11">11 - November</option>
 139+ <option value="12">12 - December</option>
 140+ </select>
 141+
 142+ <select id="year" name="year">
 143+ <option value="">Year</option>
 144+ <option value="2011">2011</option>
 145+ <option value="2012">2012</option>
 146+ <option value="2013">2013</option>
 147+ <option value="2014">2014</option>
 148+ <option value="2015">2015</option>
 149+ <option value="2016">2016</option>
 150+ <option value="2017">2017</option>
 151+ <option value="2018">2018</option>
 152+ <option value="2019">2019</option>
 153+ <option value="2020">2020</option>
 154+ </select>
 155+ </div>
 156+ <div class="l">
 157+ <label class="label" for="cvv">Security code</label>
 158+ <input class="txt-sm" id="cvv" name="cvv" value="@cvv"/>
 159+ <a class="mute" href="#" id="where">Where?</a>
 160+ </div>
 161+
 162+ <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>
 163+ </dd>
 164+
 165+ <dt></dt>
 166+ <dd class="field">
 167+ <input id="submitcreditcard" class="btn" type="button" value="Submit donation" />
 168+ <p class="mute"><img alt="" src="@script_path/extensions/DonationInterface/payflowpro_gateway/includes/padlock.gif" /> Your credit card will be securely processed.</p>
 169+ </dd>
 170+ </dl>
 171+ <input type="hidden" name="gateway" value="payflowpro" id="gateway" />
 172+ <input type="hidden" name="returnto" value="Thank_You/en" />
 173+
 174+ <input type="hidden" value="@amount" name="amount" />
 175+ <input type="hidden" value="US" name="country" id="country" />
 176+ <input type="hidden" value="@expiration" name="expiration" />
 177+ <input type="hidden" value="@currency_code" name="currency" />
 178+ <input type="hidden" value="@utm_source" name="utm_source"/>
 179+ <input type="hidden" value="@utm_medium" name="utm_medium"/>
 180+ <input type="hidden" value="@utm_campaign" name="utm_campaign"/>
 181+ <input type="hidden" value="@language" name="language"/>
 182+ <input type="hidden" value="@referrer" name="referrer"/>
 183+ <input type="hidden" value="@comment" name="comment"/>
 184+ <input type="hidden" value="@comment-option" name="comment-option"/>
 185+ <input type="hidden" value="@email-opt" name="email-opt"/>
 186+ <input type="hidden" value="processed" name="payment_method"/>
 187+ <input type="hidden" value="@token" name="token"/>
 188+ <input type="hidden" value="@order_id" name="order_id"/>
 189+ <input type="hidden" value="@numAttempt" name="numAttempt"/>
 190+ <input type="hidden" value="@contribution_tracking_id" name="contribution_tracking_id"/>
 191+ <input type="hidden" value="@data_hash" name="data_hash"/>
 192+ <input type="hidden" value="@owa_session" name="owa_session"/>
 193+ <input type="hidden" value="@owa_ref" name="owa_ref"/>
 194+ </div>
 195+ </div>
 196+ </form>
 197+ <div id="where-content">
 198+ <hr>
 199+ <h3>Where your donation goes</h3>
 200+ <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>
 201+ <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>
 202+ </div>
 203+ </div>
 204+ </div>
 205+ <p>We do not store your credit card information, and your personal data is subject to our <a target="_blank" href="http://wikimediafoundation.org/wiki/Donor_policy"> donor privacy policy</a>.</p>
 206+<p><a href="https://www.mediawiki.org/wiki/Ways_to_Give/en">More information or other ways to give</a><br /><a href="https://www.mediawiki.org/wiki/FAQ/en">Answers to frequently asked questions</a></p>
 207+ </div>
 208+</div>
 209+
 210+ <!-- load jquery 1.4.2 -->
 211+ <script type='text/javascript' src='@script_path/extensions/DonationInterface/payflowpro_gateway/forms/rapidhtml/js/jquery-1.4.2.min.js'></script>
 212+ <script type="text/javascript">
 213+ ( function( $ ){
 214+ window.onload = function (){
 215+ // set all jQuery instances to 1.4.2
 216+ jQuery = $;
 217+ $j = $;
 218+ $.getScript('@script_path/extensions/DonationInterface/payflowpro_gateway/forms/rapidhtml/js/jquery.ezpz_hint.min.js', function() {
 219+ $.getScript('@script_path/extensions/DonationInterface/payflowpro_gateway/forms/rapidhtml/js/jquery.ui.min.js', function() {
 220+ // Init accordion
 221+ $("#accordion").accordion({
 222+ autoHeight: false
 223+ });
 224+
 225+ // check for RapidHtml errors and display, if any
 226+ var errors = ['#general','#retryMsg','#amount','#card_num','#card','#cvv','#fname',
 227+ '#lname','#city','#country','#street','#state','#zip','#emailAdd'];
 228+
 229+ var count = 0;
 230+ for( var i=0; i < errors.length; i++ ){
 231+ if ( errors[i].length > 0 ){
 232+ count++;
 233+ if ( count > 1 )
 234+ $('#errorMessages').append('<br />');
 235+ $('#errorMessages').append(errors[i]);
 236+ }
 237+ }
 238+ if( count > 0 ){
 239+ // show the second step with the error
 240+ showAmount( $("input[name=amount]") );
 241+ // show second step
 242+ $(".hideamountclass").slideUp();
 243+ $("#step2wrapper").slideDown();
 244+ $("#change-amount").show();
 245+
 246+ // set the action on step1 header to show first step
 247+ $("#step1header").click(function(){
 248+ $(".hideamountclass").slideDown();
 249+ $("#step2wrapper").slideUp();
 250+ $("#change-amount").hide();
 251+ });
 252+ }
 253+ // Inline labels
 254+ $(".hint").ezpz_hint();
 255+
 256+ $("#cc").click(function(){
 257+ if ( validateAmount(document.paypalcontribution) ){
 258+ showAmount( $("input[name=amount]") );
 259+ // show second step
 260+ $(".hideamountclass").slideUp();
 261+ $("#step2wrapper").slideDown();
 262+ $("#change-amount").show();
 263+
 264+ // set the action on step1 header to show first step
 265+ $("#step1header").click(function(){
 266+ $(".hideamountclass").slideDown();
 267+ $("#step2wrapper").slideUp();
 268+ $("#change-amount").hide();
 269+ });
 270+ }
 271+ });
 272+
 273+ $("#pp").click(function(){
 274+ console.log('Clicked: PP');
 275+ if ( validateAmount(document.paypalcontribution) ){
 276+ // set the action to go to PayPal
 277+ $("input[name=gateway]").val("paypal");
 278+ document.paypalcontribution.action = "https://wikimediafoundation.org/wiki/Special:ContributionTracking/en";
 279+ $("#loading").html("<img src='../images/loading.gif' /> Redirecting to PayPal…");
 280+ document.paypalcontribution.submit();
 281+ }
 282+ });
 283+ $("#submitcreditcard").click(function(){
 284+ // set country to US
 285+ $("input[name=country]").val("US");
 286+
 287+ if ( validate_form(document.paypalcontribution) ){
 288+ // set expiration date
 289+ $("input[name=expiration]").val(
 290+ $("select[name=mos]").val() + $("select[name=year]").val().substring(2,4)
 291+ );
 292+
 293+ document.paypalcontribution.action = "@action";
 294+ document.paypalcontribution.submit();
 295+ }
 296+ })
 297+
 298+ // Fix behavior of images in labels
 299+ $("label img").live("click", function() { $("#" + $(this).parents("label").attr("for")).click(); });
 300+
 301+ // Display selected amount
 302+ function showAmount(e){ $("#selected-amount").html("($" + e.val() + ")"); }
 303+
 304+ // Set selected amount to amount
 305+ $("input[name=amountRadio]").click(function(){ setAmount($(this)); });
 306+ $("#other-amount").change(function(){ setAmount($(this)); });
 307+ function setAmount(e){ $("input[name=amount]").val(e.val()); }
 308+
 309+ // Security codes
 310+ $("#where").click(function(){
 311+ $("#codes").toggle();
 312+ return false;
 313+ });
 314+
 315+ function validateAmount(){
 316+ var minimums = {
 317+ 'USD' : 1,
 318+ }
 319+ var error = true;
 320+ var amount = $("input[name=amount]").val(); // get the amount
 321+ var otherAmount = amount // create a working copy
 322+ otherAmount = otherAmount.replace(/[,.](\d)$/, '\:$10');
 323+ otherAmount = otherAmount.replace(/[,.](\d)(\d)$/, '\:$1$2');
 324+ otherAmount = otherAmount.replace(/[,.]/g, '');
 325+ otherAmount = otherAmount.replace(/:/, '.');
 326+ amount = otherAmount; // idk, reset amount to working copy amount
 327+ $("input[name=amount]").val(amount); // set the new amount back into the form
 328+
 329+ // Check amount is a real number, sets error as true (good) if no issues
 330+ error = ( amount == null || isNaN( amount ) || amount.value <= 0 );
 331+ // Check amount is at least the minimum
 332+ var currency = 'USD'; // hard-coded for these forms and tests
 333+ $("input[name=currency]").val(currency);
 334+ if ( typeof( minimums[currency] ) == 'undefined' ) {
 335+ minimums[currency] = 1;
 336+ }
 337+ if ( amount < minimums[currency] || error ) {
 338+ alert( 'You must contribute at least $1'.replace('$1', minimums[currency] + ' ' + currency ) );
 339+ error = true;
 340+ }
 341+ return !error;
 342+ }
 343+ });
 344+ });
 345+ }
 346+ })(jQuery);
 347+ </script>
 348+ <script type="text/javascript">
 349+ console.log(document.getElementById("amountamount"));
 350+ </script>
 351+<!-- Wikimedia Project logo
 352+<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>
 353+ -->

Status & tagging log