fix(constructor): ensure card is only ever initialized once

This commit ensures that card is ever only initialized for a given
container once. It allows card to be initialized on a given _form_ more
than once (in case someone wants to show two representations of the same
form on one page).

Fixes jessepollak#225

lib/js/card.js

@@ -1730,6 +1730,8 @@ extend = _dereq_('node.extend');
 Card = (function() {
   var bindVal;
 
+  Card.prototype.initializedDataAttr = "data-jp-card-initialized";
+
   Card.prototype.cardTemplate = '' + '<div class="jp-card-container">' + '<div class="jp-card">' + '<div class="jp-card-front">' + '<div class="jp-card-logo jp-card-elo">' + '<div class="e">e</div>' + '<div class="l">l</div>' + '<div class="o">o</div>' + '</div>' + '<div class="jp-card-logo jp-card-visa">visa</div>' + '<div class="jp-card-logo jp-card-mastercard">MasterCard</div>' + '<div class="jp-card-logo jp-card-maestro">Maestro</div>' + '<div class="jp-card-logo jp-card-amex"></div>' + '<div class="jp-card-logo jp-card-discover">discover</div>' + '<div class="jp-card-logo jp-card-dankort"><div class="dk"><div class="d"></div><div class="k"></div></div></div>' + '<div class="jp-card-lower">' + '<div class="jp-card-shiny"></div>' + '<div class="jp-card-cvc jp-card-display">{{cvc}}</div>' + '<div class="jp-card-number jp-card-display">{{number}}</div>' + '<div class="jp-card-name jp-card-display">{{name}}</div>' + '<div class="jp-card-expiry jp-card-display" data-before="{{monthYear}}" data-after="{{validDate}}">{{expiry}}</div>' + '</div>' + '</div>' + '<div class="jp-card-back">' + '<div class="jp-card-bar"></div>' + '<div class="jp-card-cvc jp-card-display">{{cvc}}</div>' + '<div class="jp-card-shiny"></div>' + '</div>' + '</div>' + '</div>';
 
   Card.prototype.template = function(tpl, data) {
@@ -1774,6 +1776,7 @@ Card = (function() {
   };
 
   function Card(opts) {
+    var toInitialize;
     this.options = extend(true, this.defaults, opts);
     if (!this.options.form) {
       console.log("Please provide a form");
@@ -1785,6 +1788,11 @@ Card = (function() {
       return;
     }
     this.$container = QJ(this.options.container);
+    toInitialize = QJ.isDOMElement(this.$container) ? this.$container : this.$container[0];
+    if (toInitialize.getAttribute(this.initializedDataAttr)) {
+      return;
+    }
+    toInitialize.setAttribute(this.initializedDataAttr, true);
     this.render();
     this.attachHandlers();
     this.handleInitialPlaceholders();

lib/js/jquery.card.js

@@ -1730,6 +1730,8 @@ extend = _dereq_('node.extend');
 Card = (function() {
   var bindVal;
 
+  Card.prototype.initializedDataAttr = "data-jp-card-initialized";
+
   Card.prototype.cardTemplate = '' + '<div class="jp-card-container">' + '<div class="jp-card">' + '<div class="jp-card-front">' + '<div class="jp-card-logo jp-card-elo">' + '<div class="e">e</div>' + '<div class="l">l</div>' + '<div class="o">o</div>' + '</div>' + '<div class="jp-card-logo jp-card-visa">visa</div>' + '<div class="jp-card-logo jp-card-mastercard">MasterCard</div>' + '<div class="jp-card-logo jp-card-maestro">Maestro</div>' + '<div class="jp-card-logo jp-card-amex"></div>' + '<div class="jp-card-logo jp-card-discover">discover</div>' + '<div class="jp-card-logo jp-card-dankort"><div class="dk"><div class="d"></div><div class="k"></div></div></div>' + '<div class="jp-card-lower">' + '<div class="jp-card-shiny"></div>' + '<div class="jp-card-cvc jp-card-display">{{cvc}}</div>' + '<div class="jp-card-number jp-card-display">{{number}}</div>' + '<div class="jp-card-name jp-card-display">{{name}}</div>' + '<div class="jp-card-expiry jp-card-display" data-before="{{monthYear}}" data-after="{{validDate}}">{{expiry}}</div>' + '</div>' + '</div>' + '<div class="jp-card-back">' + '<div class="jp-card-bar"></div>' + '<div class="jp-card-cvc jp-card-display">{{cvc}}</div>' + '<div class="jp-card-shiny"></div>' + '</div>' + '</div>' + '</div>';
 
   Card.prototype.template = function(tpl, data) {
@@ -1774,6 +1776,7 @@ Card = (function() {
   };
 
   function Card(opts) {
+    var toInitialize;
     this.options = extend(true, this.defaults, opts);
     if (!this.options.form) {
       console.log("Please provide a form");
@@ -1785,6 +1788,11 @@ Card = (function() {
       return;
     }
     this.$container = QJ(this.options.container);
+    toInitialize = QJ.isDOMElement(this.$container) ? this.$container : this.$container[0];
+    if (toInitialize.getAttribute(this.initializedDataAttr)) {
+      return;
+    }
+    toInitialize.setAttribute(this.initializedDataAttr, true);
     this.render();
     this.attachHandlers();
     this.handleInitialPlaceholders();

src/coffee/card.coffee

@@ -5,6 +5,7 @@ payment = require 'payment/src/payment'
 extend = require 'node.extend'
 
 class Card
+  initializedDataAttr: "data-jp-card-initialized"
   cardTemplate: '' +
   '<div class="jp-card-container">' +
       '<div class="jp-card">' +
@@ -94,6 +95,12 @@ class Card
 
     @$container = QJ(@options.container)
 
+    # set a data attribute to ensure that card is only ever initialized
+    # once on a given container
+    toInitialize = if QJ.isDOMElement(@$container) then @$container else @$container[0]
+    return if toInitialize.getAttribute(@initializedDataAttr)
+    toInitialize.setAttribute(@initializedDataAttr, true)
+
     @render()
     @attachHandlers()
     @handleInitialPlaceholders()