Merge pull request jondavidjohn#4 from jondavidjohn/feature/jquery-shim

jQuery plugin shim

Author: jondavidjohn

.npmignore

@@ -1,6 +1,9 @@
 bower.json
 .npmignore
 CONTRIBUTING.md
+Makefile
+index.html
+jquery.html
 .travis.yml
 test/*
 src/*

CHANGELOG

@@ -1,3 +1,8 @@
+= unreleased
+  * Add jQuery Plugin shim
+  * Add numeric input formatter `numericInput`
+  * move build process to makefile
+
 = 1.0.2
   * Fix bug with 1 or 0 in expiry formatting
   * Fix strange behavior with cursor position on 'change' events

Makefile

@@ -0,0 +1,31 @@
+SHELL := /bin/bash
+BIN := node_modules/.bin/
+
+build: dist/payform.js dist/payform.min.js dist/jquery.payform.js dist/jquery.payform.min.js
+
+dist/payform.js: src/payform.coffee
+	$(BIN)coffee -c --no-header -o dist/ src/payform.coffee
+
+dist/payform.min.js: dist/payform.js
+	$(BIN)uglify -s dist/payform.js -o dist/payform.min.js
+
+dist/jquery.payform.js: src/jquery.payform.coffee
+	$(BIN)browserify             \
+	  -p bundle-collapser/plugin \
+	  -t coffeeify               \
+	  --extension='.coffee'      \
+	  src/jquery.payform.coffee > dist/jquery.payform.js
+
+dist/jquery.payform.min.js: dist/jquery.payform.js
+	$(BIN)uglify -s dist/jquery.payform.js -o dist/jquery.payform.min.js
+
+watch: build
+	$(BIN)watch 'make build' src
+
+test:
+	$(BIN)mocha test/**_spec.coffee
+
+clean:
+	rm -rf dist/*.js
+
+.PHONY: build test watch

README.md

@@ -38,6 +38,10 @@ npm install payform --save
 ```javascript
 var payform = require('payform');
 
+// Format input for card number entry
+var input = document.getElementById('ccnum');
+payform.cardNumberInput(input)
+
 // Validate a credit card number
 payform.validateCardNumber('4242 4242 4242 4242'); //=> true
 
@@ -53,6 +57,10 @@ require.config({
 });
 
 require(["payform"], function (payform) {
+  // Format input for card number entry
+  var input = document.getElementById('ccnum');
+  payform.cardNumberInput(input)
+
   // Validate a credit card number
   payform.validateCardNumber('4242 4242 4242 4242'); //=> true
 
@@ -71,6 +79,10 @@ bower install payform --save
 ```html
 <script src="path/to/payform/dist/payform.js"></script>
 <script>
+  // Format input for card number entry
+  var input = document.getElementById('ccnum');
+  payform.cardNumberInput(input)
+
   // Validate a credit card number
   payform.validateCardNumber('4242 4242 4242 4242'); //=> true
 
@@ -79,6 +91,26 @@ bower install payform --save
 </script>
 ```
 
+### jQuery Plugin (also supports Zepto)
+
+This library also includes a jquery plugin.  The primary `payform` object
+can be found at `$.payform`, and there are jquery centric ways to utilize the [browser
+input formatters.](#browser-input-formatting-helpers)
+
+```html
+<script src="path/to/payform/dist/jquery.payform.js"></script>
+<script>
+  // Format input for card number entry
+  $('input.ccnum').payform('formatCardNumber');
+
+  // Validate a credit card number
+  $.payform.validateCardNumber('4242 4242 4242 4242'); //=> true
+
+  // Get card type from number
+  $.payform.parseCardType('4242 4242 4242 4242'); //=> 'visa'
+</script>
+```
+
 ## API
 
 ### General Formatting and Validation
@@ -169,8 +201,12 @@ This function doesn't perform any validation of the month or year; use `payform.
 
 These methods are specifically for use in the browser to attach `<input>` formatters.
 
+(alternate [jQuery Plugin](#jquery-plugin) syntax is also provided)
+
 #### payform.cardNumberInput(input)
 
+_jQuery plugin:_ `$(...).payform('formatCardNumber')`
+
 Formats card numbers:
 
 * Includes a space between every 4 digits
@@ -187,6 +223,8 @@ payform.cardNumberInput(input);
 
 #### payform.expiryInput(input)
 
+_jQuery plugin:_ `$(...).payform('formatCardExpiry')`
+
 Formats card expiry:
 
 * Includes a `/` between the month and year
@@ -202,6 +240,8 @@ payform.expiryInput(input);
 
 #### payform.cvcInput(input)
 
+_jQuery plugin:_ `$(...).payform('formatCardCVC')`
+
 Formats card CVC:
 
 * Restricts length to 4 numbers
@@ -214,6 +254,19 @@ var input = document.getElementById('cvc');
 payform.cvcInput(input);
 ```
 
+#### payform.numericInput(input)
+
+_jQuery plugin:_ `$(...).payform('formatNumeric')`
+
+General numeric input restriction.
+
+Example:
+
+``` javascript
+var input = document.getElementById('numeric');
+payform.numericInput(input);
+```
+
 ### Custom Cards
 
 #### payform.cards