Merge pull request #1318 from thelounge/xpaw/infinite-scroll
Automatically load history when scrolling upwards
This commit is contained in:
commit
77e9cb65d5
@ -12,6 +12,13 @@ const condensed = require("./condensed");
|
||||
const chat = $("#chat");
|
||||
const sidebar = $("#sidebar");
|
||||
|
||||
require("intersection-observer");
|
||||
|
||||
const historyObserver = window.IntersectionObserver ?
|
||||
new window.IntersectionObserver(loadMoreHistory, {
|
||||
root: chat.get(0)
|
||||
}) : null;
|
||||
|
||||
module.exports = {
|
||||
appendMessage,
|
||||
buildChannelMessages,
|
||||
@ -145,6 +152,10 @@ function renderChannel(data) {
|
||||
if (data.type === "channel") {
|
||||
renderChannelUsers(data);
|
||||
}
|
||||
|
||||
if (historyObserver) {
|
||||
historyObserver.observe(chat.find("#chan-" + data.id + " .show-more").get(0));
|
||||
}
|
||||
}
|
||||
|
||||
function renderChannelMessages(data) {
|
||||
@ -220,3 +231,19 @@ function renderNetworks(data) {
|
||||
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();
|
||||
});
|
||||
}
|
||||
|
@ -12,7 +12,7 @@ socket.on("more", function(data) {
|
||||
|
||||
// get the scrollable wrapper around messages
|
||||
const scrollable = chan.closest(".chat");
|
||||
const heightOld = chan.height();
|
||||
const heightOld = chan.height() - scrollable.scrollTop();
|
||||
|
||||
// If there are no more messages to show, just hide the button and do nothing else
|
||||
if (!data.messages.length) {
|
||||
@ -38,7 +38,13 @@ socket.on("more", function(data) {
|
||||
|
||||
// restore scroll position
|
||||
const position = chan.height() - heightOld;
|
||||
scrollable.scrollTop(position);
|
||||
scrollable.finish().scrollTop(position);
|
||||
|
||||
// We have to do this hack due to smooth scrolling in browsers,
|
||||
// as scrollTop does not apply correctly
|
||||
if (window.requestAnimationFrame) {
|
||||
window.requestAnimationFrame(() => scrollable.scrollTop(position));
|
||||
}
|
||||
|
||||
if (data.messages.length !== 100) {
|
||||
scrollable.find(".show-more").removeClass("show");
|
||||
|
@ -73,6 +73,7 @@
|
||||
"fuzzy": "0.1.3",
|
||||
"handlebars": "4.0.10",
|
||||
"handlebars-loader": "1.6.0",
|
||||
"intersection-observer": "0.4.2",
|
||||
"jquery": "3.2.1",
|
||||
"jquery-textcomplete": "1.8.4",
|
||||
"jquery-ui": "1.12.1",
|
||||
|
Loading…
Reference in New Issue
Block a user