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

Unified 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.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: pages/donate.html
===================================================================
--- a/pages/donate.html
+++ b/pages/donate.html
@@ -221,14 +221,14 @@
var currencyValue = {
get: function()
{
- return document.querySelector("input[name=currency]:checked").value;
+ return getCheckedCheckbox(document.querySelectorAll("input[name=currency]")).value;
}
};
var priceValue = {
get: function()
{
- var value = document.querySelector("input[name=price]:checked").value;
+ var value = getCheckedCheckbox(document.querySelectorAll("input[name=price]")).value;
if (value == 0)
value = document.getElementById("price-other").value >> 0;
return value;
@@ -239,7 +239,7 @@
},
verify: function()
{
- var selected = document.querySelector("input[name=price]:checked");
+ var selected = getCheckedCheckbox(document.querySelectorAll("input[name=price]"));
if (!selected)
return "Please select an amount";
if (this.get() < this.min())
@@ -391,9 +391,10 @@
}
// To submit a form in Firefox it needs to be part of the DOM
- document.head.appendChild(form);
+ var documentHead = document.getElementsByTagName("head")[0]
+ documentHead.appendChild(form);
form.submit();
- document.head.removeChild(form);
+ documentHead.removeChild(form);
}
function getText(id)
@@ -413,49 +414,80 @@
priceOther.value = minPrice;
}
+ function getCheckedCheckbox(checkboxes)
+ {
+ var checkboxLength = checkboxes.length;
+ while (checkboxLength--)
+ {
+ if (checkboxes[checkboxLength].checked)
+ return checkboxes[checkboxLength];
+ }
+ }
+
function updateCurrency()
{
- var checkbox = document.querySelector("input[name=currency]:checked");
- if (!checkbox)
+ var currencyField = document.getElementById("form-currency");
+ var selectedCurrency = getCheckedCheckbox(
+ currencyField.querySelectorAll("input[name=currency]")
+ );
+ if (!selectedCurrency)
return;
-
- var currencyLabel = checkbox.parentNode[textAttr];
- if (!currencyLabel)
- return;
-
- var elements = document.getElementsByClassName("currency-label");
- for (var i = 0; i < elements.length; i++)
- elements[i][textAttr] = currencyLabel;
+ var currencyLabel = selectedCurrency.parentNode[textAttr];
+ var currencyLabels = document.querySelectorAll(".currency-label");
+ for (var i = 0; i < currencyLabels.length; i++)
+ currencyLabels[i][textAttr] = currencyLabel;
ensureMinPrice();
}
- document.addEventListener("DOMContentLoaded", function()
+ function addEventListenersBySelector(query, event, callback)
+ {
+ query = document.querySelectorAll(query);
+ var queryIndex = query.length;
+ //fallback to attachEvent for IE8
+ var addListenerFunction = typeof document.addEventListener == "function" ?
+ "addEventListener" :
+ "attachEvent";
+ if (addListenerFunction == "attachEvent")
+ event = "on" + event;
+ while (queryIndex--)
+ query[queryIndex][addListenerFunction](event, callback, false);
+ }
+
+ function initializeDonationForm()
{
formValues.name = getText("i18n_name");
+ addEventListenersBySelector("button[name='payment']", "click", onSelectPayment);
+ addEventListenersBySelector("input[name='currency']", "click", updateCurrency);
+ addEventListenersBySelector("#form", "submit", onSubmitDonation);
+ updateCurrency();
+ }
- document.getElementById("payment").addEventListener("click", function(event)
- {
- if (event.target.localName != "button")
- return;
+ function onSelectPayment(event)
+ {
+ if(event.preventDefault)
Thomas Greiner 2016/01/27 17:20:31 Detail: Missing whitespace after `if`.
juliandoucette 2016/01/28 14:02:53 Done.
+ event.preventDefault();
+ else
+ event.returnValue = false;
+ document.getElementById("form").className = (event.target || event.srcElement).className;
+ ensureMinPrice();
+ }
- document.getElementById("form").className = event.target.className;
- ensureMinPrice();
- }, true);
+ function onSubmitDonation(event)
+ {
+ if(event.preventDefault)
+ event.preventDefault();
+ else
+ event.returnValue = false;
+ var provider = providers[document.getElementById("form").className];
+ if (provider)
+ provider();
+ }
- document.getElementById("form-currency").addEventListener("click", function(event)
- {
- if (event.target.localName == "input")
- updateCurrency();
- }, true);
- updateCurrency();
+ if (document.addEventListener)
+ document.addEventListener("DOMContentLoaded", initializeDonationForm);
+ else
+ document.attachEvent("onreadystatechange", initializeDonationForm);
- document.getElementById("donate").addEventListener("click", function(event)
- {
- var provider = providers[document.getElementById("form").className];
- if (provider)
- provider();
- }, false);
- }, false);
})();
// -->
@@ -464,16 +496,16 @@
<span class="hidden" id="i18n_name">{{s1 Adblock Plus Contribution}}</span>
<p>
- {{s2 Adblock Plus is - and will always be - free. Our mission is to provide users with tools that allow them to gain control over their Internet browsing and protect them from unwanted and malicious elements.
+ {{s2 Adblock Plus is - and will always be - free. Our mission is to provide users with tools that allow them to gain control over their Internet browsing and protect them from unwanted and malicious elements.
Your donation directly helps the development of Adblock Plus.}}
</p>
-<div class="paypal" id="form">
- <p id="payment">
+<form class="paypal" id="form">
+ <p id="form-payment">
<strong>{{s3 Select your payment method}}</strong>
- <button class="paypal">{{s4 PayPal}}</button>
- <button class="credit-card">{{s5 Credit Card}}</button>
+ <button class="paypal" value="paypal" name="payment">{{s4 PayPal}}</button>
+ <button class="credit-card" value="credit-card" name="payment">{{s5 Credit Card}}</button>
</p>
<div id="form-fields">
@@ -540,4 +572,4 @@
</div>
</div>
</div>
-</div>
+</form>
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld