diff options
Diffstat (limited to 'app/javascript/controllers')
-rw-r--r-- | app/javascript/controllers/chat_controller.js | 42 |
1 files changed, 42 insertions, 0 deletions
diff --git a/app/javascript/controllers/chat_controller.js b/app/javascript/controllers/chat_controller.js new file mode 100644 index 0000000..d9cf1cb --- /dev/null +++ b/app/javascript/controllers/chat_controller.js @@ -0,0 +1,42 @@ +import { Controller } from "stimulus"; + +export default class extends Controller { + static targets = [ "message", "output" ]; + + connect() { + this.load(); + } + + send() { + let vm = this; + // TODO: Temporary hack. Should just run this after default event. + setTimeout(function() { + vm.messageTarget.value = ""; + vm.smoothScrollToBottom(); + }, 100); + } + + load() { + this.scrollToBottom(); + if (this.outputTarget.innerHTML.trim() === "") { + fetch("/chat_messages") + .then(response => response.text()) + .then(html => { + this.outputTarget.innerHTML = html; + this.scrollToBottom(); + }); + } + } + + scrollToBottom() { + this.outputTarget.scrollTop = this.outputTarget.scrollHeight; + } + + smoothScrollToBottom() { + this.outputTarget.scrollTo({ + top: this.outputTarget.scrollHeight, + left: 0, + behavior: 'smooth' + }); + } +} |