Commit 222fa502 authored by bgm's avatar bgm

Merge credit card icons into one sprint file, and use the term 'icon' instead of 'logo'.

parent a17f1ee6
...@@ -3961,44 +3961,46 @@ span.crm-status-icon { ...@@ -3961,44 +3961,46 @@ span.crm-status-icon {
} }
/* Styles for credit card payment logos (FIXME: replace with sprite?) */ /* Styles for credit card payment logos (FIXME: replace with sprite?) */
#crm-container .credit_card_type-section .crm-credit_card_type-logos .crm-credit_card_type-logo-visa { #crm-container .credit_card_type-section .crm-credit_card_type-icons a {
background: url(../i/cc-visa.png) no-repeat 0 0 transparent; display: block;
float: left;
width: 50px;
height: 30px;
background: url(../i/creditcard-icons.png) no-repeat 0 0 transparent;
text-indent: -20000px;
} }
#crm-container .credit_card_type-section .crm-credit_card_type-logos .crm-credit_card_type-logo-mastercard { #crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-visa {
background: url(../i/cc-mastercard.png) no-repeat 0 0 transparent; background-position: 0 0;
width: 75px;
} }
#crm-container .credit_card_type-section .crm-credit_card_type-logos .crm-credit_card_type-logo-amex { #crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-mastercard {
background: url(../i/cc-amex.png) no-repeat 0 0 transparent; background-position: -75px 0;
} }
#crm-container .credit_card_type-section .crm-credit_card_type-logos .crm-credit_card_type-logo-discover { #crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-amex {
background: url(../i/cc-discover.png) no-repeat 0 0 transparent; background-position: -125px 0;
} }
#crm-container .credit_card_type-section .crm-credit_card_type-logos .crm-credit_card_type-logo-jcb { #crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-discover {
background: url(../i/cc-jcb.png) no-repeat 0 0 transparent; background-position: -175px 0;
} }
#crm-container .credit_card_type-section .crm-credit_card_type-logos a { #crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-jcb {
display: block; background-position: -225px 0;
float: left;
width: 50px;
height: 30px;
text-indent: -20000px;
} }
#crm-container .credit_card_type-section .crm-credit_card_type-logos a.crm-credit_card_type-logo-visa { #crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-unionpay {
width: 90px; background-position: -275px 0;
} }
/* Avoid weird border around the images */ /* Avoid weird border around the images (some themes will add a border around images) */
#crm-container .credit_card_type-section .crm-credit_card_type-logos a, #crm-container .credit_card_type-section .crm-credit_card_type-icons a,
#crm-container .credit_card_type-section .crm-credit_card_type-logos a:link, #crm-container .credit_card_type-section .crm-credit_card_type-icons a:link,
#crm-container .credit_card_type-section .crm-credit_card_type-logos a:hover, #crm-container .credit_card_type-section .crm-credit_card_type-icons a:hover,
#crm-container .credit_card_type-section .crm-credit_card_type-logos a:focus, #crm-container .credit_card_type-section .crm-credit_card_type-icons a:focus,
#crm-container .credit_card_type-section .crm-credit_card_type-logos a:active { #crm-container .credit_card_type-section .crm-credit_card_type-icons a:active {
color: #fff; color: #fff;
} }
...@@ -2,25 +2,25 @@ ...@@ -2,25 +2,25 @@
(function($) { (function($) {
civicrm_billingblock_creditcard_helper(); civicrm_billingblock_creditcard_helper();
$('#crm-container').on('crmFormLoad', '*', function() { $('#crm-container .credit_card_type-section').on('crmFormLoad', '*', function() {
civicrm_billingblock_creditcard_helper(); civicrm_billingblock_creditcard_helper();
}); });
/** /**
* Adds the logos of enabled credit cards * Adds the icons of enabled credit cards
* Handles clicking on a logo. * Handles clicking on a icon.
* Changes the logo depending on the credit card number. * Changes the icon depending on the credit card number.
* Removes spaces and dashes from credit card numbers. * Removes spaces and dashes from credit card numbers.
*/ */
function civicrm_billingblock_creditcard_helper() { function civicrm_billingblock_creditcard_helper() {
$.each(CRM.config.creditCardTypes, function(key, val) { $.each(CRM.config.creditCardTypes, function(key, val) {
var html = '<a href="#" title="' + val + '" class="crm-credit_card_type-logo-' + key + '"><span>' + val + '</span></a>'; var html = '<a href="#" title="' + val + '" class="crm-credit_card_type-icon-' + key + '"><span>' + val + '</span></a>';
$('.crm-credit_card_type-logos').append(html); $('.crm-credit_card_type-icons').append(html);
$('.crm-credit_card_type-logo-' + key).click(function() { $('.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 #credit_card_type').val(val);
$('#crm-container .credit_card_type-section a').css('opacity', 0.25); $('#crm-container .credit_card_type-section a').css('opacity', 0.25);
$('#crm-container .credit_card_type-section .crm-credit_card_type-logo-' + key).css('opacity', 1); $('#crm-container .credit_card_type-section .crm-credit_card_type-icon-' + key).css('opacity', 1);
return false; return false;
}); });
}); });
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
$.each(card_types, function(key, pattern) { $.each(card_types, function(key, pattern) {
if (ccnumber.match('^' + pattern + '$')) { if (ccnumber.match('^' + pattern + '$')) {
var value = card_values[key]; var value = card_values[key];
$('#crm-container .credit_card_type-section .crm-credit_card_type-logo-' + 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); $('select#credit_card_type').val(value);
return false; return false;
} }
......
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
<div class="label">{$form.credit_card_type.label} {$reqMark}</div> <div class="label">{$form.credit_card_type.label} {$reqMark}</div>
<div class="content"> <div class="content">
{$form.credit_card_type.html} {$form.credit_card_type.html}
<div class="crm-credit_card_type-logos"></div> <div class="crm-credit_card_type-icons"></div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>
......
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