From 95a8a458420dd2ebdbd6f7c03bd58c649985933e Mon Sep 17 00:00:00 2001 From: retoor Date: Mon, 17 Feb 2025 19:03:40 +0100 Subject: [PATCH] Scroll infinite. --- src/snek/templates/web.html | 35 +++++++++++++++++++++++++---------- 1 file changed, 25 insertions(+), 10 deletions(-) diff --git a/src/snek/templates/web.html b/src/snek/templates/web.html index cf7b7cb..7740191 100644 --- a/src/snek/templates/web.html +++ b/src/snek/templates/web.html @@ -55,26 +55,41 @@ rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } + const messagesContainer = document.querySelector(".chat-messages"); + function isScrolledPastHalf() { + let scrollTop = messagesContainer.scrollTop; + let scrollableHeight = messagesContainer.scrollHeight - messagesContainer.clientHeight; + + if (scrollTop < scrollableHeight / 2) { + return false; + } + return true; + } + let isLoadingExtra = false; async function loadExtra() { - const offsetMessage = messagesContainer.querySelector(".chat-messages :nth-child(10)"); - if(!offsetMessage){ - return - } + //const offsetMessage = messagesContainer.querySelector(".chat-messages :nth-child(10)"); + //if(!offsetMessage){ + // return + //} const firstMessage = messagesContainer.querySelector(".message:first-child"); - if(offsetMessage.dataset.seen){ + //if(offsetMessage.dataset.seen){ + // return + //} + if(isLoadingExtra){ return } - - if(isElementVisible(offsetMessage)){ - offsetMessage.dataset.seen = true + if(isScrolledPastHalf()){ + isLoadingExtra = true + + } + const messages = await app.rpc.getMessages(channelUid, 1, offsetMessage.dataset.created_at); messages.forEach((message) => { firstMessage.insertAdjacentHTML("beforebegin", message.html); - }) - } + isLoadingExtra = false; } messagesContainer.addEventListener("scroll",()=>{ loadExtra()