r103219 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r103218‎ | r103219 | r103220 >
Date:20:16, 15 November 2011
Author:pgehres
Status:resolved (Comments)
Tags:
Comment:
Initial commit of RapidHtml TwoStepTwoColumnLetter3
Incomplete so that Kaldari can start working on JS
Modified paths:
  • /trunk/extensions/DonationInterface/gateway_forms/rapidhtml/RapidHtmlResources.php (modified) (history)
  • /trunk/extensions/DonationInterface/payflowpro_gateway/forms/css/TwoStepTwoColumnLetter3.css (added) (history)
  • /trunk/extensions/DonationInterface/payflowpro_gateway/forms/html/TwoStepTwoColumnLetter3.html (added) (history)

Diff [purge]

Index: trunk/extensions/DonationInterface/payflowpro_gateway/forms/html/TwoStepTwoColumnLetter3.html
——@@ -0,0 +1,290 @@
 2+<script type="text/javascript">
 3+ mw.loader.load('pfp.form.rapidhtml.TwoStepTwoColumnLetter3');
 4+ // these must go through RapidHTML and thus are inline
 5+// var amountErrors = ['#general|escape','#retryMsg|escape','#amount|escape'];
 6+// var billingErrors = ['#fname|escape','#lname|escape','#city|escape','#country|escape','#street|escape','#state|escape','#zip|escape','#emailAdd|escape'];
 7+// var paymentErrors = ['#card_num|escape','#card_type|escape','#cvv|escape'];
 8+// var actionURL = "@action";
 9+// var scriptPath = "@script_path";
 10+</script>
 11+
 12+<table width="100%" cellspacing="0" cellpadding="0" border="0">
 13+ <tbody>
 14+ <tr>
 15+ <td id="appeal" valign="top">
 16+ <div style="margin:9em 0;">
 17+ <table class="quote"
 18+ style="margin: auto; border-collapse: collapse; border-style: none; background-color: transparent; width: auto; margin: 10px auto;">
 19+ <tbody>
 20+ <tr>
 21+ <td width="20" valign="top"
 22+ style="color: rgb(178, 183, 242); font-size: 40px; font-family: 'Times New Roman',serif; font-weight: bold; text-align: left; padding: 10px;">
 23+ “
 24+ </td>
 25+ <td valign="top" style="padding: 4px 5px; font-size: 26px; line-height: 30px;">Imagine a world
 26+ in which every single person on the planet has free access to the sum of all human
 27+ knowledge.
 28+ </td>
 29+ <td width="20" valign="bottom"
 30+ style="color: rgb(178, 183, 242); font-size: 40px; font-family: 'Times New Roman',serif; font-weight: bold; text-align: right; padding: 10px;">
 31+ ”
 32+ </td>
 33+ </tr>
 34+ <tr>
 35+ <td style="padding-right: 4%;" colspan="3">
 36+ <p style="font-size: 18px; text-align: right;"><cite style="font-style: normal;">—Jimmy
 37+ Wales, Founder of Wikipedia</cite></p>
 38+ </td>
 39+ </tr>
 40+ </tbody>
 41+ </table>
 42+ </div>
 43+ </td>
 44+ <td id="donate" valign="top">
 45+ <noscript>&lt;div id="noscript"&gt;&lt;p id="noscript-msg"&gt;It appears that you do not have JavaScript
 46+ enabled, or your browser does not support it.
 47+ In order to provide a safe, secure and pleasant experience, our donation form requires JavaScript.&lt;/p&gt;&lt;p
 48+ id="noscript-redirect-msg"&gt;If you cannot or do not wish to enable JavaScript, you may still
 49+ contribute by visiting:&lt;/p&gt;&lt;p id="noscript-redirect-link"&gt;&lt;a
 50+ href="http://wikimediafoundation.org/wiki/DonateNonJS/en"&gt;http://wikimediafoundation.org/wiki/DonateNonJS/en&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;</noscript>
 51+ <h2 id="donate-head">Please complete your donation below ...</h2>
 52+
 53+ <p class="creditcard-error-msg"></p>
 54+
 55+ <form name="payment" method="post"
 56+ action="/index.php/Special:PayflowProGateway?uselang=en&amp;masthead=none&amp;form_name=TwoStepTwoColumnLetter3&amp;text_template=2010%2FJimmyQuote&amp;ffname=%7B%7B%7Bffname%7D%7D%7D"
 57+ onsubmit="return formCheck(this)" autocomplete="off">
 58+ <div id="payflowpro_gateway-personal-info">
 59+ <table id="payflow-table-donor">
 60+ <tbody>
 61+ <tr>
 62+ <td colspan="2"><span class="creditcard-error-msg"></span></td>
 63+ </tr>
 64+ <tr>
 65+ <td colspan="2">
 66+ <table cellspacing="0" cellpadding="4" border="1" id="donation_amount">
 67+ <tbody>
 68+ <tr>
 69+ <td class="amount_header">Description</td>
 70+ <td class="amount_header" style="text-align:right;width:75px;">Amount</td>
 71+ <td class="amount_header" style="text-align:right;width:75px;">Currency</td>
 72+ </tr>
 73+ <tr>
 74+ <td class="amount_data">Donation</td>
 75+ <td class="amount_data" style="text-align:right;width:75px;">10<input
 76+ type="hidden" value="10" name="amount"></td>
 77+ <td class="amount_data" style="text-align:right;width:75px;">USD<input
 78+ type="hidden" value="USD" name="currency_code"></td>
 79+ </tr>
 80+ </tbody>
 81+ </table>
 82+ </td>
 83+ </tr>
 84+ <tr>
 85+ <td colspan="2"><h3 class="cc_header">Billing information<img
 86+ src="/extensions/DonationInterface/gateway_forms/includes/padlock.gif"
 87+ style="vertical-align:baseline;margin-left:8px;"></h3></td>
 88+ </tr>
 89+ <tr>
 90+ <td class="label"></td>
 91+ <td><img src="/extensions/DonationInterface/gateway_forms/includes/credit_card_logos.gif">
 92+ </td>
 93+ </tr>
 94+ <tr>
 95+ <td class="label"><label for="card_num">Card number</label></td>
 96+ <td><input name="card_num" size="30" value="" type="text" maxlength="100" id="card_num"
 97+ class="fullwidth" autocomplete="off"></td>
 98+ </tr>
 99+ <tr>
 100+ <td class="label"><label for="expiration">Expiration date</label></td>
 101+ <td><select name="mos" id="expiration">
 102+ <option value="01">1 (January)</option>
 103+ <option value="02">2 (February)</option>
 104+ <option value="03">3 (March)</option>
 105+ <option value="04">4 (April)</option>
 106+ <option value="05">5 (May)</option>
 107+ <option value="06">6 (June)</option>
 108+ <option value="07">7 (July)</option>
 109+ <option value="08">8 (August)</option>
 110+ <option value="09">9 (September)</option>
 111+ <option value="10">10 (October)</option>
 112+ <option value="11">11 (November)</option>
 113+ <option value="12">12 (December)</option>
 114+ </select> / <select name="year" id="year">
 115+ <option value="2011">2011</option>
 116+ <option value="2012">2012</option>
 117+ <option value="2013">2013</option>
 118+ <option value="2014">2014</option>
 119+ <option value="2015">2015</option>
 120+ <option value="2016">2016</option>
 121+ <option value="2017">2017</option>
 122+ <option value="2018">2018</option>
 123+ <option value="2019">2019</option>
 124+ <option value="2020">2020</option>
 125+ <option value="2021">2021</option>
 126+ </select></td>
 127+ </tr>
 128+ <tr>
 129+ <td colspan="2"><span class="creditcard-error-msg"></span></td>
 130+ </tr>
 131+ <tr>
 132+ <td class="label"><label for="cvv">Security code</label></td>
 133+ <td><input name="cvv" size="5" value="" type="text" maxlength="10" id="cvv"
 134+ autocomplete="off"> <a href="javascript:PopupCVV();">Where is this?</a></td>
 135+ </tr>
 136+ <tr>
 137+ <td colspan="2"><span class="creditcard-error-msg"></span></td>
 138+ </tr>
 139+ <tr>
 140+ <td colspan="2"><span class="creditcard-error-msg"></span></td>
 141+ </tr>
 142+ <tr>
 143+ <td class="label"><label for="fname">Name on card</label></td>
 144+ <td><input name="fname" size="30" value="" type="text"
 145+ onfocus="clearField( this, 'First name' )" maxlength="25" class="required"
 146+ id="fname" style="color: rgb(153, 153, 153); "><input name="lname" size="30"
 147+ value="" type="text"
 148+ onfocus="clearField( this, 'Last name' )"
 149+ maxlength="25" id="lname"
 150+ style="color: rgb(153, 153, 153); ">
 151+ </td>
 152+ </tr>
 153+ <tr>
 154+ <td colspan="2"><span class="creditcard-error-msg"></span></td>
 155+ </tr>
 156+ <tr>
 157+ <td class="label"><label for="street">Billing address</label></td>
 158+ <td><input name="street" size="30" value="" type="text"
 159+ onfocus="clearField( this, 'Street' )" maxlength="100" id="street"
 160+ class="fullwidth" style="color: rgb(153, 153, 153); "></td>
 161+ </tr>
 162+ <tr>
 163+ <td colspan="2"><span class="creditcard-error-msg"></span></td>
 164+ </tr>
 165+ <tr>
 166+ <td class="label"></td>
 167+ <td><input name="city" size="18" value="" type="text" onfocus="clearField( this, 'City' )"
 168+ maxlength="40" id="city" style="color: rgb(153, 153, 153); "> <select
 169+ name="state" id="state">
 170+ <option value=""></option>
 171+ <option value="AK">AK</option>
 172+ <option value="AL">AL</option>
 173+ <option value="AR">AR</option>
 174+ <option value="AZ">AZ</option>
 175+ <option value="CA">CA</option>
 176+ <option value="CO">CO</option>
 177+ <option value="CT">CT</option>
 178+ <option value="DC">DC</option>
 179+ <option value="DE">DE</option>
 180+ <option value="FL">FL</option>
 181+ <option value="GA">GA</option>
 182+ <option value="HI">HI</option>
 183+ <option value="IA">IA</option>
 184+ <option value="ID">ID</option>
 185+ <option value="IL">IL</option>
 186+ <option value="IN">IN</option>
 187+ <option value="KS">KS</option>
 188+ <option value="KY">KY</option>
 189+ <option value="LA">LA</option>
 190+ <option value="MA">MA</option>
 191+ <option value="MD">MD</option>
 192+ <option value="ME">ME</option>
 193+ <option value="MI">MI</option>
 194+ <option value="MN">MN</option>
 195+ <option value="MO">MO</option>
 196+ <option value="MS">MS</option>
 197+ <option value="MT">MT</option>
 198+ <option value="NC">NC</option>
 199+ <option value="ND">ND</option>
 200+ <option value="NE">NE</option>
 201+ <option value="NH">NH</option>
 202+ <option value="NJ">NJ</option>
 203+ <option value="NM">NM</option>
 204+ <option value="NV">NV</option>
 205+ <option value="NY">NY</option>
 206+ <option value="OH">OH</option>
 207+ <option value="OK">OK</option>
 208+ <option value="OR">OR</option>
 209+ <option value="PA">PA</option>
 210+ <option value="PR">PR</option>
 211+ <option value="RI">RI</option>
 212+ <option value="SC">SC</option>
 213+ <option value="SD">SD</option>
 214+ <option value="TN">TN</option>
 215+ <option value="TX">TX</option>
 216+ <option value="UT">UT</option>
 217+ <option value="VA">VA</option>
 218+ <option value="VT">VT</option>
 219+ <option value="WA">WA</option>
 220+ <option value="WI">WI</option>
 221+ <option value="WV">WV</option>
 222+ <option value="WY">WY</option>
 223+ <option value="AA">AA</option>
 224+ <option value="AE">AE</option>
 225+ <option value="AP">AP</option>
 226+ </select> <input name="zip" size="5" value="" type="text"
 227+ onfocus="clearField( this, 'Zip code' )" maxlength="10" id="zip"
 228+ style="color: rgb(153, 153, 153); "><input type="hidden" value="US"
 229+ name="country"></td>
 230+ </tr>
 231+ <tr>
 232+ <td colspan="2"><span class="creditcard-error-msg"></span></td>
 233+ </tr>
 234+ <tr>
 235+ <td class="label"><label for="emailAdd">E-mail receipt to</label></td>
 236+ <td><input name="emailAdd" size="30" value="" type="text"
 237+ onfocus="clearField( this, 'Email address' )" maxlength="64" id="emailAdd"
 238+ class="fullwidth" style="color: rgb(153, 153, 153); "></td>
 239+ </tr>
 240+ <tr>
 241+ <td class="label"></td>
 242+ <td>
 243+ <div id="mw-donate-submit-button">&nbsp;<br><input
 244+ src="/extensions/DonationInterface/gateway_forms/includes/submit-donation-button.png"
 245+ alt="Submit donation" type="image"></div>
 246+ <div class="mw-donate-submessage" id="payflowpro_gateway-donate-submessage"><img
 247+ src="/extensions/DonationInterface/gateway_forms/includes/padlock.gif"
 248+ style="vertical-align:baseline;margin-right:4px;">Your credit / debit card will
 249+ be securely processed.
 250+ </div>
 251+ </td>
 252+ </tr>
 253+ </tbody>
 254+ </table>
 255+ </div>
 256+ <input type="hidden" value="B11_1115_btPf_US.L11_1115_old_US.cc" name="utm_source"><input type="hidden"
 257+ value="sitenotice"
 258+ name="utm_medium"><input
 259+ type="hidden" value="undefined" name="utm_campaign"><input type="hidden" value="en" name="language"><input
 260+ type="hidden" value="http://en.wikipedia.org/wiki/Main_Page?banner=B11_1115_btPf_US"
 261+ name="referrer"><input type="hidden" name="comment"><input type="hidden"
 262+ name="comment-option"><input
 263+ type="hidden" value="1" name="email-opt"><input type="hidden" name="size"><input type="hidden"
 264+ value="en"
 265+ name="premium_language"><input
 266+ type="hidden" value="cc" name="payment_method"><input type="hidden" name="payment_submethod"><input
 267+ type="hidden" name="issuer_id"><input type="hidden" name="token"><input type="hidden"
 268+ value="5064636399"
 269+ name="order_id"><input
 270+ type="hidden" value="5064636399" name="i_order_id"><input type="hidden" value="0" name="numAttempt"><input
 271+ type="hidden" value="5813608" name="contribution_tracking_id"><input type="hidden" name="data_hash"><input
 272+ type="hidden" name="action"><input type="hidden" name="owa_session"><input type="hidden"
 273+ name="owa_ref"><input
 274+ type="hidden" value="payflowpro" name="gateway"></form>
 275+ <div class="payflow-cc-form-section" id="payflowpro_gateway-donate-addl-info">
 276+ <div id="payflowpro_gateway-donate-addl-info-text">
 277+ <div style="text-align:center;">* * *</div>
 278+ <div class="">We do not store your credit card information, and your personal data is subject to our
 279+ <a href="http://wikimediafoundation.org/wiki/Donor_policy">donor privacy policy</a>.
 280+ </div>
 281+ <div class="">There are <a href="http://wikimediafoundation.org/wiki/Ways_to_Give/en">other ways to
 282+ give</a>, including by check.
 283+ </div>
 284+ <div class="">Questions or comments? Contact: <a href="mailto:donate@wikimedia.org">donate@wikimedia.org</a>
 285+ </div>
 286+ </div>
 287+ </div>
 288+ </td>
 289+ </tr>
 290+ </tbody>
 291+</table>
\ No newline at end of file
Property changes on: trunk/extensions/DonationInterface/payflowpro_gateway/forms/html/TwoStepTwoColumnLetter3.html
___________________________________________________________________
Added: svn:eol-style
1292 + native
Index: trunk/extensions/DonationInterface/payflowpro_gateway/forms/css/TwoStepTwoColumnLetter3.css
——@@ -0,0 +1,152 @@
 2+table#donation_amount {
 3+ background-color:transparent;
 4+ border:1px solid #AAAAAA;
 5+ border-collapse:collapse;
 6+ width: 394px;
 7+}
 8+table#donation_amount td {
 9+ border:1px solid #AAAAAA;
 10+}
 11+table#donation_amount td.amount_header {
 12+ background-color:#eef2f7;
 13+ font-size:90%;
 14+}
 15+table#donation_amount td.amount_data {
 16+ background-color:#daf2db;
 17+}
 18+h3.cc_header {
 19+ padding-bottom: 0;
 20+ margin-bottom: 0;
 21+ font-weight: normal;
 22+}
 23+div#payflowpro_gateway-donate-addl-info-text {
 24+ font-size: 90%;
 25+ line-height: 120%;
 26+}
 27+div#payflowpro_gateway-donate-submessage {
 28+ font-size: 90%;
 29+ line-height: 120%;
 30+}
 31+#payflow-table-donor td.label, #payflow-table-comment td.label, #payflow-table-cc td.label {
 32+ padding-right: 0.5em;
 33+ width: 100px;
 34+ white-space: nowrap;
 35+}
 36+input#city {
 37+ width: 130px;
 38+}
 39+input#zip {
 40+ width: 55px;
 41+}
 42+input.hasplaceholder {
 43+ color: rgb(153, 153, 153);
 44+}
 45+.payflow-cc-form-section {
 46+ float: none;
 47+ margin-right: 0em;
 48+ margin-bottom: 1em;
 49+}
 50+
 51+#payflowpro_gateway-cc_form_container {
 52+ width: 100%;
 53+}
 54+
 55+#payflowpro_gateway-cc_form_form {
 56+ width: 475px;
 57+ float: right;
 58+ margin-left: 2em;
 59+ padding-left: 2em;
 60+ border-left: 1px solid #BBBBBB;
 61+}
 62+
 63+#payflowpro_gateway-cc_form_letter {
 64+ height: 100%;
 65+}
 66+
 67+#payflowpro_gateway-cc_form_letter p {
 68+ font-size: 1.125em;
 69+ margin-bottom: 1.2em;
 70+}
 71+
 72+#payflowpro_gateway-personal-info {
 73+ margin-right:0 !important;
 74+}
 75+
 76+#payflowpro_gateway-donate-addl-info-secure-logos {
 77+ float: left;
 78+ margin-right: 2em;
 79+}
 80+
 81+#payflowpro_gateway-cc_form_letter_inside {
 82+ padding-top: .5em;
 83+}
 84+
 85+#payflowpro_gateway-cc_otherways {
 86+ padding-top: .5em;
 87+ display: block;
 88+}
 89+#payflowpro_gateway-donate-addl-info {
 90+ margin-top:2em !important;
 91+ margin-bottom:1em !important;
 92+}
 93+
 94+#appeal {
 95+ background-color:transparent;
 96+ border-color:transparent;
 97+ border-style:solid;
 98+ border-width:1px 0 1px 1px;
 99+ padding:16px 24px 24px;
 100+}
 101+#appeal-head {
 102+ font-size:1.5em;
 103+ line-height:1.125em;
 104+ padding-bottom:0.5em;
 105+ padding-top:0.125em;
 106+}
 107+#appeal-body {
 108+ font-size:1.125em;
 109+ margin-bottom:1em;
 110+ padding:0.2em 0;
 111+}
 112+#donate {
 113+ background-color:#CCE7CD;
 114+ border:1px solid #5EAC58;
 115+ padding:16px 24px 24px;
 116+ width:400px;
 117+}
 118+#donate-head {
 119+ border:none;
 120+ font-size:1.5em;
 121+ line-height:1.125em;
 122+ padding-bottom:0em;
 123+ padding-top:0.125em;
 124+}
 125+#donate-body {
 126+ font-size:1.125em;
 127+ margin-bottom:1em;
 128+}
 129+
 130+/* Move the form up */
 131+#mw-head-base {
 132+ height: 1em !important;
 133+}
 134+
 135+/* Hiding content border */
 136+table {
 137+ background-color: transparent;
 138+}
 139+div#content {
 140+ background-color: transparent !important;
 141+ background-image: none !important;
 142+}
 143+div#mw-head-base {
 144+ background-image: none !important;
 145+}
 146+#footer {
 147+ background-image: none !important;
 148+}
 149+
 150+/* Hiding stuff we don't need */
 151+h1#firstHeading, div#contentSub {
 152+ display: none;
 153+}
Property changes on: trunk/extensions/DonationInterface/payflowpro_gateway/forms/css/TwoStepTwoColumnLetter3.css
___________________________________________________________________
Added: svn:eol-style
1154 + native
Index: trunk/extensions/DonationInterface/gateway_forms/rapidhtml/RapidHtmlResources.php
——@@ -202,3 +202,14 @@
203203 'localBasePath' => dirname( __FILE__ ),
204204 'remoteExtPath' => $wgPayflowRapidHtmlRemoteExtPath,
205205 );
 206+
 207+/**
 208+ * TwoStepTwoColumnLetter3 Deathmatch
 209+ */
 210+$wgResourceModules[ 'pfp.form.rapidhtml.TwoStepTwoColumnLetter3' ] = array(
 211+ 'styles' => 'css/TwoStepTwoColumnLetter3.css',
 212+ 'scripts' => '',
 213+ 'dependencies' => array(),
 214+ 'localBasePath' => dirname( __FILE__ ).'/../../payflowpro_gateway/forms',
 215+ 'remoteExtPath' => $wgPayflowRapidHtmlRemoteExtPath,
 216+);

Follow-up revisions

RevisionCommit summaryAuthorDate
r103229HTML and CSS complete for TwoStepTwoColumnLetter3 RapidHTML FU 103219pgehres21:46, 15 November 2011
r103263MFT r103080, r103130, r103219, r103223, r103229, r103235, r103237, r103238, r...awjrichards23:43, 15 November 2011

Comments

#Comment by Awjrichards (talk | contribs)   21:08, 15 November 2011

I know this is still a WIP but wanted to make sure the following was on your radar: 

<noscript><div id="noscript"><p id="noscript-msg">It appears that you do not have JavaScript
+				enabled, or your browser does not support it.
+				In order to provide a safe, secure and pleasant experience, our donation form requires JavaScript.</p><p
+				id="noscript-redirect-msg">If you cannot or do not wish to enable JavaScript, you may still
+				contribute by visiting:</p><p id="noscript-redirect-link"><a
+				href="[http://wikimediafoundation.org/wiki/DonateNonJS/en http://wikimediafoundation.org/wiki/DonateNonJS/en]">[http://wikimediafoundation.org/wiki/DonateNonJS/en</a></p></div> http://wikimediafoundation.org/wiki/DonateNonJS/en</a></p></div>]</noscript>

The html in here got htmlentitied. No good!

As did the form action here: 

<form name="payment" method="post"
+				  action="/index.php/Special:PayflowProGateway?uselang=en&masthead=none&form_name=TwoStepTwoColumnLetter3&text_template=2010%2FJimmyQuote&ffname=%7B%7B%7Bffname%7D%7D%7D"
+				  onsubmit="return formCheck(this)" autocomplete="off">

And... shouldn't that action be replaced by '@action'?

Actually, it looks like you just haven't token-ified anything yet. But beware of the htmlentities!

#Comment by Pgehres (WMF) (talk | contribs)   21:47, 15 November 2011

Everything should be fixed in r103229. Thanks for the TODO list

Status & tagging log