| 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 |