39 lines
1.8 KiB
TypeScript
39 lines
1.8 KiB
TypeScript
|
import ClientController from '../client-controller';
|
||
|
|
import { Channel } from '../data-types';
|
||
|
|
import IState from './require/elements-state.js';
|
||
|
|
|
||
|
|
import { $, $$, $$$, $$$$ } from './require/q-module';
|
||
|
|
|
||
|
|
export default function bindInfiniteScrollEvents(state: IState): void {
|
||
|
|
const { document, ui, actions } = state;
|
||
|
|
$.setDocument(document);
|
||
|
|
|
||
|
|
// Update current channel messages as the pane is scrolled
|
||
|
|
let loadingBefore = false;
|
||
|
|
let loadingAfter = false;
|
||
|
|
async function updateInfiniteScroll() {
|
||
|
|
let scrollTop = $('#channel-feed-content-wrapper').scrollTop;
|
||
|
|
let scrollHeight = $('#channel-feed-content-wrapper').scrollHeight;
|
||
|
|
let clientHeight = $('#channel-feed-content-wrapper').clientHeight;
|
||
|
|
|
||
|
|
if (!ui.hasActiveServer()) return;
|
||
|
|
if (!ui.hasActiveChannel()) 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(ui.activeServer as ClientController, ui.activeChannel as Channel);
|
||
|
|
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(ui.activeServer as ClientController, ui.activeChannel as Channel);
|
||
|
|
loadingAfter = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$('#channel-feed-content-wrapper').addEventListener('scroll', updateInfiniteScroll);
|
||
|
|
|
||
|
|
($('#channel-feed-content-wrapper') as any).updateInfiniteScroll = updateInfiniteScroll; // custom element function
|
||
|
|
}
|