prefixes css class

jessepollak · Jan 12, 2015 · f3f1409 · f3f1409
1 parent 1af17ca
commit f3f1409
Show file tree

Hide file tree

Showing 17 changed files with 152 additions and 153 deletions.
diff --git a/README.md b/README.md
@@ -81,7 +81,7 @@ var card = new Card({
 
 ### Rendering with different initial card values
 
-Card renders with default values for card `name`, `number`, `expiry`, and `cvc`. To override these values, you can either pass in a `values` object or set `$.card.values` before initializing `card`. Do one or the other, not both.
+Card renders with default values for card `name`, `number`, `expiry`, and `cvc`. To override these values, you can pass in a `values` object.
 
 ```html
 <script src="/path/to/card.js"></script>
@@ -111,7 +111,7 @@ var card = new Card({
 
 ### Translation
 
-To render the card with the strings in a different language, you can either pass in a `messages` object or set `$.card.messages` before initializing `card`. Do one or the other, not both.
+To render the card with the strings in a different language, you can pass in a `messages` object.
 
 ```html
 <script src="/path/to/card.js"></script>

diff --git a/gulpfile.coffee b/gulpfile.coffee
@@ -25,10 +25,9 @@ gulp.task 'browserify', ->
     .pipe gulp.dest('./lib/js')
     .pipe livereload(server)
 
-gulp.task 'watch', ['scss', 'browserify', 'connect'],  ->
+gulp.task 'watch', ['browserify', 'connect'],  ->
   server.listen 35729, ->
-    gulp.watch './src/scss/**/*.scss', ['scss']
-    gulp.watch './src/coffee/**/*.coffee', ['browserify']
+    gulp.watch ['./src/coffee/**/*.coffee', './src/scss/**/*.scss'], ['browserify']
 
   gulp.src('example/index.html')
     .pipe open("", url: "http://localhost:8080/example")

diff --git a/lib/js/card.js b/lib/js/card.js
diff --git a/lib/js/jquery.card.js b/lib/js/jquery.card.js
diff --git a/src/coffee/card.coffee b/src/coffee/card.coffee
@@ -6,25 +6,25 @@ extend = require 'node.extend'
 
 class Card
   cardTemplate: """
-  <div class="card-container">
-      <div class="card">
-          <div class="card-front">
-                  <div class="card-logo card-visa">visa</div>
-                  <div class="card-logo card-mastercard">MasterCard</div>
-                  <div class="card-logo card-amex"></div>
-                  <div class="card-logo card-discover">discover</div>
-              <div class="card-lower">
-                  <div class="card-shiny"></div>
-                  <div class="card-cvc card-display">{{cvc}}</div>
-                  <div class="card-number card-display">{{number}}</div>
-                  <div class="card-name card-display">{{name}}</div>
-                  <div class="card-expiry card-display" data-before="{{monthYear}}" data-after="{{validDate}}">{{expiry}}</div>
+  <div class="jp-card-container">
+      <div class="jp-card">
+          <div class="jp-card-front">
+                  <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-amex"></div>
+                  <div class="jp-card-logo jp-card-discover">discover</div>
+              <div class="jp-card-lower">
+                  <div class="jp-card-shiny"></div>
+                  <div class="jp-card-cvc cjp-ard-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="card-back">
-              <div class="card-bar"></div>
-              <div class="card-cvc card-display">{{cvc}}</div>
-              <div class="card-shiny"></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>
@@ -33,15 +33,15 @@ class Card
     tpl.replace /\{\{(.*?)\}\}/g, (match, key, str) ->
       data[key]
   cardTypes: [
-    'card-maestro',
-    'card-dinersclub',
-    'card-laser',
-    'card-jcb',
-    'card-unionpay',
-    'card-discover',
-    'card-mastercard',
-    'card-amex',
-    'card-visa'
+    'jp-card-maestro',
+    'jp-card-dinersclub',
+    'jp-card-laser',
+    'jp-card-jcb',
+    'jp-card-unionpay',
+    'jp-card-discover',
+    'jp-card-mastercard',
+    'jp-card-amex',
+    'jp-card-visa'
   ]
   defaults:
     formatting: true
@@ -51,12 +51,12 @@ class Card
       cvcInput: 'input[name="cvc"]'
       nameInput: 'input[name="name"]'
     cardSelectors:
-      cardContainer: '.card-container'
-      card: '.card'
-      numberDisplay: '.card-number'
-      expiryDisplay: '.card-expiry'
-      cvcDisplay: '.card-cvc'
-      nameDisplay: '.card-name'
+      cardContainer: '.jp-card-container'
+      card: '.jp-card'
+      numberDisplay: '.jp-card-number'
+      expiryDisplay: '.jp-card-expiry'
+      cvcDisplay: '.jp-card-cvc'
+      nameDisplay: '.jp-card-name'
     messages:
       validDate: 'valid\nthru'
       monthYear: 'month/year'
@@ -66,8 +66,8 @@ class Card
       expiry: '&bull;&bull;/&bull;&bull;'
       name: 'Full Name'
     classes:
-      valid: 'card-valid'
-      invalid: 'card-invalid'
+      valid: 'jp-card-valid'
+      invalid: 'jp-card-invalid'
     debug: false
 
   constructor: (opts) ->
@@ -121,12 +121,12 @@ class Card
     if navigator?.userAgent
       ua = navigator.userAgent.toLowerCase()
       if ua.indexOf('safari') != -1 and ua.indexOf('chrome') == -1
-        QJ.addClass @$card, 'card-safari'
+        QJ.addClass @$card, 'jp-card-safari'
     if (new Function("/*@cc_on return @_jscript_version; @*/")())
-      QJ.addClass @$card,'card-ie-10'
+      QJ.addClass @$card,'jp-card-ie-10'
     # ie 11 does not support conditional compilation, use user agent instead
     if (/rv:11.0/i.test(navigator.userAgent))
-      QJ.addClass @$card, 'card-ie-11'
+      QJ.addClass @$card, 'jp-card-ie-11'
 
   attachHandlers: ->
     bindVal @$numberInput, @$numberDisplay,
@@ -193,15 +193,15 @@ class Card
     setCardType: ($el, e) ->
       cardType = e.data
       unless QJ.hasClass @$card, cardType
-        QJ.removeClass @$card, 'card-unknown'
+        QJ.removeClass @$card, 'jp-card-unknown'
         QJ.removeClass @$card, @cardTypes.join(' ')
-        QJ.addClass @$card, "card-#{cardType}"
-        QJ.toggleClass @$card, 'card-identified', (cardType isnt 'unknown')
+        QJ.addClass @$card, "jp-card-#{cardType}"
+        QJ.toggleClass @$card, 'jp-card-identified', (cardType isnt 'unknown')
         @cardType = cardType
     flipCard: ->
-      QJ.addClass @$card, 'card-flipped'
+      QJ.addClass @$card, 'jp-card-flipped'
     unflipCard: ->
-      QJ.removeClass @$card, 'card-flipped'
+      QJ.removeClass @$card, 'jp-card-flipped'
 
   bindVal = (el, out, opts={}) ->
     opts.fill = opts.fill || false
@@ -216,10 +216,10 @@ class Card
     outDefaults = (o.textContent for o in out)
 
     QJ.on el, 'focus', ->
-      QJ.addClass out, 'card-focused'
+      QJ.addClass out, 'jp-card-focused'
 
     QJ.on el, 'blur', ->
-      QJ.removeClass el, 'card-focused'
+      QJ.removeClass el, 'jp-card-focused'
 
     QJ.on el, 'keyup change paste', (e) ->
       val = (QJ.val(elem) for elem in el)

diff --git a/src/scss/browsers/_ie.scss b/src/scss/browsers/_ie.scss
@@ -1,22 +1,22 @@
-.card.card-ie-10, .card.card-ie-11 {
-    &.card-flipped {
+.jp-card.jp-card-ie-10, .jp-card.jp-card-ie-11 {
+    &.jp-card-flipped {
         @include transform(0deg);
-        .card-front {
+        .jp-card-front {
             @include transform(rotateY(0deg));
         }
-        .card-back {
+        .jp-card-back {
             @include transform(rotateY(0deg));
 
             &:after {
                left: 18%;
             }
 
-            .card-cvc {
+            .jp-card-cvc {
                 @include transform(rotateY(180deg));
                 left: 5%;
             }
 
-            .card-shiny  {
+            .jp-card-shiny  {
                 left: 84%;
                 &:after {
                     left: -480%;
@@ -26,6 +26,6 @@
         }
     }
 }
-.card.card-ie-10.card-amex .card-back, .card.card-ie-11.card-amex .card-back {
+.jp-card.jp-card-ie-10.jp-card-amex .jp-card-back, .jp-card.jp-card-ie-11.jp-card-amex .jp-card-back {
     display: none;
 }
diff --git a/src/scss/browsers/_safari.scss b/src/scss/browsers/_safari.scss
@@ -1,6 +1,6 @@
-.card.card-safari {
-   &.card-identified {
-        .card-front, .card-back {
+.jp-card.jp-card-safari {
+   &.jp-card-identified {
+        .jp-card-front, .jp-card-back {
             &:before {
                 @include card-texture($radial-gradient: false);
             }