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: Fixed code style issues, consistency issues, and minor bugs Created Jan. 26, 2016, 4:16 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 | no next file » | no next file with comments »
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 addEventListenersBySelector(query, event, callback)
443 {
444 query = document.querySelectorAll(query);
445 var queryIndex = query.length;
446 //fallback to attachEvent for IE8
447 var addListenerFunction = typeof document.addEventListener == "function" ?
448 "addEventListener" :
449 "attachEvent";
450 if (addListenerFunction == "attachEvent")
451 event = "on" + event;
452 while (queryIndex--)
453 query[queryIndex][addListenerFunction](event, callback, false);
454 }
455
456 function initializeDonationForm()
433 { 457 {
434 formValues.name = getText("i18n_name"); 458 formValues.name = getText("i18n_name");
459 addEventListenersBySelector("button[name='payment']", "click", onSelectPayme nt);
460 addEventListenersBySelector("input[name='currency']", "click", updateCurrenc y);
461 addEventListenersBySelector("#form", "submit", onSubmitDonation);
462 updateCurrency();
463 }
435 464
436 document.getElementById("payment").addEventListener("click", function(event) 465 function onSelectPayment(event)
437 { 466 {
438 if (event.target.localName != "button") 467 if(event.preventDefault)
Thomas Greiner 2016/01/27 17:20:31 Detail: Missing whitespace after `if`.
juliandoucette 2016/01/28 14:02:53 Done.
439 return; 468 event.preventDefault();
469 else
470 event.returnValue = false;
471 document.getElementById("form").className = (event.target || event.srcElemen t).className;
472 ensureMinPrice();
473 }
440 474
441 document.getElementById("form").className = event.target.className; 475 function onSubmitDonation(event)
442 ensureMinPrice(); 476 {
443 }, true); 477 if(event.preventDefault)
478 event.preventDefault();
479 else
480 event.returnValue = false;
481 var provider = providers[document.getElementById("form").className];
482 if (provider)
483 provider();
484 }
444 485
445 document.getElementById("form-currency").addEventListener("click", function( event) 486 if (document.addEventListener)
446 { 487 document.addEventListener("DOMContentLoaded", initializeDonationForm);
447 if (event.target.localName == "input") 488 else
448 updateCurrency(); 489 document.attachEvent("onreadystatechange", initializeDonationForm);
449 }, true);
450 updateCurrency();
451 490
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 })(); 491 })();
460 492
461 // --> 493 // -->
462 </script> 494 </script>
463 </head> 495 </head>
464 <span class="hidden" id="i18n_name">{{s1 Adblock Plus Contribution}}</span> 496 <span class="hidden" id="i18n_name">{{s1 Adblock Plus Contribution}}</span>
465 497
466 <p> 498 <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. 499 {{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.}} 500 Your donation directly helps the development of Adblock Plus.}}
469 </p> 501 </p>
470 502
471 <div class="paypal" id="form"> 503 <form class="paypal" id="form">
472 <p id="payment"> 504 <p id="form-payment">
473 <strong>{{s3 Select your payment method}}</strong> 505 <strong>{{s3 Select your payment method}}</strong>
474 506
475 <button class="paypal">{{s4 PayPal}}</button> 507 <button class="paypal" value="paypal" name="payment">{{s4 PayPal}}</button>
476 <button class="credit-card">{{s5 Credit Card}}</button> 508 <button class="credit-card" value="credit-card" name="payment">{{s5 Credit C ard}}</button>
477 </p> 509 </p>
478 510
479 <div id="form-fields"> 511 <div id="form-fields">
480 <p id="form-currency"> 512 <p id="form-currency">
481 <strong>{{s6 Choose your currency}}</strong> 513 <strong>{{s6 Choose your currency}}</strong>
482 514
483 <label> 515 <label>
484 <input checked="checked" name="currency" type="radio" value="USD"> 516 <input checked="checked" name="currency" type="radio" value="USD">
485 $ 517 $
486 </label> 518 </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>.}} 565 {{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> 566 </div>
535 <div id="recurrent-cancellation"> 567 <div id="recurrent-cancellation">
536 * {{s12 To cancel your monthly payment, click the link below that corres ponds to how you donated:}} 568 * {{s12 To cancel your monthly payment, click the link below that corres ponds to how you donated:}}
537 <ul> 569 <ul>
538 <li><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_manage-paylist " target="_blank">{{s13 I donated with PayPal}}</a></li> 570 <li><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_manage-paylist " target="_blank">{{s13 I donated with PayPal}}</a></li>
539 </ul> 571 </ul>
540 </div> 572 </div>
541 </div> 573 </div>
542 </div> 574 </div>
543 </div> 575 </form>
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld