update demo/docs

components/ajax-form/.bower.json

@@ -21,14 +21,15 @@
     "ajax"
   ],
   "devDependencies": {
-    "file-input": ">=1.1.4"
+    "file-input": "2.0.0",
+    "webcomponentsjs": "0.7.12"
   },
   "homepage": "https://github.com/rnicholus/ajax-form",
-  "_release": "8ed03ee90d",
+  "_release": "f3df87ee4d",
   "_resolution": {
     "type": "branch",
     "branch": "master",
-    "commit": "8ed03ee90d5e6de0fde005e69b333f70f3af62fe"
+    "commit": "f3df87ee4d6dd2f6b7f17dc165f22409e98d7a52"
   },
   "_source": "git://github.com/rnicholus/ajax-form.git",
   "_target": "master",

components/ajax-form/README.md

@@ -5,18 +5,36 @@ HTML forms on performance-enhancing drugs
 
 [![Build Status](https://travis-ci.org/rnicholus/ajax-form.svg?branch=master)](https://travis-ci.org/rnicholus/ajax-form)
 
+## What's wrong with a traditional `<form>`?
+1. Form submission changes/reloads the page, and it's not trivial to properly prevent this.
+2. You can't send custom headers with a submitted form.
+3. You can't (easily) parse the server response after a form is submitted.
+4. Programmatically tracking invalid forms/fields is frustrating.
+5. You can't send form data as JSON.
+6. You have no opportunity to programmatically augment user-entered data before it is sent to the server.
+7. Custom form elements (such as those created using the web components spec) cannot be submitted using a traditional unadulterated `<form>`.
+
+The `ajax-form` custom element augments a traditional `<form>` to provide additional features and solve the problems listed above. See the [API documentation page](http://ajax-form.raynicholus.com) for complete documentation and demos.
+
 ## Installation
 
 `npm install ajax-form`
 
 ## Use
 
-Use ajax-form just like you would use a traditional form, with the exception of the required `is="ajax-form"` attribute
-that you _must_ include in your `<form>` element markup. Since ajax-form is a web component, you may need to include a
-web component polyfill, such as [webcomponents.js](http://webcomponents.org/) to ensure browsers
+Use ajax-form just like you would use a traditional form, with the exception of the required `is="ajax-form"` attribute that you _must_ include in your `<form>` element markup. Since ajax-form is a web component, you may need to include a web component polyfill, such as [webcomponents.js](http://webcomponents.org/) to ensure browsers
 that do not implement the WC spec are able to make use of ajax-form. Ajax-form has *no* hard
 dependencies.
 
+A very simple use of `ajax-form` looks just like a normal `<form>`, with the addition of an `is` attribute:
+
+```html
+<form is="ajax-form" action="my/form/handler" method="post">
+    <label>Enter your name: <input type="text" name="full_name"></label>
+    ...
+</form>
+```
+
 See the [API documentation page](http://ajax-form.raynicholus.com) for complete documentation and demos.
 
 

components/ajax-form/ajax-form.js

@@ -3,6 +3,9 @@
             return Array.prototype.slice.call(pseudoArray);
         },
 
+        // Note that _currentScript is a polyfill-specific convention
+        currentScript = document._currentScript || document.currentScript,
+
         fire = function (node, type, _detail_) {
             var detail = _detail_ === null || _detail_ === undefined ? {} : _detail_,
                 event = new CustomEvent(type, {
@@ -50,8 +53,7 @@
             }
         },
 
-        // Note that _currentScript is a polyfill-specific convention
-        importDoc = document._currentScript.ownerDocument,
+        importDoc = currentScript.ownerDocument,
 
         // NOTE: Safari doesn't have any visual indications when submit is blocked
         interceptSubmit = function(ajaxForm) {
@@ -467,10 +469,9 @@
                 value: function () {
                     var templates = importDoc.querySelectorAll('.ajax-form-template'),
                         template = templates[templates.length - 1],
-                        clone = document.importNode(template.content, true),
-                        root = this.createShadowRoot();
+                        clone = document.importNode(template.content, true);
 
-                    root.appendChild(clone);
+                    this.appendChild(clone);
 
                     var ajaxForm = this;
 

components/ajax-form/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "ajax-form",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "authors": [
     "Ray Nicholus"
   ],
@@ -16,6 +16,7 @@
   ],
   "keywords": ["Polymer", "web-components", "form", "html", "ajax"],
   "devDependencies": {
-    "file-input": ">=1.1.4"
+    "file-input": "2.0.0",
+    "webcomponentsjs": "0.7.12"
   }
 }

components/ajax-form/demo.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
     <title>ajax-form demo</title>
 
-    <script src="../webcomponentsjs/webcomponents.js"></script>
+    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
     <link rel="import" href="ajax-form.html">
 
     <!--For nicer-looking dialogs - only used by the demo-->

components/ajax-form/package.json

@@ -11,7 +11,7 @@
     "grunt-contrib-jshint": "0.10.x",
     "grunt-contrib-watch": "^0.6.1",
     "grunt-shell": "^0.7.0",
-    "web-component-tester": "3.1.3"
+    "web-component-tester": "3.3.17"
   },
   "keywords": ["Polymer", "web-components", "form", "html", "ajax"],
   "license": "MIT",
@@ -20,5 +20,5 @@
     "type": "git",
     "url": "https://github.com/rnicholus/ajax-form.git"
   },
-  "version": "2.0.2"
+  "version": "2.1.0"
 }

components/ajax-form/wct.conf.js

@@ -40,12 +40,12 @@ module.exports = {
                         "platform":    "Windows 8.1",
                         "version":     ""
                     },
-                    {
-                        "browserName": "firefox",
-                        "platform":    "Linux",
-                        "version":     "beta"
-                    },
-
+                    //{
+                    //    "browserName": "firefox",
+                    //    "platform":    "Linux",
+                    //    "version":     "beta"
+                    //},
+                    //
                     //{
                     //    "browserName": "safari",
                     //    "platform":    "OS X 10.10",