ctmesh/map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

auto load previous messages when scrolling up

Browse Source
This commit is contained in:
liamcottle
2024-07-05 23:41:30 +12:00
parent 7398119e61
commit c34c56fd41
1 changed files with 29 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/public/text-messages-embed.html
View File

@ -29,12 +29,10 @@
<div id="app" v-cloak> <div id="app" v-cloak>
<div class="h-full flex flex-col overflow-hidden"> <div class="h-full flex flex-col overflow-hidden">
<!-- load previous -->
<button @click="loadPrevious" type="button" class="w-full bg-gray-200 p-2 border-b hover:bg-gray-300">Load Previous</button>
<!-- messages -->
<!-- note: must use flex-col-reverse to prevent ui scrolling when adding older messages to ui --> <!-- note: must use flex-col-reverse to prevent ui scrolling when adding older messages to ui -->
<div id="messages" class="h-full flex flex-col-reverse p-3 overflow-y-auto"> <div id="messages" class="h-full flex flex-col-reverse p-3 overflow-y-auto">
<!-- messages -->
<div :key="message.id" v-for="message of reversedMessages" class="flex flex-col max-w-xl items-start my-1.5"> <div :key="message.id" v-for="message of reversedMessages" class="flex flex-col max-w-xl items-start my-1.5">
<!-- sender --> <!-- sender -->
@ -46,6 +44,15 @@
</div> </div>
</div> </div>
<!-- load previous -->
<button v-show="!isLoadingPrevious && hasMorePrevious" id="load-previous" @click="loadPrevious" type="button" class="flex space-x-2 mx-auto bg-gray-200 px-3 py-1 hover:bg-gray-300 rounded-full shadow">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m15 11.25-3-3m0 0-3 3m3-3v7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
<span>Load Previous</span>
</button>
</div> </div>
</div> </div>
@ -64,6 +71,8 @@
isLoadingPrevious: false, isLoadingPrevious: false,
isLoadingMore: false, isLoadingMore: false,
shouldAutoScroll: true, shouldAutoScroll: true,
loadPreviousObserver: null,
hasMorePrevious: true,
messages: [], messages: [],
nodesById: {}, nodesById: {},
@ -94,6 +103,14 @@
}); });
// setup intersection observer
this.loadPreviousObserver = new IntersectionObserver((entries) => {
const loadMoreElement = entries[0];
if(loadMoreElement && loadMoreElement.isIntersecting){
this.loadPrevious();
}
});
this.initialLoad(); this.initialLoad();
}, },
@ -106,6 +123,9 @@
// scroll to bottom // scroll to bottom
this.scrollToBottom(); this.scrollToBottom();
// setup auto loading previous
this.loadPreviousObserver.observe(document.querySelector("#load-previous"));
// load more every few seconds // load more every few seconds
setInterval(async () => { setInterval(async () => {
await this.loadMore(); await this.loadMore();
@ -141,6 +161,11 @@
this.messages.unshift(message); this.messages.unshift(message);
} }
// no more previous to load if previous list is empty
if(messages.length === 0){
this.hasMorePrevious = false;
}
// fetch node info // fetch node info
for(const message of messages){ for(const message of messages){
await this.fetchNodeInfo(message.to); await this.fetchNodeInfo(message.to);