131 lines
5.1 KiB
JavaScript
131 lines
5.1 KiB
JavaScript
// general UI initialization, element bindings, and tab handling
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// bind DOM elements to globals
|
|
authScreen = document.getElementById('auth-screen');
|
|
chatScreen = document.getElementById('chat-screen');
|
|
usernameInput = document.getElementById('username-input');
|
|
passwordInput = document.getElementById('password-input');
|
|
loginBtn = document.getElementById('login-btn');
|
|
registerBtn = document.getElementById('register-btn');
|
|
logoutBtn = document.getElementById('logout-btn');
|
|
messagesContainer = document.getElementById('messages-container');
|
|
messageInput = document.getElementById('message-input');
|
|
sendBtn = document.getElementById('send-btn');
|
|
fileInput = document.getElementById('file-input');
|
|
attachBtn = document.getElementById('attach-btn');
|
|
filePreview = document.getElementById('file-preview');
|
|
filePreviewText = document.getElementById('file-preview-text');
|
|
filePreviewClear = document.getElementById('file-preview-clear');
|
|
authMessage = document.getElementById('auth-message');
|
|
currentUserDisplay = document.getElementById('current-user');
|
|
headerTitle = document.getElementById('header-title');
|
|
dmList = document.getElementById('dm-list');
|
|
friendsList = document.getElementById('friends-list');
|
|
friendRequestsList = document.getElementById('friend-requests-list');
|
|
addFriendBtn = document.getElementById('add-friend-btn');
|
|
addFriendModal = document.getElementById('add-friend-modal');
|
|
closeModal = document.querySelector('.close-modal');
|
|
friendUsernameInput = document.getElementById('friend-username-input');
|
|
modalAddBtn = document.getElementById('modal-add-btn');
|
|
modalError = document.getElementById('modal-error');
|
|
tabBtns = document.querySelectorAll('.tab-btn');
|
|
chatTab = document.getElementById('chat-tab');
|
|
friendsTab = document.getElementById('friends-tab');
|
|
profileBtn = document.getElementById('profile-btn');
|
|
profileModal = document.getElementById('profile-modal');
|
|
profileAvatarInput = document.getElementById('profile-avatar-input');
|
|
profileDescInput = document.getElementById('profile-desc-input');
|
|
profilePronounsInput = document.getElementById('profile-pronouns-input');
|
|
profileSaveBtn = document.getElementById('profile-save-btn');
|
|
profileCloseBtn = document.querySelector('.profile-close');
|
|
// User profile modal elements
|
|
userProfileModal = document.getElementById('user-profile-modal');
|
|
userProfileAvatar = document.getElementById('user-profile-avatar');
|
|
userProfileUsername = document.getElementById('user-profile-username');
|
|
userProfilePronouns = document.getElementById('user-profile-pronouns');
|
|
userProfileDescription = document.getElementById('user-profile-description');
|
|
userProfileAddFriendBtn = document.getElementById('user-profile-add-friend-btn');
|
|
userProfileCloseBtn = document.querySelector('.user-profile-close');
|
|
|
|
// Reply preview elements
|
|
replyPreview = document.getElementById('reply-preview');
|
|
replyUsername = document.getElementById('reply-username');
|
|
replyPreviewText = document.getElementById('reply-preview-text');
|
|
replyCancelBtn = document.getElementById('reply-cancel-btn');
|
|
|
|
// Mobile sidebar elements
|
|
sidebarToggle = document.getElementById('sidebar-toggle');
|
|
sidebarOverlay = document.getElementById('sidebar-overlay');
|
|
sidebar = document.querySelector('.sidebar');
|
|
|
|
// set up listeners from various modules
|
|
initAuthListeners();
|
|
initChatListeners();
|
|
initFriendListeners();
|
|
initServerListeners();
|
|
initProfileListeners();
|
|
|
|
// Mobile sidebar toggle
|
|
if (sidebarToggle) {
|
|
sidebarToggle.addEventListener('click', () => {
|
|
sidebar.classList.add('open');
|
|
sidebarOverlay.classList.add('show');
|
|
});
|
|
}
|
|
|
|
// Close sidebar when clicking overlay
|
|
if (sidebarOverlay) {
|
|
sidebarOverlay.addEventListener('click', () => {
|
|
sidebar.classList.remove('open');
|
|
sidebarOverlay.classList.remove('show');
|
|
});
|
|
}
|
|
|
|
tabBtns.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
switchTab(btn.dataset.tab);
|
|
});
|
|
});
|
|
|
|
// initial auth check
|
|
authInitCheck();
|
|
});
|
|
|
|
function switchTab(tab) {
|
|
tabBtns.forEach(btn => btn.classList.remove('active'));
|
|
chatTab.classList.remove('active');
|
|
friendsTab.classList.remove('active');
|
|
if (tab === 'chat') {
|
|
tabBtns[0].classList.add('active');
|
|
chatTab.classList.add('active');
|
|
} else {
|
|
tabBtns[1].classList.add('active');
|
|
friendsTab.classList.add('active');
|
|
}
|
|
}
|
|
|
|
function selectDM(userIdArg, usernameArg) {
|
|
try {
|
|
currentDMUserId = userIdArg;
|
|
headerTitle.textContent = `DM with @${usernameArg}`;
|
|
// clear messages when switching to a DM conversation
|
|
if (messagesContainer) messagesContainer.innerHTML = '';
|
|
lastFetchedTs = null;
|
|
isAtBottom = true; // reset scroll state for new conversation
|
|
currentChannelId = null;
|
|
|
|
// Remove active class from ALL channels
|
|
document.querySelectorAll('.channel').forEach(ch => ch.classList.remove('active'));
|
|
|
|
// mark active DM in the list
|
|
document.querySelectorAll('.dm-user').forEach(n => n.classList.remove('active'));
|
|
const activeEl = document.querySelector(`.dm-user[data-user-id="${userIdArg}"]`);
|
|
if (activeEl) activeEl.classList.add('active');
|
|
|
|
loadDM(userIdArg);
|
|
switchTab('chat');
|
|
messageInput.value = '';
|
|
} catch (e) {
|
|
console.error('selectDM error', e);
|
|
}
|
|
} |