cordis/client/webapp/elements/events-infinite-scroll.ts
2021-11-21 12:29:42 -06:00

33 lines
1.4 KiB
TypeScript

import Actions from "../actions";
import Q from "../q-module";
import UI from "../ui";
export default function bindInfiniteScrollEvents(q: Q, ui: UI): void {
// Update current channel messages as the pane is scrolled
let loadingBefore = false;
let loadingAfter = false;
async function updateInfiniteScroll() {
let scrollTop = q.$('#channel-feed-content-wrapper').scrollTop;
let scrollHeight = q.$('#channel-feed-content-wrapper').scrollHeight;
let clientHeight = q.$('#channel-feed-content-wrapper').clientHeight;
if (ui.activeGuild === null) return;
if (ui.activeChannel === null) return;
if (!loadingBefore && !ui.messagesAtTop && scrollTop < 600) { // Approaching the unloaded top of the page
// Fetch more messages to add above
loadingBefore = true;
await Actions.fetchAndUpdateMessagesBefore(q, ui, ui.activeGuild, ui.activeChannel);
loadingBefore = false;
} else if (!loadingAfter && !ui.messagesAtBottom && scrollHeight - clientHeight - scrollTop < 600) { // Approaching the unloaded bottom of the page
// Fetch more messages to add below
loadingAfter = true;
await Actions.fetchAndUpdateMessagesAfter(q, ui, ui.activeGuild, ui.activeChannel);
loadingAfter = false;
}
}
q.$('#channel-feed-content-wrapper').addEventListener('scroll', updateInfiniteScroll);
(q.$('#channel-feed-content-wrapper') as any).updateInfiniteScroll = updateInfiniteScroll; // custom element function
}