| <!-- |
| The <expanding-textarea-sk> custom element declaration. Displays a clickable |
| text link that expands a textarea. The value of the textarea is accessible by |
| callers via the value attribute. |
| |
| Attributes: |
| value: Contains the text entered into the textarea. |
| displayText: The clickable text that will open/close the textarea. |
| placeholderText: Is used as a placeholder in the textarea. |
| |
| Events: |
| None. |
| |
| Methods: |
| None. |
| --> |
| |
| <dom-module id="expanding-textarea-sk"> |
| <style> |
| paper-input { |
| width: 20em; |
| } |
| |
| .long-field { |
| width: 40em; |
| } |
| </style> |
| <template> |
| <a href="javascript:void(0);" id="expander"> |
| <iron-icon icon="{{expanderIcon(opened)}}"></iron-icon> |
| {{displayText}} |
| </a> |
| <span class="long-field"> |
| <iron-collapse id="collapser" opened="{{opened}}"> |
| <iron-autogrow-textarea class="long-field" rows=5 max-rows=20 bind-value="{{value}}" placeholder="{{placeholderText}}"> |
| </iron-autogrow-textarea> |
| </iron-collapse> |
| </span> |
| </template> |
| <script> |
| Polymer({ |
| is: "expanding-textarea-sk", |
| properties: { |
| opened: { |
| type: Boolean, |
| value: false, |
| }, |
| value: { |
| type: String, |
| notify: true, |
| }, |
| displayText: { |
| type: String, |
| value: "Expand/Collapse textarea", |
| }, |
| placeholderText: { |
| type: String, |
| value: "", |
| }, |
| }, |
| |
| ready: function() { |
| var that = this; |
| this.$.expander.addEventListener('click', function(e) { |
| that.$.collapser.toggle(); |
| }); |
| }, |
| |
| expanderIcon: function(opened) { |
| if (opened) { |
| return "expand-less"; |
| } else { |
| return "expand-more"; |
| } |
| }, |
| }); |
| </script> |
| |
| </dom-module> |