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