From e55b5b47cdeeb6a54a64f97f48d61b0217c15ae8 Mon Sep 17 00:00:00 2001
From: Alex Turchyn <lexfox777@gmail.com>
Date: Sat, 1 Jul 2023 01:09:44 +0300
Subject: [PATCH] autoresize textarea

---
 app/javascript/application.js                   |  2 ++
 app/javascript/elements/autoresize_textarea.js  | 17 +++++++++++++++++
 .../_google_cloud_form.html.erb                 |  2 +-
 app/views/submissions/new.html.erb              | 13 +++++++++----
 4 files changed, 29 insertions(+), 5 deletions(-)
 create mode 100644 app/javascript/elements/autoresize_textarea.js

diff --git a/app/javascript/application.js b/app/javascript/application.js
index ac414dcb..eb9d9cf0 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -13,6 +13,7 @@ import DynamicList from './elements/dynamic_list'
 import DownloadButton from './elements/download_button'
 import SetOriginUrl from './elements/set_origin_url'
 import SetTimezone from './elements/set_timezone'
+import AutoresizeTextarea from './elements/autoresize_textarea'
 
 document.addEventListener('turbo:before-cache', () => {
   window.flash?.remove()
@@ -34,6 +35,7 @@ window.customElements.define('dynamic-list', DynamicList)
 window.customElements.define('download-button', DownloadButton)
 window.customElements.define('set-origin-url', SetOriginUrl)
 window.customElements.define('set-timezone', SetTimezone)
+window.customElements.define('autoresize-textarea', AutoresizeTextarea)
 
 window.customElements.define('template-builder', class extends HTMLElement {
   connectedCallback () {
diff --git a/app/javascript/elements/autoresize_textarea.js b/app/javascript/elements/autoresize_textarea.js
new file mode 100644
index 00000000..470f7a39
--- /dev/null
+++ b/app/javascript/elements/autoresize_textarea.js
@@ -0,0 +1,17 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.resize()
+
+    this.textarea.addEventListener('input', () => this.resize())
+  }
+
+  resize () {
+    if (this.textarea.clientHeight < this.textarea.scrollHeight) {
+      this.textarea.style.height = `${this.textarea.scrollHeight}px`
+    }
+  }
+
+  get textarea () {
+    return this.querySelector('textarea')
+  }
+}
diff --git a/app/views/storage_settings/_google_cloud_form.html.erb b/app/views/storage_settings/_google_cloud_form.html.erb
index c8bdc44f..c52691e3 100644
--- a/app/views/storage_settings/_google_cloud_form.html.erb
+++ b/app/views/storage_settings/_google_cloud_form.html.erb
@@ -13,7 +13,7 @@
     </div>
     <div class="form-control">
       <%= fff.label :credentials, 'Credentials (JSON key content)', class: 'label' %>
-      <%= fff.text_area :credentials, value: configs['credentials'], required: true, class: 'base-textarea' %>
+      <%= fff.text_area :credentials, value: configs['credentials'], required: true, class: 'base-textarea w-full', rows: 4 %>
     </div>
   <% end %>
 <% end %>
diff --git a/app/views/submissions/new.html.erb b/app/views/submissions/new.html.erb
index 0a8717c1..41bdafa4 100644
--- a/app/views/submissions/new.html.erb
+++ b/app/views/submissions/new.html.erb
@@ -3,7 +3,9 @@
     <% if @template.submitters.size == 1 %>
       <div class="form-control">
         <%= f.label :emails, class: 'label' %>
-        <%= f.text_area :emails, required: true, class: 'base-textarea' %>
+        <autoresize-textarea>
+          <%= f.text_area :emails, required: true, class: 'base-textarea w-full' %>
+        </autoresize-textarea>
       </div>
     <% else %>
       <dynamic-list class="space-y-4">
@@ -59,11 +61,14 @@
       <div class="card-body">
         <div class="form-control space-y-2">
           <span class="label-text">Hi there,</span>
-          <%= f.text_area :message, value: format(SubmitterMailer::DEFAULT_MESSAGE, name: @template.name), required: true, class: 'base-textarea !rounded-lg' %>
+          <autoresize-textarea>
+            <%= f.text_area :message, value: format(SubmitterMailer::DEFAULT_MESSAGE, name: @template.name), required: true, class: 'base-textarea !rounded-lg w-full' %>
+          </autoresize-textarea>
           <span class="label-text">
             Thanks,
-          <br>
-          <%= current_account.name %>
+            <br>
+            <%= current_account.name %>
+          </span>
         </div>
       </div>
     </div>