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

Side by Side Diff: pages/donate.html

Issue 29334044: Issue 219 - Donation page is broken in IE8 (Closed)
Patch Set: Added polyfills and fixed spacing Created Jan. 28, 2016, 1:58 p.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 | « no previous file | static/js/vendor/ie8.js » ('j') | templates/default.tmpl » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 title=Donate to Adblock Plus 1 title=Donate to Adblock Plus
2 2
3 <head> 3 <head>
4 <style type="text/css"> 4 <style type="text/css">
5 h2 5 h2
6 { 6 {
7 padding-top: 20px; 7 padding-top: 20px;
8 border-top: 1px solid #ccc; 8 border-top: 1px solid #ccc;
9 } 9 }
10 10
(...skipping 203 matching lines...) Expand 10 before | Expand all | Expand 10 after
214 { 214 {
215 var textAttr = ("textContent" in document.documentElement) ? "textContent" : " innerText"; 215 var textAttr = ("textContent" in document.documentElement) ? "textContent" : " innerText";
216 216
217 var formValues = { 217 var formValues = {
218 name: null 218 name: null
219 }; 219 };
220 220
221 var currencyValue = { 221 var currencyValue = {
222 get: function() 222 get: function()
223 { 223 {
224 return document.querySelector("input[name=currency]:checked").value; 224 return getCheckedCheckbox(document.querySelectorAll("input[name=currency]" )).value;
225 } 225 }
226 }; 226 };
227 227
228 var priceValue = { 228 var priceValue = {
229 get: function() 229 get: function()
230 { 230 {
231 var value = document.querySelector("input[name=price]:checked").value; 231 var value = getCheckedCheckbox(document.querySelectorAll("input[name=price ]")).value;
232 if (value == 0) 232 if (value == 0)
233 value = document.getElementById("price-other").value >> 0; 233 value = document.getElementById("price-other").value >> 0;
234 return value; 234 return value;
235 }, 235 },
236 min: function() 236 min: function()
237 { 237 {
238 return parseInt(document.getElementById("price-other").getAttribute("min") , 10); 238 return parseInt(document.getElementById("price-other").getAttribute("min") , 10);
239 }, 239 },
240 verify: function() 240 verify: function()
241 { 241 {
242 var selected = document.querySelector("input[name=price]:checked"); 242 var selected = getCheckedCheckbox(document.querySelectorAll("input[name=pr ice]"));
243 if (!selected) 243 if (!selected)
244 return "Please select an amount"; 244 return "Please select an amount";
245 if (this.get() < this.min()) 245 if (this.get() < this.min())
246 return "Please select a valid amount"; 246 return "Please select a valid amount";
247 return null; 247 return null;
248 } 248 }
249 }; 249 };
250 250
251 var langValue = { 251 var langValue = {
252 get: function(langs) 252 get: function(langs)
(...skipping 131 matching lines...) Expand 10 before | Expand all | Expand 10 after
384 for (var i in fields) 384 for (var i in fields)
385 { 385 {
386 var field = document.createElement("input"); 386 var field = document.createElement("input");
387 field.name = i; 387 field.name = i;
388 field.value = fields[i]; 388 field.value = fields[i];
389 form.appendChild(field); 389 form.appendChild(field);
390 } 390 }
391 } 391 }
392 392
393 // To submit a form in Firefox it needs to be part of the DOM 393 // To submit a form in Firefox it needs to be part of the DOM
394 document.head.appendChild(form); 394 var documentHead = document.getElementsByTagName("head")[0]
395 documentHead.appendChild(form);
395 form.submit(); 396 form.submit();
396 document.head.removeChild(form); 397 documentHead.removeChild(form);
397 } 398 }
398 399
399 function getText(id) 400 function getText(id)
400 { 401 {
401 var element = document.getElementById(id); 402 var element = document.getElementById(id);
402 return element[textAttr]; 403 return element[textAttr];
403 } 404 }
404 405
405 function ensureMinPrice() 406 function ensureMinPrice()
406 { 407 {
407 // Credit card payments have to be above 1 EUR, meaning at least 2 USD. 408 // Credit card payments have to be above 1 EUR, meaning at least 2 USD.
408 var provider = document.getElementById("form").className; 409 var provider = document.getElementById("form").className;
409 var minPrice = (provider == "credit-card" && currencyValue.get() == "USD" ? 2 : 1); 410 var minPrice = (provider == "credit-card" && currencyValue.get() == "USD" ? 2 : 1);
410 var priceOther = document.getElementById("price-other"); 411 var priceOther = document.getElementById("price-other");
411 priceOther.setAttribute("min", minPrice); 412 priceOther.setAttribute("min", minPrice);
412 if (priceOther.value >> 0 < minPrice) 413 if (priceOther.value >> 0 < minPrice)
413 priceOther.value = minPrice; 414 priceOther.value = minPrice;
414 } 415 }
415 416
417 function getCheckedCheckbox(checkboxes)
418 {
419 var checkboxLength = checkboxes.length;
420 while (checkboxLength--)
421 {
422 if (checkboxes[checkboxLength].checked)
423 return checkboxes[checkboxLength];
424 }
425 }
426
416 function updateCurrency() 427 function updateCurrency()
417 { 428 {
418 var checkbox = document.querySelector("input[name=currency]:checked"); 429 var currencyField = document.getElementById("form-currency");
419 if (!checkbox) 430 var selectedCurrency = getCheckedCheckbox(
431 currencyField.querySelectorAll("input[name=currency]")
432 );
433 if (!selectedCurrency)
420 return; 434 return;
421 435 var currencyLabel = selectedCurrency.parentNode[textAttr];
422 var currencyLabel = checkbox.parentNode[textAttr]; 436 var currencyLabels = document.querySelectorAll(".currency-label");
423 if (!currencyLabel) 437 for (var i = 0; i < currencyLabels.length; i++)
424 return; 438 currencyLabels[i][textAttr] = currencyLabel;
425
426 var elements = document.getElementsByClassName("currency-label");
427 for (var i = 0; i < elements.length; i++)
428 elements[i][textAttr] = currencyLabel;
429 ensureMinPrice(); 439 ensureMinPrice();
430 } 440 }
431 441
432 document.addEventListener("DOMContentLoaded", function() 442 function initializeDonationForm()
433 { 443 {
434 formValues.name = getText("i18n_name"); 444 formValues.name = getText("i18n_name");
445 document.getElementById('form-payment').addEventListener("click", onSelectPa yment);
Thomas Greiner 2016/01/28 15:23:37 Detail: Please use double quotes instead of single
juliandoucette 2016/01/28 15:50:44 Done.
446 document.getElementById("form-currency").addEventListener("click", updateCur rency);
447 document.getElementById("form").addEventListener("submit", onSubmitDonation) ;
448 updateCurrency();
449 }
435 450
436 document.getElementById("payment").addEventListener("click", function(event) 451 function onSelectPayment(event)
437 { 452 {
438 if (event.target.localName != "button") 453 if (event.target.tagName != "BUTTON")
439 return; 454 return;
455 event.preventDefault();
456 document.getElementById("form").className = (event.target || event.srcElemen t).className;
Thomas Greiner 2016/01/28 15:23:37 According to https://github.com/WebReflection/ie8
juliandoucette 2016/01/28 15:50:44 Done.
457 ensureMinPrice();
458 }
440 459
441 document.getElementById("form").className = event.target.className; 460 function onSubmitDonation(event)
442 ensureMinPrice(); 461 {
443 }, true); 462 event.preventDefault();
463 var provider = providers[document.getElementById("form").className];
464 if (provider)
465 provider();
466 }
444 467
445 document.getElementById("form-currency").addEventListener("click", function( event) 468 document.addEventListener("DOMContentLoaded", initializeDonationForm);
Thomas Greiner 2016/01/28 15:23:37 Usually, we explicitly specify the last parameter
juliandoucette 2016/01/28 15:50:44 Done.
446 {
447 if (event.target.localName == "input")
448 updateCurrency();
449 }, true);
450 updateCurrency();
451 469
452 document.getElementById("donate").addEventListener("click", function(event)
453 {
454 var provider = providers[document.getElementById("form").className];
455 if (provider)
456 provider();
457 }, false);
458 }, false);
459 })(); 470 })();
460 471
461 // --> 472 // -->
462 </script> 473 </script>
463 </head> 474 </head>
464 <span class="hidden" id="i18n_name">{{s1 Adblock Plus Contribution}}</span> 475 <span class="hidden" id="i18n_name">{{s1 Adblock Plus Contribution}}</span>
465 476
466 <p> 477 <p>
467 {{s2 Adblock Plus is - and will always be - free. Our mission is to provide us ers with tools that allow them to gain control over their Internet browsing and protect them from unwanted and malicious elements. 478 {{s2 Adblock Plus is - and will always be - free. Our mission is to provide us ers with tools that allow them to gain control over their Internet browsing and protect them from unwanted and malicious elements.
468 Your donation directly helps the development of Adblock Plus.}} 479 Your donation directly helps the development of Adblock Plus.}}
469 </p> 480 </p>
470 481
471 <div class="paypal" id="form"> 482 <form class="paypal" id="form">
472 <p id="payment"> 483 <p id="form-payment">
473 <strong>{{s3 Select your payment method}}</strong> 484 <strong>{{s3 Select your payment method}}</strong>
474 485
475 <button class="paypal">{{s4 PayPal}}</button> 486 <button class="paypal" value="paypal" name="payment">{{s4 PayPal}}</button>
476 <button class="credit-card">{{s5 Credit Card}}</button> 487 <button class="credit-card" value="credit-card" name="payment">{{s5 Credit C ard}}</button>
477 </p> 488 </p>
478 489
479 <div id="form-fields"> 490 <div id="form-fields">
480 <p id="form-currency"> 491 <p id="form-currency">
481 <strong>{{s6 Choose your currency}}</strong> 492 <strong>{{s6 Choose your currency}}</strong>
482 493
483 <label> 494 <label>
484 <input checked="checked" name="currency" type="radio" value="USD"> 495 <input checked="checked" name="currency" type="radio" value="USD">
485 $ 496 $
486 </label> 497 </label>
(...skipping 46 matching lines...) Expand 10 before | Expand all | Expand 10 after
533 {{s11 You can receive a refund within 120 days of payment. Please send a n email to <a href="mailto:info@adblockplus.org"><fix>info@adblockplus.org</fix> </a>.}} 544 {{s11 You can receive a refund within 120 days of payment. Please send a n email to <a href="mailto:info@adblockplus.org"><fix>info@adblockplus.org</fix> </a>.}}
534 </div> 545 </div>
535 <div id="recurrent-cancellation"> 546 <div id="recurrent-cancellation">
536 * {{s12 To cancel your monthly payment, click the link below that corres ponds to how you donated:}} 547 * {{s12 To cancel your monthly payment, click the link below that corres ponds to how you donated:}}
537 <ul> 548 <ul>
538 <li><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_manage-paylist " target="_blank">{{s13 I donated with PayPal}}</a></li> 549 <li><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_manage-paylist " target="_blank">{{s13 I donated with PayPal}}</a></li>
539 </ul> 550 </ul>
540 </div> 551 </div>
541 </div> 552 </div>
542 </div> 553 </div>
543 </div> 554 </form>
OLDNEW
« no previous file with comments | « no previous file | static/js/vendor/ie8.js » ('j') | templates/default.tmpl » ('J')

Powered by Google App Engine
This is Rietveld