OLD | NEW |
1 <!-- | 1 <!-- |
2 @license | 2 @license |
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 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 | 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 | 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 | 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 | 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 | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
9 --> | 9 --> |
10 <link rel="import" href="../polymer/polymer.html"> | 10 <link rel="import" href="../polymer/polymer.html"> |
11 | 11 |
12 <!-- | |
13 Use `Polymer.PaperInputBehavior` to implement your own `<paper-input>`. | |
14 --> | |
15 | |
16 <script> | 12 <script> |
17 | 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 */ |
18 Polymer.PaperInputBehavior = { | 24 Polymer.PaperInputBehavior = { |
19 | 25 |
20 properties: { | 26 properties: { |
21 | 27 |
22 /** | 28 /** |
23 * The label for this input. | 29 * The label for this input. Bind this to `<paper-input-container>`'s `lab
el` property. |
24 */ | 30 */ |
25 label: { | 31 label: { |
26 type: String | 32 type: String |
27 }, | 33 }, |
28 | 34 |
29 /** | 35 /** |
30 * The value for this input. | 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`. |
31 */ | 38 */ |
32 value: { | 39 value: { |
33 notify: true, | 40 notify: true, |
34 type: String | 41 type: String |
35 }, | 42 }, |
36 | 43 |
37 /** | 44 /** |
38 * Set to true to disable this input. | 45 * Set to true to disable this input. Bind this to both the `<paper-input-
container>`'s |
| 46 * and the input's `disabled` property. |
39 */ | 47 */ |
40 disabled: { | 48 disabled: { |
41 type: Boolean, | 49 type: Boolean, |
42 value: false | 50 value: false |
43 }, | 51 }, |
44 | 52 |
45 /** | 53 /** |
46 * Set to true to prevent the user from entering invalid input. | 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. |
47 */ | 65 */ |
48 preventInvalidInput: { | 66 preventInvalidInput: { |
49 type: Boolean | 67 type: Boolean |
50 }, | 68 }, |
51 | 69 |
52 /** | 70 /** |
53 * The type of the input. The supported types are `text`, `number` and `pa
ssword`. | 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. |
54 */ | 81 */ |
55 type: { | 82 type: { |
56 type: String | 83 type: String |
57 }, | 84 }, |
58 | 85 |
59 /** | 86 /** |
60 * A pattern to validate the `input` with. | 87 * A pattern to validate the `input` with. Bind this to the `<input is="ir
on-input">`'s |
| 88 * `pattern` property. |
61 */ | 89 */ |
62 pattern: { | 90 pattern: { |
63 type: String | 91 type: String |
64 }, | 92 }, |
65 | 93 |
66 /** | 94 /** |
67 * Set to true to mark the input as required. | 95 * Set to true to mark the input as required. Bind this to the `<input is=
"iron-input">`'s |
| 96 * `required` property. |
68 */ | 97 */ |
69 required: { | 98 required: { |
70 type: Boolean, | 99 type: Boolean, |
71 value: false | 100 value: false |
72 }, | 101 }, |
73 | 102 |
74 /** | 103 /** |
75 * The maximum length of the input value. | 104 * The maximum length of the input value. Bind this to the `<input is="iro
n-input">`'s |
| 105 * `maxlength` property. |
76 */ | 106 */ |
77 maxlength: { | 107 maxlength: { |
78 type: Number | 108 type: Number |
79 }, | 109 }, |
80 | 110 |
81 /** | 111 /** |
82 * The error message to display when the input is invalid. | 112 * The error message to display when the input is invalid. Bind this to th
e |
| 113 * `<paper-input-error>`'s content, if using. |
83 */ | 114 */ |
84 errorMessage: { | 115 errorMessage: { |
85 type: String | 116 type: String |
86 }, | 117 }, |
87 | 118 |
88 /** | 119 /** |
89 * Set to true to show a character counter. | 120 * Set to true to show a character counter. |
90 */ | 121 */ |
91 charCounter: { | 122 charCounter: { |
92 type: Boolean, | 123 type: Boolean, |
93 value: false | 124 value: false |
94 }, | 125 }, |
95 | 126 |
96 /** | 127 /** |
97 * Set to true to disable the floating label. | 128 * Set to true to disable the floating label. Bind this to the `<paper-inp
ut-container>`'s |
| 129 * `noLabelFloat` property. |
98 */ | 130 */ |
99 noLabelFloat: { | 131 noLabelFloat: { |
100 type: Boolean, | 132 type: Boolean, |
101 value: false | 133 value: false |
102 }, | 134 }, |
103 | 135 |
104 /** | 136 /** |
105 * Set to true to auto-validate the input value. | 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. |
106 */ | 148 */ |
107 autoValidate: { | 149 autoValidate: { |
108 type: Boolean, | 150 type: Boolean, |
109 value: false | 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: '' |
110 } | 225 } |
111 | 226 |
112 }, | 227 }, |
113 | 228 |
| 229 listeners: { |
| 230 'addon-attached': '_onAddonAttached' |
| 231 }, |
| 232 |
114 /** | 233 /** |
115 * Returns a reference to the input element. | 234 * Returns a reference to the input element. |
116 */ | 235 */ |
117 get inputElement() { | 236 get inputElement() { |
118 return this.$.input; | 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; |
119 } | 289 } |
120 | 290 |
121 }; | 291 }; |
122 | 292 |
123 </script> | 293 </script> |
OLD | NEW |