Fix use of width configuration option

Fetches the $cardContainer using QJ and configured selector before
setting the transform style.

Author: dblandin

example/index.html

@@ -39,8 +39,9 @@
     <script>
         new Card({
             form: document.querySelector('form'),
-            container: '.card-wrapper'
+            container: '.card-wrapper',
+            width: 350
         });
     </script>
 </body>
-</html>
+</html>

lib/js/card.js

@@ -1184,7 +1184,7 @@ Card = (function() {
   }
 
   Card.prototype.render = function() {
-    var baseWidth, name, obj, selector, ua, _ref, _ref1;
+    var $cardContainer, baseWidth, name, obj, selector, ua, _ref, _ref1;
     QJ.append(this.$container, this.template(this.cardTemplate, extend({}, this.options.messages, this.options.values)));
     _ref = this.options.cardSelectors;
     for (name in _ref) {
@@ -1209,8 +1209,9 @@ Card = (function() {
       }
     }
     if (this.options.width) {
-      baseWidth = parseInt(this.$cardContainer.css('width'));
-      this.$cardContainer.style.transform = "scale(" + (this.options.width / baseWidth) + ")";
+      $cardContainer = QJ(this.options.cardSelectors.cardContainer)[0];
+      baseWidth = parseInt($cardContainer.clientWidth);
+      $cardContainer.style.transform = "scale(" + (this.options.width / baseWidth) + ")";
     }
     if (typeof navigator !== "undefined" && navigator !== null ? navigator.userAgent : void 0) {
       ua = navigator.userAgent.toLowerCase();

lib/js/jquery.card.js

@@ -1184,7 +1184,7 @@ Card = (function() {
   }
 
   Card.prototype.render = function() {
-    var baseWidth, name, obj, selector, ua, _ref, _ref1;
+    var $cardContainer, baseWidth, name, obj, selector, ua, _ref, _ref1;
     QJ.append(this.$container, this.template(this.cardTemplate, extend({}, this.options.messages, this.options.values)));
     _ref = this.options.cardSelectors;
     for (name in _ref) {
@@ -1209,8 +1209,9 @@ Card = (function() {
       }
     }
     if (this.options.width) {
-      baseWidth = parseInt(this.$cardContainer.css('width'));
-      this.$cardContainer.style.transform = "scale(" + (this.options.width / baseWidth) + ")";
+      $cardContainer = QJ(this.options.cardSelectors.cardContainer)[0];
+      baseWidth = parseInt($cardContainer.clientWidth);
+      $cardContainer.style.transform = "scale(" + (this.options.width / baseWidth) + ")";
     }
     if (typeof navigator !== "undefined" && navigator !== null ? navigator.userAgent : void 0) {
       ua = navigator.userAgent.toLowerCase();

src/coffee/card.coffee

@@ -116,8 +116,10 @@ class Card
         Payment.formatCardExpiry(@$expiryInput)
 
     if @options.width
-      baseWidth = parseInt @$cardContainer.css('width')
-      @$cardContainer.style.transform = "scale(#{@options.width / baseWidth})"
+      $cardContainer = QJ(@options.cardSelectors.cardContainer)[0]
+      baseWidth      = parseInt($cardContainer.clientWidth)
+
+      $cardContainer.style.transform = "scale(#{@options.width / baseWidth})"
 
     # safari can't handle transparent radial gradient right now
     if navigator?.userAgent