Skip to content

Commit

Permalink
Completely refactor how date markers are inserted
Browse files Browse the repository at this point in the history
  • Loading branch information
@xPaw
xPaw committed Aug 25, 2017
1 parent d4e02d9 commit 46c7c6c
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 120 deletions.
138 changes: 71 additions & 67 deletions client/js/render.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,57 +15,85 @@ const sidebar = $("#sidebar");
module.exports = {
appendMessage,
buildChannelMessages,
buildChatMessage,
renderChannel,
renderChannelMessages,
renderChannelUsers,
renderNetworks,
};

function buildChannelMessages(data) {
return data.messages.reduce(function(docFragment, message) {
appendMessage(docFragment, data.id, data.type, message.type, buildChatMessage({
chan: data.id,
msg: message
}));
function buildChannelMessages(chanId, chanType, messages) {
return messages.reduce(function(docFragment, message) {
appendMessage(docFragment, chanId, chanType, message);
return docFragment;
}, $(document.createDocumentFragment()));
}

function appendMessage(container, chan, chanType, messageType, msg) {
function appendMessage(container, chanId, chanType, msg) {
const renderedMessage = buildChatMessage(chanId, msg);

// Check if date changed
let lastChild = container.find(".msg").last();
const msgTime = new Date(msg.time);

// It's the first message in a window,
// then just append the message and do nothing else
if (lastChild.length === 0) {
container
.append(templates.date_marker({msgDate: msgTime}))
.append(renderedMessage);

return;
}

const prevMsgTime = new Date(lastChild.attr("data-time"));
const parent = lastChild.parent();

// If this message is condensed, we have to work on the wrapper
if (parent.hasClass("condensed")) {
lastChild = parent;
}

// Insert date marker if date changed compared to previous message
if (prevMsgTime.toDateString() !== msgTime.toDateString()) {
lastChild.after(templates.date_marker({msgDate: msgTime}));

// If date changed, we don't need to do condensed logic
container.append(renderedMessage);
return;
}

// TODO: To fix #1432, statusMessage option should entirely be implemented in CSS
if (constants.condensedTypes.indexOf(messageType) === -1 || chanType !== "channel" || options.statusMessages !== "condensed") {
container.append(msg);
// 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 (constants.condensedTypes.indexOf(msg.type) === -1 || chanType !== "channel" || options.statusMessages !== "condensed") {
container.append(renderedMessage);
return;
}

const lastChild = container.children("div.msg").last();

if (lastChild && $(lastChild).hasClass("condensed")) {
lastChild.append(msg);
condensed.updateText(lastChild, [messageType]);
} else if (lastChild && $(lastChild).is(constants.condensedTypesQuery)) {
const newCondensed = buildChatMessage({
chan: chan,
msg: {
type: "condensed",
time: msg.attr("data-time"),
previews: []
}
// 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, [msg.type]);
// If the previous message can be condensed, we create a new condensed wrapper
} else if (lastChild.is(constants.condensedTypesQuery)) {
const newCondensed = buildChatMessage(chanId, {
type: "condensed",
time: msg.time,
previews: []
});

condensed.updateText(newCondensed, [messageType, lastChild.attr("data-type")]);
condensed.updateText(newCondensed, [msg.type, lastChild.attr("data-type")]);
container.append(newCondensed);
newCondensed.append(lastChild);
newCondensed.append(msg);
newCondensed.append(renderedMessage);
} else {
container.append(msg);
container.append(renderedMessage);
}
}

function buildChatMessage(data) {
const type = data.msg.type;
let target = "#chan-" + data.chan;
function buildChatMessage(chanId, msg) {
const type = msg.type;
let target = "#chan-" + chanId;
if (type === "error") {
target = "#chan-" + chat.find(".active").data("id");
}
Expand All @@ -74,45 +102,45 @@ function buildChatMessage(data) {
let template = "msg";

// See if any of the custom highlight regexes match
if (!data.msg.highlight && !data.msg.self
if (!msg.highlight && !msg.self
&& options.highlightsRE
&& (type === "message" || type === "notice")
&& options.highlightsRE.exec(data.msg.text)) {
data.msg.highlight = true;
&& options.highlightsRE.exec(msg.text)) {
msg.highlight = true;
}

if (constants.actionTypes.indexOf(type) !== -1) {
data.msg.template = "actions/" + type;
msg.template = "actions/" + type;
template = "msg_action";
} else if (type === "unhandled") {
template = "msg_unhandled";
} else if (type === "condensed") {
template = "msg_condensed";
}

const msg = $(templates[template](data.msg));
const content = msg.find(".content");
const renderedMessage = $(templates[template](msg));
const content = renderedMessage.find(".content");

if (template === "msg_action") {
content.html(templates.actions[type](data.msg));
content.html(templates.actions[type](msg));
}

data.msg.previews.forEach((preview) => {
renderPreview(preview, msg);
msg.previews.forEach((preview) => {
renderPreview(preview, renderedMessage);
});

if ((type === "message" || type === "action" || type === "notice") && chan.hasClass("channel")) {
const nicks = chan.find(".users").data("nicks");
if (nicks) {
const find = nicks.indexOf(data.msg.from);
const find = nicks.indexOf(msg.from);
if (find !== -1) {
nicks.splice(find, 1);
nicks.unshift(data.msg.from);
nicks.unshift(msg.from);
}
}
}

return msg;
return renderedMessage;
}

function renderChannel(data) {
Expand All @@ -124,7 +152,7 @@ function renderChannel(data) {
}

function renderChannelMessages(data) {
const documentFragment = buildChannelMessages(data);
const documentFragment = buildChannelMessages(data.id, data.type, data.messages);
const channel = chat.find("#chan-" + data.id + " .messages").append(documentFragment);

if (data.firstUnread > 0) {
Expand All @@ -141,30 +169,6 @@ function renderChannelMessages(data) {
} else {
channel.append(templates.unread_marker());
}

if (data.type !== "lobby") {
let lastDate;
$(chat.find("#chan-" + data.id + " .messages .msg[data-time]")).each(function() {
const msg = $(this);
const msgDate = new Date(msg.attr("data-time"));

// Top-most message in a channel
if (!lastDate) {
lastDate = msgDate;
msg.before(templates.date_marker({msgDate: msgDate}));
}

if (lastDate.toDateString() !== msgDate.toDateString()) {
var parent = msg.parent();
if (parent.hasClass("condensed")) {
msg.insertAfter(parent);
}
msg.before(templates.date_marker({msgDate: msgDate}));
}

lastDate = msgDate;
});
}
}

function renderChannelUsers(data) {
Expand Down
34 changes: 4 additions & 30 deletions client/js/socket-events/more.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,11 @@ const $ = require("jquery");
const socket = require("../socket");
const render = require("../render");
const chat = $("#chat");
const templates = require("../../views");

socket.on("more", function(data) {
const chan = chat
.find("#chan-" + data.chan)
.find(".messages");
let chan = chat.find("#chan-" + data.chan);
const type = chan.data("type");
chan = chan.find(".messages");

// get the scrollable wrapper around messages
const scrollable = chan.closest(".chat");
Expand All @@ -34,7 +33,7 @@ socket.on("more", function(data) {
}

// Add the older messages
const documentFragment = render.buildChannelMessages(data);
const documentFragment = render.buildChannelMessages(data.chan, type, data.messages);
chan.prepend(documentFragment).end();

// restore scroll position
Expand All @@ -45,31 +44,6 @@ socket.on("more", function(data) {
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()) {
var parent = msg.parent();
if (parent.hasClass("condensed")) {
msg.insertAfter(parent);
}
msg.before(templates.date_marker({msgDate: msgDate}));
}

lastDate = msgDate;
});

scrollable.find(".show-more-button")
.text("Show older messages")
.prop("disabled", false);
Expand Down
25 changes: 2 additions & 23 deletions client/js/socket-events/msg.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,8 @@ const $ = require("jquery");
const socket = require("../socket");
const render = require("../render");
const chat = $("#chat");
const templates = require("../../views");

socket.on("msg", function(data) {
const msg = render.buildChatMessage(data);
const targetId = data.chan;
const target = "#chan-" + targetId;
const channel = chat.find(target);
Expand All @@ -19,31 +17,12 @@ socket.on("msg", function(data) {
$(container).empty();
}

// Check if date changed
let prevMsg = $(container.find(".msg")).last();
const prevMsgTime = new Date(prevMsg.attr("data-time"));
const msgTime = new Date(msg.attr("data-time"));

// It's the first message in a channel/query
if (prevMsg.length === 0) {
container.append(templates.date_marker({msgDate: msgTime}));
}

if (prevMsgTime.toDateString() !== msgTime.toDateString()) {
var parent = prevMsg.parent();
if (parent.hasClass("condensed")) {
prevMsg = parent;
}
prevMsg.after(templates.date_marker({msgDate: msgTime}));
}

// Add message to the container
render.appendMessage(
container,
data.chan,
targetId,
$(target).attr("data-type"),
data.msg.type,
msg
data.msg
);

container.trigger("msg", [
Expand Down

0 comments on commit 46c7c6c

Please sign in to comment.