Blame view

bower_components/iron-form/iron-form.html 8.96 KB
73bcce88   luigser   COMPONENTS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  <!--
  @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">
  
  <script>
  /*
c5169e0e   Renato De Donato   a new hope
16
  ``<iron-form>` is an HTML `<form>` element that can validate and submit any custom
73bcce88   luigser   COMPONENTS
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
  elements that implement `Polymer.IronFormElementBehavior`, as well as any
  native HTML elements.
  
  It supports both `get` and `post` methods, and uses an `iron-ajax` element to
  submit the form data to the action URL.
  
    Example:
  
      <form is="iron-form" id="form" method="post" action="/form/handler">
        <paper-input name="name" label="name"></paper-input>
        <input name="address">
        ...
      </form>
  
  By default, a native `<button>` element will submit this form. However, if you
  want to submit it from a custom element's click handler, you need to explicitly
  call the form's `submit` method.
  
    Example:
  
      <paper-button raised onclick="submitForm()">Submit</paper-button>
  
      function submitForm() {
        document.getElementById('form').submit();
      }
  
73bcce88   luigser   COMPONENTS
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
  @demo demo/index.html
  */
  
    Polymer({
  
      is: 'iron-form',
  
      extends: 'form',
  
      properties: {
        /**
         * Content type to use when sending data.
         */
        contentType: {
          type: String,
          value: "application/x-www-form-urlencoded"
        },
  
        /**
         * By default, the form will display the browser's native validation
         * UI (i.e. popup bubbles and invalid styles on invalid fields). You can
         * manually disable this; however, if you do, note that you will have to
         * manually style invalid *native* HTML fields yourself, as you are
         * explicitly preventing the native form from doing so.
         */
        disableNativeValidationUi: {
          type: Boolean,
          value: false
        },
  
        /**
        * Set the withCredentials flag when sending data.
        */
        withCredentials: {
          type: Boolean,
          value: false
eb240478   Luigi Serra   public room cards...
79
80
81
82
83
84
85
86
87
88
89
90
91
        },
  
        /**
        * HTTP request headers to send
        *
        * Note: setting a `Content-Type` header here will override the value
        * specified by the `contentType` property of this element.
        */
        headers: {
          type: Object,
          value: function() {
            return {};
          }
73bcce88   luigser   COMPONENTS
92
93
        }
      },
73bcce88   luigser   COMPONENTS
94
95
96
97
98
99
100
      /**
       * Fired if the form cannot be submitted because it's invalid.
       *
       * @event iron-form-invalid
       */
  
      /**
73bcce88   luigser   COMPONENTS
101
102
103
104
105
       * Fired after the form is submitted.
       *
       * @event iron-form-submit
       */
  
73bcce88   luigser   COMPONENTS
106
      /**
c5169e0e   Renato De Donato   a new hope
107
      * Fired after the form is submitted and a response is received.
73bcce88   luigser   COMPONENTS
108
109
110
111
112
      *
      * @event iron-form-response
      */
  
      /**
c5169e0e   Renato De Donato   a new hope
113
       * Fired after the form is submitted and an error is received.
73bcce88   luigser   COMPONENTS
114
115
116
117
118
119
       *
       * @event iron-form-error
       */
      listeners: {
        'iron-form-element-register': '_registerElement',
        'iron-form-element-unregister': '_unregisterElement',
c5169e0e   Renato De Donato   a new hope
120
        'submit': '_onSubmit'
73bcce88   luigser   COMPONENTS
121
122
123
124
      },
  
      ready: function() {
        // Object that handles the ajax form submission request.
c5169e0e   Renato De Donato   a new hope
125
126
127
        this._requestBot = document.createElement('iron-ajax');
        this._requestBot.addEventListener('response', this._handleFormResponse.bind(this));
        this._requestBot.addEventListener('error', this._handleFormError.bind(this));
73bcce88   luigser   COMPONENTS
128
129
130
  
        // Holds all the custom elements registered with this form.
        this._customElements = [];
73bcce88   luigser   COMPONENTS
131
132
133
      },
  
      /**
c5169e0e   Renato De Donato   a new hope
134
       * Called to submit the form.
73bcce88   luigser   COMPONENTS
135
136
137
138
139
140
141
142
143
144
145
146
147
148
       */
      submit: function() {
        if (!this.noValidate && !this.validate()) {
          // In order to trigger the native browser invalid-form UI, we need
          // to do perform a fake form submit.
          if (!this.disableNativeValidationUi) {
            this._doFakeSubmitForValidation();
          }
          this.fire('iron-form-invalid');
          return;
        }
  
        var json = this.serialize();
  
c5169e0e   Renato De Donato   a new hope
149
150
151
152
153
154
155
156
        this._requestBot.url = this.action;
        this._requestBot.method = this.method;
        this._requestBot.contentType = this.contentType;
        this._requestBot.withCredentials = this.withCredentials;
        this._requestBot.headers = this.headers;
  
        if (this.method.toUpperCase() == 'POST') {
          this._requestBot.body = json;
73bcce88   luigser   COMPONENTS
157
        } else {
c5169e0e   Renato De Donato   a new hope
158
          this._requestBot.params = json;
73bcce88   luigser   COMPONENTS
159
160
        }
  
c5169e0e   Renato De Donato   a new hope
161
162
        this._requestBot.generateRequest();
        this.fire('iron-form-submit', json);
73bcce88   luigser   COMPONENTS
163
164
      },
  
73bcce88   luigser   COMPONENTS
165
166
167
168
169
170
171
172
173
174
175
176
      _onSubmit: function(event) {
        this.submit();
  
        // Don't perform a page refresh.
        if (event) {
          event.preventDefault();
        }
  
        return false;
      },
  
      /**
73bcce88   luigser   COMPONENTS
177
178
179
180
       * Returns a json object containing name/value pairs for all the registered
       * custom components and native elements of the form. If there are elements
       * with duplicate names, then their values will get aggregated into an
       * array of values.
c5169e0e   Renato De Donato   a new hope
181
       * 
e619a3b0   Luigi Serra   Controllet cross ...
182
       * @return {!Object}
73bcce88   luigser   COMPONENTS
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
       */
      serialize: function() {
        var json = {};
  
        function addSerializedElement(el) {
          // If the name doesn't exist, add it. Otherwise, serialize it to
          // an array,
          if (!json[el.name]) {
            json[el.name] = el.value;
          } else {
            if (!Array.isArray(json[el.name])) {
              json[el.name] = [json[el.name]];
            }
            json[el.name].push(el.value);
          }
        }
  
        // Go through all of the registered custom components.
        for (var el, i = 0; el = this._customElements[i], i < this._customElements.length; i++) {
          if (this._useValue(el)) {
            addSerializedElement(el);
          }
        }
  
        // Also go through the form's native elements.
        for (var el, i = 0; el = this.elements[i], i < this.elements.length; i++) {
          // Checkboxes and radio buttons should only use their value if they're checked.
          // Also, custom elements that extend native elements (like an
          // `<input is="fancy-input">`) will appear in both lists. Since they
          // were already added as a custom element, they don't need
          // to be re-added.
          if (!this._useValue(el) ||
              (el.hasAttribute('is') && json[el.name])) {
            continue;
          }
          addSerializedElement(el);
        }
  
        return json;
      },
  
      _handleFormResponse: function (event) {
eb240478   Luigi Serra   public room cards...
225
        this.fire('iron-form-response', event.detail);
73bcce88   luigser   COMPONENTS
226
227
228
229
230
231
232
      },
  
      _handleFormError: function (event) {
        this.fire('iron-form-error', event.detail);
      },
  
      _registerElement: function(e) {
c5169e0e   Renato De Donato   a new hope
233
234
        e.target._parentForm = this;
        this._customElements.push(e.target);
73bcce88   luigser   COMPONENTS
235
236
237
238
239
240
241
242
      },
  
      _unregisterElement: function(e) {
        var target = e.detail.target;
        if (target) {
          var index = this._customElements.indexOf(target);
          if (index > -1) {
            this._customElements.splice(index, 1);
73bcce88   luigser   COMPONENTS
243
244
245
246
247
248
249
250
251
252
253
254
255
256
          }
        }
      },
  
      /**
       * Validates all the required elements (custom and native) in the form.
       * @return {boolean} True if all the elements are valid.
       */
      validate: function() {
        var valid = true;
  
        // Validate all the custom elements.
        var validatable;
        for (var el, i = 0; el = this._customElements[i], i < this._customElements.length; i++) {
e619a3b0   Luigi Serra   Controllet cross ...
257
          if (el.required && !el.disabled) {
73bcce88   luigser   COMPONENTS
258
            validatable = /** @type {{validate: (function() : boolean)}} */ (el);
e619a3b0   Luigi Serra   Controllet cross ...
259
260
261
            // Some elements may not have correctly defined a validate method.
            if (validatable.validate)
              valid = !!validatable.validate() && valid;
73bcce88   luigser   COMPONENTS
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
          }
        }
  
        // Validate the form's native elements.
        for (var el, i = 0; el = this.elements[i], i < this.elements.length; i++) {
          // Custom elements that extend a native element will also appear in
          // this list, but they've already been validated.
          if (!el.hasAttribute('is') && el.willValidate && el.checkValidity && el.name) {
            valid = el.checkValidity() && valid;
          }
        }
  
        return valid;
      },
  
73bcce88   luigser   COMPONENTS
277
278
279
280
281
282
283
284
285
      _useValue: function(el) {
        // Skip disabled elements or elements that don't have a `name` attribute.
        if (el.disabled || !el.name) {
          return false;
        }
  
        // Checkboxes and radio buttons should only use their value if they're
        // checked. Custom paper-checkbox and paper-radio-button elements
        // don't have a type, but they have the correct role set.
c5169e0e   Renato De Donato   a new hope
286
287
288
289
        if (el.type == 'checkbox' ||
            el.type == 'radio' ||
            el.getAttribute('role') == 'checkbox' ||
            el.getAttribute('role') == 'radio') {
73bcce88   luigser   COMPONENTS
290
          return el.checked;
c5169e0e   Renato De Donato   a new hope
291
        }
73bcce88   luigser   COMPONENTS
292
293
294
295
296
297
298
299
300
301
302
303
        return true;
      },
  
      _doFakeSubmitForValidation: function() {
        var fakeSubmit = document.createElement('input');
        fakeSubmit.setAttribute('type', 'submit');
        fakeSubmit.style.display = 'none';
        this.appendChild(fakeSubmit);
  
        fakeSubmit.click();
  
        this.removeChild(fakeSubmit);
73bcce88   luigser   COMPONENTS
304
305
306
307
308
      }
  
    });
  
  </script>