scroll to bottom addition

This commit is contained in:
Radon 2025-08-28 21:05:30 -05:00
parent 6817160fbc
commit ad11d224de

View File

@ -375,6 +375,22 @@ class UIManager {
}
}
}
static isChatScrolledToBottom() {
const chatMessages = $('.chat-messages');
const scrollTop = chatMessages.scrollTop;
const scrollHeight = chatMessages.scrollHeight;
const clientHeight = chatMessages.clientHeight;
return !(scrollTop + clientHeight < scrollHeight);
}
static scrollChatToBottom() {
const atBottom = UIManager.isChatScrolledToBottom($('.chat-messages'));
if (!atBottom) {
$('.chat-messages').scrollTop = $('.chat-messages').scrollHeight;
}
}
static showReconnectionNotice() {
UIManager.removeReconnectionNotice();
const notice = document.createElement('div');
@ -450,8 +466,8 @@ class UIManager {
emojiPicker.style.gridTemplateColumns = 'repeat(auto-fill, minmax(3rem, 1fr))';
emojiPicker.style.gap = '1rem';
emojiPicker.style.position = 'absolute';
emojiPicker.style.bottom = '6rem';
emojiPicker.style.right = '0.5rem';
emojiPicker.style.bottom = '8rem';
emojiPicker.style.right = '1rem';
emojiPicker.style.width = '50vw';
emojiPicker.style.height = '30vh';
emojiPicker.style.overflowY = 'scroll';
@ -478,7 +494,7 @@ class UIManager {
sendBtn.disabled = messageInput.value.trim() === '';
// close after selecting an emoji, remove or comment out
// if we don't actually want this behavior
// toggleEmojiPicker();
toggleEmojiPicker();
};
emojiSpan.addEventListener('mouseover', function () {
this.style.backgroundColor = 'var(--bg-primary)';
@ -1490,7 +1506,7 @@ class ChatManager {
<div class="content">${Utils.escapeHtml(message)}</div>
`;
chatMessages.appendChild(messageEl);
chatMessages.scrollTop = chatMessages.scrollHeight;
UIManager.scrollChatToBottom();
console.log('Added chat message from:', data.username, 'message:', message);
}
static addChatAlert(message, type, timeout) {
@ -1516,7 +1532,7 @@ class ChatManager {
}
chatMessages.appendChild(alertEl);
chatMessages.scrollTop = chatMessages.scrollHeight;
UIManager.scrollChatToBottom();
console.log('📢 Added chat alert:', message);
}
@ -2022,6 +2038,18 @@ const checkAudioContext = setInterval(() => {
}
}, 5000);
$('.chat-messages').addEventListener('scroll', function() {
const atBottom = UIManager.isChatScrolledToBottom();
if (!atBottom) {
$('#scroll-btn').style.display = 'block';
}
if (atBottom) {
$('#scroll-btn').style.display = 'none';
}
});
// ==================== INITIALIZATION ====================
for (let { event, target } of [
{ event: 'DOMContentLoaded', target: document },
@ -2072,3 +2100,4 @@ window.toggleEmojiPicker = UIManager.toggleEmojiPicker;
// Debug functions
window.debugVoiceSetup = DebugUtils.debugVoiceSetup;
window.fixVoice = DebugUtils.fixVoice;
window.scrollChatToBottom = UIManager.scrollChatToBottom;