65 lines
1.9 KiB
JavaScript
65 lines
1.9 KiB
JavaScript
"use strict";
|
|
|
|
const $ = require("jquery");
|
|
const socket = require("../socket");
|
|
const render = require("../render");
|
|
const chat = $("#chat");
|
|
const templates = require("../../views");
|
|
|
|
socket.on("more", function(data) {
|
|
const documentFragment = render.buildChannelMessages(data.chan, data.messages);
|
|
const chan = chat
|
|
.find("#chan-" + data.chan)
|
|
.find(".messages");
|
|
|
|
// get the scrollable wrapper around messages
|
|
const scrollable = chan.closest(".chat");
|
|
const heightOld = chan.height();
|
|
|
|
// Remove the date-change marker we put at the top, because it may
|
|
// not actually be a date change now
|
|
const children = $(chan).children();
|
|
if (children.eq(0).hasClass("date-marker-container")) { // Check top most child
|
|
children.eq(0).remove();
|
|
} else if (children.eq(1).hasClass("date-marker-container")) {
|
|
// The unread-marker could be at index 0, which will cause the date-marker to become "stuck"
|
|
children.eq(1).remove();
|
|
}
|
|
|
|
// Add the older messages
|
|
chan.prepend(documentFragment).end();
|
|
|
|
// restore scroll position
|
|
const position = chan.height() - heightOld;
|
|
scrollable.scrollTop(position);
|
|
|
|
if (data.messages.length !== 100) {
|
|
scrollable.find(".show-more").removeClass("show");
|
|
}
|
|
|
|
// Date change detect
|
|
// Have to use data instaid of the documentFragment because it's being weird
|
|
let lastDate;
|
|
$(data.messages).each(function() {
|
|
const msgData = this;
|
|
const msgDate = new Date(msgData.time);
|
|
const msg = $(chat.find("#chan-" + data.chan + " .messages #msg-" + msgData.id));
|
|
|
|
// Top-most message in a channel
|
|
if (!lastDate) {
|
|
lastDate = msgDate;
|
|
msg.before(templates.date_marker({msgDate: msgDate}));
|
|
}
|
|
|
|
if (lastDate.toDateString() !== msgDate.toDateString()) {
|
|
msg.before(templates.date_marker({msgDate: msgDate}));
|
|
}
|
|
|
|
lastDate = msgDate;
|
|
});
|
|
|
|
scrollable.find(".show-more-button")
|
|
.text("Show older messages")
|
|
.prop("disabled", false);
|
|
});
|