Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(68)

Side by Side Diff: polymer_1.0.4/bower_components/iron-form/iron-form.html

Issue 1205703007: Add polymer 1.0 to npm_modules (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Renamed folder to 1.0.4 Created 5 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!--
2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 -->
10
11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../iron-ajax/iron-ajax.html">
13
14 <script>
15 /*
16 ``<iron-form>` is an HTML `<form>` element that can validate and submit any cust om
17 elements that implement `Polymer.IronFormElementBehavior`, as well as any
18 native HTML elements.
19
20 It supports both `get` and `post` methods, and uses an `iron-ajax` element to
21 submit the form data to the action URL.
22
23 Example:
24
25 <form is="iron-form" id="form" method="post" action="/form/handler">
26 <paper-input name="name" label="name"></paper-input>
27 <input name="address">
28 ...
29 </form>
30
31 By default, a native `<button>` element will submit this form. However, if you
32 want to submit it from a custom element's click handler, you need to explicitly
33 call the form's `submit` method.
34
35 Example:
36
37 <paper-button raised onclick="submitForm()">Submit</paper-button>
38
39 function submitForm() {
40 document.getElementById('form').submit();
41 }
42
43 @demo demo/index.html
44 */
45
46 Polymer({
47
48 is: 'iron-form',
49
50 extends: 'form',
51
52 properties: {
53 /**
54 * Content type to use when sending data.
55 */
56 contentType: {
57 type: String,
58 value: "application/x-www-form-urlencoded"
59 }
60 },
61 /**
62 * Fired if the form cannot be submitted because it's invalid.
63 *
64 * @event iron-form-invalid
65 */
66
67 /**
68 * Fired after the form is submitted.
69 *
70 * @event iron-form-submit
71 */
72
73 /**
74 * Fired after the form is submitted and a response is received.
75 *
76 * @event iron-form-response
77 */
78
79 /**
80 * Fired after the form is submitted and an error is received.
81 *
82 * @event iron-form-error
83 */
84 listeners: {
85 'iron-form-element-register': '_registerElement',
86 'submit': '_onSubmit'
87 },
88
89 ready: function() {
90 // Object that handles the ajax form submission request.
91 this._requestBot = document.createElement('iron-ajax');
92 this._requestBot.addEventListener('response', this._handleFormResponse.bin d(this));
93 this._requestBot.addEventListener('error', this._handleFormError.bind(this ));
94
95 // Holds all the custom elements registered with this form.
96 this._customElements = [];
97 },
98
99 /**
100 * Called to submit the form.
101 */
102 submit: function() {
103 if (!this.noValidate && !this._validate()) {
104
105 // In order to trigger the native browser invalid-form UI, we need
106 // to do perform a fake form submit.
107 this._doFakeSubmitForValidation();
108 this.fire('iron-form-invalid');
109 return;
110 }
111
112 var json = this.serialize();
113
114 this._requestBot.url = this.action;
115 this._requestBot.method = this.method;
116 this._requestBot.contentType = this.contentType;
117
118 if (this.method.toUpperCase() == 'POST') {
119 this._requestBot.body = JSON.stringify(json);
120 } else {
121 this._requestBot.params = json;
122 }
123
124 this._requestBot.generateRequest();
125 this.fire('iron-form-submit', json);
126 },
127
128 _onSubmit: function(event) {
129 this.submit();
130
131 // Don't perform a page refresh.
132 if (event) {
133 event.preventDefault();
134 }
135
136 return false;
137 },
138
139 /**
140 * Returns a json object containing name/value pairs for all the registered
141 * custom components and native elements of the form. If there are elements
142 * with duplicate names, then their values will get aggregated into an
143 * array of values.
144 */
145 serialize: function() {
146 var json = {};
147
148 function addSerializedElement(el) {
149 // If the name doesn't exist, add it. Otherwise, serialize it to
150 // an array,
151 if (!json[el.name]) {
152 json[el.name] = el.value;
153 } else {
154 if (!Array.isArray(json[el.name])) {
155 json[el.name] = [json[el.name]];
156 }
157 json[el.name].push(el.value);
158 }
159 }
160
161 // Go through all of the registered custom components.
162 for (var el, i = 0; el = this._customElements[i], i < this._customElements .length; i++) {
163 if (el.name) {
164 addSerializedElement(el);
165 }
166 }
167
168 // Also go through the form's native elements.
169 for (var el, i = 0; el = this.elements[i], i < this.elements.length; i++) {
170 // Checkboxes and radio buttons should only use their value if they're c hecked.
171 // Also, custom elements that extend native elements (like an
172 // `<input is="fancy-input">`) will appear in both lists. Since they
173 // were already added as a custom element, they don't need
174 // to be re-added.
175 if (!el.name || !this._useValue(el) ||
176 (el.hasAttribute('is') && json[el.name])) {
177 continue;
178 }
179 addSerializedElement(el);
180 }
181
182 return json;
183 },
184
185 _handleFormResponse: function (event) {
186 this.fire('iron-form-response', event.detail.response);
187 },
188
189 _handleFormError: function (event) {
190 this.fire('iron-form-error', event.detail);
191 },
192
193 _registerElement: function(e) {
194 this._customElements.push(e.target);
195 },
196
197 _validate: function() {
198 var valid = true;
199
200 // Validate all the custom elements.
201 var validatable;
202 for (var el, i = 0; el = this._customElements[i], i < this._customElements .length; i++) {
203 if (el.required) {
204 validatable = /** @type {{validate: (function() : boolean)}} */ (el);
205 valid = validatable.validate() && valid;
206 }
207 }
208
209 // Validate the form's native elements.
210 for (var el, i = 0; el = this.elements[i], i < this.elements.length; i++) {
211 // Custom elements that extend a native element will also appear in
212 // this list, but they've already been validated.
213 if (!el.hasAttribute('is') && el.willValidate && el.checkValidity) {
214 valid = el.checkValidity() && valid;
215 }
216 }
217
218 return valid;
219 },
220
221 _useValue: function(el) {
222 // Checkboxes and radio buttons should only use their value if they're che cked.
223 if (el.type !== 'checkbox' && el.type !== 'radio') {
224 return true;
225 } else {
226 return el.checked;
227 }
228 },
229
230 _doFakeSubmitForValidation: function() {
231 var fakeSubmit = document.createElement('input');
232 fakeSubmit.setAttribute('type', 'submit');
233 fakeSubmit.style.display = 'none';
234 this.appendChild(fakeSubmit);
235
236 fakeSubmit.click();
237
238 this.removeChild(fakeSubmit);
239 }
240
241 });
242
243 </script>
OLDNEW
« no previous file with comments | « polymer_1.0.4/bower_components/iron-form/index.html ('k') | polymer_1.0.4/bower_components/iron-form/test/basic.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698