53 lines
2.6 KiB
TypeScript
53 lines
2.6 KiB
TypeScript
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
|
|
}
|