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 @@