Add auto resize to text areas

3 files changed, 24 insertions, 1 deletions

diff --git a/app/src/main/kotlin/com/pitchedapps/frost/injectors/JsAssets.kt b/app/src/main/kotlin/com/pitchedapps/frost/injectors/JsAssets.kt
index 03ab6e96..91f8aa71 100644
--- a/app/src/main/kotlin/com/pitchedapps/frost/injectors/JsAssets.kt
+++ b/app/src/main/kotlin/com/pitchedapps/frost/injectors/JsAssets.kt
@@ -35,7 +35,7 @@ import kotlinx.coroutines.withContext
  */
 enum class JsAssets : InjectorContract {
     MENU, CLICK_A, CONTEXT_A, MEDIA, HEADER_BADGES, TEXTAREA_LISTENER, NOTIF_MSG,
-    DOCUMENT_WATCHER, HORIZONTAL_SCROLLING
+    DOCUMENT_WATCHER, HORIZONTAL_SCROLLING, AUTO_RESIZE_TEXTAREA
     ;
 
     @VisibleForTesting
diff --git a/app/src/main/kotlin/com/pitchedapps/frost/web/FrostWebViewClients.kt b/app/src/main/kotlin/com/pitchedapps/frost/web/FrostWebViewClients.kt
index 4d635547..657bf93e 100644
--- a/app/src/main/kotlin/com/pitchedapps/frost/web/FrostWebViewClients.kt
+++ b/app/src/main/kotlin/com/pitchedapps/frost/web/FrostWebViewClients.kt
@@ -128,6 +128,7 @@ open class FrostWebViewClient(val web: FrostWebView) : BaseWebViewClient() {
                 ),
                 JsAssets.DOCUMENT_WATCHER,
                 JsAssets.HORIZONTAL_SCROLLING,
+                JsAssets.AUTO_RESIZE_TEXTAREA,
                 JsAssets.CLICK_A,
                 CssHider.ADS.maybe(!prefs.showFacebookAds),
                 JsAssets.CONTEXT_A,
diff --git a/app/src/web/ts/auto_resize_textarea.ts b/app/src/web/ts/auto_resize_textarea.ts
new file mode 100644
index 00000000..f690d4c0
--- /dev/null
+++ b/app/src/web/ts/auto_resize_textarea.ts
@@ -0,0 +1,22 @@
+// Credits to https://codepen.io/tomhodgins/pen/KgazaE
+(function () {
+    const textareas = <NodeListOf<HTMLTextAreaElement>>document.querySelectorAll('textarea.frostAutoExpand');
+
+    const _frostAutoExpand = (el: HTMLElement) => {
+        el.style.height = 'inherit'
+        el.style.height = `${el.scrollHeight}px`
+    };
+    function _frostExpandAll() {
+        textareas.forEach(_frostAutoExpand);
+    }
+    textareas.forEach(el => {
+        const __frostAutoExpand = () => {
+            _frostAutoExpand(el)
+        };
+        el.addEventListener('paste', __frostAutoExpand)
+        el.addEventListener('input', __frostAutoExpand)
+        el.addEventListener('keyup', __frostAutoExpand)
+    });
+    window.addEventListener('load', _frostExpandAll)
+    window.addEventListener('resize', _frostExpandAll)
+}).call(undefined);