Re-organize lib files layout and add payments-client

.bowerrc

@@ -1,3 +0,0 @@
-{
-  "directory": "public/bower_components/"
-}

.eslintrc

@@ -0,0 +1,49 @@
+{
+  "env": {
+    "node": true,
+    "browser": true,
+  },
+  "globals": {
+    "exports": false,
+    "module": false,
+  },
+  "rules": {
+    "block-scoped-var": 2,
+    "camelcase": 0,
+    "comma-dangle": [2, "always-multiline"],
+    "comma-style": [2, "last"],
+    "curly": [2, "all"],
+    "dot-notation": [2, {"allowKeywords": true}],
+    "eqeqeq": [2, "allow-null"],
+    "global-strict": [2, "always"],
+    "guard-for-in": 0,
+    "max-len": [2, 80, 2],
+    "new-cap": 2,
+    "no-bitwise": 2,
+    "no-caller": 2,
+    "no-cond-assign": [2, "except-parens"],
+    "no-debugger": 2,
+    "no-empty": 2,
+    "no-eval": 2,
+    "no-extend-native": 2,
+    "no-extra-parens": 0,
+    "no-irregular-whitespace": 2,
+    "no-iterator": 2,
+    "no-loop-func": 2,
+    "no-multi-str": 2,
+    "no-new": 2,
+    "no-plusplus": 2,
+    "no-proto": 2,
+    "no-redeclare": 0,
+    "no-script-url": 2,
+    "no-sequences": 2,
+    "no-underscore-dangle": 0,
+    "no-undef": 2,
+    "no-unused-vars": 2,
+    "no-with": 2,
+    "quotes": [2, "single"],
+    "semi": [2, "always"],
+    "valid-typeof": 2,
+    "wrap-iife": [2, "inside"]
+  }
+}

.gitignore

@@ -2,4 +2,5 @@
 *.sw[po]
 .DS_Store
 *~
-public/bower_components/*
+bower_components/
+node_modules/

Gruntfile.js

@@ -0,0 +1,14 @@
+'use strict';
+
+module.exports = function(grunt) {
+  // load all grunt tasks matching the ['grunt-*', '@*/grunt-*'] patterns
+  require('load-grunt-tasks')(grunt);
+
+  var configs = require('load-grunt-configs')(grunt, {
+    config: {
+      src: 'tasks/*.js',
+    },
+  });
+
+  grunt.initConfig(configs);
+};

README.md

@@ -3,12 +3,18 @@ This is an example site that sells products with Mozilla's
 
 The deps are committed to the tree so all you should need is to checkout this branch.
 
-## Updating or adding deps
+## Adding deps
 
-Get [bower](http://bower.io/) and update dependencies by running:
+Deps are installed via bower or npm. Where possible use npm.
 
-    bower install
+By default `node_modules` and `bower_components` are ignored. If you've
+added a new dependency update the grunt copy task to copy the new lib
+files into place and commit them.
 
-By default `bower_components` is ignored. If you've added a new dependency
-run `git add -f bower_components/<whatever>/*.js` changing the lib name and
-file extension to add as necessary.
+## Updating existing deps.
+
+Use the grunt tasks to clean and copy the lib files.
+
+```
+grunt clean copy
+```

bower.json

@@ -3,7 +3,6 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "fxa-relier-client": "https://github.com/mozilla/fxa-relier-client.git#0.0.8",
-    "jquery": "2.1.4"
+    "fxa-relier-client": "https://github.com/mozilla/fxa-relier-client.git#0.0.8"
   }
 }

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "moz-payments-example",
+  "version": "1.0.0",
+  "description": "Payments example app",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mozilla/payments-example.git"
+  },
+  "author": "Mozilla Payments Team",
+  "license": "MPL 2.0",
+  "bugs": {
+    "url": "https://github.com/mozilla/payments-example/issues"
+  },
+  "homepage": "https://github.com/mozilla/payments-example#readme",
+  "devDependencies": {
+    "grunt": "^0.4.5",
+    "grunt-contrib-clean": "^0.6.0",
+    "grunt-contrib-copy": "^0.8.0",
+    "load-grunt-configs": "^0.4.3",
+    "load-grunt-tasks": "^3.1.0"
+  },
+  "dependencies": {
+    "jquery": "^2.1.4",
+    "moz-payments-client": "git+https://github.com/mozilla/payments-client.git"
+  }
+}

public/index.html

@@ -49,8 +49,9 @@
     <footer>
       <a target="_blank" href="https://github.com/mozilla/payments-example">source code</a>
     </footer>
-    <script src="bower_components/jquery/dist/jquery.min.js"></script>
-    <script src="bower_components/fxa-relier-client/fxa-relier-client.min.js"></script>
+    <script src="lib/js/jquery.min.js"></script>
+    <script src="lib/js/fxa-relier-client.min.js"></script>
+    <script src="lib/js/payments-client.js"></script>
     <script src="js/index.js"></script>
   </body>
 </html>

public/lib/js/payments-client.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):"object"==typeof exports?exports.PaymentsClient=e():t.PaymentsClient=e()}(this,function(){return function(t){function e(o){if(i[o])return i[o].exports;var n=i[o]={exports:{},id:o,loaded:!1};return t[o].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){"use strict";function o(t,e,i){i=i||{};var o=this;return t.addEventListener("click",function(t){t.preventDefault(),o.show()},!1),this.clickElm=t,this.modalParent=e||document.documentElement,this.id="_"+Math.random().toString(36).substr(2,9),this.modalWidth=i.modalWidth||300,this.modalHeight=i.modalHeight||500,this.closeDelayMs="number"==typeof i.closeDelayMs?i.closeDelayMs:300,this}o.prototype={iframeSrc:"http://pay.dev:8000/",classPrefix:"fxa-pay",prefix:function(t){return this.classPrefix+"-"+t},getStyle:function(t,e){return"undefined"!=typeof getComputedStyle?getComputedStyle(t,null).getPropertyValue(e):t.currentStyle[e]},iframeStyle:{border:"none",width:"100%",height:"100%"},closeButtonStyle:{color:"#666",fontSize:"20px",position:"absolute",padding:"10px",top:0,right:0,textDecoration:"none"},outerStyle:{backgroundColor:"rgba(0, 0, 0, 0.5)",position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:2e3,transition:"opacity 0.3s",opacity:0},getInnerStyle:function(){var t=this;return{padding:"5px",paddingTop:"25px",position:"absolute",top:"50%",left:"50%",height:t.modalHeight+"px",width:t.modalWidth+"px",backgroundColor:"#fff",marginTop:"-"+t.modalHeighto/2+"px",marginLeft:"-"+t.modalWidth/2+"px",border:"1px solid #666",boxShadow:"0 3px 7px rgba(0, 0, 0, 0.5)",zIndex:2010,transition:"opacity 0.3s",opacity:0}},applyStyles:function(t,e){Object.keys(e).forEach(function(i){t.style[i]=e[i]})},buildModal:function(){var t=this,e=document,i=e.createElement("div");i.setAttribute("id",this.id),i.className=this.prefix("container"),i.addEventListener("click",function(e){e.preventDefault(),t.close()},!1);var o=e.createElement("div");o.className=this.prefix("modal"),o.addEventListener("click",function(t){t.preventDefault(),t.stopPropagation()},!1),i.appendChild(o),this.applyStyles(i,this.outerStyle);var n=e.createElement("a");n.href="#";var a=e.createTextNode("×");n.appendChild(a),this.applyStyles(n,this.closeButtonStyle),n.addEventListener("click",function(e){e.preventDefault(),t.close()},!1),o.appendChild(n);var r=e.createElement("iframe");return r.setAttribute("src",this.iframeSrc),o.appendChild(r),this.applyStyles(r,this.iframeStyle),this.applyStyles(o,this.getInnerStyle()),i._inner=o,i},show:function(){this.modal=this.buildModal(),this.parentOverflow=this.getStyle(this.modalParent,"overflowY"),this.modalParent.style.overflowY="hidden",this.modalParent.appendChild(this.modal),this.modal.style.opacity=1,this.modal._inner.style.opacity=1},close:function(){this.modalParent.style.overflow=this.parentOverflow,this.modal.style.opacity=0,this.modal._inner.style.opacity=0;var t=this;window.setTimeout(function(){t.modalParent.innerHTML=""},this.closeDelayMs)}},t.exports=o}])});

tasks/.eslintrc

@@ -0,0 +1,12 @@
+{
+  "env": {
+    "node": true,
+  },
+  "rules": {
+    "eol-last": 0,
+    "comma-dangle": 0,
+    "strict": 0,
+    "global-strict": 0,
+    "max-len": 0,
+  }
+}

tasks/clean.js

@@ -0,0 +1,5 @@
+module.exports = {
+  deps: [
+    'public/lib/**/*',
+  ],
+};

tasks/copy.js

@@ -0,0 +1,20 @@
+module.exports = {
+  nodedeps: {
+    files: [{
+      cwd: 'node_modules/moz-payments-client/dist',
+      expand: true,
+      src: 'payments-client.js',
+      dest: 'public/lib/js',
+    }, {
+      cwd: 'node_modules/jquery/dist',
+      expand: true,
+      src: 'jquery.min.js',
+      dest: 'public/lib/js',
+    }, {
+      cwd: 'bower_components/fxa-relier-client/',
+      expand: true,
+      src: 'fxa-relier-client.min.js',
+      dest: 'public/lib/js',
+    }],
+  },
+};