Merge pull request #1 from jessepollak/master

Sync with v1.0

.gitmodules

@@ -1,3 +1,6 @@
 [submodule "src/scss/bourbon"]
 	path = src/scss/bourbon
 	url = https://github.com/thoughtbot/bourbon.git
+[submodule "src/coffee/payment"]
+	path = src/coffee/payment
+	url = https://github.com/jessepollak/payment

LICENSE

@@ -17,28 +17,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-
-===
-
-This software bundles the jquery.payment library from Stripe, which falls under the following license.
-
-Copyright (c) 2014 Stripe
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,33 +1,37 @@
 # Card - check out the **[demo](https://jessepollak.github.io/card)**
+
 ### A better credit card form in one line of code
 
 Card will take *any* credit card form and make it the best part of the checkout process (without you changing anything). Everything is created with pure CSS, HTML, and Javascript — no images required.
 
 ![card](http://i.imgur.com/qG3TenO.gif)
 
-## Usage
+## Usage (without jQuery)
 
-To use, you'll need to include the correct CSS and Javascript files into your HTML. You can find the necessary files at `/lib/js/card.js` and `/lib/css/card.css` and include them in your HTML like so.
+To use, you'll need to include the Card JavaScript files into your HTML. You can find the necessary file at `/lib/js/card.js` and include it in your HTML like so.
 
 ```html
-<!-- in HEAD -->
-<link rel="stylesheet" href="/path/to/card.css">
 <!-- at the end of BODY -->
-<script src="/path/to/jquery.js"></script>
 <script src="/path/to/card.js"></script>
 ```
 
 Once you've included those files, you can initialize Card.
 
 ```javascript
-$('form').card({
-    // a selector or jQuery object for the container
+var card = new Card({
+    // a selector or DOM element for the form where users will
+    // be entering their information
+    form: 'form', // *required*
+    // a selector or DOM element for the container
     // where you want the card to appear
     container: '.card-wrapper', // *required*
-    numberInput: 'input#number', // optional — default input[name="number"]
-    expiryInput: 'input#expiry', // optional — default input[name="expiry"]
-    cvcInput: 'input#cvc', // optional — default input[name="cvc"]
-    nameInput: 'input#name', // optional - defaults input[name="name"]
+
+    formSelectors: {
+        numberInput: 'input#number', // optional — default input[name="number"]
+        expiryInput: 'input#expiry', // optional — default input[name="expiry"]
+        cvcInput: 'input#cvc', // optional — default input[name="cvc"]
+        nameInput: 'input#name' // optional - defaults input[name="name"]
+    },
 
     width: 200, // optional — default 350px
     formatting: true, // optional - default true
@@ -38,21 +42,35 @@ $('form').card({
         monthYear: 'mm/yyyy', // optional - default 'month/year'
     },
 
-    // Default values for rendered fields - options
+    // Default values for rendered fields - optional
     values: {
         number: '•••• •••• •••• ••••',
         name: 'Full Name',
         expiry: '••/••',
         cvc: '•••'
-    }
+    },
+
+    // if true, will log helpful messages for setting up Card
+    debug: false // optional - default false
 });
 ```
+### Installing card from npm
+
+If you're using npm, you can install card.js with:
 
+    npm install --save card
+
+	var $ = require("jquery");
+    // The current card.js code does not explictly require jQuery, but instead uses the global, so this line is needed.
+    window.jQuery = $;
+    var card = require("card");
+
 ### Using multiple inputs for one field
 
-Card can be used in forms where you have multiple inputs that render to a single field (i.e. you have a first and last name input). To use Card with this functionality, just pass in a jQuery selector that selects the fields in the correct order. For example,
+Card can be used in forms where you have multiple inputs that render to a single field (i.e. you have a first and last name input). To use Card with this functionality, just pass in a selector that selects the fields in the correct order. For example,
 
 ```html
+<script src="/path/to/card.js"></script>
 <form>
     <input type="text" name="number">
     <input type="text" name="first-name"/>
@@ -61,16 +79,20 @@ Card can be used in forms where you have multiple inputs that render to a single
     <input type="text" name="cvc"/>
 </form>
 <script>
-$('form').card({
+var card = new Card({
+    form: 'form',
     container: '.card-wrapper',
-    nameInput: 'input[name="first-name"], input[name="last-name"]'
+    
+    formSelectors: {
+        nameInput: 'input[name="first-name"], input[name="last-name"]'
+    }
 });
 </script>
 ```
 
 ### 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>
@@ -81,16 +103,9 @@ Card renders with default values for card `name`, `number`, `expiry`, and `cvc`.
     <input type="text" name="cvc"/>
 </form>
 <script>
-// setting $.card.values is one way to override
-// the default card values
-$.card.values = {
-    number: '**** **** **** ****',
-    name: 'Arya Stark',
-    expiry: '**/****',
-    cvc: '***'
-}
 
-$('form').card({
+var card = new Card({
+    form: 'form',
     container: '.card-wrapper',
 
     // passing in a messages object is another way to 
@@ -107,7 +122,7 @@ $('form').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>
@@ -118,14 +133,9 @@ To render the card with the strings in a different language, you can either pass
     <input type="text" name="cvc"/>
 </form>
 <script>
-// setting $.card.messages is one way to override
-// the default field names
-$.card.messages = {
-    validDate: 'expire\ndate',
-    monthYear: 'mm/yy'
-}
 
-$('form').card({
+var card = new Card({
+    form: 'form',
     container: '.card-wrapper',
 
     // passing in a messages object is another way to 
@@ -138,6 +148,28 @@ $('form').card({
 </script>
 ```
 
+## Using with jQuery
+
+To use with jQuery, you'll need to include the `jquery.card.js` file into your HTML. You can find the necessary file at `/lib/js/jquery.card.js` and include it in your HTML like so.
+
+```html
+<!-- at the end of BODY -->
+<script src="/path/to/jquery.card.js"></script>
+```
+
+Once you've included those files, you can initialize Card with jQuery.
+
+```javascript
+$('form').card({
+    // a selector or DOM element for the container
+    // where you want the card to appear
+    container: '.card-wrapper', // *required*
+
+    // all of the other options from above
+});
+
+```
+
 ## Development
 
 To contribute, follow this steps:
@@ -158,16 +190,15 @@ Card is used in the wild in these places:
 
 * [InspectAll](http://www.inspectall.com/)
 * [PennyWhale](https://www.pennywhale.com/)
-* [MakeSpace &ndash; Your Closet in the Cloud](https://www.makespace.com/)
+* [MakeSpace](https://www.makespace.com/)
 * [Blumpa](http://www.blumpa.com/)
-* [CourseLoads &ndash; Clean Clothes, Delivered to your Door.](http://www.courseloads.com/)
+* [CourseLoads](http://www.courseloads.com/)
+* [PubNub](http://pubnub.com/)
+* [GigSalad](https://www.gigsalad.com)
+* [Boligninja](http://www.boligninja.dk)
 
 Are you using Card in production? If so, we'd love to link to you from this page. Open a PR or drop [@jessepollak](http://twitter.com/jessepollak) a line on [Twitter](http://twitter.com/jessepollak) and we'll add you right away!
 
-## Acknowledgements
-
-This library depends on, and bundles, [Stripe's jquery.payment library](https://github.com/stripe/jquery.payment) — thanks [Stripe](https://stripe.com)!
-
 ## Donations
 
 If you'd like to donate to help support development of Card, send Bitcoin directly to `17NUKd3v7GWben18kGhmFafa4ZpWrXpQSC` or through Coinbase [here](https://coinbase.com/jessepollak).

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "card",
-  "version": "0.1.2",
+  "version": "1.0.0",
   "homepage": "https://github.com/jessepollak/card",
   "authors": [
     "Jesse Pollak <[email protected]>"

example/index.html

@@ -3,7 +3,6 @@
 <head>
     <title>Card &ndash; the better way to collect credit cards</title>
     <meta name="viewport" content="initial-scale=1">
-    <link rel="stylesheet" href="../lib/css/card.css">
 </head>
 <body>
     <style>
@@ -36,12 +35,12 @@
         </div>
     </div>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="../lib/js/card.js"></script>
     <script>
-        $('.active form').card({
-            container: $('.card-wrapper')
-        })
+        new Card({
+            form: document.querySelector('form'),
+            container: '.card-wrapper'
+        });
     </script>
 </body>
-</html>
+</html>

gulpfile.coffee

@@ -13,29 +13,21 @@ runs = require 'run-sequence'
 
 development = process.env.NODE_ENV == 'development'
 
-gulp.task 'scss', ->
-  gulp.src ['./src/scss/**/*.scss']
-  .pipe scss().on('error', console.log)
-  .pipe prefix("> 1%")
-  .pipe livereload(server)
-  .pipe gulp.dest('./lib/css')
-
 gulp.task 'browserify', ->
-  gulp.src './src/coffee/**/*.coffee', read: false
+  gulp.src './src/coffee/*.coffee', read: false
     .pipe browserify
       insertGlobals: false
       debug: development
-      transform: ['coffeeify']
+      transform: ['coffeeify', 'sassify']
       extensions: ['.coffee']
       standalone: 'card'
-    .pipe livereload(server)
     .pipe rename({ extname: '.js' })
     .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")
@@ -48,8 +40,11 @@ gulp.task 'clean', ->
     .pipe rimraf()
 
 # Default task call every tasks created so far.
-gulp.task 'default', (cb) ->
+gulp.task 'build', (cb) ->
   runs(
     'clean'
-    ['scss', 'browserify']
-    cb)
+    'browserify',
+    cb
+  )
+
+gulp.task 'default', ['build']