| Index: trunk/extensions/DonationInterface/payflowpro_gateway/forms/html/lightbox1.html |
| — | — | @@ -0,0 +1,248 @@ |
| | 2 | +<!--[if lt IE 7]><style type="text/css">body{behavior:url("/w/skins-1.17/vector/csshover.min.htc")}</style><![endif]--> |
| | 3 | +<script type="text/javascript"> |
| | 4 | +mw.loader.load( 'jquery.ui.button' ); |
| | 5 | +mw.loader.load( 'jquery.ui.dialog' ); |
| | 6 | +var extensionPath = mw.config.get( 'wgServer' ) + mw.config.get( 'wgScriptPath' ) + '/extensions/DonationInterface'; |
| | 7 | +mw.loader.load( extensionPath + '/payflowpro_gateway/forms/js/lightbox1.js', 'text/javascript' ); |
| | 8 | +mw.loader.load( extensionPath + '/payflowpro_gateway/forms/css/lightbox1.css', 'text/css' ); |
| | 9 | +</script> |
| | 10 | + |
| | 11 | + <div class="ltr"> |
| | 12 | + <div id="appeal"> |
| | 13 | + <div id="appeal-content"> |
| | 14 | + <div class="call-r"> |
| | 15 | + <div id="donate"> |
| | 16 | + <h3 id="amount-heading">Donate</h3> |
| | 17 | + |
| | 18 | + <form method="post" name="paypalcontribution"> |
| | 19 | + <div style="display: block;" id="amount-content"> |
| | 20 | + |
| | 21 | + <table id="amount-table"> |
| | 22 | + <tr> |
| | 23 | + <td><label><input type="radio" name="amountRadio" value="5" /> $5</label></td> |
| | 24 | + <td><label><input type="radio" name="amountRadio" value="10" /> $10</label></td> |
| | 25 | + <td><label><input type="radio" name="amountRadio" value="20" /> $20</label></td> |
| | 26 | + <td><label><input type="radio" name="amountRadio" value="35" /> $35</label></td> |
| | 27 | + </tr> |
| | 28 | + <tr> |
| | 29 | + <td><label><input type="radio" name="amountRadio" value="50" /> $50</label></td> |
| | 30 | + <td><label><input type="radio" name="amountRadio" value="100" /> $100</label></td> |
| | 31 | + <td><label><input type="radio" name="amountRadio" value="250" /> $250</label></td> |
| | 32 | + <td><input type="radio" name="amountRadio" id="input_amount_other" value="other" /> <label>$<input type="text" name="amountGiven" size="4" id="other-amount" placeholder="Other" onfocus="this.form.input_amount_other.checked=true;"/></label></td> |
| | 33 | + </tr> |
| | 34 | + </table> |
| | 35 | + |
| | 36 | + <p class="donate-options"> |
| | 37 | + <input class="btn" id="cc" value="Donate by Credit Card" type="button"> |
| | 38 | + <br><input class="btn" id="pp" value="Donate via PayPal" type="button"><span id="loading"></span> |
| | 39 | + </p> |
| | 40 | + </div> |
| | 41 | + |
| | 42 | + </form> |
| | 43 | + </div> |
| | 44 | + |
| | 45 | + <div id="callout-content"> |
| | 46 | + <hr> |
| | 47 | + <h3>Where your donation goes</h3> |
| | 48 | + <p><strong>Technology:</strong> Servers, bandwidth, |
| | 49 | +maintenance, development. Wikipedia is the #5 website in the world and |
| | 50 | +it runs on a fraction of what other top websites spend.</p> |
| | 51 | + <p><strong>People:</strong> The other top 10 website |
| | 52 | +have thousands of employees. We have fewer than 100, making your |
| | 53 | +donation a great investment in a highly-efficient not-for-profit |
| | 54 | +organization.</p> |
| | 55 | + </div> |
| | 56 | + </div> |
| | 57 | + |
| | 58 | + <h2 id="appeal-head"> <span class="mw-headline" id="From_Wikipedia_programmer_Brandon_Harris">From Wikipedia programmer Brandon Harris</span></h2> |
| | 59 | + <div id="appeal-body" class="plainlinks"> |
| | 60 | + <p>I feel like I'm living the first line of my obituary.</p> |
| | 61 | + <p>I don't think there will be anything else that I do in my |
| | 62 | + life as important as what I do now for Wikipedia. We're not just |
| | 63 | +building an encyclopedia, we're working to make people free. When we |
| | 64 | +have access to free knowledge, we are better people. We understand the |
| | 65 | +world is bigger than us, and we become infected with tolerance and |
| | 66 | +understanding.</p> |
| | 67 | + <p>Wikipedia is the 5th largest website in the world. I work |
| | 68 | + at the small non-profit that keeps it on the web. We don't run ads |
| | 69 | +because doing so would sacrifice our independence. The site is not and |
| | 70 | +should never be a propaganda tool.</p> |
| | 71 | + <p>Our work is possible because of donations from our |
| | 72 | +readers. Will you help protect Wikipedia by donating $5, $10, $20 or |
| | 73 | +whatever you can afford?</p> |
| | 74 | + <p>I work at the Wikimedia Foundation because everything in |
| | 75 | +my soul tells me it's the right thing to do. I've worked at huge tech |
| | 76 | +companies, doing some job to build some crappy thing that's designed to |
| | 77 | +steal money from some kid who doesn't know it. I would come home from |
| | 78 | +work crushed.</p> |
| | 79 | + <p>You might not know this, but the Wikimedia Foundation |
| | 80 | +operates with a very small staff. Most other top-ten sites have tens of |
| | 81 | +thousands of people and massive budgets. But they produce a fraction of |
| | 82 | +what we pull off with sticks and wire.</p> |
| | 83 | + <p>When you give to Wikipedia, you're supporting free |
| | 84 | +knowledge around the world. You're not only leaving a legacy for your |
| | 85 | +children and for their children, you're elevating people around the |
| | 86 | +world who have access to this treasure. You're assuring that one day |
| | 87 | +everyone else will too.</p> |
| | 88 | + <p>Thank you,</p> |
| | 89 | + <p><strong>Brandon Harris</strong><br></p> |
| | 90 | + <p>Programmer, Wikimedia Foundation</p> |
| | 91 | + </div> |
| | 92 | + </div> |
| | 93 | + </div> |
| | 94 | + |
| | 95 | + <hr> |
| | 96 | + |
| | 97 | + <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> |
| | 98 | + <p><a href="http://wikipedia.webitects.com/wiki/Ways_to_Give/en">More information or other ways to give</a><br><a href="http://wikipedia.webitects.com/wiki/FAQ/en">Answers to frequently asked questions</a></p> |
| | 99 | + </div> |
| | 100 | + |
| | 101 | +<div id="dialog"> |
| | 102 | + <div id="steps"> |
| | 103 | + <form id="donationForm" name="donationForm" action="" method="post"> |
| | 104 | + <fieldset class="step"> |
| | 105 | + <legend>Personal Information</legend> |
| | 106 | + <input type="hidden" name="gateway" value="payflowpro" id="gateway" /> |
| | 107 | + <input type="hidden" name="returnto" value="Thank_You/en" /> |
| | 108 | + <input type="hidden" value="@action" name="action" /> |
| | 109 | + <input type="hidden" value="@amount" name="amount" /> |
| | 110 | + <input type="hidden" value="@country" name="country" id="country" /> |
| | 111 | + <input type="hidden" value="@expiration" name="expiration" /> |
| | 112 | + <input type="hidden" value="@currency_code" name="currency" /> |
| | 113 | + <input type="hidden" value="@utm_source" name="utm_source"/> |
| | 114 | + <input type="hidden" value="@utm_medium" name="utm_medium"/> |
| | 115 | + <input type="hidden" value="@utm_campaign" name="utm_campaign"/> |
| | 116 | + <input type="hidden" value="@language" name="language"/> |
| | 117 | + <input type="hidden" value="@referrer" name="referrer"/> |
| | 118 | + <input type="hidden" value="@comment" name="comment"/> |
| | 119 | + <input type="hidden" value="@comment-option" name="comment-option"/> |
| | 120 | + <input type="hidden" value="@email-opt" name="email-opt"/> |
| | 121 | + <input type="hidden" value="processed" name="payment_method"/> |
| | 122 | + <input type="hidden" value="@token" name="token"/> |
| | 123 | + <input type="hidden" value="@order_id" name="order_id"/> |
| | 124 | + <input type="hidden" value="@numAttempt" name="numAttempt"/> |
| | 125 | + <input type="hidden" value="@contribution_tracking_id" name="contribution_tracking_id"/> |
| | 126 | + <input type="hidden" value="@data_hash" name="data_hash"/> |
| | 127 | + <input type="hidden" value="@owa_session" name="owa_session"/> |
| | 128 | + <input type="hidden" value="@owa_ref" name="owa_ref"/> |
| | 129 | + <div class="step-content"> |
| | 130 | + <div class="stuff"> |
| | 131 | + <table> |
| | 132 | + <tr> |
| | 133 | + <td class="label"> |
| | 134 | + <label for="fname">Name</label> |
| | 135 | + </td> |
| | 136 | + <td> |
| | 137 | + <input name="fname" placeholder="First name" size="25" value="@fname" type="text" maxlength="30" class="required" id="fname" style="width: 136px;" /> <input name="lname" placeholder="Last name" size="25" value="@lname" type="text" maxlength="30" class="required" id="lname" style="width: 136px;" /> |
| | 138 | + </td> |
| | 139 | + </tr> |
| | 140 | + </table> |
| | 141 | + </div> |
| | 142 | + <div class="stuff"> |
| | 143 | + <table> |
| | 144 | + <tr> |
| | 145 | + <td class="label"> |
| | 146 | + <label for="street">Billing Address</label> |
| | 147 | + </td> |
| | 148 | + <td> |
| | 149 | + <input name="street" placeholder="Street" size="30" value="@street" type="text" maxlength="100" class="required" id="street" style="width: 258px;" /> |
| | 150 | + </td> |
| | 151 | + </tr> |
| | 152 | + <tr> |
| | 153 | + <td class="label"> </td> |
| | 154 | + <td> |
| | 155 | + <input name="city" placeholder="City" class="required" size="18" value="@city" type="text" maxlength="40" id="city" style="width: 136px;"/> |
| | 156 | + <select name="state" class="required" id="state" value="@state"><option value="" /><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></select> |
| | 157 | + <input name="zip" placeholder="Zip" class="required" size="5" value="@zip" type="text" maxlength="10" id="zip" style="width: 48px;" /><input type="hidden" value="US" name="country" /> |
| | 158 | + </td> |
| | 159 | + </tr> |
| | 160 | + </table> |
| | 161 | + </div> |
| | 162 | + <div class="stuff"> |
| | 163 | + <table> |
| | 164 | + <tr> |
| | 165 | + <td class="label"> |
| | 166 | + <label for="email">Email</label> |
| | 167 | + </td> |
| | 168 | + <td> |
| | 169 | + <input name="emailAdd" placeholder="Email address" size="30" value="@emailAdd" type="text" maxlength="100" class="required" id="email" style="width: 258px;" /> |
| | 170 | + </td> |
| | 171 | + </tr> |
| | 172 | + </table> |
| | 173 | + </div> |
| | 174 | + <a href="#" class="continue-button">Continue</a> |
| | 175 | + </div> |
| | 176 | + </fieldset> |
| | 177 | + <fieldset class="step"> |
| | 178 | + <legend>Payment</legend> |
| | 179 | + <div class="step-content"> |
| | 180 | + <div class="stuff"> |
| | 181 | + <table> |
| | 182 | + <tr> |
| | 183 | + <td class="label"> |
| | 184 | + <label for="email">Card Number</label> |
| | 185 | + </td> |
| | 186 | + <td> |
| | 187 | + <input name="card_num" size="30" value="@card_num" type="text" maxlength="100" class="required" id="card_num" style="width: 258px;" /> |
| | 188 | + </td> |
| | 189 | + </tr> |
| | 190 | + </table> |
| | 191 | + </div> |
| | 192 | + <div class="stuff"> |
| | 193 | + <table> |
| | 194 | + <tr> |
| | 195 | + <td class="label"> |
| | 196 | + <label for="expiration">Expiration Date</label> |
| | 197 | + </td> |
| | 198 | + <td> |
| | 199 | + <select name="mos" id="expiration"> |
| | 200 | + <option value="01">1 (January)</option> |
| | 201 | + <option value="02">2 (February)</option> |
| | 202 | + <option value="03">3 (March)</option> |
| | 203 | + <option value="04">4 (April)</option> |
| | 204 | + <option value="05">5 (May)</option> |
| | 205 | + <option value="06">6 (June)</option> |
| | 206 | + <option value="07">7 (July)</option> |
| | 207 | + <option value="08">8 (August)</option> |
| | 208 | + <option value="09">9 (September)</option> |
| | 209 | + <option value="10">10 (October)</option> |
| | 210 | + <option value="11">11 (November)</option> |
| | 211 | + <option value="12">12 (December)</option> |
| | 212 | + </select> |
| | 213 | + / |
| | 214 | + <select name="year" id="year"> |
| | 215 | + <option value="2011">2011</option> |
| | 216 | + <option value="2012">2012</option> |
| | 217 | + <option value="2013">2013</option> |
| | 218 | + <option value="2014">2014</option> |
| | 219 | + <option value="2015">2015</option> |
| | 220 | + <option value="2016">2016</option> |
| | 221 | + <option value="2017">2017</option> |
| | 222 | + <option value="2018">2018</option> |
| | 223 | + <option value="2019">2019</option> |
| | 224 | + <option value="2020">2020</option> |
| | 225 | + <option value="2021">2021</option> |
| | 226 | + </select> |
| | 227 | + </td> |
| | 228 | + </tr> |
| | 229 | + </table> |
| | 230 | + </div> |
| | 231 | + <div class="stuff"> |
| | 232 | + <table> |
| | 233 | + <tr> |
| | 234 | + <td class="label"> |
| | 235 | + <label for="email">Security Code</label> |
| | 236 | + </td> |
| | 237 | + <td> |
| | 238 | + <input name="cvv" size="30" value="@cvv" type="text" maxlength="100" class="required" id="cvv" style="width: 50px;" /> |
| | 239 | + </td> |
| | 240 | + </tr> |
| | 241 | + </table> |
| | 242 | + </div> |
| | 243 | + <a href="#" class="back-button" id="goback">Back</a> |
| | 244 | + <a href="#" class="continue-button" id="submitcreditcard">Continue</a> |
| | 245 | + </div> |
| | 246 | + </fieldset> |
| | 247 | + </form> |
| | 248 | + </div> |
| | 249 | +</div> |
| Index: trunk/extensions/DonationInterface/payflowpro_gateway/forms/css/lightbox1.css |
| — | — | @@ -0,0 +1,288 @@ |
| | 2 | +/* Pitch */ |
| | 3 | +#pitch { |
| | 4 | + height: 236px; |
| | 5 | + background-image: url(http://upload.wikimedia.org/wikipedia/foundation/d/dc/Jimmy_Appeal_2009.jpg); |
| | 6 | + background-position: right top; |
| | 7 | + background-repeat: no-repeat; |
| | 8 | + background-color: #1e1e1e; |
| | 9 | + border: 1px solid gray; |
| | 10 | + border-bottom-width: 0; |
| | 11 | +} |
| | 12 | +#pitch-head { |
| | 13 | + width: 50%; |
| | 14 | + font-size: 1.75em; |
| | 15 | + line-height: 1.5em; |
| | 16 | + color: white; |
| | 17 | + margin-top: 16px; |
| | 18 | + margin-left: 24px; |
| | 19 | +} |
| | 20 | +#pitch-body { |
| | 21 | + width: 50%; |
| | 22 | + font-size: 1em; |
| | 23 | + line-height: 1.5em; |
| | 24 | + color: white; |
| | 25 | + margin-top: 16px; |
| | 26 | + margin-left: 24px; |
| | 27 | +} |
| | 28 | + |
| | 29 | +#appeal-head { |
| | 30 | + font-size: 1.5em; |
| | 31 | + line-height: 1.125em; |
| | 32 | + padding-bottom: 0.5em; |
| | 33 | + padding-top: 0.125em; |
| | 34 | +} |
| | 35 | +#appeal-body { |
| | 36 | + padding: 0.2em 0em; |
| | 37 | + font-size: 1.125em; |
| | 38 | + margin-bottom: 1em; |
| | 39 | +} |
| | 40 | +/* Donate */ |
| | 41 | +#donate { |
| | 42 | + font-size: 16px; |
| | 43 | +} |
| | 44 | +#amount-table td { |
| | 45 | + font-size: 100%; |
| | 46 | + padding: 4px; |
| | 47 | +} |
| | 48 | + |
| | 49 | +#donate-content { |
| | 50 | + background-color: #CCE7CD; |
| | 51 | + border: 1px solid #5eac58; |
| | 52 | +} |
| | 53 | +#donate-head { |
| | 54 | + font-size: 1.5em; |
| | 55 | + line-height: 1.125em; |
| | 56 | + padding-bottom: 0.5em; |
| | 57 | + padding-top: 0.125em; |
| | 58 | + border-color: #5eac58; |
| | 59 | +} |
| | 60 | +#donate-body { |
| | 61 | + font-size: 1.25em; |
| | 62 | +} |
| | 63 | + |
| | 64 | +.donate-body-small { |
| | 65 | + font-size: .75em; |
| | 66 | + margin-bottom:1em; |
| | 67 | +} |
| | 68 | +.donate-options { |
| | 69 | + text-align: center; |
| | 70 | +} |
| | 71 | +.donate-options input { |
| | 72 | + width: 15em; |
| | 73 | +} |
| | 74 | + |
| | 75 | +input.button, select#input_currency_code { |
| | 76 | + font-size: 95%; |
| | 77 | +} |
| | 78 | + |
| | 79 | +table { |
| | 80 | + background-color: transparent; |
| | 81 | +} |
| | 82 | + |
| | 83 | +#footer { |
| | 84 | + background-image: none !important; |
| | 85 | +} |
| | 86 | + |
| | 87 | +#mw-head-base { |
| | 88 | + height: 1em !important; |
| | 89 | +} |
| | 90 | + |
| | 91 | +#mw-panel div.portal { |
| | 92 | + display: none !important; |
| | 93 | +} |
| | 94 | + |
| | 95 | +#p-namespaces, #p-views, #p-cactions, #p-search, #p-personal, #catlinks, #firstHeading, #contentSub, #siteSub { |
| | 96 | + display: none; |
| | 97 | +} |
| | 98 | + |
| | 99 | +div#content { |
| | 100 | + background-color: transparent !important; |
| | 101 | + background-image: none !important; |
| | 102 | +} |
| | 103 | + |
| | 104 | +div#mw-head-base { |
| | 105 | + background-image: none !important; |
| | 106 | +} |
| | 107 | + |
| | 108 | +.l { |
| | 109 | + float: left; |
| | 110 | +} |
| | 111 | +.r { |
| | 112 | + float: right; |
| | 113 | +} |
| | 114 | +hr { |
| | 115 | + margin: 1.5em 0 0.5em; |
| | 116 | +} |
| | 117 | +h3 span { |
| | 118 | + font-weight: normal; |
| | 119 | +} |
| | 120 | +#amount-table td { |
| | 121 | + white-space: nowrap; |
| | 122 | +} |
| | 123 | +.call-l { |
| | 124 | + float: left; |
| | 125 | + margin: 0.2em 1em 1em 0; |
| | 126 | +} |
| | 127 | +.call-l, .call-r { |
| | 128 | + background: none repeat scroll 0 0 #FFFFFF; |
| | 129 | + border: 1px solid #444444; |
| | 130 | + font-size: 13px; |
| | 131 | + padding: 15px 20px; |
| | 132 | +} |
| | 133 | +.call-l h3, .call-r h3 { |
| | 134 | + font-size: 17px; |
| | 135 | +} |
| | 136 | +.call-l .loading, .call-r .loading { |
| | 137 | + background-image: url("../images/loading-white.gif"); |
| | 138 | +} |
| | 139 | +.call-r { |
| | 140 | + float: right; |
| | 141 | + margin: 0.2em 0 1em 1em; |
| | 142 | +} |
| | 143 | +#loading { |
| | 144 | + font-size: 12px; |
| | 145 | + margin-left: 0.5em; |
| | 146 | + vertical-align: middle; |
| | 147 | +} |
| | 148 | +.loading { |
| | 149 | + background: url("../images/loading-green.gif") no-repeat scroll 50% 50% transparent; |
| | 150 | + padding: 10px; |
| | 151 | +} |
| | 152 | +.mute { |
| | 153 | + font-size: 12px; |
| | 154 | +} |
| | 155 | + |
| | 156 | +/* Callouts */ |
| | 157 | +.call-l, .call-r { width: 310px; } |
| | 158 | + |
| | 159 | +/* Layout */ |
| | 160 | +.clear { clear: both; } |
| | 161 | + |
| | 162 | +/* Lightbox */ |
| | 163 | +div.ui-dialog { |
| | 164 | + width: 600px; |
| | 165 | + overflow: hidden; |
| | 166 | +} |
| | 167 | +.ui-dialog .ui-dialog-title { |
| | 168 | + font-size: 1em; |
| | 169 | + font-weight: normal; |
| | 170 | +} |
| | 171 | +.ui-widget { |
| | 172 | + font-size: 1em; |
| | 173 | +} |
| | 174 | +.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { |
| | 175 | + font-size: 0.8em; |
| | 176 | +} |
| | 177 | +input.btn { |
| | 178 | + font-size: 15px; |
| | 179 | + margin-bottom: 3px; |
| | 180 | +} |
| | 181 | +#dialog{ |
| | 182 | + overflow: hidden; |
| | 183 | +} |
| | 184 | +.ui-dialog .ui-dialog-content { |
| | 185 | + padding: 0; |
| | 186 | +} |
| | 187 | +#steps{ |
| | 188 | + width:600px; |
| | 189 | + overflow:hidden; |
| | 190 | + font-family:sans-serif; |
| | 191 | +} |
| | 192 | +.step{ |
| | 193 | + float:left; |
| | 194 | + width:600px; |
| | 195 | + position: relative; |
| | 196 | +} |
| | 197 | +.step-content { |
| | 198 | + padding: 20px; |
| | 199 | + height: 260px; |
| | 200 | +} |
| | 201 | + |
| | 202 | +#steps form fieldset{ |
| | 203 | + border:none; |
| | 204 | + padding: 0; |
| | 205 | + margin: 0; |
| | 206 | +} |
| | 207 | +#steps form legend{ |
| | 208 | + text-align:left; |
| | 209 | + color:#666; |
| | 210 | + font-size:24px; |
| | 211 | + /* text-shadow:1px 1px 1px #aaa; */ |
| | 212 | + font-weight:bold; |
| | 213 | + float:left; |
| | 214 | + width:580px; |
| | 215 | + padding:8px 0px 5px 20px; |
| | 216 | + margin:10px 0px; |
| | 217 | +} |
| | 218 | +#steps form div.stuff{ |
| | 219 | + clear:both; |
| | 220 | + margin:3px 0px; |
| | 221 | + width:auto; |
| | 222 | + padding:5px 10px; |
| | 223 | + /* |
| | 224 | + background-color:#f4f4f4; |
| | 225 | + border:1px solid #fff; |
| | 226 | + -moz-border-radius: 5px; |
| | 227 | + -webkit-border-radius: 5px; |
| | 228 | + border-radius: 5px; |
| | 229 | + -moz-box-shadow:0px 0px 3px #aaa; |
| | 230 | + -webkit-box-shadow:0px 0px 3px #aaa; |
| | 231 | + box-shadow:0px 0px 3px #aaa; |
| | 232 | + */ |
| | 233 | +} |
| | 234 | +#steps form div.stuff label{ |
| | 235 | + width:140px; |
| | 236 | + float:left; |
| | 237 | + text-align:right; |
| | 238 | + margin-right:12px; |
| | 239 | + line-height:26px; |
| | 240 | + color:#666; |
| | 241 | + /* text-shadow:1px 1px 1px #fff; */ |
| | 242 | + font-weight:bold; |
| | 243 | + font-size: 15px; |
| | 244 | +} |
| | 245 | +#steps form input:not([type=radio]), |
| | 246 | +#steps form textarea, |
| | 247 | +#steps form select{ |
| | 248 | + background: #ffffff; |
| | 249 | + border: 1px solid #ccc; |
| | 250 | + -moz-border-radius: 3px; |
| | 251 | + -webkit-border-radius: 3px; |
| | 252 | + border-radius: 3px; |
| | 253 | + outline: none; |
| | 254 | + padding: 5px; |
| | 255 | +} |
| | 256 | +#steps form input.widefield{ |
| | 257 | + width: 200px; |
| | 258 | + float:left; |
| | 259 | +} |
| | 260 | +#steps form input.large{ |
| | 261 | + font-size: 20px; |
| | 262 | + line-height: 22px; |
| | 263 | + width: 62px; |
| | 264 | +} |
| | 265 | +#steps form input:focus{ |
| | 266 | + -moz-box-shadow:0px 0px 3px #aaa; |
| | 267 | + -webkit-box-shadow:0px 0px 3px #aaa; |
| | 268 | + box-shadow:0px 0px 3px #aaa; |
| | 269 | + background-color:#FFFEEF; |
| | 270 | +} |
| | 271 | +#steps form p.submit{ |
| | 272 | + background:none; |
| | 273 | + border:none; |
| | 274 | + -moz-box-shadow:none; |
| | 275 | + -webkit-box-shadow:none; |
| | 276 | + box-shadow:none; |
| | 277 | +} |
| | 278 | +#steps form a.back-button { |
| | 279 | + position: absolute; |
| | 280 | + bottom: 25px; |
| | 281 | + left: 25px; |
| | 282 | + margin: 0 !important; |
| | 283 | +} |
| | 284 | +#steps form a.continue-button { |
| | 285 | + position: absolute; |
| | 286 | + bottom: 25px; |
| | 287 | + right: 25px; |
| | 288 | + margin: 0 !important; |
| | 289 | +} |
| \ No newline at end of file |
| Index: trunk/extensions/DonationInterface/payflowpro_gateway/forms/js/lightbox1.js |
| — | — | @@ -0,0 +1,228 @@ |
| | 2 | +$(function() { |
| | 3 | + |
| | 4 | + $( '#dialog' ).dialog( { |
| | 5 | + width: 600, |
| | 6 | + resizable: false, |
| | 7 | + autoOpen: false, |
| | 8 | + modal: true, |
| | 9 | + title: 'Donate by Credit Card' |
| | 10 | + } ); |
| | 11 | + $( '#cc' ).click( function() { |
| | 12 | + if ( validateAmount( document.paypalcontribution ) ) { |
| | 13 | + $( '#dialog' ).dialog( 'open' ); |
| | 14 | + } |
| | 15 | + }); |
| | 16 | + $( '#pp' ).click( function() { |
| | 17 | + if ( validateAmount( document.paypalcontribution ) ) { |
| | 18 | + $( "input[name='gateway']" ).val( 'paypal' ); |
| | 19 | + document.paypalcontribution.action = "https://wikimediafoundation.org/wiki/Special:ContributionTracking/en"; |
| | 20 | + $( '#loading' ).html( "<img src='../images/loading.gif' /> Redirecting to PayPal..." ); |
| | 21 | + document.paypalcontribution.submit(); |
| | 22 | + } |
| | 23 | + }); |
| | 24 | + |
| | 25 | + /* Set selected amount to amount */ |
| | 26 | + $( "input[name='amountRadio']" ).click( function() { setAmount( $( this ) ); } ); |
| | 27 | + $( "#other-amount" ).change( function() { setAmount( $( this ) ); } ); |
| | 28 | + function setAmount(e) { $("input[name='amount']").val( e.val() ); } |
| | 29 | + |
| | 30 | + /* number of fieldsets */ |
| | 31 | + var fieldsetCount = $( '#donationForm' ).children().length; |
| | 32 | + |
| | 33 | + /* current position of fieldset / navigation link */ |
| | 34 | + var current = 1; |
| | 35 | + |
| | 36 | + /* |
| | 37 | + Sum and save the widths of each one of the fieldsets. |
| | 38 | + Set the final sum as the total width of the steps element. |
| | 39 | + */ |
| | 40 | + var stepsWidth = 0; |
| | 41 | + var widths = new Array(); |
| | 42 | + $( '#steps .step' ).each( function(i) { |
| | 43 | + var $step = $( this ); |
| | 44 | + widths[i] = stepsWidth; |
| | 45 | + stepsWidth += 600; // Hard-coding as $.width() is not working for some reason |
| | 46 | + } ); |
| | 47 | + $( '#steps' ).width( stepsWidth ); |
| | 48 | + |
| | 49 | + /* To avoid problems in IE, focus the first input of the form */ |
| | 50 | + $( '#donationForm' ).children( ':first' ).find( ':input:first' ).focus(); |
| | 51 | + |
| | 52 | + /* make continue buttons */ |
| | 53 | + $( 'a.continue-button' ).button(); |
| | 54 | + $( 'a.continue-button' ).click( function(e) { |
| | 55 | + var $this = $( this ); |
| | 56 | + current = $( this ).parent().parent().index() + 1; |
| | 57 | + if ( current == fieldsetCount ) { |
| | 58 | + finalSubmit(); |
| | 59 | + return false; |
| | 60 | + } |
| | 61 | + if ( validateStep( current ) === 1 ) { |
| | 62 | + current = current + 1; |
| | 63 | + $( '#steps' ).stop().animate( { marginLeft: '-' + widths[current - 1] + 'px' }, 500, |
| | 64 | + function() { |
| | 65 | + $( '#donationForm' ).children( ':nth-child(' + parseInt(current) + ')' ).find( ':input:first' ).focus(); |
| | 66 | + } |
| | 67 | + ); |
| | 68 | + } else { |
| | 69 | + $this.blur(); |
| | 70 | + } |
| | 71 | + |
| | 72 | + e.preventDefault(); |
| | 73 | + }); |
| | 74 | + |
| | 75 | + /* Make back button */ |
| | 76 | + $( 'a.back-button' ).button(); |
| | 77 | + $( 'a.back-button' ).click( function(e) { |
| | 78 | + var $this = $( this ); |
| | 79 | + /* Set current to 1 less than previous step */ |
| | 80 | + current = $( this ).parent().parent().index(); |
| | 81 | + |
| | 82 | + $( '#steps' ).stop().animate( { marginLeft: '+' + widths[current - 1] + 'px' }, 500 ); |
| | 83 | + |
| | 84 | + e.preventDefault(); |
| | 85 | + }); |
| | 86 | + |
| | 87 | + /* Hitting tab on the last input of each fieldset makes the form slide to the next step. */ |
| | 88 | + $( '#donationForm > fieldset' ).each( function() { |
| | 89 | + var $fieldset = $( this ); |
| | 90 | + $fieldset.find( ':input:last' ).keydown( function(e) { |
| | 91 | + if ( e.which == 9 ){ // 9 is the char code for tab |
| | 92 | + $fieldset.find( 'a.continue-button' ).click(); |
| | 93 | + /* Force the blur for validation */ |
| | 94 | + e.preventDefault(); |
| | 95 | + } |
| | 96 | + }); |
| | 97 | + }); |
| | 98 | + |
| | 99 | + /* |
| | 100 | + Validates errors on all the fieldsets. |
| | 101 | + Records if the form has errors in $( '#donationForm' ).data(). |
| | 102 | + */ |
| | 103 | + function validateSteps() { |
| | 104 | + var formErrors = false; |
| | 105 | + for( var i = 1; i < fieldsetCount; ++i ) { |
| | 106 | + var error = validateStep(i); |
| | 107 | + if ( error == -1 ) formErrors = true; |
| | 108 | + } |
| | 109 | + $( '#donationForm' ).data( 'errors', formErrors ); |
| | 110 | + } |
| | 111 | + |
| | 112 | + function finalSubmit() { |
| | 113 | + var formErrors = false; |
| | 114 | + for( var i = 1; i <= fieldsetCount; ++i ) { |
| | 115 | + var error = validateStep(i); |
| | 116 | + if ( error == -1 ) formErrors = true; |
| | 117 | + } |
| | 118 | + $( '#donationForm' ).data( 'errors', formErrors ); |
| | 119 | + |
| | 120 | + if ( $( '#donationForm' ).data( 'errors' ) ) { |
| | 121 | + alert( 'Please correct the errors in the form.' ); |
| | 122 | + return false; |
| | 123 | + } else { |
| | 124 | + /* Set country to US */ |
| | 125 | + $( "input[name='country']" ).val('US' ); |
| | 126 | + |
| | 127 | + /* Set expiration date */ |
| | 128 | + $( "input[name='expiration']" ).val( |
| | 129 | + $( "select[name='mos']" ).val() + $( "select[name='year']" ).val().substring( 2, 4 ) |
| | 130 | + ) |
| | 131 | + |
| | 132 | + /* Submit the form */ |
| | 133 | + /* TODO: Replace this with AJAX request */ |
| | 134 | + var sendData = { |
| | 135 | + 'action': 'donate', |
| | 136 | + 'gateway': 'payflowpro', |
| | 137 | + 'currency': 'USD', |
| | 138 | + 'amount': $( "input[name='amount']" ).val(), |
| | 139 | + 'fname': $( "input[name='fname']" ).val(), |
| | 140 | + 'lname': $( "input[name='lname']" ).val(), |
| | 141 | + 'street': $( "input[name='street']" ).val(), |
| | 142 | + 'city': $( "input[name='city']" ).val(), |
| | 143 | + 'state': $( "input[name='state']" ).val(), |
| | 144 | + 'zip': $( "input[name='zip']" ).val(), |
| | 145 | + 'emailAdd': $( "input[name='emailAdd']" ).val(), |
| | 146 | + 'country': $( "input[name='country']" ).val(), |
| | 147 | + 'payment_method': 'card', |
| | 148 | + 'language': 'en', |
| | 149 | + |
| | 150 | + 'expiration': $( "input[name='expiration']" ).val(), |
| | 151 | + 'card_num': $( "input[name='card_num']" ).val(), |
| | 152 | + 'cvv': $( "input[name='cvv']" ).val(), |
| | 153 | + 'card_type': '', |
| | 154 | + |
| | 155 | + 'format': 'json' |
| | 156 | + }; |
| | 157 | + |
| | 158 | + $.ajax( { |
| | 159 | + 'url': mw.util.wikiScript( 'api' ), |
| | 160 | + 'data': sendData, |
| | 161 | + 'dataType': 'json', |
| | 162 | + 'type': 'GET', |
| | 163 | + 'success': function( data ) { |
| | 164 | + if ( data.result.errors ) { |
| | 165 | + var errors = new Array(); |
| | 166 | + for( var key in data.result.errors ){ |
| | 167 | + errors.push( data.result.errors[key] ); |
| | 168 | + } |
| | 169 | + alert ( errors.join( '\r\n' ) ); |
| | 170 | + } else { |
| | 171 | + /* Load the thank you page */ |
| | 172 | + } |
| | 173 | + } |
| | 174 | + } ); |
| | 175 | + //document.donationForm.action = $( "input[name='action']" ).val(); |
| | 176 | + //document.donationForm.submit(); |
| | 177 | + } |
| | 178 | + } |
| | 179 | + |
| | 180 | + /* |
| | 181 | + validates one fieldset |
| | 182 | + returns -1 if errors found, or 1 if not |
| | 183 | + */ |
| | 184 | + function validateStep( step ) { |
| | 185 | + var error = 1; |
| | 186 | + $( '#donationForm' ).children( ':nth-child(' + parseInt(step) + ')' ).find( ':input:not(button).required' ).each( function() { |
| | 187 | + var $this = $( this ); |
| | 188 | + var valueLength = jQuery.trim( $this.val() ).length; |
| | 189 | + |
| | 190 | + if ( valueLength == '' ) { |
| | 191 | + error = -1; |
| | 192 | + $this.css( 'background-color', '#FFEDEF' ); |
| | 193 | + } else { |
| | 194 | + $this.css( 'background-color', '#FFFFFF' ); |
| | 195 | + } |
| | 196 | + }); |
| | 197 | + |
| | 198 | + return error; |
| | 199 | + } |
| | 200 | + |
| | 201 | + function validateAmount(){ |
| | 202 | + var minimums = { |
| | 203 | + 'USD' : 1 |
| | 204 | + }; |
| | 205 | + var error = true; |
| | 206 | + var amount = $( "input[name='amount']" ).val(); // get the amount |
| | 207 | + var otherAmount = amount // create a working copy |
| | 208 | + otherAmount = otherAmount.replace( /[,.](\d)$/, '\:$10' ); |
| | 209 | + otherAmount = otherAmount.replace( /[,.](\d)(\d)$/, '\:$1$2' ); |
| | 210 | + otherAmount = otherAmount.replace( /[,.]/g, '' ); |
| | 211 | + otherAmount = otherAmount.replace( /:/, '.' ); |
| | 212 | + amount = otherAmount; // reset amount to working copy amount |
| | 213 | + $( "input[name='amount']" ).val( amount ); // set the new amount back into the form |
| | 214 | + |
| | 215 | + // Check amount is a real number, sets error as true (good) if no issues |
| | 216 | + error = ( amount == null || isNaN( amount ) || amount.value <= 0 ); |
| | 217 | + // Check amount is at least the minimum |
| | 218 | + var currency = 'USD'; // hard-coded for these forms and tests |
| | 219 | + $( "input[name='currency']" ).val( currency ); |
| | 220 | + if ( typeof( minimums[currency] ) == 'undefined' ) { |
| | 221 | + minimums[currency] = 1; |
| | 222 | + } |
| | 223 | + if ( amount < minimums[currency] || error ) { |
| | 224 | + alert( 'You must contribute at least $1'.replace('$1', minimums[currency] + ' ' + currency ) ); |
| | 225 | + error = true; |
| | 226 | + } |
| | 227 | + return !error; |
| | 228 | + }; |
| | 229 | +}); |