Template:2011FR/lp-form-singlecurrency



{ 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; display: none; }

{ 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



//--- 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; }

//--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.

// 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"

//-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'; }

//- Body functions --- function updateButtons //This function determines what buttons are displayed using "currencyCode". { 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 ( currencyCode in acceptedCC ) {   //is  template still needed? document.getElementById('cc-donate-button').style.display = " "; } if (currencyCode in acceptedPayPal ) {   //why not this? document.getElementById('paypal-donate-button').style.display = "block"; } if (currencyCode in acceptedBankTransfer ) {   //or this? document.getElementById('banktransfer-donate-button').style.display = "block"; } }

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

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

if (currencyPositions[currencyCode] == 'after') {   $('.amount-label').append(' ' + currencySymbols[currencyCode] + ' '); } else if(currencyPositions[currencyCode] == 'euro') //The Euro is a special case. It is position depends on language. {   if(euroPositions[languageCode] == 'before') {     $('.amount-label').prepend(' ' + currencySymbols[currencyCode] + ' '); }   else {     $('.amount-label').append(' ' + currencySymbols[currencyCode] + ' '); } }  else {   $('.amount-label').prepend(' ' + currencySymbols[currencyCode] + ' '); } }

function updateValue //This function updates the asking amounts based on "countryCode" { 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. { currencyCode = temp; countryCode = currency2country[currencyCode];

updateButtons; updateValue; updateSymbol; resetOtherBox; }

//--form junk function validateForm( form ) //This function checks the validity of the form. { //the functionality of "error" should be changed so that //the line below is "var error = false;" var error = true;

// 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; } }  //set amount to "other" box if used 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; }

// Check amount is a real number error = ( amount == null || isNaN( amount ) || amount.value <= 0 ); // Check amount is at least the minimum if ( typeof( currencyMinimums[currencyCode] ) == 'undefined' ) { currencyMinimums[currencyCode] = 1; } if ( amount < currencyMinimums[currencyCode] || error ) { // this line should be changed alert( ' '.replace('$1', currencyMinimums[currencyCode] + ' ' + currencyCode ) ); 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= " ; //TESLA TESTING //var action_url = "https://test-payments.tesla.usability.wikimedia.org/index.php/Special:PayflowProGateway?uselang= \x26masthead=\x26form_name=\x26text_template=\x26language=\x26ffname= " ; // Staging //var action_url = "https://payments4.wikimedia.org/index.php/Special:PayflowProGateway?uselang= \x26masthead=\x26form_name=\x26text_template=\x26language=\x26ffname= " ; } if (paymentType == 'pp') {   action_url="https://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; } }



         



//This script auto populates the radio buttons with the right values for the users country

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 += "" + "<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)" />

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

<script type="text/javascript" language="javascript">

//This script fills the currency drop down with the currency options that are enabled //It defaults to the proper currency for the users country

var opt = document.createElement("option"); opt.selected = true; opt.text = currencyCode + " – " + currencySymbols[currencyCode]; opt.value = currencyCode; 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');" />

    *  *  *

<script type="text/javascript">

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 = ""; }

//These commands fill in some of the hidden inputs needed for payment processing document.paypalcontribution.utm_medium.value = getQuerystring( 'utm_medium' ); document.paypalcontribution.utm_campaign.value = getQuerystring( 'utm_campaign' ); //document.paypalcontribution.country.value = countryCode; document.paypalcontribution.referrer.value = document.referrer;

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