Merge pull request #1 from PolymerElements/initial-impl

initial implementation
PolymerElements · May 19, 2015 · 9d6f8bc · 9d6f8bc
2 parents 1f306b7 + b296ea2
commit 9d6f8bc
Show file tree

Hide file tree

Showing 8 changed files with 518 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+bower_components
diff --git a/bower.json b/bower.json
@@ -0,0 +1,36 @@
+{
+  "name": "iron-form",
+  "version": "0.9.0",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "web-component",
+    "polymer"
+  ],
+  "main": [
+    "iron-form.html"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/iron-form.git"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/PolymerElements/iron-form",
+  "ignore": [],
+  "dependencies": {
+    "polymer": "Polymer/polymer#^0.9.0",
+    "iron-ajax": "PolymerElements/iron-ajax#^0.9.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^0.9.0",
+    "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^0.9.0",
+    "test-fixture": "PolymerElements/test-fixture#^0.9.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "^0.7.0",
+    "paper-input": "PolymerElements/paper-input#^0.9.0",
+    "paper-button": "PolymerElements/paper-button#^0.9.0"
+  }
+}
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,92 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+
+  <title>iron-form demo</title>
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../../paper-input/paper-input.html">
+  <link rel="import" href="../../paper-button/paper-button.html">
+  <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
+  <link rel="stylesheet" href="../../paper-styles/demo.css">
+  <link rel="import" href="../iron-form.html">
+
+</head>
+<style>
+  form {
+    width: 300px;
+  }
+
+  .divider {
+    margin-left: 20px;
+    margin-right: 20px;
+    border: 1px solid #ccc;
+  }
+</style>
+<body>
+
+  <div class="horizontal layout">
+    <form is="iron-form" id="formGet" method="get" action="/">
+      <h1>method="get"</h1>
+      <paper-input name="name" label="Name" required></paper-input>
+      <paper-input name="animal" label="Favourite animal" required></paper-input>
+      <br>
+      <input type="checkbox" name="donuts" value="donuts" checked="checked"> I like donuts<br>
+      <br><br>
+      <paper-button raised
+          onclick="clickHandler(event)">Submit</paper-button>
+      <button type="submit">Native Submit</button>
+    </form>
+
+    <div class="divider"></div>
+
+    <form is="iron-form" id="formPost" method="post" action="/">
+      <h1>method="post"</h1>
+      <paper-input name="name" label="Name" required></paper-input>
+      <paper-input name="animal" label="Favourite animal" required></paper-input>
+      <br><br>
+      <paper-button raised
+          onclick="clickHandler(event)">Submit</paper-button>
+      <button type="submit">Native Submit</button>
+    </form>
+
+  </div>
+
+  <br><br>
+
+  <div id="output"></div>
+
+  <script>
+    document.getElementById('formGet').addEventListener('iron-form-submit',
+        function(event){
+          var output = document.getElementById('output');
+          output.innerHTML = 'Form data: ' + JSON.stringify(event.detail);
+        });
+
+    document.getElementById('formPost').addEventListener('iron-form-submit',
+        function(event){
+          var output = document.getElementById('output');
+          output.innerHTML = 'Form data: ' + JSON.stringify(event.detail);
+        });
+
+    function clickHandler(e) {
+      Polymer.dom(e).localTarget.parentElement.submit();
+    }
+  </script>
+</body>
+
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+  <title>iron-form</title>
+
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../polymer/polymer.html">
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+
+</head>
+<body>
+
+  <iron-component-page></iron-component-page>
+
+</body>
+</html>
diff --git a/iron-form.html b/iron-form.html
@@ -0,0 +1,137 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-ajax/iron-ajax.html">
+
+<!--
+An `iron-form` is a form element that can validate and submit any custom
+elements that have an 'iron-form-behavior`, as well as any native HTML elements.
+-->
+
+<script>
+
+  Polymer({
+
+    is: 'iron-form',
+
+    extends: 'form',
+
+    /**
+     * Fired after the form is submitted.
+     *
+     * @event iron-form-submit
+     */
+
+    /**
+    * Fired after the form is submitted and a response is received.
+    *
+    * @event iron-form-response
+    */
+
+    /**
+     * Fired after the form is submitted and an error is received.
+     *
+     * @event iron-form-error
+     */
+
+    listeners: {
+      'iron-form-element-register': '_registerElement',
+      'submit': 'submit'
+    },
+
+    ready: function() {
+      // Object that handles the ajax form submission request.
+      this._requestBot = document.createElement('iron-ajax');
+      this._requestBot.addEventListener('response', this._handleFormResponse.bind(this));
+      this._requestBot.addEventListener('error', this._handleFormError.bind(this));
+
+      // Holds all the custom elements registered with this form.
+      this._customElements = [];
+    },
+
+    /**
+     * Called to submit the form.
+     */
+    submit: function(event) {
+      if (!this._validate()) {
+        return false;
+      }
+
+      var json = this.serialize();
+
+      this._requestBot.url = this.action;
+      this._requestBot.method = this.method;
+      this._requestBot.params = json;
+
+      if (this.method == 'POST') {
+        this._requestBot.body = JSON.stringify(json);
+      }
+
+      this._requestBot.generateRequest();
+      this.fire('iron-form-submit', json);
+
+      // Don't perform a page refresh.
+      if (event) {
+        event.preventDefault();
+      }
+
+      return false;
+    },
+
+    /**
+     * Returns a json object containing name/value pairs for all the registered
+     * custom components and native elements of the form.
+     */
+    serialize: function() {
+      var json = {};
+
+      // Go through all of the registered custom components.
+      for (var el, i = 0; el = this._customElements[i], i < this._customElements.length; i++) {
+        if (el.name) {
+          json[el.name] = el.value;
+        }
+      }
+
+      // Also go through the form's native elements.
+      for (var el, i = 0; el = this.elements[i], i < this.elements.length; i++) {
+        // Don't re-add custom elements that extend native elements (like an
+        // `<input is="fancy-input">`), since they will also show up in this list.
+        if (el.name && !json[el.name]) {
+          json[el.name] = el.value;
+        }
+      }
+
+      return json;
+    },
+
+    _handleFormResponse: function (event) {
+      this.fire('iron-form-response', event.detail.response);
+    },
+
+    _handleFormError: function (event) {
+      this.fire('iron-form-error', event.detail);
+    },
+
+    _registerElement: function(e) {
+      this._customElements.push(e.target);
+    },
+
+    _validate: function() {
+      var valid = true;
+      for (var el, i = 0; el = this._customElements[i], i < this._customElements.length; i++) {
+        valid = el.validate() && valid;
+      }
+      return valid;
+    }
+
+  });
+
+</script>