| 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 _ariaDescribedBy: { |
| 234 type: String, |
| 235 value: '' |
| 236 } |
| 237 |
| 238 }, |
| 239 |
| 240 listeners: { |
| 241 'addon-attached': '_onAddonAttached' |
| 242 }, |
| 243 |
| 244 /** |
| 245 * Returns a reference to the input element. |
| 246 */ |
| 247 get inputElement() { |
| 248 return this.$.input; |
| 249 }, |
| 250 |
| 251 attached: function() { |
| 252 this._updateAriaLabelledBy(); |
| 253 }, |
| 254 |
| 255 _appendStringWithSpace: function(str, more) { |
| 256 if (str) { |
| 257 str = str + ' ' + more; |
| 258 } else { |
| 259 str = more; |
| 260 } |
| 261 return str; |
| 262 }, |
| 263 |
| 264 _onAddonAttached: function(event) { |
| 265 var target = event.path ? event.path[0] : event.target; |
| 266 if (target.id) { |
| 267 this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedB
y, target.id); |
| 268 } else { |
| 269 var id = 'paper-input-add-on-' + Math.floor((Math.random() * 100000)); |
| 270 target.id = id; |
| 271 this._ariaDescribedBy = this._appendStringWithSpace(this._ariaDescribedB
y, id); |
| 272 } |
| 273 }, |
| 274 |
| 275 /** |
| 276 * Validates the input element and sets an error style if needed. |
| 277 */ |
| 278 validate: function() { |
| 279 return this.inputElement.validate(); |
| 280 }, |
| 281 |
| 282 /** |
| 283 * Restores the cursor to its original position after updating the value. |
| 284 * @param {string} newValue The value that should be saved. |
| 285 */ |
| 286 updateValueAndPreserveCaret: function(newValue) { |
| 287 // Not all elements might have selection, and even if they have the |
| 288 // right properties, accessing them might throw an exception (like for |
| 289 // <input type=number>) |
| 290 try { |
| 291 var start = this.inputElement.selectionStart; |
| 292 this.value = newValue; |
| 293 |
| 294 // The cursor automatically jumps to the end after re-setting the value, |
| 295 // so restore it to its original position. |
| 296 this.inputElement.selectionStart = start; |
| 297 this.inputElement.selectionEnd = start; |
| 298 } catch (e) { |
| 299 // Just set the value and give up on the caret. |
| 300 this.value = newValue; |
| 301 } |
| 302 }, |
| 303 |
| 304 _computeAlwaysFloatLabel: function(alwaysFloatLabel, placeholder) { |
| 305 return placeholder || alwaysFloatLabel; |
| 306 }, |
| 307 |
| 308 _updateAriaLabelledBy: function() { |
| 309 var label = Polymer.dom(this.root).querySelector('label'); |
| 310 if (!label) { |
| 311 this._ariaLabelledBy = ''; |
| 312 return; |
| 313 } |
| 314 var labelledBy; |
| 315 if (label.id) { |
| 316 labelledBy = label.id; |
| 317 } else { |
| 318 labelledBy = 'paper-input-label-' + new Date().getUTCMilliseconds(); |
| 319 label.id = labelledBy; |
| 320 } |
| 321 this._ariaLabelledBy = labelledBy; |
| 322 } |
| 323 |
| 324 }; |
| 325 |
| 326 Polymer.PaperInputBehavior = [Polymer.IronControlState, Polymer.PaperInputBeha
viorImpl]; |
| 327 |
| 328 </script> |
| OLD | NEW |