hardlounge/client/js/render.js

343 lines
9.0 KiB
JavaScript
Raw Normal View History

2017-05-18 20:08:54 +00:00
"use strict";
const $ = require("jquery");
const templates = require("../views");
const options = require("./options");
const renderPreview = require("./renderPreview");
2017-05-18 20:08:54 +00:00
const utils = require("./utils");
const sorting = require("./sorting");
2017-06-22 20:08:36 +00:00
const constants = require("./constants");
2017-08-19 18:47:23 +00:00
const condensed = require("./condensed");
const JoinChannel = require("./join-channel");
2017-08-28 20:06:28 +00:00
const helpers_parse = require("./libs/handlebars/parse");
const Userlist = require("./userlist");
2018-03-15 09:18:06 +00:00
const storage = require("./localStorage");
2017-05-18 20:08:54 +00:00
const chat = $("#chat");
const sidebar = $("#sidebar");
2017-08-22 21:04:55 +00:00
require("intersection-observer");
const historyObserver = window.IntersectionObserver ?
new window.IntersectionObserver(loadMoreHistory, {
root: chat.get(0),
}) : null;
2017-05-18 20:08:54 +00:00
module.exports = {
2017-06-22 20:08:36 +00:00
appendMessage,
2017-05-18 20:08:54 +00:00
buildChannelMessages,
renderChannel,
renderChannelUsers,
renderNetworks,
trimMessageInChannel,
2017-05-18 20:08:54 +00:00
};
2017-08-28 20:06:28 +00:00
function buildChannelMessages(container, chanId, chanType, messages) {
return messages.reduce((docFragment, message) => {
appendMessage(docFragment, chanId, chanType, message);
2017-05-18 20:08:54 +00:00
return docFragment;
2017-08-28 20:06:28 +00:00
}, container);
2017-05-18 20:08:54 +00:00
}
function appendMessage(container, chanId, chanType, msg) {
2017-08-28 15:03:27 +00:00
if (utils.lastMessageId < msg.id) {
utils.lastMessageId = msg.id;
}
2017-09-01 11:43:24 +00:00
let lastChild = container.children(".msg, .date-marker-container").last();
const renderedMessage = buildChatMessage(msg);
// Check if date changed
const msgTime = new Date(msg.time);
2017-09-01 11:43:24 +00:00
const prevMsgTime = new Date(lastChild.data("time"));
// Insert date marker if date changed compared to previous message
if (prevMsgTime.toDateString() !== msgTime.toDateString()) {
lastChild = $(templates.date_marker({time: msg.time}));
2017-09-01 11:43:24 +00:00
container.append(lastChild);
}
// If current window is not a channel or this message is not condensable,
// then just append the message to container and be done with it
if (msg.self || msg.highlight || constants.condensedTypes.indexOf(msg.type) === -1 || chanType !== "channel") {
container.append(renderedMessage);
2017-08-19 18:47:23 +00:00
return;
}
const obj = {};
obj[msg.type] = 1;
// If the previous message is already condensed,
// we just append to it and update text
if (lastChild.hasClass("condensed")) {
lastChild.append(renderedMessage);
condensed.updateText(lastChild, obj);
return;
2017-06-22 20:08:36 +00:00
}
2017-09-01 11:43:24 +00:00
// Always create a condensed container
const newCondensed = $(templates.msg_condensed({time: msg.time}));
condensed.updateText(newCondensed, obj);
newCondensed.append(renderedMessage);
container.append(newCondensed);
2017-06-22 20:08:36 +00:00
}
function buildChatMessage(msg) {
const type = msg.type;
2017-05-18 20:08:54 +00:00
let template = "msg";
// See if any of the custom highlight regexes match
if (!msg.highlight && !msg.self
&& options.highlightsRE
&& (type === "message" || type === "notice")
&& options.highlightsRE.exec(msg.text)) {
msg.highlight = true;
2017-05-18 20:08:54 +00:00
}
if (typeof templates.actions[type] !== "undefined") {
2017-05-18 20:08:54 +00:00
template = "msg_action";
} else if (type === "unhandled") {
template = "msg_unhandled";
}
const renderedMessage = $(templates[template](msg));
const content = renderedMessage.find(".content");
2017-05-18 20:08:54 +00:00
if (template === "msg_action") {
content.html(templates.actions[type](msg));
2017-05-18 20:08:54 +00:00
}
msg.previews.forEach((preview) => {
renderPreview(preview, renderedMessage);
});
return renderedMessage;
2017-05-18 20:08:54 +00:00
}
function renderChannel(data) {
renderChannelMessages(data);
if (data.type === "channel") {
const users = renderChannelUsers(data);
Userlist.handleKeybinds(users.find(".search"));
2017-05-18 20:08:54 +00:00
}
if (historyObserver) {
historyObserver.observe(chat.find("#chan-" + data.id + " .show-more").get(0));
}
2017-05-18 20:08:54 +00:00
}
function renderChannelMessages(data) {
2017-08-28 20:06:28 +00:00
const documentFragment = buildChannelMessages($(document.createDocumentFragment()), data.id, data.type, data.messages);
2017-05-18 20:08:54 +00:00
const channel = chat.find("#chan-" + data.id + " .messages").append(documentFragment);
renderUnreadMarker($(templates.unread_marker()), data.firstUnread, channel);
}
function renderUnreadMarker(template, firstUnread, channel) {
if (firstUnread > 0) {
let first = channel.find("#msg-" + firstUnread);
2017-05-18 20:08:54 +00:00
if (!first.length) {
template.data("unread-id", firstUnread);
channel.prepend(template);
2017-05-18 20:08:54 +00:00
} else {
const parent = first.parent();
if (parent.hasClass("condensed")) {
first = parent;
}
first.before(template);
2017-05-18 20:08:54 +00:00
}
} else {
channel.append(template);
2017-05-18 20:08:54 +00:00
}
}
function renderChannelUsers(data) {
const users = chat.find("#chan-" + data.id).find(".userlist");
const nicks = data.users
2017-07-10 10:56:58 +00:00
.concat() // Make a copy of the user list, sort is applied in-place
.sort((a, b) => b.lastMessage - a.lastMessage)
.map((a) => a.nick);
2017-05-18 20:08:54 +00:00
// Before re-rendering the list of names, there might have been an entry
// marked as active (i.e. that was highlighted by keyboard navigation).
// It is `undefined` if there was none.
const previouslyActive = users.find(".active");
2017-05-18 20:08:54 +00:00
const search = users
.find(".search")
.prop("placeholder", nicks.length + " " + (nicks.length === 1 ? "user" : "users"));
2017-05-18 20:08:54 +00:00
users
.data("nicks", nicks)
.find(".names-original")
.html(templates.user(data));
// Refresh user search
if (search.val().length) {
search.trigger("input");
}
// If a nick was highlighted before re-rendering the lists, re-highlight it in
// the newly-rendered list.
if (previouslyActive.length > 0) {
// We need to un-highlight everything first because triggering `input` with
// a value highlights the first entry.
users.find(".user").removeClass("active");
users.find(`.user[data-name="${previouslyActive.attr("data-name")}"]`).addClass("active");
}
return users;
2017-05-18 20:08:54 +00:00
}
2017-08-28 20:06:28 +00:00
function renderNetworks(data, singleNetwork) {
2018-03-15 09:18:06 +00:00
const collapsed = new Set(JSON.parse(storage.get("thelounge.networks.collapsed")));
2017-05-18 20:08:54 +00:00
sidebar.find(".empty").hide();
sidebar.find(".networks").append(
templates.network({
networks: data.networks,
2017-05-18 20:08:54 +00:00
})
);
2018-03-15 09:18:06 +00:00
collapsed.forEach((key) => {
collapseNetwork($(`.network[data-uuid="${key}"] button.collapse-network`));
});
// Add keyboard handlers to the "Join a channel…" form inputs/button
JoinChannel.handleKeybinds(data.networks);
2017-08-28 20:06:28 +00:00
let newChannels;
2017-05-18 20:08:54 +00:00
const channels = $.map(data.networks, function(n) {
return n.channels;
});
2017-08-28 20:06:28 +00:00
if (!singleNetwork && utils.lastMessageId > -1) {
newChannels = [];
channels.forEach((channel) => {
const chan = $("#chan-" + channel.id);
if (chan.length > 0) {
if (chan.data("type") === "channel") {
chan
.data("needsNamesRefresh", true)
.find(".header .topic")
.html(helpers_parse(channel.topic))
.prop("title", channel.topic);
2017-08-28 20:06:28 +00:00
}
if (channel.messages.length > 0) {
const container = chan.find(".messages");
buildChannelMessages(container, channel.id, channel.type, channel.messages);
const unreadMarker = container.find(".unread-marker").data("unread-id", 0);
renderUnreadMarker(unreadMarker, channel.firstUnread, container);
2017-08-28 20:06:28 +00:00
if (container.find(".msg").length >= 100) {
container.find(".show-more").addClass("show");
}
container.parent().trigger("keepToBottom");
2017-08-28 20:06:28 +00:00
}
} else {
newChannels.push(channel);
}
});
} else {
newChannels = channels;
}
if (newChannels.length > 0) {
chat.append(
templates.chat({
channels: newChannels,
})
);
newChannels.forEach((channel) => {
renderChannel(channel);
if (channel.type === "channel") {
chat.find("#chan-" + channel.id).data("needsNamesRefresh", true);
}
});
}
2017-05-18 20:08:54 +00:00
utils.confirmExit();
sorting();
if (sidebar.find(".highlight").length) {
utils.toggleNotificationMarkers(true);
}
}
function trimMessageInChannel(channel, messageLimit) {
const messages = channel.find(".messages .msg").slice(0, -messageLimit);
if (messages.length === 0) {
return;
}
messages.remove();
channel.find(".show-more").addClass("show");
// Remove date-separators that would otherwise be "stuck" at the top of the channel
channel.find(".date-marker-container").each(function() {
if ($(this).next().hasClass("date-marker-container")) {
$(this).remove();
}
});
}
function loadMoreHistory(entries) {
entries.forEach((entry) => {
if (!entry.isIntersecting) {
return;
}
const target = $(entry.target).find("button");
if (target.prop("disabled")) {
return;
}
target.trigger("click");
});
}
2018-02-20 08:42:50 +00:00
2018-03-15 09:18:06 +00:00
sidebar.on("click", "button.collapse-network", (e) => collapseNetwork($(e.target)));
function collapseNetwork(target) {
const collapseButton = target.closest(".collapse-network");
const networks = new Set(JSON.parse(storage.get("thelounge.networks.collapsed")));
const networkuuid = collapseButton.closest(".network").data("uuid");
2018-02-20 08:42:50 +00:00
if (collapseButton.closest(".network").find(".active").length > 0) {
collapseButton.closest(".lobby").trigger("click", {
keepSidebarOpen: true,
});
}
2018-03-04 19:02:27 +00:00
collapseButton.closest(".network").toggleClass("collapsed");
2018-02-20 08:42:50 +00:00
if (collapseButton.attr("aria-expanded") === "true") {
collapseButton.attr("aria-expanded", false);
collapseButton.attr("aria-label", "Expand");
2018-03-15 09:18:06 +00:00
networks.add(networkuuid);
2018-02-20 08:42:50 +00:00
} else {
collapseButton.attr("aria-expanded", true);
collapseButton.attr("aria-label", "Collapse");
2018-03-15 09:18:06 +00:00
networks.delete(networkuuid);
2018-02-20 08:42:50 +00:00
}
2018-03-04 19:02:27 +00:00
2018-03-15 09:18:06 +00:00
storage.set("thelounge.networks.collapsed", JSON.stringify([...networks]));
2018-03-04 19:02:27 +00:00
return false;
2018-03-15 09:18:06 +00:00
}