Commit 42097141 authored by Aral Balkan's avatar Aral Balkan

Consistency: use custom donation instead of other donation

parent 372c7853
......@@ -76,7 +76,6 @@ input[name="donationAmount"]
}
.patronageForm
{
padding: 10px;
......@@ -220,14 +219,14 @@ input[name="donationAmount"] + label
border: 2px solid #eee;
}
#otherDonationLabel
#customDonationLabel
{
font-size: 16px;
padding-top: 5px;
line-height: 30px;
}
#otherDonationLabel > input
#customDonationLabel > input
{
margin-left: 3px;
margin-right: 3px;
......@@ -252,7 +251,7 @@ input[name="donationAmount"] + label
}
@media only screen and (min-width: 380px) {
#otherDonationLabel > input
#customDonationLabel > input
{
margin-left: 7px;
margin-right: 7px;
......
......@@ -51,7 +51,7 @@
<input type='radio' name='donationAmount' value='50' class='hidden selectButton' id='tier6'><label class='donationTierButtonLabel unselectable' for='tier6'>€50</label>
<input type='radio' name='donationAmount' value='100' class='hidden selectButton' id='tier7'><label class='donationTierButtonLabel unselectable' for='tier7'>€100</label>
<!-- Unfortunately can’t use an input type='number' here because the events are not fired consistently across major browsers. -->
<input type='radio' name='donationAmount' value='-1' class='hidden selectButton' id='tier8'><label class='donationTierButtonLabel unselectable' id='otherDonationLabel' for='tier8'>Other<input id='otherDonationAmount' type='string' pattern='[0-9]{1,6}' title='Custom donation amount'></input></label>
<input type='radio' name='donationAmount' value='-1' class='hidden selectButton' id='tier8'><label class='donationTierButtonLabel unselectable' id='customDonationLabel' for='tier8'>Other<input id='customDonationAmount' type='string' pattern='[0-9]{1,6}' title='Custom donation amount'></input></label>
</fieldset>
<button type='submit' id='submitButton'>Become a patron</button>
......
......@@ -101,8 +101,8 @@ class PatronageForm {
this.interface = {
patronageForm: $('#patronageForm'),
submitButton: $('#submitButton'),
otherDonationAmountTextInput: $('#otherDonationAmount'),
otherDonationAmountRadioButton: $('#tier8'),
customDonationAmountTextInput: $('#customDonationAmount'),
customDonationAmountRadioButton: $('#tier8'),
serverError: $('#serverError'),
errorMessage: $('#errorMessage'),
......@@ -129,10 +129,10 @@ class PatronageForm {
// Ensure that selecting either the button or the text input focuses the custom
// amount control and that focus is not lost when person clicks on already-selected control.
this.interface.otherDonationAmountRadioButton.addEventListener('click', updateFormState)
this.interface.otherDonationAmountTextInput.addEventListener('click', updateFormState)
this.interface.otherDonationAmountTextInput.addEventListener('focus', updateFormState)
this.interface.otherDonationAmountTextInput.addEventListener('input', updateFormState)
this.interface.customDonationAmountRadioButton.addEventListener('click', updateFormState)
this.interface.customDonationAmountTextInput.addEventListener('click', updateFormState)
this.interface.customDonationAmountTextInput.addEventListener('focus', updateFormState)
this.interface.customDonationAmountTextInput.addEventListener('input', updateFormState)
//
// Handle form submit requests.
......@@ -158,31 +158,31 @@ class PatronageForm {
// Handle the label of the submit button based on the type of donation.
this.interface.submitButton.innerHTML = this.isPatronage ? 'Become a patron' : 'Donate'
const otherDonationAmountTextInput = this.interface.otherDonationAmountTextInput
const customDonationAmountTextInput = this.interface.customDonationAmountTextInput
// If the donation amount text input has focus, ensure that the corresponding
// radio button is also selected.
if (otherDonationAmountTextInput === document.activeElement) {
this.interface.otherDonationAmountRadioButton.checked = true
if (customDonationAmountTextInput === document.activeElement) {
this.interface.customDonationAmountRadioButton.checked = true
}
// Handle the state of the custom donation amount control.
if (this.interface.selectedDonationAmountButton().id === 'tier8') {
// Custom donation is active
otherDonationAmountTextInput.style.opacity = 1
otherDonationAmountTextInput.focus()
let otherDonationAmountString = otherDonationAmountTextInput.value
otherDonationAmountString = otherDonationAmountString.slice(0,6) // Limit to six digits.
let otherDonationAmountInteger = parseInt(otherDonationAmountString) // Ensure it is a valid integer.
otherDonationAmountTextInput.value = isNaN(otherDonationAmountInteger) ? '' : otherDonationAmountInteger
customDonationAmountTextInput.style.opacity = 1
customDonationAmountTextInput.focus()
let customDonationAmountString = customDonationAmountTextInput.value
customDonationAmountString = customDonationAmountString.slice(0,6) // Limit to six digits.
let customDonationAmountInteger = parseInt(customDonationAmountString) // Ensure it is a valid integer.
customDonationAmountTextInput.value = isNaN(customDonationAmountInteger) ? '' : customDonationAmountInteger
} else {
// Clear the other donation amount entry if it is not valid and
// it isn’t selected.
if (!this.otherDonationAmountIsValid) {
document.getElementById('otherDonationAmount').value = ''
if (!this.customDonationAmountIsValid) {
this.interface.customDonationAmountTextInput.value = ''
}
// De-emphasize the text input when the control is not in focus.
document.getElementById('otherDonationAmount').style.opacity = 0.5
this.interface.customDonationAmountTextInput.style.opacity = 0.5
}
// Enable/disable the submit button based on whether the form is valid.
......@@ -238,7 +238,7 @@ class PatronageForm {
get customDonationAmount () {
const amount = Number(this.interface.otherDonationAmountTextInput.value)
const amount = Number(this.interface.customDonationAmountTextInput.value)
if (amount > 0) {
return amount
} else {
......@@ -247,8 +247,8 @@ class PatronageForm {
}
get otherDonationAmountIsValid () {
return Number(this.interface.otherDonationAmountTextInput.value) > 0
get customDonationAmountIsValid () {
return Number(this.interface.customDonationAmountTextInput.value) > 0
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment