third_party/polymer/components/paper-input/paper-autogrow-textarea.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
   8 -->
   9
  10 <!--
  11 `paper-autogrow-textarea` is an element containing a textarea that grows in height as more
  12 lines of input are entered. Unless an explicit height or the `maxRows` property is set, it will
  13 never scroll.
  14
  15 Example:
  16
  17     <paper-autogrow-textarea id="a1">
  18         <textarea id="t1"></textarea>
  19     <paper-autogrow-textarea>
  20
  21 Because the `textarea`'s `value` property is not observable, if you set the `value` imperatively
  22 you must call `update` to notify this element the value has changed.
  23
  24 Example:
  25
  26     /* using example HTML above */
  27     t1.value = 'some\ntext';
  28     a1.update();
  29
  30 @group Paper Elements
  31 @element paper-autogrow-textarea
  32 @status unstable
  33 -->
  34
  35 <link href="../polymer/polymer.html" rel="import">
  36
  37 <polymer-element name="paper-autogrow-textarea" on-input="{{inputAction}}">
  38 <template>
  39
  40   <style>
  41     :host {
  42       display: inline-block;
  43       position: relative;
  44       width: 400px;
  45     }
  46
  47     .mirror-text {
  48       visibility: hidden;
  49     }
  50
  51     ::content textarea {
  52       padding: 0;
  53       margin: 0;
  54       border: none;
  55       outline: none;
  56       resize: none;
  57       /* see comments in template */
  58       width: 100%;
  59       height: 100%;
  60     }
  61
  62     ::content textarea:invalid {
  63       box-shadow: none;
  64     }
  65   </style>
  66
  67   <!-- the mirror sizes the input/textarea so it grows with typing -->
  68   <div id="mirror" class="mirror-text" aria-hidden="true">&nbsp;</div>
  69
  70   <!-- size the input/textarea with a div, because the textarea has intrinsic size in ff -->
  71   <div class="textarea-container" fit>
  72     <content></content>
  73   </div>
  74
  75 </template>
  76 <script>
  77
  78   Polymer({
  79
  80     publish: {
  81
  82         /**
  83          * The textarea that should auto grow.
  84          *
  85          * @attribute target
  86          * @type HTMLTextAreaElement
  87          * @default null
  88          */
  89         target: null,
  90
  91         /**
  92          * The initial number of rows.
  93          *
  94          * @attribute rows
  95          * @type number
  96          * @default 1
  97          */
  98         rows: 1,
  99
 100         /**
 101          * The maximum number of rows this element can grow to until it
 102          * scrolls. 0 means no maximum.
 103          *
 104          * @attribute maxRows
 105          * @type number
 106          * @default 0
 107          */
 108         maxRows: 0
 109     },
 110
 111     tokens: null,
 112
 113     observe: {
 114       rows: 'updateCached',
 115       maxRows: 'updateCached'
 116     },
 117
 118     constrain: function(tokens) {
 119       var _tokens;
 120       tokens = tokens || [''];
 121       // Enforce the min and max heights for a multiline input to avoid measurement
 122       if (this.maxRows > 0 && tokens.length > this.maxRows) {
 123         _tokens = tokens.slice(0, this.maxRows);
 124       } else {
 125         _tokens = tokens.slice(0);
 126       }
 127       while (this.rows > 0 && _tokens.length < this.rows) {
 128         _tokens.push('');
 129       }
 130       return _tokens.join('<br>') + '&nbsp;';
 131     },
 132
 133     valueForMirror: function(input) {
 134       this.tokens = (input && input.value) ? input.value.replace(/&/gm, '&amp;').replace(/"/gm, '&quot;').replace(/'/gm, '&#39;').replace(/</gm, '&lt;').replace(/>/gm, '&gt;').split('\n') : [''];
 135       return this.constrain(this.tokens);
 136     },
 137
 138     /**
 139      * Sizes this element to fit the input value. This function is automatically called
 140      * when the user types in new input, but you must call this function if the value
 141      * is updated imperatively.
 142      *
 143      * @method update
 144      * @param Element The input
 145      */
 146     update: function(input) {
 147       this.$.mirror.innerHTML = this.valueForMirror(input);
 148     },
 149
 150     updateCached: function() {
 151       this.$.mirror.innerHTML = this.constrain(this.tokens);
 152     },
 153
 154     inputAction: function(e) {
 155       this.update(e.target);
 156     }
 157
 158   });
 159
 160 </script>
 161 </polymer-element>