Redraw channels

client/js/render.js

@@ -8,6 +8,7 @@ const utils = require("./utils");
 const sorting = require("./sorting");
 const constants = require("./constants");
 const condensed = require("./condensed");
+const helpers_parse = require("./libs/handlebars/parse");
 
 const chat = $("#chat");
 const sidebar = $("#sidebar");
@@ -27,11 +28,11 @@ module.exports = {
 	renderNetworks,
 };
 
-function buildChannelMessages(chanId, chanType, messages) {
+function buildChannelMessages(container, chanId, chanType, messages) {
 	return messages.reduce((docFragment, message) => {
 		appendMessage(docFragment, chanId, chanType, message);
 		return docFragment;
-	}, $(document.createDocumentFragment()));
+	}, container);
 }
 
 function appendMessage(container, chanId, chanType, msg) {
@@ -121,7 +122,7 @@ function renderChannel(data) {
 }
 
 function renderChannelMessages(data) {
-	const documentFragment = buildChannelMessages(data.id, data.type, data.messages);
+	const documentFragment = buildChannelMessages($(document.createDocumentFragment()), data.id, data.type, data.messages);
 	const channel = chat.find("#chan-" + data.id + " .messages").append(documentFragment);
 
 	const template = $(templates.unread_marker());
@@ -168,7 +169,7 @@ function renderChannelUsers(data) {
 	}
 }
 
-function renderNetworks(data) {
+function renderNetworks(data, singleNetwork) {
 	sidebar.find(".empty").hide();
 	sidebar.find(".networks").append(
 		templates.network({
@@ -176,15 +177,51 @@ function renderNetworks(data) {
 		})
 	);
 
+	let newChannels;
 	const channels = $.map(data.networks, function(n) {
 		return n.channels;
 	});
+
+	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))
+						.attr("title", channel.topic);
+				}
+
+				if (channel.messages.length > 0) {
+					const container = chan.find(".messages");
+					buildChannelMessages(container, channel.id, channel.type, channel.messages);
+
+					if (container.find(".msg").length >= 100) {
+						container.find(".show-more").addClass("show");
+					}
+
+					container.trigger("keepToBottom");
+				}
+			} else {
+				newChannels.push(channel);
+			}
+		});
+	} else {
+		newChannels = channels;
+	}
+
 	chat.append(
 		templates.chat({
 			channels: channels
 		})
 	);
-	channels.forEach((channel) => {
+
+	newChannels.forEach((channel) => {
 		renderChannel(channel);
 
 		if (channel.type === "channel") {

client/js/socket-events/auth.js

@@ -6,7 +6,7 @@ const storage = require("../localStorage");
 const utils = require("../utils");
 
 socket.on("auth", function(data) {
-	// If we reconnected and serverHash differents, that means the server restarted
+	// If we reconnected and serverHash differs, that means the server restarted
 	// And we will reload the page to grab the latest version
 	if (utils.serverHash > -1 && data.serverHash > -1 && data.serverHash !== utils.serverHash) {
 		socket.disconnect();

client/js/socket-events/init.js

@@ -1,6 +1,7 @@
 "use strict";
 
 const $ = require("jquery");
+const escape = require("css.escape");
 const socket = require("../socket");
 const render = require("../render");
 const webpush = require("../webpush");
@@ -12,11 +13,11 @@ socket.on("init", function(data) {
 	$("#loading-page-message, #connection-error").text("Rendering…");
 
 	const lastMessageId = utils.lastMessageId;
+	let previousActive = 0;
 
-	// TODO: this is hacky
 	if (lastMessageId > -1) {
+		previousActive = sidebar.find(".active").data("id");
 		sidebar.find(".networks").empty();
-		$("#chat").empty();
 	}
 
 	if (data.networks.length === 0) {
@@ -45,21 +46,38 @@ socket.on("init", function(data) {
 		$("#sign-in").remove();
 	}
 
-	const id = data.active;
+	openCorrectChannel(previousActive, data.active);
-	const target = sidebar.find("[data-id='" + id + "']").trigger("click", {
-		replaceHistory: true
-	});
-	const dataTarget = document.querySelector("[data-target='" + window.location.hash + "']");
-	if (window.location.hash && dataTarget) {
-		dataTarget.click();
-	} else if (target.length === 0) {
-		const first = sidebar.find(".chan")
-			.eq(0)
-			.trigger("click");
-		if (first.length === 0) {
-			$("#footer").find(".connect").trigger("click", {
-				pushState: false,
-			});
-		}
-	}
 });
+
+function openCorrectChannel(clientActive, serverActive) {
+	let target;
+
+	// Open last active channel
+	if (clientActive > 0) {
+		target = sidebar.find("[data-id='" + clientActive + "']");
+	}
+
+	// Open window provided in location.hash
+	if (!target && window.location.hash) {
+		target = $("#footer, #sidebar").find("[data-target='" + escape(window.location.hash) + "']");
+	}
+
+	// Open last active channel according to the server
+	if (!target) {
+		target = sidebar.find("[data-id='" + serverActive + "']");
+	}
+
+	// If target channel is found, open it
+	if (target) {
+		target.trigger("click", {
+			replaceHistory: true
+		});
+
+		return;
+	}
+
+	// Open the connect window
+	$("#footer .connect").trigger("click", {
+		pushState: false
+	});
+}

client/js/socket-events/more.js

@@ -33,7 +33,7 @@ socket.on("more", function(data) {
 	}
 
 	// Add the older messages
-	const documentFragment = render.buildChannelMessages(data.chan, type, data.messages);
+	const documentFragment = render.buildChannelMessages($(document.createDocumentFragment()), data.chan, type, data.messages);
 	chan.prepend(documentFragment);
 
 	// Move unread marker to correct spot if needed

client/js/socket-events/network.js

@@ -6,7 +6,7 @@ const render = require("../render");
 const sidebar = $("#sidebar");
 
 socket.on("network", function(data) {
-	render.renderNetworks(data);
+	render.renderNetworks(data, true);
 
 	sidebar.find(".chan")
 		.last()
@@ -20,4 +20,3 @@ socket.on("network", function(data) {
 socket.on("network_changed", function(data) {
 	sidebar.find("#network-" + data.network).data("options", data.serverOptions);
 });
-