done with scroll to bottom

This commit is contained in:
Ethan Fraenkel 2018-09-06 16:13:49 +01:00
parent c4c1ea7b49
commit ef53f19617
2 changed files with 11 additions and 0 deletions

View File

@ -49,6 +49,7 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
// Add message to container // Add message to container
messagesContainer.appendChild(messageDiv) messagesContainer.appendChild(messageDiv)
messagesContainer.scrollTop = div.scrollHeight
} else if (data["chat_message"] && data["chat_message"]["userId"] != userId) { } else if (data["chat_message"] && data["chat_message"]["userId"] != userId) {
// const callerName = document.getElementById('caller-name') // const callerName = document.getElementById('caller-name')
@ -75,6 +76,8 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
}), }),
headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content } headers: { "content-type": "application/json", "X-CSRF-Token": document.querySelector('meta[name=csrf-token]').content }
}) })
const messagesContainer = document.getElementById('messages-container')
messagesContainer.scrollTop = div.scrollHeight
} else if (data["translated_message"] && data["userId"] == userId) { } else if (data["translated_message"] && data["userId"] == userId) {
const messagesContainer = document.getElementById('messages-container') const messagesContainer = document.getElementById('messages-container')
@ -105,8 +108,11 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
}) })
messagesContainer.appendChild(messageDiv) messagesContainer.appendChild(messageDiv)
messagesContainer.scrollTop = div.scrollHeight
} else { } else {
// console.log(data) // console.log(data)
const messagesContainer = document.getElementById('messages-container')
messagesContainer.scrollTop = div.scrollHeight
} }
if (data.hangUp) { if (data.hangUp) {
document.location.pathname = '/contacts' document.location.pathname = '/contacts'

View File

@ -60,6 +60,11 @@
<div><span id="current-user" class="text-color" style="display:none"><%= current_user.id %></span></div> <div><span id="current-user" class="text-color" style="display:none"><%= current_user.id %></span></div>
<script>
const div = document.getElementById('messages-container')
div.scrollTop = div.scrollHeight
</script>
<%= javascript_pack_tag 'chatrooms' %> <%= javascript_pack_tag 'chatrooms' %>
<%= javascript_pack_tag 'webrtc' %> <%= javascript_pack_tag 'webrtc' %>
<%= javascript_pack_tag 'translate' %> <%= javascript_pack_tag 'translate' %>