From bef9421f42d2bce787db46fa7715ddfb029cd802 Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Thu, 8 Aug 2013 20:26:12 -0700 Subject: [PATCH] Abstract payment js to work in webform context --- CRM/Contribute/Form/Contribution/Main.php | 9 +++++- CRM/Core/Payment/Form.php | 36 +++++++++++------------ css/civicrm.css | 16 +++++----- templates/CRM/Core/BillingBlock.js | 26 ++++++++-------- templates/CRM/common/paymentBlock.tpl | 3 +- 5 files changed, 48 insertions(+), 42 deletions(-) diff --git a/CRM/Contribute/Form/Contribution/Main.php b/CRM/Contribute/Form/Contribution/Main.php index 59d1ebf111..56a0718e72 100644 --- a/CRM/Contribute/Form/Contribution/Main.php +++ b/CRM/Contribute/Form/Contribution/Main.php @@ -34,7 +34,7 @@ */ /** - * This class generates form components for processing a ontribution + * This class generates form components for processing a Contribution * */ class CRM_Contribute_Form_Contribution_Main extends CRM_Contribute_Form_ContributionBase { @@ -1369,6 +1369,13 @@ class CRM_Contribute_Form_Contribution_Main extends CRM_Contribute_Form_Contribu break; } } + if (!$form->_snippet) { + // Add JS to show icons for the accepted credit cards + $creditCardTypes = CRM_Core_Payment_Form::getCreditCardCSSNames(); + CRM_Core_Resources::singleton() + ->addSetting(array('config' => array('creditCardTypes' => $creditCardTypes))) + ->addScriptFile('civicrm', 'templates/CRM/Core/BillingBlock.js'); + } } $form->assign('ppType', $form->_ppType); } diff --git a/CRM/Core/Payment/Form.php b/CRM/Core/Payment/Form.php index 9f61ac2276..0905d3a9c1 100644 --- a/CRM/Core/Payment/Form.php +++ b/CRM/Core/Payment/Form.php @@ -272,24 +272,6 @@ class CRM_Core_Payment_Form { 'state_province' => "billing_state_province_id-{$form->_bltID}", )); CRM_Core_BAO_Address::addStateCountryMap($stateCountryMap); - - // Add JS to show icons for the accepted credit cards - // the credit card pseudo constant results only the CC label, not the key ID - // so we normalize the name to use it as a CSS class. - $creditCardTypes = array(); - foreach (CRM_Contribute_PseudoConstant::creditCard() as $key => $name) { - // Replace anything not css-friendly by an underscore - // Non-latin names will not like this, but so many things are wrong with - // the credit-card type configurations already. - $key = str_replace(' ', '', $key); - $key = preg_replace('/[^a-zA-Z0-9]/', '_', $key); - $key = strtolower($key); - $creditCardTypes[$key] = $name; - } - - CRM_Core_Resources::singleton() - ->addSetting(array('config' => array('creditCardTypes' => $creditCardTypes))) - ->addScriptFile('civicrm', 'templates/CRM/Core/BillingBlock.js', 10, 'billing-block'); } if ($form->_paymentProcessor['billing_mode'] & CRM_Core_Payment::BILLING_MODE_BUTTON) { @@ -303,6 +285,24 @@ class CRM_Core_Payment_Form { } } + /** + * The credit card pseudo constant results only the CC label, not the key ID + * So we normalize the name to use it as a CSS class. + */ + static function getCreditCardCSSNames() { + $creditCardTypes = array(); + foreach (CRM_Contribute_PseudoConstant::creditCard() as $key => $name) { + // Replace anything not css-friendly by an underscore + // Non-latin names will not like this, but so many things are wrong with + // the credit-card type configurations already. + $key = str_replace(' ', '', $key); + $key = preg_replace('/[^a-zA-Z0-9]/', '_', $key); + $key = strtolower($key); + $creditCardTypes[$key] = $name; + } + return $creditCardTypes; + } + /** * Function to add all the direct debit fields * diff --git a/css/civicrm.css b/css/civicrm.css index fe110951b8..6f02a2b94b 100644 --- a/css/civicrm.css +++ b/css/civicrm.css @@ -3962,7 +3962,7 @@ span.crm-status-icon { } /* Styles for credit card payment logos */ -#crm-container .credit_card_type-section .crm-credit_card_type-icons a { +.crm-container .credit_card_type-section .crm-credit_card_type-icons a { display: block; float: left; width: 50px; @@ -3975,31 +3975,31 @@ span.crm-status-icon { border: 1px solid #FFFFFF; } -#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-visa { +.crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-visa { background-position: -50px 0; } -#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-mastercard { +.crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-mastercard { background-position: -100px 0; } -#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-amex { +.crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-amex { background-position: -150px 0; } -#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-discover { +.crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-discover { background-position: -200px 0; } -#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-jcb { +.crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-jcb { background-position: -250px 0; } -#crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-unionpay { +.crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-unionpay { background-position: -300px 0; } -#crm-container .cvv2-icon { +.crm-container .cvv2-icon { display: inline-block; width: 50px; height: 30px; diff --git a/templates/CRM/Core/BillingBlock.js b/templates/CRM/Core/BillingBlock.js index 6b8c23ca6a..c78932b1a3 100644 --- a/templates/CRM/Core/BillingBlock.js +++ b/templates/CRM/Core/BillingBlock.js @@ -1,10 +1,5 @@ // http://civicrm.org/licensing (function($) { - civicrm_billingblock_creditcard_helper(); - - $('#crm-container .credit_card_type-section').on('crmFormLoad', '*', function() { - civicrm_billingblock_creditcard_helper(); - }); /** * Adds the icons of enabled credit cards @@ -18,19 +13,18 @@ $('.crm-credit_card_type-icons').append(html); $('.crm-credit_card_type-icon-' + key).click(function() { - $('#crm-container .credit_card_type-section #credit_card_type').val(val); - $('#crm-container .credit_card_type-section a').css('opacity', 0.25); - $('#crm-container .credit_card_type-section .crm-credit_card_type-icon-' + key).css('opacity', 1); + $('#credit_card_type').val(val); + $('.crm-container .credit_card_type-section a').css('opacity', 0.25); + $('.crm-container .credit_card_type-section .crm-credit_card_type-icon-' + key).css('opacity', 1); return false; }); }); // Hide the CC type field (redundant) - $('#crm-container .credit_card_type-section select#credit_card_type').hide(); - $('#crm-container .credit_card_type-section .label').hide(); + $('#credit_card_type, .label', '.crm-container .credit_card_type-section').hide(); // Select according to the number entered - $('#crm-container input#credit_card_number').change(function() { + $('.crm-container input#credit_card_number').change(function() { var ccnumber = cj(this).val(); // Remove spaces and dashes @@ -38,7 +32,7 @@ cj(this).val(ccnumber); // Semi-hide all images, we will un-hide the right one afterwards - $('#crm-container .credit_card_type-section a').css('opacity', 0.25); + $('.crm-container .credit_card_type-section a').css('opacity', 0.25); $('#credit_card_type').val(''); civicrm_billingblock_set_card_type(ccnumber); @@ -73,10 +67,16 @@ $.each(card_types, function(key, pattern) { if (ccnumber.match('^' + pattern + '$')) { var value = card_values[key]; - $('#crm-container .credit_card_type-section .crm-credit_card_type-icon-' + key).css('opacity', 1); + $('.crm-container .credit_card_type-section .crm-credit_card_type-icon-' + key).css('opacity', 1); $('select#credit_card_type').val(value); return false; } }); } + + civicrm_billingblock_creditcard_helper(); + + $(function() { + $('#billing-payment-block').on('crmFormLoad', civicrm_billingblock_creditcard_helper); + }); })(cj); diff --git a/templates/CRM/common/paymentBlock.tpl b/templates/CRM/common/paymentBlock.tpl index 6d75285acb..b48d75db05 100644 --- a/templates/CRM/common/paymentBlock.tpl +++ b/templates/CRM/common/paymentBlock.tpl @@ -50,13 +50,12 @@ function buildPaymentBlock( type ) { {/if} {literal} - var fname = '#billing-payment-block'; var response = cj.ajax({ url: dataUrl, async: false }).responseText; - cj( fname ).html( response ); + cj('#billing-payment-block').html(response).trigger('crmFormLoad'); } cj( function() { -- 2.25.1