Move unread marker when loading more history

Fixes #835

client/js/lounge.js

@@ -371,6 +371,7 @@ $(function() {
 
 		lastActiveChan
 			.find(".unread-marker")
+			.data("unread-id", 0)
 			.appendTo(lastActiveChan.find(".messages"));
 
 		var chan = $(target)

client/js/render.js

@@ -120,19 +120,25 @@ function renderChannelMessages(data) {
 	const documentFragment = buildChannelMessages(data.id, data.type, data.messages);
 	const channel = chat.find("#chan-" + data.id + " .messages").append(documentFragment);
 
-	if (data.firstUnread > 0) {
+	const template = $(templates.unread_marker());
-		const first = channel.find("#msg-" + data.firstUnread);
+
+	if (data.firstUnread > 0) {
+		let first = channel.find("#msg-" + data.firstUnread);
 
-		// TODO: If the message is far off in the history, we still need to append the marker into DOM
 		if (!first.length) {
-			channel.prepend(templates.unread_marker());
+			template.data("unread-id", data.firstUnread);
-		} else if (first.parent().hasClass("condensed")) {
+			channel.prepend(template);
-			first.parent().before(templates.unread_marker());
 		} else {
-			first.before(templates.unread_marker());
+			const parent = first.parent();
+
+			if (parent.hasClass("condensed")) {
+				first = parent;
+			}
+
+			first.before(template);
 		}
 	} else {
-		channel.append(templates.unread_marker());
+		channel.append(template);
 	}
 }
 

client/js/socket-events/more.js

@@ -34,7 +34,29 @@ socket.on("more", function(data) {
 
 	// Add the older messages
 	const documentFragment = render.buildChannelMessages(data.chan, type, data.messages);
-	chan.prepend(documentFragment).end();
+	chan.prepend(documentFragment);
+
+	// Move unread marker to correct spot if needed
+	const unreadMarker = chan.find(".unread-marker");
+	const firstUnread = unreadMarker.data("unread-id");
+
+	if (firstUnread > 0) {
+		let first = chan.find("#msg-" + firstUnread);
+
+		if (!first.length) {
+			chan.prepend(unreadMarker);
+		} else {
+			const parent = first.parent();
+
+			if (parent.hasClass("condensed")) {
+				first = parent;
+			}
+
+			unreadMarker.data("unread-id", 0);
+
+			first.before(unreadMarker);
+		}
+	}
 
 	// restore scroll position
 	const position = chan.height() - heightOld;

client/js/socket-events/msg.js

@@ -57,6 +57,7 @@ function processReceivedMessage(data) {
 		&& lastVisible.prev().hasClass("unread-marker"))) {
 		container
 			.find(".unread-marker")
+			.data("unread-id", 0)
 			.appendTo(container);
 	}