Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(2)

Unified Diff: third_party/polymer/v0_8/components/iron-autogrow-textarea/iron-autogrow-textarea.html

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: third_party/polymer/v0_8/components/iron-autogrow-textarea/iron-autogrow-textarea.html
diff --git a/third_party/polymer/v0_8/components/iron-autogrow-textarea/iron-autogrow-textarea.html b/third_party/polymer/v0_8/components/iron-autogrow-textarea/iron-autogrow-textarea.html
new file mode 100644
index 0000000000000000000000000000000000000000..6a21146944b9800c606f7e5f8a159a4e061f625c
--- /dev/null
+++ b/third_party/polymer/v0_8/components/iron-autogrow-textarea/iron-autogrow-textarea.html
@@ -0,0 +1,210 @@
+<!--
+@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-flex-layout/classes/iron-flex-layout.html">
+<link rel="import" href="../iron-validatable-behavior/iron-validatable-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 id="a1">
+ <textarea id="t1"></textarea>
+ </iron-autogrow-textarea>
+
+Because the `textarea`'s `value` property is not observable, you should use
+this element's `bind-value` instead for imperative updates.
+
+@group Iron Elements
+@hero hero.svg
+@demo demo/index.html
+-->
+
+<dom-module id="iron-autogrow-textarea">
+
+ <style>
+ :host {
+ display: inline-block;
+ position: relative;
+ width: 400px;
+ border: 1px solid;
+ padding: 2px;
+ -moz-appearance: textarea;
+ -webkit-appearance: textarea;
+ }
+
+ .mirror-text {
+ visibility: hidden;
+ word-wrap: break-word;
+ }
+
+ textarea {
+ position: relative;
+ outline: none;
+ border: none;
+ resize: none;
+ background: inherit;
+ /* see comments in template */
+ width: 100%;
+ height: 100%;
+ font-size: inherit;
+ font-family: inherit;
+ }
+
+ ::content textarea:invalid {
+ box-shadow: none;
+ }
+
+ </style>
+ <template>
+ <!-- the mirror sizes the input/textarea so it grows with typing -->
+ <div id="mirror" class="mirror-text" aria-hidden="true">&nbsp;</div>
+
+ <!-- size the input/textarea with a div, because the textarea has intrinsic size in ff -->
+ <div class="textarea-container fit">
+ <textarea id="textarea" required$="[[required]]" rows$="[[rows]]" maxlength$="[[maxlength]]"></textarea>
+ </div>
+ </template>
+
+<script>
+
+ Polymer({
+
+ is: 'iron-autogrow-textarea',
+
+ behaviors: [
+ Polymer.IronValidatableBehavior
+ ],
+
+ properties: {
+
+ /**
+ * Use this property instead of `value` for two-way data binding.
+ */
+ 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'
+ },
+
+ /**
+ * Set to true to mark the textarea as required.
+ */
+ required: {
+ type: Boolean
+ },
+
+ /**
+ * The maximum length of the input value.
+ */
+ maxlength: {
+ type: Number
+ }
+
+ },
+
+ listeners: {
+ 'input': '_onInput'
+ },
+
+ /**
+ * Returns the underlying textarea.
+ */
+ get textarea() {
+ return this.$.textarea;
+ },
+
+ _update: function() {
+ this.$.mirror.innerHTML = this._valueForMirror();
+
+ var textarea = this.textarea;
+ // If the value of the textarea was updated imperatively, then we
+ // need to manually update bindValue as well.
+ if (textarea && this.bindValue != textarea.value) {
+ this.bindValue = textarea.value;
+ }
+ },
+
+ _bindValueChanged: function() {
+ var textarea = this.textarea;
+ if (!textarea) {
+ return;
+ }
+
+ textarea.value = this.bindValue;
+ this._update();
+ // 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;
+ this._update();
+ },
+
+ _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('');
+ }
+ return _tokens.join('<br>') + '&nbsp;';
+ },
+
+ _valueForMirror: function() {
+ var input = this.textarea;
+ if (!input) {
+ return;
+ }
+ this.tokens = (input && input.value) ? input.value.replace(/&/gm, '&amp;').replace(/"/gm, '&quot;').replace(/'/gm, '&#39;').replace(/</gm, '&lt;').replace(/>/gm, '&gt;').split('\n') : [''];
+ return this._constrain(this.tokens);
+ },
+
+ _updateCached: function() {
+ this.$.mirror.innerHTML = this._constrain(this.tokens);
+ }
+ })
+</script>

Powered by Google App Engine
This is Rietveld 408576698