| 134 | function autoResizeTextarea() { |
| 135 | // Add a hidden div. We'll copy over the text from the textarea to measure its height. |
| 136 | $('body').append( '<div class="quick-draft-textarea-clone" style="display: none;"></div>' ); |
| 137 | |
| 138 | var clone = $('.quick-draft-textarea-clone'), |
| 139 | editor = $('#content'), |
| 140 | editorHeight = editor.height(), |
| 141 | // 100px roughly accounts for browser chrome and allows the |
| 142 | // save draft button to show on-screen at the same time. |
| 143 | editorMaxHeight = $(window).height() - 100; |
| 144 | |
| 145 | // Normally we want scrollbars |
| 146 | editor.css('overflow-y', 'scroll'); |
| 147 | |
| 148 | // Match up textarea and clone div as much as possible. |
| 149 | // Padding cannot be reliably retrieved using shorthand in all browsers. |
| 150 | clone.css({ |
| 151 | 'font-family': editor.css('font-family'), |
| 152 | 'font-size': editor.css('font-size'), |
| 153 | 'line-height': editor.css('line-height'), |
| 154 | 'padding-bottom': editor.css('paddingBottom'), |
| 155 | 'padding-left': editor.css('paddingLeft'), |
| 156 | 'padding-right': editor.css('paddingRight'), |
| 157 | 'padding-top': editor.css('paddingTop'), |
| 158 | 'white-space': 'pre-wrap', |
| 159 | 'word-wrap': 'break-word', |
| 160 | 'display': 'none' |
| 161 | }); |
| 162 | |
| 163 | // propertychange is for IE < 9 |
| 164 | editor.on('focus input propertychange', function() { |
| 165 | var $this = $(this), |
| 166 | // is to ensure that the height of a final trailing newline is included. |
| 167 | textareaContent = $this.val().replace(/\n/g, '<br>') + ' ', |
| 168 | // 2px is for border-top & border-bottom |
| 169 | cloneHeight = clone.css('width', $this.css('width')).html(textareaContent).outerHeight() + 2; |
| 170 | |
| 171 | // Only change the height if it has indeed changed and both heights are below the max. |
| 172 | if ( cloneHeight === editorHeight || ( cloneHeight >= editorMaxHeight && editorHeight >= editorMaxHeight ) ) { |
| 173 | return; |
| 174 | } |
| 175 | |
| 176 | // Don't allow editor to exceed height of window. |
| 177 | // This is also bound in CSS to a max-height of 1300px to be extra safe. |
| 178 | if ( cloneHeight > editorMaxHeight ) { |
| 179 | editorHeight = editorMaxHeight; |
| 180 | } else { |
| 181 | editorHeight = cloneHeight; |
| 182 | } |
| 183 | |
| 184 | // No scrollbars as we change height |
| 185 | editor.css('overflow-y', 'hidden'); |
| 186 | |
| 187 | $this.css('height', editorHeight + 'px'); |
| 188 | }); |
| 189 | } |
| 190 | |