Skip to content

Commit

Permalink
Merge pull request #85 from jessepollak/toggle-valid-on-input
Browse files Browse the repository at this point in the history 
Toggle valid and invalid classes on input and outpupt
  • Loading branch information
Jesse Pollak committed Jun 30, 2014
2 parents 6a6adf5 + 16b8ba3 commit 717d02d
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 29 deletions.
4 changes: 2 additions & 2 deletions example/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>Card — the better way to collect credit cards</title>
<title>Card &ndash; the better way to collect credit cards</title>
<meta name="viewport" content="initial-scale=1">
<link rel="stylesheet" href="../lib/css/card.css">
</head>
Expand Down
73 changes: 59 additions & 14 deletions lib/js/card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -519,8 +519,6 @@ $.fn.card = function(opts) {
};

Card = (function() {
var validToggler;

Card.prototype.cardTemplate = "<div class=\"card-container\">\n <div class=\"card\">\n <div class=\"front\">\n <div class=\"card-logo visa\">visa</div>\n <div class=\"card-logo mastercard\">MasterCard</div>\n <div class=\"card-logo amex\"></div>\n <div class=\"card-logo discover\">discover</div>\n <div class=\"lower\">\n <div class=\"shiny\"></div>\n <div class=\"cvc display\">{{cvc}}</div>\n <div class=\"number display\">{{number}}</div>\n <div class=\"name display\">{{name}}</div>\n <div class=\"expiry display\" data-before=\"{{monthYear}}\" data-after=\"{{validDate}}\">{{expiry}}</div>\n </div>\n </div>\n <div class=\"back\">\n <div class=\"bar\"></div>\n <div class=\"cvc display\">{{cvc}}</div>\n <div class=\"shiny\"></div>\n </div>\n </div>\n</div>";

Card.prototype.template = function(tpl, data) {
Expand Down Expand Up @@ -556,6 +554,10 @@ Card = (function() {
cvc: '&bull;&bull;&bull;',
expiry: '&bull;&bull;/&bull;&bull;',
name: 'Full Name'
},
classes: {
valid: 'card-valid',
invalid: 'card-invalid'
}
};

Expand Down Expand Up @@ -622,15 +624,15 @@ Card = (function() {
var expiryFilters;
this.$numberInput.bindVal(this.$numberDisplay, {
fill: false,
filters: validToggler('validateCardNumber')
filters: this.validToggler('cardNumber')
}).on('payment.cardType', this.handle('setCardType'));
expiryFilters = [
function(val) {
return val.replace(/(\s+)/g, '');
}
];
if (this.$expiryInput.length === 1) {
expiryFilters.push(validToggler('validateCardExpiry'));
expiryFilters.push(this.validToggler('cardExpiry'));
this.$expiryInput.on('keydown', this.handle('captureTab'));
}
this.$expiryInput.bindVal(this.$expiryDisplay, {
Expand All @@ -643,11 +645,14 @@ Card = (function() {
},
filters: expiryFilters
});
this.$cvcInput.bindVal(this.$cvcDisplay, validToggler('validateCardCVC')).on('focus', this.handle('flipCard')).on('blur', this.handle('flipCard'));
this.$cvcInput.bindVal(this.$cvcDisplay, {
filters: this.validToggler('cardCVC')
}).on('focus', this.handle('flipCard')).on('blur', this.handle('flipCard'));
return this.$nameInput.bindVal(this.$nameDisplay, {
fill: false,
filters: this.validToggler('cardHolderName'),
join: ' '
});
}).on('keydown', this.handle('captureName'));
};

Card.prototype.handleInitialValues = function() {
Expand Down Expand Up @@ -677,13 +682,53 @@ Card = (function() {
})(this);
};

Card.prototype.validToggler = function(validatorName) {
var isValid;
if (validatorName === "cardExpiry") {
isValid = function(val) {
var objVal;
objVal = $.payment.cardExpiryVal(val);
return $.payment.validateCardExpiry(objVal.month, objVal.year);
};
} else if (validatorName === "cardCVC") {
isValid = (function(_this) {
return function(val) {
return $.payment.validateCardCVC(val, _this.cardType);
};
})(this);
} else if (validatorName === "cardNumber") {
isValid = function(val) {
return $.payment.validateCardNumber(val);
};
} else if (validatorName === "cardHolderName") {
isValid = function(val) {
return val !== "";
};
}
return (function(_this) {
return function(val, $in, $out) {
var result;
result = isValid(val);
_this.toggleValidClass($in, result);
_this.toggleValidClass($out, result);
return val;
};
})(this);
};

Card.prototype.toggleValidClass = function(el, test) {
el.toggleClass(this.options.classes.valid, test);
return el.toggleClass(this.options.classes.invalid, !test);
};

Card.prototype.handlers = {
setCardType: function($el, e, cardType) {
if (!this.$card.hasClass(cardType)) {
this.$card.removeClass('unknown');
this.$card.removeClass(this.cardTypes.join(' '));
this.$card.addClass(cardType);
return this.$card.toggleClass('identified', cardType !== 'unknown');
this.$card.toggleClass('identified', cardType !== 'unknown');
return this.cardType = cardType;
}
},
flipCard: function($el, e) {
Expand All @@ -702,6 +747,13 @@ Card = (function() {
if (!$.payment.validateCardExpiry(val.month, val.year)) {
return e.preventDefault();
}
},
captureName: function($el, e) {
var banKeyCodes;
banKeyCodes = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 106, 107, 109, 110, 111, 186, 187, 188, 189, 190, 191, 192, 219, 220, 221, 222];
if (banKeyCodes.indexOf(e.which || e.keyCode) !== -1) {
return e.preventDefault();
}
}
};

Expand Down Expand Up @@ -768,13 +820,6 @@ Card = (function() {
return $el;
};

validToggler = function(validatorName) {
return function(val, $in, $out) {
$out.toggleClass('valid', $.payment[validatorName](val));
return val;
};
};

return Card;

})();
Expand Down
49 changes: 36 additions & 13 deletions src/coffee/card.coffee
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
require 'jquery.payment'
require 'jquery.payment'

$ = jQuery
$.card = {}
Expand All @@ -7,6 +7,7 @@ $.fn.card = (opts) ->
$.card.fn.construct.apply(this, opts)

class Card

cardTemplate: """
<div class="card-container">
<div class="card">
Expand Down Expand Up @@ -67,6 +68,9 @@ class Card
cvc: '&bull;&bull;&bull;'
expiry: '&bull;&bull;/&bull;&bull;'
name: 'Full Name'
classes:
valid: 'card-valid'
invalid: 'card-invalid'

constructor: (el, opts) ->
@options = $.extend(true, {}, @defaults, opts)
Expand Down Expand Up @@ -127,12 +131,12 @@ class Card
@$numberInput
.bindVal @$numberDisplay,
fill: false,
filters: validToggler('validateCardNumber')
filters: @validToggler('cardNumber')
.on 'payment.cardType', @handle('setCardType')

expiryFilters = [(val) -> val.replace /(\s+)/g, '']
if @$expiryInput.length == 1
expiryFilters.push validToggler('validateCardExpiry')
expiryFilters.push @validToggler('cardExpiry')
@$expiryInput.on 'keydown', @handle('captureTab')

@$expiryInput
Expand All @@ -142,14 +146,17 @@ class Card
filters: expiryFilters

@$cvcInput
.bindVal(@$cvcDisplay, validToggler 'validateCardCVC' )
.bindVal @$cvcDisplay,
filters: @validToggler('cardCVC')
.on('focus', @handle('flipCard'))
.on('blur', @handle('flipCard'))

@$nameInput
.bindVal @$nameDisplay,
fill: false
filters: @validToggler('cardHolderName')
join: ' '
.on 'keydown', @handle('captureName')

handleInitialValues: ->
$.each @options.formSelectors, (name, selector) =>
Expand All @@ -168,25 +175,46 @@ class Card
args.unshift $el
@handlers[fn].apply this, args

validToggler: (validatorName) ->
if validatorName == "cardExpiry"
isValid = (val) ->
objVal = $.payment.cardExpiryVal val
$.payment.validateCardExpiry objVal.month, objVal.year
else if validatorName == "cardCVC"
isValid = (val) => $.payment.validateCardCVC val, @cardType
else if validatorName == "cardNumber"
isValid = (val) -> $.payment.validateCardNumber val
else if validatorName == "cardHolderName"
isValid = (val) -> val != ""

(val, $in, $out) =>
result = isValid val
@toggleValidClass $in, result
@toggleValidClass $out, result
val
toggleValidClass: (el, test) ->
el.toggleClass @options.classes.valid, test
el.toggleClass @options.classes.invalid, !test

handlers:
setCardType: ($el, e, cardType) ->
unless @$card.hasClass(cardType)

@$card.removeClass('unknown')
@$card.removeClass(@cardTypes.join(' '))

@$card.addClass(cardType)
@$card.toggleClass('identified', cardType isnt 'unknown')

@cardType = cardType
flipCard: ($el, e) ->
@$card.toggleClass('flipped')

captureTab: ($el, e) ->
keyCode = e.keyCode or e.which
return if keyCode != 9 or e.shiftKey
val = $el.payment('cardExpiryVal')
return unless val.month or val.year
e.preventDefault() if !$.payment.validateCardExpiry(val.month, val.year)
captureName: ($el, e) ->
banKeyCodes = [48,49,50,51,52,53,54,55,56,57,106,107,109,110,111,186,187,188,189,190,191,192,219,220,221,222]
e.preventDefault() if banKeyCodes.indexOf(e.which or e.keyCode) != -1

$.fn.bindVal = (out, opts={}) ->
opts.fill = opts.fill || false
Expand Down Expand Up @@ -227,11 +255,6 @@ class Card

$el

validToggler = (validatorName) ->
return (val, $in, $out) ->
$out.toggleClass('valid', $.payment[validatorName](val))
val

$.fn.extend card: (option, args...) ->
@each ->
$this = $(this)
Expand Down

0 comments on commit 717d02d

Please sign in to comment.