Revert "Add Features & Fixes"

This reverts commit 819b4991.

lib/js/card.js

@@ -519,9 +519,9 @@ $.fn.card = function(opts) {
 };
 
 Card = (function() {
-  var banKeyCodes, cvcCardType, validToggler;
+  var validToggler;
 
-  Card.prototype.cardTemplate = "<div class=\"card-container\">\n    <div class=\"card\">\n        <div class=\"front\">\n                <div class=\"logo visa\">visa</div>\n                <div class=\"logo mastercard\">MasterCard</div>\n                <div class=\"logo amex\"></div>\n                <div class=\"logo discover\">discover</div>\n            <div class=\"lower\">\n                <div class=\"shiny\"></div>\n                <div class=\"cvc display\">&bull;&bull;&bull;&bull;</div>\n                <div class=\"number display\">&bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull;</div>\n                <div class=\"name display\">{{fullName}}</div>\n                <div class=\"expiry display\" data-before=\"{{monthYear}}\" data-after=\"{{validDate}}\">&bull;&bull;/&bull;&bull;</div>\n            </div>\n        </div>\n        <div class=\"back\">\n            <div class=\"bar\"></div>\n            <div class=\"cvc display\">&bull;&bull;&bull;</div>\n            <div class=\"shiny\"></div>\n        </div>\n    </div>\n</div>";
+  Card.prototype.cardTemplate = "<div class=\"card-container\">\n    <div class=\"card\">\n        <div class=\"front\">\n                <div class=\"logo visa\">visa</div>\n                <div class=\"logo mastercard\">MasterCard</div>\n                <div class=\"logo amex\"></div>\n                <div class=\"logo discover\">discover</div>\n            <div class=\"lower\">\n                <div class=\"shiny\"></div>\n                <div class=\"cvc display\">&bull;&bull;&bull;&bull;</div>\n                <div class=\"number display\">&bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull;</div>\n                <div class=\"name display\">{{fullName}}</div>\n                <div class=\"expiry display\" data-before=\"{{monthYear}}\" data-after=\"{{validDate}}\">••/••</div>\n            </div>\n        </div>\n        <div class=\"back\">\n            <div class=\"bar\"></div>\n            <div class=\"cvc display\">•••</div>\n            <div class=\"shiny\"></div>\n        </div>\n    </div>\n</div>";
 
   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;
     }
   };
 

src/coffee/card.coffee

@@ -7,7 +7,6 @@ $.fn.card = (opts) ->
   $.card.fn.construct.apply(this, opts)
 
 class Card
-
   cardTemplate: """
   <div class="card-container">
       <div class="card">
@@ -21,12 +20,12 @@ class Card
                   <div class="cvc display">&bull;&bull;&bull;&bull;</div>
                   <div class="number display">&bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull; &bull;&bull;&bull;&bull;</div>
                   <div class="name display">{{fullName}}</div>
-                  <div class="expiry display" data-before="{{monthYear}}" data-after="{{validDate}}">&bull;&bull;/&bull;&bull;</div>
+                  <div class="expiry display" data-before="{{monthYear}}" data-after="{{validDate}}">••/••</div>
               </div>
           </div>
           <div class="back">
               <div class="bar"></div>
-              <div class="cvc display">&bull;&bull;&bull;</div>
+              <div class="cvc display">•••</div>
               <div class="shiny"></div>
           </div>
       </div>
@@ -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 ->