From 433c598ae1cff52adcd67f8988ebd5b8845dc962 Mon Sep 17 00:00:00 2001 From: Jacques Loubser Date: Wed, 18 Jun 2014 15:22:47 +0200 Subject: [PATCH 1/8] Fix Valid Toggle Fix validToggler() to correctly toggle on Expiry Date. Seems like jquery.payment couldn't work with formatted date, as parsed by val. --- lib/js/card.js | 18 +++++++++++++++--- src/coffee/card.coffee | 18 ++++++++++++++---- 2 files changed, 29 insertions(+), 7 deletions(-) diff --git a/lib/js/card.js b/lib/js/card.js index dc8b6205..51d78f6a 100644 --- a/lib/js/card.js +++ b/lib/js/card.js @@ -521,7 +521,7 @@ $.fn.card = function(opts) { Card = (function() { var validToggler; - Card.prototype.cardTemplate = "
\n
\n
\n \n \n \n \n
\n
\n
••••
\n
•••• •••• •••• ••••
\n
{{fullName}}
\n
••/••
\n
\n
\n
\n
\n
•••
\n
\n
\n
\n
"; + Card.prototype.cardTemplate = "
\n
\n
\n \n \n \n \n
\n
\n
••••
\n
•••• •••• •••• ••••
\n
{{fullName}}
\n
••/••
\n
\n
\n
\n
\n
•••
\n
\n
\n
\n
"; Card.prototype.template = function(tpl, data) { return tpl.replace(/\{\{(.*?)\}\}/g, function(match, key, str) { @@ -760,10 +760,22 @@ Card = (function() { }; validToggler = function(validatorName) { - return function(val, $in, $out) { + if (validatorName === "validateCardExpiry") { + return function(val, $in, $out) { + val = $in.payment('cardExpiryVal'); + $in.toggleClass('valid', $.payment.validateCardExpiry(val.month, val.year)); + return val; + }; + } else if (validatorName === "validateCardNumber") { + return function(val, $in, $out) { + $in.toggleClass('valid', $.payment.validateCardNumber(val)); + return val; + }; + } else { + return function(val, $in, $out) {}; $out.toggleClass('valid', $.payment[validatorName](val)); return val; - }; + } }; return Card; diff --git a/src/coffee/card.coffee b/src/coffee/card.coffee index c8b26356..7d650b7c 100644 --- a/src/coffee/card.coffee +++ b/src/coffee/card.coffee @@ -1,4 +1,4 @@ -require 'jquery.payment' +require 'jquery.payment' $ = jQuery $.card = {} @@ -18,7 +18,7 @@ class Card
••••
-
•••• •••• •••• ••••
+
•••• •••• •••• ••••
{{fullName}}
••/••
@@ -218,7 +218,17 @@ class Card $el validToggler = (validatorName) -> - return (val, $in, $out) -> + if validatorName == "validateCardExpiry" + return (val, $in, $out) -> + val = $in.payment('cardExpiryVal') + $in.toggleClass('valid', $.payment.validateCardExpiry(val.month , val.year)) + val + else if validatorName == "validateCardNumber" + return (val, $in, $out) -> + $in.toggleClass('valid', $.payment.validateCardNumber(val)) + val + else + return (val, $in, $out) -> $out.toggleClass('valid', $.payment[validatorName](val)) val @@ -230,4 +240,4 @@ $.fn.extend card: (option, args...) -> if !data $this.data 'card', (data = new Card(this, option)) if typeof option == 'string' - data[option].apply(data, args) + data[option].apply(data, args) \ No newline at end of file From 819b4991b6180bec9f84af490922145fc7179b6e Mon Sep 17 00:00:00 2001 From: Jacques Loubser Date: Sun, 22 Jun 2014 14:55:29 +0200 Subject: [PATCH 2/8] Add Features & Fixes Added invalid class to validToggler Prefixed valid and invalid with card- Change CVC validation to use Card Type Change remaining bullets to &bull Validate Name and limit inputs to letters only (numbers on numpad still allowed for alt + numpad special chars) --- lib/js/card.js | 44 ++++++++++++++++++++++++++++++++--------- src/coffee/card.coffee | 45 +++++++++++++++++++++++++++++++----------- 2 files changed, 68 insertions(+), 21 deletions(-) diff --git a/lib/js/card.js b/lib/js/card.js index 51d78f6a..27776a5a 100644 --- a/lib/js/card.js +++ b/lib/js/card.js @@ -519,9 +519,9 @@ $.fn.card = function(opts) { }; Card = (function() { - var validToggler; + var banKeyCodes, cvcCardType, validToggler; - Card.prototype.cardTemplate = "
\n
\n
\n \n \n \n \n
\n
\n
••••
\n
•••• •••• •••• ••••
\n
{{fullName}}
\n
••/••
\n
\n
\n
\n
\n
•••
\n
\n
\n
\n
"; + Card.prototype.cardTemplate = "
\n
\n
\n \n \n \n \n
\n
\n
••••
\n
•••• •••• •••• ••••
\n
{{fullName}}
\n
••/••
\n
\n
\n
\n
\n
•••
\n
\n
\n
\n
"; Card.prototype.template = function(tpl, data) { return tpl.replace(/\{\{(.*?)\}\}/g, function(match, key, str) { @@ -634,9 +634,13 @@ 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: validToggler('validateCardCVC') + }).on('focus', this.handle('flipCard')).on('blur', this.handle('flipCard')); return this.$nameInput.bindVal(this.$nameDisplay, { fill: false, + filters: validToggler('validateCardHolder') + }, this.$nameInput.on('keydown', this.handle('captureName')), { join: ' ' }); }; @@ -668,11 +672,16 @@ Card = (function() { })(this); }; + cvcCardType = ""; + + 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]; + Card.prototype.handlers = { setCardType: function($el, e, cardType) { if (!this.$card.hasClass(cardType)) { this.$card.removeClass('unknown'); this.$card.removeClass(this.cardTypes.join(' ')); + cvcCardType = cardType; this.$card.addClass(cardType); return this.$card.toggleClass('identified', cardType !== 'unknown'); } @@ -693,6 +702,11 @@ Card = (function() { if (!$.payment.validateCardExpiry(val.month, val.year)) { return e.preventDefault(); } + }, + captureName: function($el, e) { + if (banKeyCodes.indexOf(e.which) !== -1) { + return e.preventDefault(); + } } }; @@ -762,19 +776,31 @@ Card = (function() { validToggler = function(validatorName) { if (validatorName === "validateCardExpiry") { return function(val, $in, $out) { + var format; + format = val; val = $in.payment('cardExpiryVal'); - $in.toggleClass('valid', $.payment.validateCardExpiry(val.month, val.year)); + $in.toggleClass('card-valid', $.payment.validateCardExpiry(val.month, val.year)); + $in.toggleClass('card-invalid', !$.payment.validateCardExpiry(val.month, val.year)); + return format; + }; + } else if (validatorName === "validateCardCVC") { + return function(val, $in, $out) { + $in.toggleClass('card-valid', $.payment.validateCardCVC(val, cvcCardType)); + $in.toggleClass('card-invalid', !$.payment.validateCardCVC(val, cvcCardType)); return val; }; } else if (validatorName === "validateCardNumber") { return function(val, $in, $out) { - $in.toggleClass('valid', $.payment.validateCardNumber(val)); + $in.toggleClass('card-valid', $.payment.validateCardNumber(val)); + $in.toggleClass('card-invalid', !$.payment.validateCardNumber(val)); + return val; + }; + } else if (validatorName === "validateCardHolder") { + return function(val, $in, $out) { + $in.toggleClass('card-valid', val !== ""); + $in.toggleClass('card-invalid', val === ""); return val; }; - } else { - return function(val, $in, $out) {}; - $out.toggleClass('valid', $.payment[validatorName](val)); - return val; } }; diff --git a/src/coffee/card.coffee b/src/coffee/card.coffee index 7d650b7c..c738dd7a 100644 --- a/src/coffee/card.coffee +++ b/src/coffee/card.coffee @@ -7,6 +7,7 @@ $.fn.card = (opts) -> $.card.fn.construct.apply(this, opts) class Card + cardTemplate: """
@@ -20,12 +21,12 @@ class Card
••••
•••• •••• •••• ••••
{{fullName}}
-
••/••
+
••/••
-
•••
+
•••
@@ -67,7 +68,6 @@ class Card constructor: (el, opts) -> @options = $.extend({}, @defaults, opts) $.extend @options.messages, $.card.messages - @$el = $(el) unless @options.container @@ -75,7 +75,6 @@ class Card return @$container = $(@options.container) - @render() @attachHandlers() @handleInitialValues() @@ -132,13 +131,18 @@ class Card filters: expiryFilters @$cvcInput - .bindVal(@$cvcDisplay, validToggler 'validateCardCVC' ) + .bindVal @$cvcDisplay, + filters: validToggler( 'validateCardCVC' ) .on('focus', @handle('flipCard')) .on('blur', @handle('flipCard')) + + @$nameInput .bindVal @$nameDisplay, - fill: false + fill:false + filters: validToggler('validateCardHolder') + @$nameInput.on 'keydown', @handle('captureName') join: ' ' handleInitialValues: -> @@ -157,6 +161,9 @@ class Card args = Array.prototype.slice.call arguments args.unshift $el @handlers[fn].apply this, args + + cvcCardType = "" + 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] handlers: setCardType: ($el, e, cardType) -> @@ -164,7 +171,7 @@ class Card @$card.removeClass('unknown') @$card.removeClass(@cardTypes.join(' ')) - + cvcCardType = cardType @$card.addClass(cardType) @$card.toggleClass('identified', cardType isnt 'unknown') @@ -178,6 +185,11 @@ class Card return unless val.month or val.year e.preventDefault() if !$.payment.validateCardExpiry(val.month, val.year) + + captureName: ($el, e) -> + e.preventDefault() if banKeyCodes.indexOf(e.which) != -1 + + $.fn.bindVal = (out, opts={}) -> opts.fill = opts.fill || false opts.filters = opts.filters || [] @@ -220,17 +232,26 @@ class Card validToggler = (validatorName) -> if validatorName == "validateCardExpiry" return (val, $in, $out) -> + format = val val = $in.payment('cardExpiryVal') - $in.toggleClass('valid', $.payment.validateCardExpiry(val.month , val.year)) + $in.toggleClass('card-valid', $.payment.validateCardExpiry(val.month , val.year)) + $in.toggleClass('card-invalid', !$.payment.validateCardExpiry(val.month , val.year)) + format + else if validatorName == "validateCardCVC" + return (val, $in, $out) -> + $in.toggleClass('card-valid', $.payment.validateCardCVC(val,cvcCardType)) + $in.toggleClass('card-invalid', !$.payment.validateCardCVC(val,cvcCardType)) val else if validatorName == "validateCardNumber" return (val, $in, $out) -> - $in.toggleClass('valid', $.payment.validateCardNumber(val)) + $in.toggleClass('card-valid', $.payment.validateCardNumber(val)) + $in.toggleClass('card-invalid', !$.payment.validateCardNumber(val)) val - else + else if validatorName == "validateCardHolder" return (val, $in, $out) -> - $out.toggleClass('valid', $.payment[validatorName](val)) - val + $in.toggleClass('card-valid', val!="") + $in.toggleClass('card-invalid', val=="") + val $.fn.extend card: (option, args...) -> @each -> From 4ff44e3d56b4ddcbc0a3dd3495c7daf7502c4ccf Mon Sep 17 00:00:00 2001 From: Jacques Loubser Date: Sun, 22 Jun 2014 15:02:28 +0200 Subject: [PATCH 3/8] Revert "Add Features & Fixes" This reverts commit 819b4991b6180bec9f84af490922145fc7179b6e. --- lib/js/card.js | 44 +++++++++-------------------------------- src/coffee/card.coffee | 45 +++++++++++------------------------------- 2 files changed, 21 insertions(+), 68 deletions(-) diff --git a/lib/js/card.js b/lib/js/card.js index 27776a5a..51d78f6a 100644 --- a/lib/js/card.js +++ b/lib/js/card.js @@ -519,9 +519,9 @@ $.fn.card = function(opts) { }; Card = (function() { - var banKeyCodes, cvcCardType, validToggler; + var validToggler; - Card.prototype.cardTemplate = "
\n
\n
\n \n \n \n \n
\n
\n
••••
\n
•••• •••• •••• ••••
\n
{{fullName}}
\n
••/••
\n
\n
\n
\n
\n
•••
\n
\n
\n
\n
"; + Card.prototype.cardTemplate = "
\n
\n
\n \n \n \n \n
\n
\n
••••
\n
•••• •••• •••• ••••
\n
{{fullName}}
\n
••/••
\n
\n
\n
\n
\n
•••
\n
\n
\n
\n
"; Card.prototype.template = function(tpl, data) { return tpl.replace(/\{\{(.*?)\}\}/g, function(match, key, str) { @@ -634,13 +634,9 @@ Card = (function() { }, filters: expiryFilters }); - this.$cvcInput.bindVal(this.$cvcDisplay, { - filters: validToggler('validateCardCVC') - }).on('focus', this.handle('flipCard')).on('blur', this.handle('flipCard')); + this.$cvcInput.bindVal(this.$cvcDisplay, validToggler('validateCardCVC')).on('focus', this.handle('flipCard')).on('blur', this.handle('flipCard')); return this.$nameInput.bindVal(this.$nameDisplay, { fill: false, - filters: validToggler('validateCardHolder') - }, this.$nameInput.on('keydown', this.handle('captureName')), { join: ' ' }); }; @@ -672,16 +668,11 @@ Card = (function() { })(this); }; - cvcCardType = ""; - - 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]; - Card.prototype.handlers = { setCardType: function($el, e, cardType) { if (!this.$card.hasClass(cardType)) { this.$card.removeClass('unknown'); this.$card.removeClass(this.cardTypes.join(' ')); - cvcCardType = cardType; this.$card.addClass(cardType); return this.$card.toggleClass('identified', cardType !== 'unknown'); } @@ -702,11 +693,6 @@ Card = (function() { if (!$.payment.validateCardExpiry(val.month, val.year)) { return e.preventDefault(); } - }, - captureName: function($el, e) { - if (banKeyCodes.indexOf(e.which) !== -1) { - return e.preventDefault(); - } } }; @@ -776,31 +762,19 @@ Card = (function() { validToggler = function(validatorName) { if (validatorName === "validateCardExpiry") { return function(val, $in, $out) { - var format; - format = val; val = $in.payment('cardExpiryVal'); - $in.toggleClass('card-valid', $.payment.validateCardExpiry(val.month, val.year)); - $in.toggleClass('card-invalid', !$.payment.validateCardExpiry(val.month, val.year)); - return format; - }; - } else if (validatorName === "validateCardCVC") { - return function(val, $in, $out) { - $in.toggleClass('card-valid', $.payment.validateCardCVC(val, cvcCardType)); - $in.toggleClass('card-invalid', !$.payment.validateCardCVC(val, cvcCardType)); + $in.toggleClass('valid', $.payment.validateCardExpiry(val.month, val.year)); return val; }; } else if (validatorName === "validateCardNumber") { return function(val, $in, $out) { - $in.toggleClass('card-valid', $.payment.validateCardNumber(val)); - $in.toggleClass('card-invalid', !$.payment.validateCardNumber(val)); - return val; - }; - } else if (validatorName === "validateCardHolder") { - return function(val, $in, $out) { - $in.toggleClass('card-valid', val !== ""); - $in.toggleClass('card-invalid', val === ""); + $in.toggleClass('valid', $.payment.validateCardNumber(val)); return val; }; + } else { + return function(val, $in, $out) {}; + $out.toggleClass('valid', $.payment[validatorName](val)); + return val; } }; diff --git a/src/coffee/card.coffee b/src/coffee/card.coffee index c738dd7a..7d650b7c 100644 --- a/src/coffee/card.coffee +++ b/src/coffee/card.coffee @@ -7,7 +7,6 @@ $.fn.card = (opts) -> $.card.fn.construct.apply(this, opts) class Card - cardTemplate: """
@@ -21,12 +20,12 @@ class Card
••••
•••• •••• •••• ••••
{{fullName}}
-
••/••
+
••/••
-
•••
+
•••
@@ -68,6 +67,7 @@ class Card constructor: (el, opts) -> @options = $.extend({}, @defaults, opts) $.extend @options.messages, $.card.messages + @$el = $(el) unless @options.container @@ -75,6 +75,7 @@ class Card return @$container = $(@options.container) + @render() @attachHandlers() @handleInitialValues() @@ -131,18 +132,13 @@ class Card filters: expiryFilters @$cvcInput - .bindVal @$cvcDisplay, - filters: validToggler( 'validateCardCVC' ) + .bindVal(@$cvcDisplay, validToggler 'validateCardCVC' ) .on('focus', @handle('flipCard')) .on('blur', @handle('flipCard')) - - @$nameInput .bindVal @$nameDisplay, - fill:false - filters: validToggler('validateCardHolder') - @$nameInput.on 'keydown', @handle('captureName') + fill: false join: ' ' handleInitialValues: -> @@ -161,9 +157,6 @@ class Card args = Array.prototype.slice.call arguments args.unshift $el @handlers[fn].apply this, args - - cvcCardType = "" - 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] handlers: setCardType: ($el, e, cardType) -> @@ -171,7 +164,7 @@ class Card @$card.removeClass('unknown') @$card.removeClass(@cardTypes.join(' ')) - cvcCardType = cardType + @$card.addClass(cardType) @$card.toggleClass('identified', cardType isnt 'unknown') @@ -185,11 +178,6 @@ class Card return unless val.month or val.year e.preventDefault() if !$.payment.validateCardExpiry(val.month, val.year) - - captureName: ($el, e) -> - e.preventDefault() if banKeyCodes.indexOf(e.which) != -1 - - $.fn.bindVal = (out, opts={}) -> opts.fill = opts.fill || false opts.filters = opts.filters || [] @@ -232,26 +220,17 @@ class Card validToggler = (validatorName) -> if validatorName == "validateCardExpiry" return (val, $in, $out) -> - format = val val = $in.payment('cardExpiryVal') - $in.toggleClass('card-valid', $.payment.validateCardExpiry(val.month , val.year)) - $in.toggleClass('card-invalid', !$.payment.validateCardExpiry(val.month , val.year)) - format - else if validatorName == "validateCardCVC" - return (val, $in, $out) -> - $in.toggleClass('card-valid', $.payment.validateCardCVC(val,cvcCardType)) - $in.toggleClass('card-invalid', !$.payment.validateCardCVC(val,cvcCardType)) + $in.toggleClass('valid', $.payment.validateCardExpiry(val.month , val.year)) val else if validatorName == "validateCardNumber" return (val, $in, $out) -> - $in.toggleClass('card-valid', $.payment.validateCardNumber(val)) - $in.toggleClass('card-invalid', !$.payment.validateCardNumber(val)) + $in.toggleClass('valid', $.payment.validateCardNumber(val)) val - else if validatorName == "validateCardHolder" + else return (val, $in, $out) -> - $in.toggleClass('card-valid', val!="") - $in.toggleClass('card-invalid', val=="") - val + $out.toggleClass('valid', $.payment[validatorName](val)) + val $.fn.extend card: (option, args...) -> @each -> From 07ec8620bec749cce480f53e15f0197eea39c81c Mon Sep 17 00:00:00 2001 From: Jacques Loubser Date: Sun, 22 Jun 2014 15:02:35 +0200 Subject: [PATCH 4/8] Revert "Fix Valid Toggle" This reverts commit 433c598ae1cff52adcd67f8988ebd5b8845dc962. --- lib/js/card.js | 18 +++--------------- src/coffee/card.coffee | 18 ++++-------------- 2 files changed, 7 insertions(+), 29 deletions(-) diff --git a/lib/js/card.js b/lib/js/card.js index 51d78f6a..dc8b6205 100644 --- a/lib/js/card.js +++ b/lib/js/card.js @@ -521,7 +521,7 @@ $.fn.card = function(opts) { Card = (function() { var validToggler; - Card.prototype.cardTemplate = "
\n
\n
\n \n \n \n \n
\n
\n
••••
\n
•••• •••• •••• ••••
\n
{{fullName}}
\n
••/••
\n
\n
\n
\n
\n
•••
\n
\n
\n
\n
"; + Card.prototype.cardTemplate = "
\n
\n
\n \n \n \n \n
\n
\n
••••
\n
•••• •••• •••• ••••
\n
{{fullName}}
\n
••/••
\n
\n
\n
\n
\n
•••
\n
\n
\n
\n
"; Card.prototype.template = function(tpl, data) { return tpl.replace(/\{\{(.*?)\}\}/g, function(match, key, str) { @@ -760,22 +760,10 @@ Card = (function() { }; validToggler = function(validatorName) { - if (validatorName === "validateCardExpiry") { - return function(val, $in, $out) { - val = $in.payment('cardExpiryVal'); - $in.toggleClass('valid', $.payment.validateCardExpiry(val.month, val.year)); - return val; - }; - } else if (validatorName === "validateCardNumber") { - return function(val, $in, $out) { - $in.toggleClass('valid', $.payment.validateCardNumber(val)); - return val; - }; - } else { - return function(val, $in, $out) {}; + return function(val, $in, $out) { $out.toggleClass('valid', $.payment[validatorName](val)); return val; - } + }; }; return Card; diff --git a/src/coffee/card.coffee b/src/coffee/card.coffee index 7d650b7c..c8b26356 100644 --- a/src/coffee/card.coffee +++ b/src/coffee/card.coffee @@ -1,4 +1,4 @@ -require 'jquery.payment' +require 'jquery.payment' $ = jQuery $.card = {} @@ -18,7 +18,7 @@ class Card
••••
-
•••• •••• •••• ••••
+
•••• •••• •••• ••••
{{fullName}}
••/••
@@ -218,17 +218,7 @@ class Card $el validToggler = (validatorName) -> - if validatorName == "validateCardExpiry" - return (val, $in, $out) -> - val = $in.payment('cardExpiryVal') - $in.toggleClass('valid', $.payment.validateCardExpiry(val.month , val.year)) - val - else if validatorName == "validateCardNumber" - return (val, $in, $out) -> - $in.toggleClass('valid', $.payment.validateCardNumber(val)) - val - else - return (val, $in, $out) -> + return (val, $in, $out) -> $out.toggleClass('valid', $.payment[validatorName](val)) val @@ -240,4 +230,4 @@ $.fn.extend card: (option, args...) -> if !data $this.data 'card', (data = new Card(this, option)) if typeof option == 'string' - data[option].apply(data, args) \ No newline at end of file + data[option].apply(data, args) From 9e6f1bf11a88bee8cd1aa791fcf2135d4b6a0f0e Mon Sep 17 00:00:00 2001 From: Jacques Loubser Date: Sun, 22 Jun 2014 15:05:27 +0200 Subject: [PATCH 5/8] Add Features & Fixes Added invalid class to validToggler Prefixed valid and invalid with card- Change CVC validation to use Card Type Change remaining bullets to &bull Validate Name and limit inputs to letters only (numbers on numpad still allowed for alt + numpad special chars) --- lib/js/card.js | 52 ++++++++++++++++++++++++++++++++------ src/coffee/card.coffee | 57 ++++++++++++++++++++++++++++++++---------- 2 files changed, 89 insertions(+), 20 deletions(-) diff --git a/lib/js/card.js b/lib/js/card.js index dc8b6205..27776a5a 100644 --- a/lib/js/card.js +++ b/lib/js/card.js @@ -519,9 +519,9 @@ $.fn.card = function(opts) { }; Card = (function() { - var validToggler; + var banKeyCodes, cvcCardType, validToggler; - Card.prototype.cardTemplate = "
\n
\n
\n \n \n \n \n
\n
\n
••••
\n
•••• •••• •••• ••••
\n
{{fullName}}
\n
••/••
\n
\n
\n
\n
\n
•••
\n
\n
\n
\n
"; + Card.prototype.cardTemplate = "
\n
\n
\n \n \n \n \n
\n
\n
••••
\n
•••• •••• •••• ••••
\n
{{fullName}}
\n
••/••
\n
\n
\n
\n
\n
•••
\n
\n
\n
\n
"; Card.prototype.template = function(tpl, data) { return tpl.replace(/\{\{(.*?)\}\}/g, function(match, key, str) { @@ -634,9 +634,13 @@ 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: validToggler('validateCardCVC') + }).on('focus', this.handle('flipCard')).on('blur', this.handle('flipCard')); return this.$nameInput.bindVal(this.$nameDisplay, { fill: false, + filters: validToggler('validateCardHolder') + }, this.$nameInput.on('keydown', this.handle('captureName')), { join: ' ' }); }; @@ -668,11 +672,16 @@ Card = (function() { })(this); }; + cvcCardType = ""; + + 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]; + Card.prototype.handlers = { setCardType: function($el, e, cardType) { if (!this.$card.hasClass(cardType)) { this.$card.removeClass('unknown'); this.$card.removeClass(this.cardTypes.join(' ')); + cvcCardType = cardType; this.$card.addClass(cardType); return this.$card.toggleClass('identified', cardType !== 'unknown'); } @@ -693,6 +702,11 @@ Card = (function() { if (!$.payment.validateCardExpiry(val.month, val.year)) { return e.preventDefault(); } + }, + captureName: function($el, e) { + if (banKeyCodes.indexOf(e.which) !== -1) { + return e.preventDefault(); + } } }; @@ -760,10 +774,34 @@ Card = (function() { }; validToggler = function(validatorName) { - return function(val, $in, $out) { - $out.toggleClass('valid', $.payment[validatorName](val)); - return val; - }; + if (validatorName === "validateCardExpiry") { + return function(val, $in, $out) { + var format; + format = val; + val = $in.payment('cardExpiryVal'); + $in.toggleClass('card-valid', $.payment.validateCardExpiry(val.month, val.year)); + $in.toggleClass('card-invalid', !$.payment.validateCardExpiry(val.month, val.year)); + return format; + }; + } else if (validatorName === "validateCardCVC") { + return function(val, $in, $out) { + $in.toggleClass('card-valid', $.payment.validateCardCVC(val, cvcCardType)); + $in.toggleClass('card-invalid', !$.payment.validateCardCVC(val, cvcCardType)); + return val; + }; + } else if (validatorName === "validateCardNumber") { + return function(val, $in, $out) { + $in.toggleClass('card-valid', $.payment.validateCardNumber(val)); + $in.toggleClass('card-invalid', !$.payment.validateCardNumber(val)); + return val; + }; + } else if (validatorName === "validateCardHolder") { + return function(val, $in, $out) { + $in.toggleClass('card-valid', val !== ""); + $in.toggleClass('card-invalid', val === ""); + return val; + }; + } }; return Card; diff --git a/src/coffee/card.coffee b/src/coffee/card.coffee index c8b26356..c738dd7a 100644 --- a/src/coffee/card.coffee +++ b/src/coffee/card.coffee @@ -1,4 +1,4 @@ -require 'jquery.payment' +require 'jquery.payment' $ = jQuery $.card = {} @@ -7,6 +7,7 @@ $.fn.card = (opts) -> $.card.fn.construct.apply(this, opts) class Card + cardTemplate: """
@@ -18,14 +19,14 @@ class Card
••••
-
•••• •••• •••• ••••
+
•••• •••• •••• ••••
{{fullName}}
-
••/••
+
••/••
-
•••
+
•••
@@ -67,7 +68,6 @@ class Card constructor: (el, opts) -> @options = $.extend({}, @defaults, opts) $.extend @options.messages, $.card.messages - @$el = $(el) unless @options.container @@ -75,7 +75,6 @@ class Card return @$container = $(@options.container) - @render() @attachHandlers() @handleInitialValues() @@ -132,13 +131,18 @@ class Card filters: expiryFilters @$cvcInput - .bindVal(@$cvcDisplay, validToggler 'validateCardCVC' ) + .bindVal @$cvcDisplay, + filters: validToggler( 'validateCardCVC' ) .on('focus', @handle('flipCard')) .on('blur', @handle('flipCard')) + + @$nameInput .bindVal @$nameDisplay, - fill: false + fill:false + filters: validToggler('validateCardHolder') + @$nameInput.on 'keydown', @handle('captureName') join: ' ' handleInitialValues: -> @@ -157,6 +161,9 @@ class Card args = Array.prototype.slice.call arguments args.unshift $el @handlers[fn].apply this, args + + cvcCardType = "" + 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] handlers: setCardType: ($el, e, cardType) -> @@ -164,7 +171,7 @@ class Card @$card.removeClass('unknown') @$card.removeClass(@cardTypes.join(' ')) - + cvcCardType = cardType @$card.addClass(cardType) @$card.toggleClass('identified', cardType isnt 'unknown') @@ -178,6 +185,11 @@ class Card return unless val.month or val.year e.preventDefault() if !$.payment.validateCardExpiry(val.month, val.year) + + captureName: ($el, e) -> + e.preventDefault() if banKeyCodes.indexOf(e.which) != -1 + + $.fn.bindVal = (out, opts={}) -> opts.fill = opts.fill || false opts.filters = opts.filters || [] @@ -218,9 +230,28 @@ class Card $el validToggler = (validatorName) -> - return (val, $in, $out) -> - $out.toggleClass('valid', $.payment[validatorName](val)) - val + if validatorName == "validateCardExpiry" + return (val, $in, $out) -> + format = val + val = $in.payment('cardExpiryVal') + $in.toggleClass('card-valid', $.payment.validateCardExpiry(val.month , val.year)) + $in.toggleClass('card-invalid', !$.payment.validateCardExpiry(val.month , val.year)) + format + else if validatorName == "validateCardCVC" + return (val, $in, $out) -> + $in.toggleClass('card-valid', $.payment.validateCardCVC(val,cvcCardType)) + $in.toggleClass('card-invalid', !$.payment.validateCardCVC(val,cvcCardType)) + val + else if validatorName == "validateCardNumber" + return (val, $in, $out) -> + $in.toggleClass('card-valid', $.payment.validateCardNumber(val)) + $in.toggleClass('card-invalid', !$.payment.validateCardNumber(val)) + val + else if validatorName == "validateCardHolder" + return (val, $in, $out) -> + $in.toggleClass('card-valid', val!="") + $in.toggleClass('card-invalid', val=="") + val $.fn.extend card: (option, args...) -> @each -> @@ -230,4 +261,4 @@ $.fn.extend card: (option, args...) -> if !data $this.data 'card', (data = new Card(this, option)) if typeof option == 'string' - data[option].apply(data, args) + data[option].apply(data, args) \ No newline at end of file From b3d67efd38f429473b33a08f593ec0cec31264ac Mon Sep 17 00:00:00 2001 From: Jacques Loubser Date: Tue, 24 Jun 2014 20:17:11 +0200 Subject: [PATCH 6/8] Cleaned Up PR Cleaned up validToggler() and fixed PR problems --- lib/js/card.js | 40 +++++++++++++++++++++------------------- src/coffee/card.coffee | 37 +++++++++++++++++-------------------- 2 files changed, 38 insertions(+), 39 deletions(-) diff --git a/lib/js/card.js b/lib/js/card.js index 27776a5a..991faea1 100644 --- a/lib/js/card.js +++ b/lib/js/card.js @@ -519,7 +519,7 @@ $.fn.card = function(opts) { }; Card = (function() { - var banKeyCodes, cvcCardType, validToggler; + var toggleValidClass, validToggler; Card.prototype.cardTemplate = "
\n
\n
\n \n \n \n \n
\n
\n
••••
\n
•••• •••• •••• ••••
\n
{{fullName}}
\n
••/••
\n
\n
\n
\n
\n
•••
\n
\n
\n
\n
"; @@ -637,12 +637,13 @@ Card = (function() { this.$cvcInput.bindVal(this.$cvcDisplay, { filters: validToggler('validateCardCVC') }).on('focus', this.handle('flipCard')).on('blur', this.handle('flipCard')); - return this.$nameInput.bindVal(this.$nameDisplay, { + this.$nameInput.bindVal(this.$nameDisplay, { fill: false, filters: validToggler('validateCardHolder') - }, this.$nameInput.on('keydown', this.handle('captureName')), { + }).on('keydown', this.handle('captureName')); + return { join: ' ' - }); + }; }; Card.prototype.handleInitialValues = function() { @@ -672,16 +673,13 @@ Card = (function() { })(this); }; - cvcCardType = ""; - - 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]; - Card.prototype.handlers = { setCardType: function($el, e, cardType) { if (!this.$card.hasClass(cardType)) { this.$card.removeClass('unknown'); this.$card.removeClass(this.cardTypes.join(' ')); - cvcCardType = cardType; + $el.data("cardType", cardType); + this.$cvcInput.data("cardType", cardType); this.$card.addClass(cardType); return this.$card.toggleClass('identified', cardType !== 'unknown'); } @@ -691,11 +689,11 @@ Card = (function() { }, captureTab: function($el, e) { var keyCode, val; + val = $el.payment('cardExpiryVal'); keyCode = e.keyCode || e.which; if (keyCode !== 9 || e.shiftKey) { return; } - val = $el.payment('cardExpiryVal'); if (!(val.month || val.year)) { return; } @@ -704,7 +702,9 @@ Card = (function() { } }, captureName: function($el, e) { - if (banKeyCodes.indexOf(e.which) !== -1) { + 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(); } } @@ -779,31 +779,33 @@ Card = (function() { var format; format = val; val = $in.payment('cardExpiryVal'); - $in.toggleClass('card-valid', $.payment.validateCardExpiry(val.month, val.year)); - $in.toggleClass('card-invalid', !$.payment.validateCardExpiry(val.month, val.year)); + toggleValidClass($in, $.payment.validateCardExpiry(val.month, val.year)); + $in.data("expiryDate", val); return format; }; } else if (validatorName === "validateCardCVC") { return function(val, $in, $out) { - $in.toggleClass('card-valid', $.payment.validateCardCVC(val, cvcCardType)); - $in.toggleClass('card-invalid', !$.payment.validateCardCVC(val, cvcCardType)); + toggleValidClass($in, $.payment.validateCardCVC(val, $in.data("cardType"))); return val; }; } else if (validatorName === "validateCardNumber") { return function(val, $in, $out) { - $in.toggleClass('card-valid', $.payment.validateCardNumber(val)); - $in.toggleClass('card-invalid', !$.payment.validateCardNumber(val)); + toggleValidClass($in, $.payment.validateCardNumber(val)); return val; }; } else if (validatorName === "validateCardHolder") { return function(val, $in, $out) { - $in.toggleClass('card-valid', val !== ""); - $in.toggleClass('card-invalid', val === ""); + toggleValidClass($in, val !== ""); return val; }; } }; + toggleValidClass = function(ele, test) { + ele.toggleClass('card-valid', test); + return ele.toggleClass('card-invalid', !test); + }; + return Card; })(); diff --git a/src/coffee/card.coffee b/src/coffee/card.coffee index c738dd7a..b51b934d 100644 --- a/src/coffee/card.coffee +++ b/src/coffee/card.coffee @@ -132,18 +132,16 @@ class Card @$cvcInput .bindVal @$cvcDisplay, - filters: validToggler( 'validateCardCVC' ) + filters: validToggler( 'validateCardCVC' ) .on('focus', @handle('flipCard')) .on('blur', @handle('flipCard')) - - @$nameInput .bindVal @$nameDisplay, fill:false filters: validToggler('validateCardHolder') - @$nameInput.on 'keydown', @handle('captureName') - join: ' ' + .on 'keydown', @handle('captureName') + join: ' ' handleInitialValues: -> $.each @options.formSelectors, (name, selector) => @@ -161,9 +159,6 @@ class Card args = Array.prototype.slice.call arguments args.unshift $el @handlers[fn].apply this, args - - cvcCardType = "" - 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] handlers: setCardType: ($el, e, cardType) -> @@ -171,7 +166,8 @@ class Card @$card.removeClass('unknown') @$card.removeClass(@cardTypes.join(' ')) - cvcCardType = cardType + $el.data("cardType",cardType) + @$cvcInput.data("cardType",cardType) @$card.addClass(cardType) @$card.toggleClass('identified', cardType isnt 'unknown') @@ -179,15 +175,15 @@ class Card @$card.toggleClass('flipped') captureTab: ($el, e) -> + val = $el.payment('cardExpiryVal') 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) -> - e.preventDefault() if banKeyCodes.indexOf(e.which) != -1 + 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={}) -> @@ -234,25 +230,26 @@ class Card return (val, $in, $out) -> format = val val = $in.payment('cardExpiryVal') - $in.toggleClass('card-valid', $.payment.validateCardExpiry(val.month , val.year)) - $in.toggleClass('card-invalid', !$.payment.validateCardExpiry(val.month , val.year)) + toggleValidClass($in,$.payment.validateCardExpiry(val.month , val.year)) + $in.data("expiryDate",val) format else if validatorName == "validateCardCVC" return (val, $in, $out) -> - $in.toggleClass('card-valid', $.payment.validateCardCVC(val,cvcCardType)) - $in.toggleClass('card-invalid', !$.payment.validateCardCVC(val,cvcCardType)) + toggleValidClass($in,$.payment.validateCardCVC(val,$in.data("cardType"))) val else if validatorName == "validateCardNumber" return (val, $in, $out) -> - $in.toggleClass('card-valid', $.payment.validateCardNumber(val)) - $in.toggleClass('card-invalid', !$.payment.validateCardNumber(val)) + toggleValidClass($in,$.payment.validateCardNumber(val)) val else if validatorName == "validateCardHolder" return (val, $in, $out) -> - $in.toggleClass('card-valid', val!="") - $in.toggleClass('card-invalid', val=="") + toggleValidClass($in,val!="") val + toggleValidClass = (ele,test) -> + ele.toggleClass('card-valid', test) + ele.toggleClass('card-invalid', !test) + $.fn.extend card: (option, args...) -> @each -> $this = $(this) From 0092395fd9f2f5ebd7772dd1b78a21672ed1aac7 Mon Sep 17 00:00:00 2001 From: Jacques Loubser Date: Wed, 25 Jun 2014 09:06:41 +0200 Subject: [PATCH 7/8] Cleaned Up Spacing --- example/index.html | 4 ++-- src/coffee/card.coffee | 9 ++++----- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/example/index.html b/example/index.html index 5a200992..382739e4 100644 --- a/example/index.html +++ b/example/index.html @@ -1,7 +1,7 @@ - + - Card — the better way to collect credit cards + Card – the better way to collect credit cards diff --git a/src/coffee/card.coffee b/src/coffee/card.coffee index b51b934d..7fe5284d 100644 --- a/src/coffee/card.coffee +++ b/src/coffee/card.coffee @@ -138,7 +138,7 @@ class Card @$nameInput .bindVal @$nameDisplay, - fill:false + fill: false filters: validToggler('validateCardHolder') .on 'keydown', @handle('captureName') join: ' ' @@ -163,11 +163,10 @@ class Card handlers: setCardType: ($el, e, cardType) -> unless @$card.hasClass(cardType) - @$card.removeClass('unknown') @$card.removeClass(@cardTypes.join(' ')) - $el.data("cardType",cardType) - @$cvcInput.data("cardType",cardType) + $el.data("cardType", cardType) + @$cvcInput.data("cardType", cardType) @$card.addClass(cardType) @$card.toggleClass('identified', cardType isnt 'unknown') @@ -175,9 +174,9 @@ class Card @$card.toggleClass('flipped') captureTab: ($el, e) -> - val = $el.payment('cardExpiryVal') 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) From 16b8ba3772a8b4136f8c567cfc649918a55cccf0 Mon Sep 17 00:00:00 2001 From: Jesse Pollak Date: Mon, 30 Jun 2014 08:54:27 -0700 Subject: [PATCH 8/8] moves join to correct location for bindVal --- lib/js/card.js | 8 +++----- src/coffee/card.coffee | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/lib/js/card.js b/lib/js/card.js index cfd0a00d..76d20fd2 100644 --- a/lib/js/card.js +++ b/lib/js/card.js @@ -648,13 +648,11 @@ Card = (function() { this.$cvcInput.bindVal(this.$cvcDisplay, { filters: this.validToggler('cardCVC') }).on('focus', this.handle('flipCard')).on('blur', this.handle('flipCard')); - this.$nameInput.bindVal(this.$nameDisplay, { + return this.$nameInput.bindVal(this.$nameDisplay, { fill: false, - filters: this.validToggler('cardHolderName') - }).on('keydown', this.handle('captureName')); - return { + filters: this.validToggler('cardHolderName'), join: ' ' - }; + }).on('keydown', this.handle('captureName')); }; Card.prototype.handleInitialValues = function() { diff --git a/src/coffee/card.coffee b/src/coffee/card.coffee index 2d1eb274..abb4dc2e 100644 --- a/src/coffee/card.coffee +++ b/src/coffee/card.coffee @@ -155,8 +155,8 @@ class Card .bindVal @$nameDisplay, fill: false filters: @validToggler('cardHolderName') + join: ' ' .on 'keydown', @handle('captureName') - join: ' ' handleInitialValues: -> $.each @options.formSelectors, (name, selector) =>