diff options
Diffstat (limited to 'catapult/third_party/polymer/components/iron-autogrow-textarea/iron-autogrow-textarea.html')
| -rw-r--r-- | catapult/third_party/polymer/components/iron-autogrow-textarea/iron-autogrow-textarea.html | 373 |
1 files changed, 373 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/iron-autogrow-textarea/iron-autogrow-textarea.html b/catapult/third_party/polymer/components/iron-autogrow-textarea/iron-autogrow-textarea.html new file mode 100644 index 00000000..b70d6ae5 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-autogrow-textarea/iron-autogrow-textarea.html @@ -0,0 +1,373 @@ +<!-- +@license +Copyright (c) 2015 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +--> + +<link rel="import" href="../polymer/polymer.html"> +<link rel="import" href="../iron-behaviors/iron-control-state.html"> +<link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> +<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html"> +<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html"> + +<!-- +`iron-autogrow-textarea` is an element containing a textarea that grows in height as more +lines of input are entered. Unless an explicit height or the `maxRows` property is set, it will +never scroll. + +Example: + + <iron-autogrow-textarea></iron-autogrow-textarea> + +### Styling + +The following custom properties and mixins are available for styling: + +Custom property | Description | Default +----------------|-------------|---------- +`--iron-autogrow-textarea` | Mixin applied to the textarea | `{}` +`--iron-autogrow-textarea-placeholder` | Mixin applied to the textarea placeholder | `{}` + +@group Iron Elements +@hero hero.svg +@demo demo/index.html +--> + +<dom-module id="iron-autogrow-textarea"> + <template> + <style> + :host { + display: inline-block; + position: relative; + width: 400px; + border: 1px solid; + padding: 2px; + -moz-appearance: textarea; + -webkit-appearance: textarea; + overflow: hidden; + } + + .mirror-text { + visibility: hidden; + word-wrap: break-word; + } + + .fit { + @apply(--layout-fit); + } + + textarea { + position: relative; + outline: none; + border: none; + resize: none; + background: inherit; + color: inherit; + /* see comments in template */ + width: 100%; + height: 100%; + font-size: inherit; + font-family: inherit; + line-height: inherit; + text-align: inherit; + @apply(--iron-autogrow-textarea); + } + + ::content textarea:invalid { + box-shadow: none; + } + + textarea::-webkit-input-placeholder { + @apply(--iron-autogrow-textarea-placeholder); + } + + textarea:-moz-placeholder { + @apply(--iron-autogrow-textarea-placeholder); + } + + textarea::-moz-placeholder { + @apply(--iron-autogrow-textarea-placeholder); + } + + textarea:-ms-input-placeholder { + @apply(--iron-autogrow-textarea-placeholder); + } + </style> + + <!-- the mirror sizes the input/textarea so it grows with typing --> + <!-- use   instead of to allow this element to be used in XHTML --> + <div id="mirror" class="mirror-text" aria-hidden="true"> </div> + + <!-- size the input/textarea with a div, because the textarea has intrinsic size in ff --> + <div class="textarea-container fit"> + <textarea id="textarea" + name$="[[name]]" + autocomplete$="[[autocomplete]]" + autofocus$="[[autofocus]]" + inputmode$="[[inputmode]]" + placeholder$="[[placeholder]]" + readonly$="[[readonly]]" + required$="[[required]]" + disabled$="[[disabled]]" + rows$="[[rows]]" + minlength$="[[minlength]]" + maxlength$="[[maxlength]]"></textarea> + </div> + </template> +</dom-module> + +<script> + + Polymer({ + + is: 'iron-autogrow-textarea', + + behaviors: [ + Polymer.IronFormElementBehavior, + Polymer.IronValidatableBehavior, + Polymer.IronControlState + ], + + properties: { + + /** + * Use this property instead of `value` for two-way data binding. + * This property will be deprecated in the future. Use `value` instead. + * @type {string|number} + */ + bindValue: { + observer: '_bindValueChanged', + type: String + }, + + /** + * The initial number of rows. + * + * @attribute rows + * @type number + * @default 1 + */ + rows: { + type: Number, + value: 1, + observer: '_updateCached' + }, + + /** + * The maximum number of rows this element can grow to until it + * scrolls. 0 means no maximum. + * + * @attribute maxRows + * @type number + * @default 0 + */ + maxRows: { + type: Number, + value: 0, + observer: '_updateCached' + }, + + /** + * Bound to the textarea's `autocomplete` attribute. + */ + autocomplete: { + type: String, + value: 'off' + }, + + /** + * Bound to the textarea's `autofocus` attribute. + */ + autofocus: { + type: Boolean, + value: false + }, + + /** + * Bound to the textarea's `inputmode` attribute. + */ + inputmode: { + type: String + }, + + /** + * Bound to the textarea's `placeholder` attribute. + */ + placeholder: { + type: String + }, + + /** + * Bound to the textarea's `readonly` attribute. + */ + readonly: { + type: String + }, + + /** + * Set to true to mark the textarea as required. + */ + required: { + type: Boolean + }, + + /** + * The minimum length of the input value. + */ + minlength: { + type: Number + }, + + /** + * The maximum length of the input value. + */ + maxlength: { + type: Number + } + + }, + + listeners: { + 'input': '_onInput' + }, + + observers: [ + '_onValueChanged(value)' + ], + + /** + * Returns the underlying textarea. + * @type HTMLTextAreaElement + */ + get textarea() { + return this.$.textarea; + }, + + /** + * Returns textarea's selection start. + * @type Number + */ + get selectionStart() { + return this.$.textarea.selectionStart; + }, + + /** + * Returns textarea's selection end. + * @type Number + */ + get selectionEnd() { + return this.$.textarea.selectionEnd; + }, + + /** + * Sets the textarea's selection start. + */ + set selectionStart(value) { + this.$.textarea.selectionStart = value; + }, + + /** + * Sets the textarea's selection end. + */ + set selectionEnd(value) { + this.$.textarea.selectionEnd = value; + }, + + attached: function() { + /* iOS has an arbitrary left margin of 3px that isn't present + * in any other browser, and means that the paper-textarea's cursor + * overlaps the label. + * See https://github.com/PolymerElements/paper-input/issues/468. + */ + var IS_IOS = navigator.userAgent.match(/iP(?:[oa]d|hone)/); + if (IS_IOS) { + this.$.textarea.style.marginLeft = '-3px'; + } + }, + + /** + * Returns true if `value` is valid. The validator provided in `validator` + * will be used first, if it exists; otherwise, the `textarea`'s validity + * is used. + * @return {boolean} True if the value is valid. + */ + validate: function() { + // Empty, non-required input is valid. + if (!this.required && this.value == '') { + this.invalid = false; + return true; + } + + var valid; + if (this.hasValidator()) { + valid = Polymer.IronValidatableBehavior.validate.call(this, this.value); + } else { + valid = this.$.textarea.validity.valid; + this.invalid = !valid; + } + this.fire('iron-input-validate'); + return valid; + }, + + _bindValueChanged: function() { + var textarea = this.textarea; + if (!textarea) { + return; + } + + // If the bindValue changed manually, then we need to also update + // the underlying textarea's value. Otherwise this change was probably + // generated from the _onInput handler, and the two values are already + // the same. + if (textarea.value !== this.bindValue) { + textarea.value = !(this.bindValue || this.bindValue === 0) ? '' : this.bindValue; + } + + this.value = this.bindValue; + this.$.mirror.innerHTML = this._valueForMirror(); + // manually notify because we don't want to notify until after setting value + this.fire('bind-value-changed', {value: this.bindValue}); + }, + + _onInput: function(event) { + this.bindValue = event.path ? event.path[0].value : event.target.value; + }, + + _constrain: function(tokens) { + var _tokens; + tokens = tokens || ['']; + // Enforce the min and max heights for a multiline input to avoid measurement + if (this.maxRows > 0 && tokens.length > this.maxRows) { + _tokens = tokens.slice(0, this.maxRows); + } else { + _tokens = tokens.slice(0); + } + while (this.rows > 0 && _tokens.length < this.rows) { + _tokens.push(''); + } + // Use   instead of to allow this element to be used in XHTML. + return _tokens.join('<br/>') + ' '; + }, + + _valueForMirror: function() { + var input = this.textarea; + if (!input) { + return; + } + this.tokens = (input && input.value) ? input.value.replace(/&/gm, '&').replace(/"/gm, '"').replace(/'/gm, ''').replace(/</gm, '<').replace(/>/gm, '>').split('\n') : ['']; + return this._constrain(this.tokens); + }, + + _updateCached: function() { + this.$.mirror.innerHTML = this._constrain(this.tokens); + }, + + _onValueChanged: function() { + this.bindValue = this.value; + } + }); +</script> |