diff --git a/content/root.js b/content/root.js index ee4fba3..34d723c 100644 --- a/content/root.js +++ b/content/root.js @@ -50,9 +50,9 @@ async function deleteMessage(messageId) { } async function updateMessagesInPlace() { - const currenteScrollLocation = getScrollLocation(); - await loadMessages(true); - setScrollLocation(currenteScrollLocation); + lastMessageCount = await getMessageCount(); + const currentScrollLocation = getScrollLocation(); + loadMessages(true, currentScrollLocation); } function getScrollLocation() { @@ -130,46 +130,56 @@ async function loadUsers() { } } -let lastMessageCount = 0; -async function loadMessages(forceUpdate = false) { +async function getMessageCount() { try { - let messagesDiv = document.getElementById("messages"); - const response = await fetch("/messages"); - const text = await response.text(); - const tempDiv = document.createElement("div"); - tempDiv.innerHTML = text; + const response = await fetch("/messages/length"); + const text = await response.json(); + return text.length; + } catch (error) { + console.error("Error getting message count:", error); + } +} - // getting an error right here that messagesDiv is null - // but only on the first load, so maybe we can just hold off? - while (messagesDiv === null) { - await new Promise((resolve) => - setTimeout(resolve, 100) - ); - messagesDiv = document.getElementById("messages"); - } - if (messagesDiv.scrollTop != bottom) { - // show a button to scroll to the bottom - const scrollToBottomButton = document.getElementById( - "scroll", - ); - scrollToBottomButton.style.display = "block"; - scrollToBottomButton.onclick = scrollToBottom; - } else { - // hide the button - const scrollToBottomButton = document.getElementById( - "scroll", - ); - scrollToBottomButton.style.display = "none"; - } - - const messages = tempDiv.getElementsByTagName("p"); - - const newMessageCount = messages.length; +let lastMessageCount = 0; +async function loadMessages(forceUpdate = false, scrollLocation) { + try { + const newMessageCount = await getMessageCount(); const update = newMessageCount != lastMessageCount || lastMessageCount === 0 || forceUpdate; + let messagesDiv = document.getElementById("messages"); + while (messagesDiv === null) { + await new Promise((resolve) => + setTimeout(resolve, 100) + ); + messagesDiv = document.getElementById( + "messages", + ); + } + if (messagesDiv.scrollTop != bottom) { + // show a button to scroll to the bottom + const scrollToBottomButton = document + .getElementById( + "scroll", + ); + scrollToBottomButton.style.display = "block"; + scrollToBottomButton.onclick = scrollToBottom; + } else { + // hide the button + const scrollToBottomButton = document + .getElementById( + "scroll", + ); + scrollToBottomButton.style.display = "none"; + } if (update) { + const response = await fetch("/messages"); + const text = await response.text(); + const tempDiv = document.createElement("div"); + tempDiv.innerHTML = text; + + const messages = tempDiv.getElementsByTagName("p"); messagesDiv.innerHTML = ""; Array.from(messages).forEach((msg) => { const messageDiv = document.createElement( @@ -214,7 +224,11 @@ async function loadMessages(forceUpdate = false) { messagesDiv.appendChild(messageDiv); }); - scrollToBottom(); + if (scrollLocation !== undefined) { + setScrollLocation(scrollLocation); + } else { + scrollToBottom(); + } lastMessageCount = newMessageCount; } } catch (error) { @@ -270,8 +284,6 @@ function getYouTubeID(url) { return (match && match[7].length == 11) ? match[7] : false; } -var bottom = 0; - function scrollToBottom() { const messagesDiv = document.getElementById("messages"); messagesDiv.scrollTop = messagesDiv.scrollHeight; @@ -465,6 +477,7 @@ document.addEventListener("keyup", function (event) { } }); +let bottom = 0; async function initialize() { usersPanel = document.getElementById("users-panel"); if (usersPanel) { @@ -475,14 +488,13 @@ async function initialize() { settingsPanel.style.display = "none"; } initializeTheme(); - checkUsername(); - updateCurrentUser(); - timeZoneCheck(); + await checkUsername(); + await updateCurrentUser(); + await timeZoneCheck(); setInterval(loadMessages, 1000); setInterval(loadUsers, 1000); setInterval(pingCheck, 3000); await loadMessages(true); - scrollToBottom(); } initialize(); diff --git a/main b/main new file mode 100644 index 0000000..b0cbb28 Binary files /dev/null and b/main differ diff --git a/main.go b/main.go index 8e78d42..1984d3a 100644 --- a/main.go +++ b/main.go @@ -656,6 +656,19 @@ func (s *Server) handleCss(w http.ResponseWriter, r *http.Request) { w.Write(file) } +func (s *Server) handleMessagesLength(w http.ResponseWriter, r *http.Request) { + // should return the number of messages in the database + if r.Method != http.MethodGet { + http.Error(w, `{"error": "Method not allowed"}`, http.StatusMethodNotAllowed) + return + } + w.Header().Set("Content-Type", "application/json") + messages := s.Database.MessagesGet() + json.NewEncoder(w).Encode(map[string]int{ + "length": len(messages), + }) +} + func (s *Server) Run() { s.Database.DbCreateTableMessages() s.Database.DbCreateTableUsers() @@ -664,6 +677,7 @@ func (s *Server) Run() { handler.HandleFunc("/ping", s.handlePing) handler.HandleFunc("/username", s.handleUsername) handler.HandleFunc("/messages", s.handleMessages) + handler.HandleFunc("/messages/length", s.handleMessagesLength) handler.HandleFunc("/username/status", s.handleUsernameStatus) handler.HandleFunc("/users", s.handleUsers) handler.HandleFunc("/", s.handleRoot)