cordis/client/webapp/elements/events-infinite-scroll.ts

import Actions from "../actions";
import Q from "../q-module";
import UI from "../ui";

export default function bindInfiniteScrollEvents(q: Q, ui: UI, actions: Actions): 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.activeServer === 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.activeServer, 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.activeServer, ui.activeChannel);
			loadingAfter = false;
		}
	}

	q.$('#channel-feed-content-wrapper').addEventListener('scroll', updateInfiniteScroll);
	(q.$('#channel-feed-content-wrapper') as any).updateInfiniteScroll = updateInfiniteScroll; // custom element function
}