OLD | NEW |
| (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 <link rel="import" href="../polymer/polymer.html"> | |
11 <link rel="import" href="../iron-behaviors/iron-control-state.html"> | |
12 | |
13 <script> | |
14 | |
15 /** | |
16 * Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-con
tainer>`. This | |
17 * behavior is implemented by `<paper-input>`. It exposes a number of properti
es from | |
18 * `<paper-input-container>` and `<input is="iron-input">` and they should be
bound in your | |
19 * template. | |
20 * | |
21 * The input element can be accessed by the `inputElement` property if you nee
d to access | |
22 * properties or methods that are not exposed. | |
23 * @polymerBehavior Polymer.PaperInputBehavior | |
24 */ | |
25 Polymer.PaperInputBehaviorImpl = { | |
26 | |
27 properties: { | |
28 | |
29 /** | |
30 * The label for this input. Bind this to `<paper-input-container>`'s `lab
el` property. | |
31 */ | |
32 label: { | |
33 type: String | |
34 }, | |
35 | |
36 /** | |
37 * The value for this input. Bind this to the `<input is="iron-input">`'s
`bindValue` | |
38 * property, or the value property of your input that is `notify:true`. | |
39 */ | |
40 value: { | |
41 notify: true, | |
42 type: String | |
43 }, | |
44 | |
45 /** | |
46 * Set to true to disable this input. Bind this to both the `<paper-input-
container>`'s | |
47 * and the input's `disabled` property. | |
48 */ | |
49 disabled: { | |
50 type: Boolean, | |
51 value: false | |
52 }, | |
53 | |
54 /** | |
55 * Returns true if the value is invalid. Bind this to both the `<paper-inp
ut-container>`'s | |
56 * and the input's `invalid` property. | |
57 */ | |
58 invalid: { | |
59 type: Boolean, | |
60 value: false | |
61 }, | |
62 | |
63 /** | |
64 * Set to true to prevent the user from entering invalid input. Bind this
to the | |
65 * `<input is="iron-input">`'s `preventInvalidInput` property. | |
66 */ | |
67 preventInvalidInput: { | |
68 type: Boolean | |
69 }, | |
70 | |
71 /** | |
72 * Set this to specify the pattern allowed by `preventInvalidInput`. Bind
this to the | |
73 * `<input is="iron-input">`'s `allowedPattern` property. | |
74 */ | |
75 allowedPattern: { | |
76 type: String | |
77 }, | |
78 | |
79 /** | |
80 * The type of the input. The supported types are `text`, `number` and `pa
ssword`. Bind this | |
81 * to the `<input is="iron-input">`'s `type` property. | |
82 */ | |
83 type: { | |
84 type: String | |
85 }, | |
86 | |
87 /** | |
88 * The datalist of the input (if any). This should match the id of an exis
ting <datalist>. Bind this | |
89 * to the `<input is="iron-input">`'s `list` property. | |
90 */ | |
91 list: { | |
92 type: String | |
93 }, | |
94 | |
95 /** | |
96 * A pattern to validate the `input` with. Bind this to the `<input is="ir
on-input">`'s | |
97 * `pattern` property. | |
98 */ | |
99 pattern: { | |
100 type: String | |
101 }, | |
102 | |
103 /** | |
104 * Set to true to mark the input as required. Bind this to the `<input is=
"iron-input">`'s | |
105 * `required` property. | |
106 */ | |
107 required: { | |
108 type: Boolean, | |
109 value: false | |
110 }, | |
111 | |
112 /** | |
113 * The maximum length of the input value. Bind this to the `<input is="iro
n-input">`'s | |
114 * `maxlength` property. | |
115 */ | |
116 maxlength: { | |
117 type: Number | |
118 }, | |
119 | |
120 /** | |
121 * The error message to display when the input is invalid. Bind this to th
e | |
122 * `<paper-input-error>`'s content, if using. | |
123 */ | |
124 errorMessage: { | |
125 type: String | |
126 }, | |
127 | |
128 /** | |
129 * Set to true to show a character counter. | |
130 */ | |
131 charCounter: { | |
132 type: Boolean, | |
133 value: false | |
134 }, | |
135 | |
136 /** | |
137 * Set to true to disable the floating label. Bind this to the `<paper-inp
ut-container>`'s | |
138 * `noLabelFloat` property. | |
139 */ | |
140 noLabelFloat: { | |
141 type: Boolean, | |
142 value: false | |
143 }, | |
144 | |
145 /** | |
146 * Set to true to always float the label. Bind this to the `<paper-input-c
ontainer>`'s | |
147 * `alwaysFloatLabel` property. | |
148 */ | |
149 alwaysFloatLabel: { | |
150 type: Boolean, | |
151 value: false | |
152 }, | |
153 | |
154 /** | |
155 * Set to true to auto-validate the input value. Bind this to the `<paper-
input-container>`'s | |
156 * `autoValidate` property. | |
157 */ | |
158 autoValidate: { | |
159 type: Boolean, | |
160 value: false | |
161 }, | |
162 | |
163 /** | |
164 * Name of the validator to use. Bind this to the `<input is="iron-input">
`'s `validator` | |
165 * property. | |
166 */ | |
167 validator: { | |
168 type: String | |
169 }, | |
170 | |
171 // HTMLInputElement attributes for binding if needed | |
172 | |
173 /** | |
174 * Bind this to the `<input is="iron-input">`'s `autocomplete` property. | |
175 */ | |
176 autocomplete: { | |
177 type: String, | |
178 value: 'off' | |
179 }, | |
180 | |
181 /** | |
182 * Bind this to the `<input is="iron-input">`'s `autofocus` property. | |
183 */ | |
184 autofocus: { | |
185 type: Boolean | |
186 }, | |
187 | |
188 /** | |
189 * Bind this to the `<input is="iron-input">`'s `inputmode` property. | |
190 */ | |
191 inputmode: { | |
192 type: String | |
193 }, | |
194 | |
195 /** | |
196 * Bind this to the `<input is="iron-input">`'s `minlength` property. | |
197 */ | |
198 minlength: { | |
199 type: Number | |
200 }, | |
201 | |
202 /** | |
203 * Bind this to the `<input is="iron-input">`'s `name` property. | |
204 */ | |
205 name: { | |
206 type: String | |
207 }, | |
208 | |
209 /** | |
210 * A placeholder string in addition to the label. If this is set, the labe
l will always float. | |
211 */ | |
212 placeholder: { | |
213 type: String, | |
214 // need to set a default so _computeAlwaysFloatLabel is run | |
215 value: '' | |
216 }, | |
217 | |
218 /** | |
219 * Bind this to the `<input is="iron-input">`'s `readonly` property. | |
220 */ | |
221 readonly: { | |
222 type: Boolean, | |
223 value: false | |
224 }, | |
225 | |
226 /** | |
227 * Bind this to the `<input is="iron-input">`'s `size` property. | |
228 */ | |
229 size: { | |
230 type: Number | |
231 }, | |
232 | |
233 // Nonstandard attributes for binding if needed | |
234 | |
235 /** | |
236 * Bind this to the `<input is="iron-input">`'s `autocapitalize` property. | |
237 */ | |
238 autocapitalize: { | |
239 type: String, | |
240 value: 'none' | |
241 }, | |
242 | |
243 /** | |
244 * Bind this to the `<input is="iron-input">`'s `autocorrect` property. | |
245 */ | |
246 autocorrect: { | |
247 type: String, | |
248 value: 'off' | |
249 }, | |
250 | |
251 _ariaDescribedBy: { | |
252 type: String, | |
253 value: '' | |
254 } | |
255 | |
256 }, | |
257 | |
258 listeners: { | |
259 'addon-attached': '_onAddonAttached' | |
260 }, | |
261 | |
262 observers: [ | |
263 '_focusedControlStateChanged(focused)' | |
264 ], | |
265 | |
266 /** | |
267 * Returns a reference to the input element. | |
268 */ | |
269 get inputElement() { | |
270 return this.$.input; | |
271 }, | |
272 | |
273 attached: function() { | |
274 this._updateAriaLabelledBy(); | |
275 }, | |
276 | |
277 _appendStringWithSpace: function(str, more) { | |
278 if (str) { | |
279 str = str + ' ' + more; | |
280 } else { | |
281 str = more; | |
282 } | |
283 return str; | |
284 }, | |
285 | |
286 _onAddonAttached: function(event) { | |
287 var target = event.path ? event.path[0] : event.target; | |
288 if (target.id) { | |
289 this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedB
y, target.id); | |
290 } else { | |
291 var id = 'paper-input-add-on-' + Math.floor((Math.random() * 100000)); | |
292 target.id = id; | |
293 this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedB
y, id); | |
294 } | |
295 }, | |
296 | |
297 /** | |
298 * Validates the input element and sets an error style if needed. | |
299 */ | |
300 validate: function() { | |
301 return this.inputElement.validate(); | |
302 }, | |
303 | |
304 /** | |
305 * Restores the cursor to its original position after updating the value. | |
306 * @param {string} newValue The value that should be saved. | |
307 */ | |
308 updateValueAndPreserveCaret: function(newValue) { | |
309 // Not all elements might have selection, and even if they have the | |
310 // right properties, accessing them might throw an exception (like for | |
311 // <input type=number>) | |
312 try { | |
313 var start = this.inputElement.selectionStart; | |
314 this.value = newValue; | |
315 | |
316 // The cursor automatically jumps to the end after re-setting the value, | |
317 // so restore it to its original position. | |
318 this.inputElement.selectionStart = start; | |
319 this.inputElement.selectionEnd = start; | |
320 } catch (e) { | |
321 // Just set the value and give up on the caret. | |
322 this.value = newValue; | |
323 } | |
324 }, | |
325 | |
326 _computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) { | |
327 return placeholder || alwaysFloatLabel; | |
328 }, | |
329 | |
330 _focusedControlStateChanged: function(focused) { | |
331 // IronControlState stops the focus and blur events in order to redispatch
them on the host | |
332 // element, but paper-input-container listens to those events. Since there
are more | |
333 // pending work on focus/blur in IronControlState, I'm putting in this hac
k to get the | |
334 // input focus state working for now. | |
335 if (!this.$.container) { | |
336 this.$.container = Polymer.dom(this.root).querySelector('paper-input-con
tainer'); | |
337 if (!this.$.container) { | |
338 return; | |
339 } | |
340 } | |
341 if (focused) { | |
342 this.$.container._onFocus(); | |
343 } else { | |
344 this.$.container._onBlur(); | |
345 } | |
346 }, | |
347 | |
348 _updateAriaLabelledBy: function() { | |
349 var label = Polymer.dom(this.root).querySelector('label'); | |
350 if (!label) { | |
351 this._ariaLabelledBy = ''; | |
352 return; | |
353 } | |
354 var labelledBy; | |
355 if (label.id) { | |
356 labelledBy = label.id; | |
357 } else { | |
358 labelledBy = 'paper-input-label-' + new Date().getUTCMilliseconds(); | |
359 label.id = labelledBy; | |
360 } | |
361 this._ariaLabelledBy = labelledBy; | |
362 } | |
363 | |
364 }; | |
365 | |
366 /** @polymerBehavior */ | |
367 Polymer.PaperInputBehavior = [Polymer.IronControlState, Polymer.PaperInputBeha
viorImpl]; | |
368 | |
369 </script> | |
OLD | NEW |