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

import * as electronRemote from '@electron/remote';
const electronConsole = electronRemote.getGlobal('console') as Console;
import Logger from '../../../logger/logger';
const LOG = Logger.create(__filename, electronConsole);

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;

		// WARNING
		// There's likely an inconsistency between browsers on this so have fun when you're working
		// on the cross-platform implementation of this
		// scrollTop apparantly is negative for column-reverse divs (this actually kindof makes sense if you flip your head upside down)
		// have to reverse this
		// I expect this was a change with some version of chromium.
		// MDN documentation issue: https://github.com/mdn/content/issues/10968

		let distToTop = -(clientHeight - scrollHeight - scrollTop); // keep in mind scrollTop is negative >:]
		let distToBottom = -scrollTop;

		//LOG.debug('update infinite scroll', { scrollTop, scrollHeight, clientHeight, distToTop, distToBottom, loadingBefore, loadingAfter });

		if (ui.activeGuild === null) return;
		if (ui.activeChannel === null) return;

		if (!loadingBefore && !ui.messagesAtTop && distToTop < 600) { // Approaching the unloaded top of the page
			// Fetch more messages to add above
			LOG.debug('fetching messages before', { loadingBefore, messagesAtTop: ui.messagesAtTop, distToTop });
			loadingBefore = true;
			await Actions.fetchAndUpdateMessagesBefore(q, ui, ui.activeGuild, ui.activeChannel);
			loadingBefore = false;
		} else if (!loadingAfter && !ui.messagesAtBottom && distToBottom < 600) { // Approaching the unloaded bottom of the page
			// Fetch more messages to add below
			LOG.debug('fetching messages after', { loadingAfter, messagesAtBottom: ui.messagesAtBottom, distToBottom: distToBottom });
			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
}