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 | 10 |
11 <link rel="import" href="../polymer/polymer.html"> | 11 <link rel="import" href="../polymer/polymer.html"> |
12 <link rel="import" href="../iron-behaviors/iron-control-state.html"> | 12 <link rel="import" href="../iron-behaviors/iron-control-state.html"> |
13 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html"> | 13 <link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html"> |
14 <link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.
html"> | 14 <link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.
html"> |
15 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavio
r.html"> | 15 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavio
r.html"> |
16 | 16 |
17 <!-- | 17 <!-- |
18 `iron-autogrow-textarea` is an element containing a textarea that grows in heigh
t as more | 18 `iron-autogrow-textarea` is an element containing a textarea that grows in heigh
t as more |
19 lines of input are entered. Unless an explicit height or the `maxRows` property
is set, it will | 19 lines of input are entered. Unless an explicit height or the `maxRows` property
is set, it will |
20 never scroll. | 20 never scroll. |
21 | 21 |
22 Example: | 22 Example: |
23 | 23 |
24 <iron-autogrow-textarea></iron-autogrow-textarea> | 24 <iron-autogrow-textarea></iron-autogrow-textarea> |
25 | 25 |
26 Because the `textarea`'s `value` property is not observable, you should use | 26 Because the `textarea`'s `value` property is not observable, you should use |
27 this element's `bind-value` instead for imperative updates. | 27 this element's `bind-value` instead for imperative updates. |
28 | 28 |
| 29 ### Styling |
| 30 The following custom properties and mixins are available for styling: |
| 31 Custom property | Description | Default |
| 32 ----------------|-------------|---------- |
| 33 `--iron-autogrow-textarea` | Mixin applied to the textarea | `{}` |
| 34 |
29 @group Iron Elements | 35 @group Iron Elements |
30 @hero hero.svg | 36 @hero hero.svg |
31 @demo demo/index.html | 37 @demo demo/index.html |
32 --> | 38 --> |
33 | 39 |
34 <dom-module id="iron-autogrow-textarea"> | 40 <dom-module id="iron-autogrow-textarea"> |
35 | 41 |
36 <style> | 42 <style> |
37 :host { | 43 :host { |
38 display: inline-block; | 44 display: inline-block; |
(...skipping 16 matching lines...) Expand all Loading... |
55 border: none; | 61 border: none; |
56 resize: none; | 62 resize: none; |
57 background: inherit; | 63 background: inherit; |
58 color: inherit; | 64 color: inherit; |
59 /* see comments in template */ | 65 /* see comments in template */ |
60 width: 100%; | 66 width: 100%; |
61 height: 100%; | 67 height: 100%; |
62 font-size: inherit; | 68 font-size: inherit; |
63 font-family: inherit; | 69 font-family: inherit; |
64 line-height: inherit; | 70 line-height: inherit; |
| 71 @apply(--iron-autogrow-textarea); |
65 } | 72 } |
66 | 73 |
67 ::content textarea:invalid { | 74 ::content textarea:invalid { |
68 box-shadow: none; | 75 box-shadow: none; |
69 } | 76 } |
70 | 77 |
71 </style> | 78 </style> |
72 <template> | 79 <template> |
73 <!-- the mirror sizes the input/textarea so it grows with typing --> | 80 <!-- the mirror sizes the input/textarea so it grows with typing --> |
74 <div id="mirror" class="mirror-text" aria-hidden="true"> </div> | 81 <div id="mirror" class="mirror-text" aria-hidden="true"> </div> |
75 | 82 |
76 <!-- size the input/textarea with a div, because the textarea has intrinsic
size in ff --> | 83 <!-- size the input/textarea with a div, because the textarea has intrinsic
size in ff --> |
77 <div class="textarea-container fit"> | 84 <div class="textarea-container fit"> |
78 <textarea id="textarea" | 85 <textarea id="textarea" |
79 autocomplete$="[[autocomplete]]" | 86 autocomplete$="[[autocomplete]]" |
80 autofocus$="[[autofocus]]" | 87 autofocus$="[[autofocus]]" |
81 inputmode$="[[inputmode]]" | 88 inputmode$="[[inputmode]]" |
82 placeholder$="[[placeholder]]" | 89 placeholder$="[[placeholder]]" |
83 readonly$="[[readonly]]" | 90 readonly$="[[readonly]]" |
84 required$="[[required]]" | 91 required$="[[required]]" |
| 92 disabled$="[[disabled]]" |
85 rows$="[[rows]]" | 93 rows$="[[rows]]" |
86 maxlength$="[[maxlength]]"></textarea> | 94 maxlength$="[[maxlength]]"></textarea> |
87 </div> | 95 </div> |
88 </template> | 96 </template> |
89 </dom-module> | 97 </dom-module> |
90 | 98 |
91 <script> | 99 <script> |
92 | 100 |
93 Polymer({ | 101 Polymer({ |
94 | 102 |
(...skipping 176 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
271 this.fire('iron-input-validate'); | 279 this.fire('iron-input-validate'); |
272 return valid; | 280 return valid; |
273 }, | 281 }, |
274 | 282 |
275 _bindValueChanged: function() { | 283 _bindValueChanged: function() { |
276 var textarea = this.textarea; | 284 var textarea = this.textarea; |
277 if (!textarea) { | 285 if (!textarea) { |
278 return; | 286 return; |
279 } | 287 } |
280 | 288 |
281 textarea.value = this.bindValue; | 289 // If the bindValue changed manually, then we need to also update |
| 290 // the underlying textarea's value. Otherwise this change was probably |
| 291 // generated from the _onInput handler, and the two values are already |
| 292 // the same. |
| 293 if (textarea.value !== this.bindValue) { |
| 294 textarea.value = !(this.bindValue || this.bindValue === 0) ? '' : this.b
indValue; |
| 295 } |
| 296 |
282 this.$.mirror.innerHTML = this._valueForMirror(); | 297 this.$.mirror.innerHTML = this._valueForMirror(); |
283 // manually notify because we don't want to notify until after setting val
ue | 298 // manually notify because we don't want to notify until after setting val
ue |
284 this.fire('bind-value-changed', {value: this.bindValue}); | 299 this.fire('bind-value-changed', {value: this.bindValue}); |
285 }, | 300 }, |
286 | 301 |
287 _onInput: function(event) { | 302 _onInput: function(event) { |
288 this.bindValue = event.path ? event.path[0].value : event.target.value; | 303 this.bindValue = event.path ? event.path[0].value : event.target.value; |
289 }, | 304 }, |
290 | 305 |
291 _constrain: function(tokens) { | 306 _constrain: function(tokens) { |
(...skipping 22 matching lines...) Expand all Loading... |
314 | 329 |
315 _updateCached: function() { | 330 _updateCached: function() { |
316 this.$.mirror.innerHTML = this._constrain(this.tokens); | 331 this.$.mirror.innerHTML = this._constrain(this.tokens); |
317 }, | 332 }, |
318 | 333 |
319 _computeValue: function() { | 334 _computeValue: function() { |
320 return this.bindValue; | 335 return this.bindValue; |
321 } | 336 } |
322 }); | 337 }); |
323 </script> | 338 </script> |
OLD | NEW |