From 71be72b50ccfe7f5b71c0ebffcd8cac0789ef5d6 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Tue, 24 Apr 2018 14:29:08 +0200
Subject: [PATCH] Automatically grow/shrink input as text is entered/removed

---
 CHANGES.md                    | 5 +++--
 sass/converse/_variables.scss | 1 +
 sass/inverse/_variables.scss  | 1 +
 src/converse-chatview.js      | 8 +++++++-
 src/converse-muc-views.js     | 3 ++-
 5 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 6b6e1c285..a1088c70a 100644
--- a/CHANGES.md
+++ b/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)
 
diff --git a/sass/converse/_variables.scss b/sass/converse/_variables.scss
index d6b3e9657..795845a50 100644
--- a/sass/converse/_variables.scss
+++ b/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;
 
diff --git a/sass/inverse/_variables.scss b/sass/inverse/_variables.scss
index b6534ec9a..223eb54ad 100644
--- a/sass/inverse/_variables.scss
+++ b/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;
diff --git a/src/converse-chatview.js b/src/converse-chatview.js
index 5ae32b939..504eeb403 100644
--- a/src/converse-chatview.js
+++ b/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?"));
diff --git a/src/converse-muc-views.js b/src/converse-muc-views.js
index bdc9fe843..9bc72ea54 100644
--- a/src/converse-muc-views.js
+++ b/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 () {