Implement infinite scroll using IntersectionObserver
This commit is contained in:
parent
72a534f42b
commit
629592d641
@ -12,6 +12,11 @@ const condensed = require("./condensed");
|
|||||||
const chat = $("#chat");
|
const chat = $("#chat");
|
||||||
const sidebar = $("#sidebar");
|
const sidebar = $("#sidebar");
|
||||||
|
|
||||||
|
const historyObserver = window.IntersectionObserver ?
|
||||||
|
new window.IntersectionObserver(loadMoreHistory, {
|
||||||
|
root: chat.get(0)
|
||||||
|
}) : null;
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
appendMessage,
|
appendMessage,
|
||||||
buildChannelMessages,
|
buildChannelMessages,
|
||||||
@ -145,6 +150,10 @@ function renderChannel(data) {
|
|||||||
if (data.type === "channel") {
|
if (data.type === "channel") {
|
||||||
renderChannelUsers(data);
|
renderChannelUsers(data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (historyObserver) {
|
||||||
|
historyObserver.observe(chat.find("#chan-" + data.id + " .show-more").get(0));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderChannelMessages(data) {
|
function renderChannelMessages(data) {
|
||||||
@ -220,3 +229,19 @@ function renderNetworks(data) {
|
|||||||
utils.toggleNotificationMarkers(true);
|
utils.toggleNotificationMarkers(true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function loadMoreHistory(entries) {
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
if (!entry.isIntersecting) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var target = $(entry.target).find(".show-more-button");
|
||||||
|
|
||||||
|
if (target.attr("disabled")) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
target.click();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user