Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code
Issues
All Issues

Side by Side Diff: pages/donate.raw

Issue 6021528219025408: Issue #1170 More progress migrating adblockplus.org to our CMS. (Closed)
Patch Set: Created Sept. 1, 2014, 10:45 a.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « pages/documentation_advanced.raw ('k') | pages/elemhidehelper.raw » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <head>
2 <style type="text/css">
3 h2
4 {
5 padding-top: 20px;
6 border-top: 1px solid #ccc;
7 }
8
9 label
10 {
11 display: block;
12 }
13
14 input
15 {
16 vertical-align: top;
17 }
18
19 button, label
20 {
21 display: inline-block;
22 margin-bottom: 0;
23 font-weight: 400;
24 text-align: center;
25 vertical-align: middle;
26 cursor: pointer;
27 background-image: none;
28 border: 1px solid transparent;
29 white-space: nowrap;
30 padding: 6px 12px;
31 font-size: 14px;
32 line-height: 1.42857143;
33 border-radius: 4px;
34 -webkit-user-select: none;
35 -moz-user-select: none;
36 -ms-user-select: none;
37 user-select: none;
38 color: #333;
39 background-color: #fff;
40 border-color: #ccc;
41 }
42
43 button:hover
44 {
45 background-color: #ebebeb;
46 border-color: #adadad;
47 }
48
49 button:active
50 {
51 background-color: #ebebeb;
52 border-color: #adadad;
53 outline: 0;
54 -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
55 box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
56 }
57
58 .hidden
59 {
60 display: none;
61 }
62
63 .contentfield_content .hidden
64 {
65 display: block;
66 }
67
68 #form strong
69 {
70 display: block;
71 margin: 10px 0px;
72 }
73
74 #form button
75 {
76 font-size: 18px;
77 }
78
79 /* Credit Card */
80
81 #form.none button.credit-card,
82 #form.credit-card button.credit-card
83 {
84 color: #fff;
85 background-color: #d9534f;
86 border-color: #d43f3a;
87 }
88
89 #form.none button.credit-card:hover,
90 #form.credit-card button.credit-card:hover
91 {
92 background-color: #d2322d;
93 border-color: #ac2925;
94 }
95
96 /* Paypal */
97
98 #form.none button.paypal,
99 #form.paypal button.paypal
100 {
101 color: #fff;
102 background-color: #428bca;
103 border-color: #357ebd;
104 }
105
106 #form.none button.paypal:hover,
107 #form.paypal button.paypal:hover
108 {
109 background-color: #3276b1;
110 border-color: #285e8e;
111 }
112
113 /* Bitcoin */
114
115 #form.none button.bitcoin,
116 #form.bitcoin button.bitcoin
117 {
118 color: #fff;
119 background-color: #f0ad4e;
120 border-color: #eea236;
121 }
122
123 #form.none button.bitcoin:hover,
124 #form.bitcoin button.bitcoin:hover
125 {
126 background-color: #ed9c28;
127 border-color: #d58512;
128 }
129
130 /* Secondary Form Elements */
131
132 #form-fields
133 {
134 display: none;
135 }
136
137 #form.credit-card #form-fields,
138 #form.paypal #form-fields,
139 #form.bitcoin #form-fields
140 {
141 display: block;
142 }
143
144 #form.bitcoin #form-price
145 {
146 display: none;
147 }
148
149 #donate
150 {
151 color: #fff;
152 background-color: #5cb85c;
153 border-color: #4cae4c;
154 }
155
156 #donate:hover
157 {
158 background-color: #47a447;
159 border-color: #398439;
160 }
161
162 #error
163 {
164 color: #d9534f;
165 vertical-align: middle;
166 }
167
168 #refund-message
169 {
170 margin-top: 50px;
171 font-style: italic;
172 }
173
174 #refund-message *
175 {
176 font-size: 12px;
177 }
178
179 #refund-message div
180 {
181 margin-bottom: 5px;
182 }
183
184 #refund-message ul
185 {
186 padding-top: 0px;
187 margin-top: 0px;
188 }
189
190 .custom-input
191 {
192 display: inline-block;
193 margin-left: 6px;
194 }
195
196 .custom-input .addon
197 {
198 padding: 2px 6px;
199 text-align: center;
200 color: #555;
201 font-size: 14px;
202 border: 1px solid #ccc;
203 border-right: 0;
204 border-radius: 3px;
205 border-bottom-right-radius: 0;
206 border-top-right-radius: 0;
207 background-color: #eee;
208 }
209
210 .custom-input input
211 {
212 width: 75px;
213 margin: 0px;
214 padding: 2px;
215 text-align: right;
216 font-size: 14px;
217 color: #555;
218 border: 1px solid #ccc;
219 border-radius: 4px;
220 border-bottom-left-radius: 0;
221 border-top-left-radius: 0;
222 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
223 box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
224 -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
225 transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
226 }
227 </style>
228
229 <script type="text/javascript">
230 // <!--
231 (function()
232 {
233 var textAttr = ("textContent" in document.documentElement) ? "textContent" : " innerText";
234
235 var formValues = {
236 currency: "USD",
237 description: null,
238 name: null
239 };
240
241 var priceValue = {
242 get: function()
243 {
244 var value = document.querySelector("input[name=price]:checked").value;
245 if (value == 0)
246 value = document.getElementById("price-other").value >> 0;
247 return value;
248 },
249 verify: function()
250 {
251 var selected = document.querySelector("input[name=price]:checked");
252 if (!selected)
253 return "Please select an amount";
254 if (selected.value == 0)
255 {
256 var other = document.getElementById("price-other");
257 if (other.value < 0 || isNaN(other.value))
258 return "Please select a valid amount";
259 }
260 return null;
261 }
262 };
263
264 var langValue = {
265 get: function(langs)
266 {
267 var lang = document.documentElement.lang;
268 if (lang in langs)
269 return langs[lang];
270 if ("en" in langs)
271 return langs["en"];
272 return "en";
273 }
274 };
275
276 var recurrenceValue = {
277 get: function(recurrences)
278 {
279 var checked = document.getElementById("recurrence").checked;
280 return (checked && recurrences.monthly) ? recurrences.monthly : undefined
281 }
282 };
283
284 var providers = {
285 "bitcoin": function()
286 {
287 var recurring = recurrenceValue.get({
288 "monthly": "https://coinbase.com/checkouts/d46825e3f22461f6a25b3249f8ce7 c2a"
289 });
290 openProviderPage({
291 action: (recurring) ? recurring : "https://coinbase.com/checkouts/ab08a1 65e21d72b503cff8f30bece652"
292 });
293 },
294 "credit-card": function()
295 {
296 if (verify(priceValue))
297 return;
298
299 openProviderPage({
300 action: "https://www.2checkout.com/checkout/purchase",
301 fields: {
302 sid: "202208429",
303 mode: "2CO",
304 currency_code: formValues.currency,
305 lang: langValue.get({
306 "de": "gr",
307 "en": "en",
308 "es": "es_ib",
309 "fr": "fr",
310 "nl": "nl",
311 "pt_br": "pt",
312 "zh_cn": "zh",
313 "zh_tw": "zh"
314 }),
315 pay_method: "CC", // CC: Credit Card, PPI: PayPal
316 li_0_type: "product",
317 li_0_name: formValues.name,
318 li_0_description: formValues.description,
319 li_0_price: priceValue.get(),
320 li_0_tangible: "N",
321 li_0_recurrence: recurrenceValue.get({
322 "monthly": "1 Month"
323 })
324 }
325 });
326 },
327 // see https://developer.paypal.com/webapps/developer/docs/classic/paypal-pa yments-standard/integration-guide/Appx_websitestandard_htmlvariables/#id08A6HI00 JQU
328 "paypal": function()
329 {
330 if (verify(priceValue))
331 return;
332
333 var recurrence = recurrenceValue.get({
334 "monthly": "M"
335 });
336
337 var fields = {
338 business: "jobp@adblockplus.org",
339 item_name: formValues.name,
340 currency_code: formValues.currency,
341 lc: langValue.get({
342 "de": "DE",
343 "en": "US",
344 "es": "ES",
345 "fr": "FR",
346 "nl": "NL",
347 "pt_br": "BR",
348 "zh_cn": "C2",
349 "zh_tw": "TW"
350 })
351 };
352 if (recurrence)
353 {
354 fields.cmd = "_xclick-subscriptions";
355 fields.a3 = priceValue.get();
356 fields.p3 = 1;
357 fields.t3 = recurrence;
358 fields.src = 1;
359 fields.modify = 1;
360 }
361 else
362 {
363 fields.cmd = "_donations";
364 fields.amount = priceValue.get();
365 }
366
367 openProviderPage({
368 action: "https://www.paypal.com/cgi-bin/webscr",
369 fields: fields
370 });
371 }
372 };
373
374 function verify()
375 {
376 var error = null;
377 for (var i in arguments)
378 {
379 error = arguments[i].verify();
380 if (error)
381 {
382 document.getElementById("error")[textAttr] = error;
383 break;
384 }
385 }
386 return error;
387 }
388
389 function openProviderPage(provider)
390 {
391 document.getElementById("error")[textAttr] = "";
392
393 var form = document.createElement("form");
394 form.target = "_blank";
395 form.action = provider.action;
396
397 var fields = provider.fields;
398 if (fields)
399 {
400 for (var i in fields)
401 {
402 var field = document.createElement("input");
403 field.name = i;
404 field.value = fields[i];
405 form.appendChild(field);
406 }
407 }
408
409 // To submit a form in Firefox it needs to be part of the DOM
410 document.head.appendChild(form);
411 form.submit();
412 document.head.removeChild(form);
413 }
414
415 function getText(id)
416 {
417 var element = document.getElementById(id);
418 return element[textAttr];
419 }
420
421 document.addEventListener("DOMContentLoaded", function()
422 {
423 formValues.description = getText("i18n_description");
424 formValues.name = getText("i18n_name");
425
426 document.getElementById("payment").addEventListener("click", function(event)
427 {
428 if (event.target.localName != "button")
429 return;
430
431 document.getElementById("form").className = event.target.className;
432 }, true);
433 document.getElementById("donate").addEventListener("click", function(event)
434 {
435 var provider = providers[document.getElementById("form").className];
436 if (provider)
437 provider();
438 }, false);
439 }, false);
440 })();
441
442 // -->
443 </script>
444 </head>
445 <span class="hidden" id="i18n_name">$s1$ </span>
446 <span class="hidden" id="i18n_description">$s2$</span>
447
448 <p>
449 $s3$
450 </p>
451
452 <div class="paypal" id="form">
453 <p id="payment">
454 <strong>$s4$</strong>
455
456 <button class="paypal">$s5$</button>
457 <!-- Commented out until it works properly, see https://issues.adblockplus.org/t icket/732
458 <button class="credit-card">Credit Card</button>
459 -->
460 <button class="bitcoin">$s6$</button>
461 </p>
462
463 <div id="form-fields">
464 <p id="form-price">
465 <strong>$s7$</strong>
466
467 <label>
468 <input name="price" type="radio" value="5">
469 $s8$
470 </label>
471 <label>
472 <input name="price" type="radio" value="10">
473 $s9$
474 </label>
475 <label>
476 <input name="price" type="radio" value="20">
477 $s10$
478 </label>
479 <label>
480 <input name="price" type="radio" value="40">
481 $s11$
482 </label>
483 <label>
484 <input name="price" type="radio" value="0">
485 $s12$
486 <span class="custom-input">
487 <span class="addon">$s13$</span><input id="price-other" min="1" type=" number" value="1">
488 </span>
489 </label>
490 </p>
491
492 <p id="form-recurrence">
493 <label>
494 <input id="recurrence" type="checkbox">
495 $s14$
496 </label>
497 </p>
498
499 <button id="donate">$s15$</button>
500 <span id="error"></span>
501
502 <div id="refund-message">
503 <div>
504 $s16(mailto:info@adblockplus.org)$
505 </div>
506 <div>
507 $s17$
508 <ul>
509 <li><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_manage-paylist " target="_blank">$s18$</a></li>
510 <li><a href="mailto:info@adblockplus.org" target="_blank">$s19$</a></l i>
511 <li><a href="https://coinbase.com/recurring_payments" target="_blank"> $s20$</a></li>
512 </ul>
513 </div>
514 </div>
515 </div>
516 </div>
OLDNEW
« no previous file with comments | « pages/documentation_advanced.raw ('k') | pages/elemhidehelper.raw » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld