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 | |
12 <script> | |
13 | |
14 /** | |
15 * Use `Polymer.PaperInputBehavior` to implement inputs with `<paper-input-con
tainer>`. This | |
16 * behavior is implemented by `<paper-input>`. It exposes a number of properti
es from | |
17 * `<paper-input-container>` and `<input is="iron-input">` and they should be
bound in your | |
18 * template. | |
19 * | |
20 * The input element can be accessed by the `inputElement` property if you nee
d to access | |
21 * properties or methods that are not exposed. | |
22 * @polymerBehavior | |
23 */ | |
24 Polymer.PaperInputBehavior = { | |
25 | |
26 properties: { | |
27 | |
28 /** | |
29 * The label for this input. Bind this to `<paper-input-container>`'s `lab
el` property. | |
30 */ | |
31 label: { | |
32 type: String | |
33 }, | |
34 | |
35 /** | |
36 * The value for this input. Bind this to the `<input is="iron-input">`'s
`bindValue` | |
37 * property, or the value property of your input that is `notify:true`. | |
38 */ | |
39 value: { | |
40 notify: true, | |
41 type: String | |
42 }, | |
43 | |
44 /** | |
45 * Set to true to disable this input. Bind this to both the `<paper-input-
container>`'s | |
46 * and the input's `disabled` property. | |
47 */ | |
48 disabled: { | |
49 type: Boolean, | |
50 value: false | |
51 }, | |
52 | |
53 /** | |
54 * Returns true if the value is invalid. Bind this to both the `<paper-inp
ut-container>`'s | |
55 * and the input's `invalid` property. | |
56 */ | |
57 invalid: { | |
58 type: Boolean, | |
59 value: false | |
60 }, | |
61 | |
62 /** | |
63 * Set to true to prevent the user from entering invalid input. Bind this
to the | |
64 * `<input is="iron-input">`'s `preventInvalidInput` property. | |
65 */ | |
66 preventInvalidInput: { | |
67 type: Boolean | |
68 }, | |
69 | |
70 /** | |
71 * Set this to specify the pattern allowed by `preventInvalidInput`. Bind
this to the | |
72 * `<input is="iron-input">`'s `allowedPattern` property. | |
73 */ | |
74 allowedPattern: { | |
75 type: String | |
76 }, | |
77 | |
78 /** | |
79 * The type of the input. The supported types are `text`, `number` and `pa
ssword`. Bind this | |
80 * to the `<input is="iron-input">`'s `type` property. | |
81 */ | |
82 type: { | |
83 type: String | |
84 }, | |
85 | |
86 /** | |
87 * A pattern to validate the `input` with. Bind this to the `<input is="ir
on-input">`'s | |
88 * `pattern` property. | |
89 */ | |
90 pattern: { | |
91 type: String | |
92 }, | |
93 | |
94 /** | |
95 * Set to true to mark the input as required. Bind this to the `<input is=
"iron-input">`'s | |
96 * `required` property. | |
97 */ | |
98 required: { | |
99 type: Boolean, | |
100 value: false | |
101 }, | |
102 | |
103 /** | |
104 * The maximum length of the input value. Bind this to the `<input is="iro
n-input">`'s | |
105 * `maxlength` property. | |
106 */ | |
107 maxlength: { | |
108 type: Number | |
109 }, | |
110 | |
111 /** | |
112 * The error message to display when the input is invalid. Bind this to th
e | |
113 * `<paper-input-error>`'s content, if using. | |
114 */ | |
115 errorMessage: { | |
116 type: String | |
117 }, | |
118 | |
119 /** | |
120 * Set to true to show a character counter. | |
121 */ | |
122 charCounter: { | |
123 type: Boolean, | |
124 value: false | |
125 }, | |
126 | |
127 /** | |
128 * Set to true to disable the floating label. Bind this to the `<paper-inp
ut-container>`'s | |
129 * `noLabelFloat` property. | |
130 */ | |
131 noLabelFloat: { | |
132 type: Boolean, | |
133 value: false | |
134 }, | |
135 | |
136 /** | |
137 * Set to true to always float the label. Bind this to the `<paper-input-c
ontainer>`'s | |
138 * `alwaysFloatLabel` property. | |
139 */ | |
140 alwaysFloatLabel: { | |
141 type: Boolean, | |
142 value: false | |
143 }, | |
144 | |
145 /** | |
146 * Set to true to auto-validate the input value. Bind this to the `<paper-
input-container>`'s | |
147 * `autoValidate` property. | |
148 */ | |
149 autoValidate: { | |
150 type: Boolean, | |
151 value: false | |
152 }, | |
153 | |
154 /** | |
155 * Name of the validator to use. Bind this to the `<input is="iron-input">
`'s `validator` | |
156 * property. | |
157 */ | |
158 validator: { | |
159 type: String | |
160 }, | |
161 | |
162 // HTMLInputElement attributes for binding if needed | |
163 | |
164 /** | |
165 * Bind this to the `<input is="iron-input">`'s `autocomplete` property. | |
166 */ | |
167 autocomplete: { | |
168 type: String, | |
169 value: 'off' | |
170 }, | |
171 | |
172 /** | |
173 * Bind this to the `<input is="iron-input">`'s `autofocus` property. | |
174 */ | |
175 autofocus: { | |
176 type: Boolean | |
177 }, | |
178 | |
179 /** | |
180 * Bind this to the `<input is="iron-input">`'s `inputmode` property. | |
181 */ | |
182 inputmode: { | |
183 type: String | |
184 }, | |
185 | |
186 /** | |
187 * Bind this to the `<input is="iron-input">`'s `minlength` property. | |
188 */ | |
189 minlength: { | |
190 type: Number | |
191 }, | |
192 | |
193 /** | |
194 * Bind this to the `<input is="iron-input">`'s `name` property. | |
195 */ | |
196 name: { | |
197 type: String | |
198 }, | |
199 | |
200 /** | |
201 * A placeholder string in addition to the label. If this is set, the labe
l will always float. | |
202 */ | |
203 placeholder: { | |
204 type: String | |
205 }, | |
206 | |
207 /** | |
208 * Bind this to the `<input is="iron-input">`'s `readonly` property. | |
209 */ | |
210 readonly: { | |
211 type: Boolean, | |
212 value: false | |
213 }, | |
214 | |
215 /** | |
216 * Bind this to the `<input is="iron-input">`'s `size` property. | |
217 */ | |
218 size: { | |
219 type: Number | |
220 }, | |
221 | |
222 _ariaDescribedBy: { | |
223 type: String, | |
224 value: '' | |
225 } | |
226 | |
227 }, | |
228 | |
229 listeners: { | |
230 'addon-attached': '_onAddonAttached' | |
231 }, | |
232 | |
233 /** | |
234 * Returns a reference to the input element. | |
235 */ | |
236 get inputElement() { | |
237 return this.$.input; | |
238 }, | |
239 | |
240 attached: function() { | |
241 this._updateAriaLabelledBy(); | |
242 }, | |
243 | |
244 _appendStringWithSpace: function(str, more) { | |
245 if (str) { | |
246 str = str + ' ' + more; | |
247 } else { | |
248 str = more; | |
249 } | |
250 return str; | |
251 }, | |
252 | |
253 _onAddonAttached: function(event) { | |
254 var target = event.path ? event.path[0] : event.target; | |
255 if (target.id) { | |
256 this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedB
y, target.id); | |
257 } else { | |
258 var id = 'paper-input-add-on-' + Math.floor((Math.random() * 100000)); | |
259 target.id = id; | |
260 this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedB
y, id); | |
261 } | |
262 }, | |
263 | |
264 /** | |
265 * Validates the input element and sets an error style if needed. | |
266 */ | |
267 validate: function () { | |
268 return this.inputElement.validate(); | |
269 }, | |
270 | |
271 _computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) { | |
272 return placeholder || alwaysFloatLabel; | |
273 }, | |
274 | |
275 _updateAriaLabelledBy: function() { | |
276 var label = Polymer.dom(this.root).querySelector('label'); | |
277 if (!label) { | |
278 this._ariaLabelledBy = ''; | |
279 return; | |
280 } | |
281 var labelledBy; | |
282 if (label.id) { | |
283 labelledBy = label.id; | |
284 } else { | |
285 labelledBy = 'paper-input-label-' + new Date().getUTCMilliseconds(); | |
286 label.id = labelledBy; | |
287 } | |
288 this._ariaLabelledBy = labelledBy; | |
289 } | |
290 | |
291 }; | |
292 | |
293 </script> | |
OLD | NEW |