Automatically grow/shrink input as text is entered/removed

CHANGES.md

@@ -4,9 +4,10 @@
 
 ## New Features
 
-- #161 XEP-0363: HTTP File Upload
 - Support for rendering URLs sent according to XEP-0066 Out of Band Data.
-- mp4 and mp3 files when sent as XEP-0066 Out of Band Data, will now be playable directly in chat
+- MP4 and MP3 files when sent as XEP-0066 Out of Band Data, are now playable directly in chat
+- Automatically grow/shrink input as text is entered/removed
+- #161 XEP-0363: HTTP File Upload
 
 ## 4.0.0 (Unreleased)
 

sass/converse/_variables.scss

@@ -49,6 +49,7 @@ $border-color: #CCC !default;
 $icon-color: $blue !default;
 $save-button-color: $green !default;
 $chat-textarea-height: 60px !default;
+$max-chat-textarea-height: 200px !default;
 $send-button-height: 27px !default;
 $send-button-margin: 3px !default;
 

sass/inverse/_variables.scss

@@ -65,6 +65,7 @@ $chat-head-inverse-text-color: white !default;
 $chat-head-height: 62px !default;
 
 $chat-textarea-height: 60px !default;
+$max-chat-textarea-height: 400px !default;
 
 $input-focus-color: #1A9707 !default;
 $highlight-color: #DCF9F6 !default;

src/converse-chatview.js

@@ -251,7 +251,8 @@
                     'click .toggle-smiley': 'toggleEmojiMenu',
                     'click .toggle-spoiler': 'toggleSpoilerMessage',
                     'click .upload-file': 'toggleFileUpload',
-                    'keypress .chat-textarea': 'keyPressed'
+                    'keypress .chat-textarea': 'keyPressed',
+                    'input .chat-textarea': 'inputChanged'
                 },
 
                 initialize () {
@@ -827,6 +828,11 @@
                     }
                 },
 
+                inputChanged (ev) {
+                    ev.target.style.height = 'auto'; // Fixes weirdness
+                    ev.target.style.height = (ev.target.scrollHeight) + 'px';
+                },
+
                 clearMessages (ev) {
                     if (ev && ev.preventDefault) { ev.preventDefault(); }
                     const result = confirm(__("Are you sure you want to clear the messages from this conversation?"));

src/converse-muc-views.js

@@ -502,7 +502,8 @@
                     'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
                     'click .toggle-smiley': 'toggleEmojiMenu',
                     'click .upload-file': 'toggleFileUpload',
-                    'keypress .chat-textarea': 'keyPressed'
+                    'keypress .chat-textarea': 'keyPressed',
+                    'input .chat-textarea': 'inputChanged'
                 },
 
                 initialize () {