Template talk:2011FR/lp-form-countryspecific

Please add all comments about this template and the explanation of this template to the bottom of this page so that we can keep the explanation clean

CSS
This first section contains all the new CSS styling info. Once the layout is set all this should be moved to "lp-layout". 

{ padding: 0.2em 0em; font-weight: normal; }
 * 1) donation-form

{ font-weight: bold; padding-bottom: 1em; }
 * 1) donation-form-title

{ font-size: 100%; padding: 0; }
 * 1) amount-box

{ font-style: italic; font-weight: bold; }
 * 1) amount_table_header

.div_amount_radio { white-space: nowrap; float: left; width: 4.8em; padding-right: 2px; }

.amount-label { width: 3em; }

select#input_currency_code { font-size:70%; width:8em; vertical-align: middle; }

{ border-color: #C0C0C0; border-style: solid; border-width: 1px; color: #999999; width: 3em; font-size: 0.9em; height: 1.0em; vertical-align: middle; }
 * 1) input_amount_other_box

div#card-info-block { font-size: 0.9em; display:table; }

.card-info-row { display:table-row; }

.card-input { border-color: #C0C0C0; border-style: solid; border-width: 1px; color: #999999; font-size: 0.9em; }

.card-input-title { font-size: 1em; padding-bottom: 3px; padding-right: 3px; display:table-cell; width: 60px; }

.card-input-block { padding-bottom: 3px; display:table-cell; }

{ width: 103px; }
 * 1) card_name_first

{ width: 103px; }
 * 1) card_name_last

{ width: 213px; }
 * 1) card_address_street_1

{ width: 112px; }
 * 1) card_address_city

{ width: 52px; vertical-align: middle; font-size: 90%; }
 * 1) card_address_state

{ width: 39px; }
 * 1) card_address_zip

{ width: 213px; }
 * 1) card_email

{ padding-top: 1em; padding-bottom: 1em; }
 * 1) donate-button-block

.donate-button-div { padding-bottom: 3px; }

.donate-button { width: 16em; }

{ text-align:center; }
 * 1) separator-div

JavaScript tool functions
This block of JS contains utility functions such as grabbing info from the URL and converting arrays to objects.  //--- Utility Functions--- function arrayToObject(variable) //This is a helper function: converts an array to object literal with keys // then it can be used for quick "in" tests { var obj = {};

for (var i=0; i<variable.length; i++) {   obj[variable[i]]=''; }

return obj; }

function getQuerystring( key ) // This function to parse the information passed by central notice { key = key.replace( /[\[]/, '\\\[' ).replace( /[\]]/, '\\\]' ); var regex = new RegExp( '[\\?&]' + key + '=([a-zA-Z0-9\_\-]*)' ); var qs = regex.exec( window.location.search ); return qs == null ? '' : qs[1]; }

function getLandingPage //This function returns the path to the landing page. { var path = "  ";

if ( path == "default" ) {   pathArray = window.location.pathname.split( '/' ); return pathArray[2]; } else return path; }

Independent arrays
These arrays are set for all forms and when creating a clone form these should not change.

//--Template Independent Arrays--- var country2currency = { } //This array uses "countryCode" to get the official "currencyCode" for that country.

var currency2country = { } //This array uses "currencyCode" to get the "countryCode" for the country that uses this currency //EXCEPT FOR "USD" and "EUR" those inputs just return themselves.

var currencyPositions = { }; //This array uses "currencyCode" to get the position of the symbol when using that curency. //EXCEPT FOR "EUR"

var euroPositions = { }; //This array uses "languageCode" to get the position of the Euro symbol.

var currencySymbols = { }; //This array uses "currencyCode" to get the symbol of this currency.

var currencyMinimums = { }; //This array uses "currencyCode" to get the minimum allowed donation for this currency.

var acceptedCC = arrayToObject([ ]); //This array uses "currencyCode" to return whether or not this payment type is accepted for this currency. var acceptedPayPal = arrayToObject([ ]); //This array uses "currencyCode" to return whether or not this payment type is accepted for this currency.

var acceptedBankTransfer = arrayToObject([ ]); //This array uses "currencyCode" to return whether or not this payment type is accepted for this currency.

LP dependent arrays
// Calling Template Defined Arrays var currencyTypes = new Array ; //This array sets which currencies are to be made available. //REQUIRES to be passed from "lp-layout"

var currencyDonationAmounts = { }; //This array uses "countryCode" to return the donation options for that country. //REQUIRES to be passed from "lp-layout"

var currencyDisplay = new Array ; //This array determines which of the ten options are to be displayed. //REQUIRES to be passed from "lp-layout"

Varibables
//-Variables var countryCode = getQuerystring ('country'); //This variable stores the current country. if(countryCode == '') countryCode = 'US';

var languageCode = getQuerystring ('language'); //This variable stores the current language. if(languageCode == '') languageCode = 'en';

var currencyCode = country2currency[countryCode]; //This variable stores the current currency. if(typeof(currencyCode) == 'undefined') {   currencyCode = 'USD'; countryCode = 'US'; }

JavaScript body changing functions
This block of JS contains the payment processing, symbol switching code, and option changing code. //- Body functions --- function updateButtons( currency ) //This function determines what buttons are displayed for each currency. { document.getElementById('cc-donate-button').style.display = "none"; document.getElementById('paypal-donate-button').style.display = "none"; document.getElementById('banktransfer-donate-button').style.display = "none"; if ( currency in acceptedCC ) {   //is this template still needed? document.getElementById('cc-donate-button').style.display = " "; } if (currency in acceptedPayPal ) {   //why not this? document.getElementById('paypal-donate-button').style.display = "block"; } if (currency in acceptedBankTransfer ) {   //or this? document.getElementById('banktransfer-donate-button').style.display = "block"; } }

function updateSymbol //This function displays the correct currency symbol based on currency selected and language { $('.amount-label-symbol').remove;

if (typeof(currencySymbols[currency]) == 'undefined') return;

if (currencyPositions[currency] == 'after') {   $('.amount-label').append(' ' + currencySymbols[currency] + ' '); } else if(currencyPositions[currency] == 'euro') {   if(euroPositions[languageCode] == 'before') {     $('.amount-label').prepend(' ' + currencySymbols[currency] + ' '); }   else {     $('.amount-label').append(' ' + currencySymbols[currency] + ' '); } }  else {   $('.amount-label').prepend(' ' + currencySymbols[currency] + ' '); } }

function updateValue //This function updates the asking amounts based on country and currency. { for(i=0; i<10; i++) {   if(typeof(currencyDonationAmounts[countryCode][i]) == 'undefined') {     break; }

if(currencyDisplay[i] != 0) {     document.getElementById("input_amount_" + i).value = currencyDonationAmounts[countryCode][i]; document.getElementById("input_amount_label_" + i).innerHTML = currencyDonationAmounts[countryCode][i]; } } }

function updateMenuChange(temp) //This function manages the updating when the drop down menu changes. { currency = temp; countryCode = currency2country[currency];

updateButtons(currency); updateValue; updateSymbol(currency); resetOtherBox; }

Form processing functions

//--form junk function flagError(elem) { elem.style.borderColor = '#ff0000'; elem.style.color = '#ff0000'; }

function validateForm( form ) //This function checks the validity of the form. {

var error = false;

// Get amount selection var amount = null; for ( var i = 0; i < form.amount.length; i++ ) { if ( form.amount[i].checked ) { amount = form.amount[i].value; } }  if ( form.amountGiven.value != "") { var otherAmount = form.amountGiven.value; otherAmount = otherAmount.replace(/[,.](\d)$/, '\:$10'); otherAmount = otherAmount.replace(/[,.](\d)(\d)$/, '\:$1$2'); otherAmount = otherAmount.replace(/[,.]/g, ''); otherAmount = otherAmount.replace(/:/, '.'); form.amountGiven.value = otherAmount; amount = otherAmount; }

error = true;

// Check amount is a real number error = ( amount == null || isNaN( amount ) || amount.value <= 0 ); // Check amount is at least the minimum if ( typeof( currencyMinimums[currency] ) == 'undefined' ) { currencyMinimums[currency] = 1; } if ( amount < currencyMinimums[currency] || error ) { alert( ' '.replace('$1', currencyMinimums[currency] + ' ' + currency ) ); error = true; } return !error; }

function DefaultSubmit(formfield, Action) //This function manages the submit action of the form. { var keycode; if (window.event) {   keycode = window.event.keyCode; } else if (Action) {   keycode = Action.which; } else return true;

if (keycode == 13) {   if (document.getElementById('cc-donate-button').style.display == "block") {     redirectPayment('cc'); }   else if (document.getElementById('paypal-donate-button').style.display == "block") {     redirectPayment('pp'); }   return false; } else return true; }

function redirectPayment(paymentType) //This function directs the payment to the proper method. { if (paymentType == 'cc') {   var paymentType = 'cc'; var action_url = "https://payments.wikimedia.org/index.php/Special:PayflowProGateway?uselang= \x26masthead=\x26form_name=\x26text_template=\x26language= " ; } if (paymentType == 'pp') {   action_url="http://wikimediafoundation.org/wiki/Special:ContributionTracking/  "; } document.paypalcontribution.action = action_url; document.paypalcontribution.utm_source.value = getQuerystring( 'utm_source' ) + '.' + getLandingPage + '.' + paymentType; if(validateForm(document.paypalcontribution)) {   if(typeof(OWA) !== 'undefined') {     OWATracker.shareStateByPost( document.paypalcontribution ); }   document.paypalcontribution.submit; } }

HTML
This secion has the actual form and HTML.

Form inputs
        

 

 

 <input type="hidden" name="state" value="" /> <input type="hidden" name="zip" value="" /> <input type="hidden" name="country" id="country" value="" />

<input type="hidden" name="email" value="" /> <input type="hidden" name="emailAdd" value="" />

Radio options box code
<script type="text/javascript" language="javascript">

for(i=0; i<10; i++) { if(typeof(currencyDonationAmounts[countryCode][i]) == 'undefined' ) {   break; } //This adds the radio options according to the flags passed to the template. if(currencyDisplay[i] != 0) {   document.getElementById("amount-box").innerHTML += "<div class='div_amount_radio' style='white-space:nowrap;'>" + "<input type='radio' class='input_amount_radio' name='amount' id='input_amount_" + i   + "' onclick='resetOtherBox;'" + "value='" + currencyDonationAmounts[countryCode][i] + "'/><label for='input_amount_" + i + "' class='amount-label' id='input_amount_label_" + i + "'> " + currencyDonationAmounts[countryCode][i] + " "; } }

<input type="radio" name="amount" id="input_amount_other" value="" /><label for="input_amount_other"> <input type="text" class="input-text" name="amountGiven" id="input_amount_other_box" onclick="this.value=''; clearOtherBox;" onfocus="this.form.input_amount_other.checked=true;" onKeyPress="return DefaultSubmit(this,event)" />

Currency select dropdown
<select name="currency_code" id="input_currency_code" size="1" onchange="resetOtherBox; updateMenuChange(this.value);">

<script type="text/javascript" language="javascript"> var opt = document.createElement("option"); opt.selected = true; opt.text = currency + " – " + currencySymbols[currency]; opt.value = currency; document.getElementById("input_currency_code").options.add(opt); // var opt = document.createElement("option"); opt.text = "---"; opt.value = "USD"; document.getElementById("input_currency_code").options.add(opt)

for(i=0; i<currencyTypes.length; i++) {   opt = document.createElement("option"); opt.text = currencyTypes[i] + " – " + currencySymbols[currencyTypes[i]]; opt.value = currencyTypes[i];

document.getElementById("input_currency_code").options.add(opt); }

<input type="button" value=" " class="donate-button" onclick="redirectPayment('cc')"; /> <input type="button" value=" " class="donate-button" onclick="redirectPayment('pp');" /> <input type="button" value=" " class="donate-button" onclick="redirectPayment('bt');" />

    *  *  *

More JavaScript
<script type="text/javascript">

function clearThis(elem,initialString) //This function empties the "Other" Box. { elem.style.color = "#000000"; elem.style.borderColor = '#C0C0C0'

if(elem.value == initialString) elem.value = ""; }

function resetThis(elem,resetString) { if(elem.value == "") {   elem.style.color = "#999999"; elem.value = resetString; } elem.style.borderColor = '#C0C0C0'; }

function recolorThis(elem) { elem.style.color = "#000000"; elem.style.borderColor = '#C0C0C0'; }

function resetOtherBox //This function resets the "Other" Box to the default values. { document.getElementsByName("amountGiven")[0].style.color = "#999999"; document.getElementsByName("amountGiven")[0].value = ""; }

function clearOtherBox //This function empties the "Other" Box. { document.getElementsByName("amountGiven")[0].style.color = "#000000"; document.getElementsByName("amountGiven")[0].value = ""; }

document.paypalcontribution.utm_medium.value = getQuerystring( 'utm_medium' ); document.paypalcontribution.utm_campaign.value = getQuerystring( 'utm_campaign' ); document.paypalcontribution.country.value = getQuerystring ( 'country' ); document.paypalcontribution.referrer.value = document.referrer;

( function( $ ) { $(document).ready(function{ updateButtons(currency); updateValue; updateSymbol(currency); resetOtherBox; }) } )( jQuery );