Refactor link previews

client/css/style.css

@@ -1096,10 +1096,6 @@ kbd {
 	color: #f00;
 }
 
-#chat .msg.toggle .time {
-	visibility: hidden;
-}
-
 #chat .toggle-button {
 	background: #f5f5f5;
 	border-radius: 2px;
@@ -1110,6 +1106,10 @@ kbd {
 	padding: 0 6px;
 }
 
+#chat .toggle-button:after {
+	content: "···";
+}
+
 #chat .toggle-content {
 	background: #f5f5f5;
 	border-radius: 2px;
@@ -1122,10 +1122,6 @@ kbd {
 	overflow: hidden;
 }
 
-#chat .toggle-content a {
-	color: inherit;
-}
-
 #chat .toggle-content img {
 	max-width: 100%;
 	max-height: 128px;
@@ -1937,10 +1933,6 @@ kbd {
 		padding: 0;
 	}
 
-	#chat .msg.toggle .time {
-		display: none;
-	}
-
 	#chat .date-marker,
 	#chat .unread-marker {
 		margin: 0;

client/js/libs/jquery/stickyscroll.js

@@ -37,7 +37,7 @@ import jQuery from "jquery";
 				lastStick = Date.now();
 				this.scrollTop = this.scrollHeight;
 			})
-			.on("msg.sticky", keepToBottom)
+			.on("keepToBottom.sticky", keepToBottom)
 			.scrollBottom();
 
 		return self;

client/js/lounge.js

@@ -681,25 +681,6 @@ $(function() {
 		});
 	});
 
-	chat.on("click", ".toggle-button", function() {
-		var self = $(this);
-		var localChat = self.closest(".chat");
-		var bottom = localChat.isScrollBottom();
-		var content = self.parent().next(".toggle-content");
-		if (bottom && !content.hasClass("show")) {
-			var img = content.find("img");
-			if (img.length !== 0 && !img.width()) {
-				img.on("load", function() {
-					localChat.scrollBottom();
-				});
-			}
-		}
-		content.toggleClass("show");
-		if (bottom) {
-			localChat.scrollBottom();
-		}
-	});
-
 	var forms = $("#sign-in, #connect, #change-password");
 
 	windows.on("show", "#sign-in", function() {

client/js/options.js

@@ -30,6 +30,10 @@ const options = $.extend({
 
 module.exports = options;
 
+module.exports.shouldOpenMessagePreview = function(type) {
+	return (options.links && type === "link") || (options.thumbnails && type === "image");
+};
+
 for (var i in options) {
 	if (i === "userStyles") {
 		if (!/[?&]nocss/.test(window.location.search)) {

client/js/render.js

@@ -35,6 +35,10 @@ function buildChatMessage(data) {
 		target = "#chan-" + chat.find(".active").data("id");
 	}
 
+	if (data.msg.preview) {
+		data.msg.preview.shown = options.shouldOpenMessagePreview(data.msg.preview.type);
+	}
+
 	const chan = chat.find(target);
 	let template = "msg";
 

client/js/socket-events/index.js

@@ -6,13 +6,13 @@ require("./init");
 require("./join");
 require("./more");
 require("./msg");
+require("./msg_preview");
 require("./names");
 require("./network");
 require("./nick");
 require("./open");
 require("./part");
 require("./quit");
 require("./sync_sort");
-require("./toggle");
 require("./topic");
 require("./users");

client/js/socket-events/msg.js

@@ -35,7 +35,8 @@ socket.on("msg", function(data) {
 		.trigger("msg", [
 			target,
 			data
-		]);
+		])
+		.trigger("keepToBottom");
 
 	var lastVisible = container.find("div:visible").last();
 	if (data.msg.self

client/js/socket-events/msg_preview.js

@@ -0,0 +1,51 @@
+"use strict";
+
+const $ = require("jquery");
+const socket = require("../socket");
+const templates = require("../../views");
+const options = require("../options");
+
+socket.on("msg:preview", function(data) {
+	data.preview.shown = options.shouldOpenMessagePreview(data.preview.type);
+
+	const msg = $("#msg-" + data.id);
+	const container = msg.parent(".messages");
+	const bottom = container.isScrollBottom();
+
+	msg.find(".text").append(templates.msg_preview({preview: data.preview}));
+
+	if (data.preview.shown && bottom) {
+		handleImageInPreview(msg.find(".toggle-content"), container);
+	}
+
+	container.trigger("keepToBottom");
+});
+
+$("#chat").on("click", ".toggle-button", function() {
+	const self = $(this);
+	const container = self.closest(".messages");
+	const content = self.parent().next(".toggle-content");
+	const bottom = container.isScrollBottom();
+
+	if (bottom && !content.hasClass("show")) {
+		handleImageInPreview(content, container);
+	}
+
+	content.toggleClass("show");
+
+	// If scrollbar was at the bottom before toggling the preview, keep it at the bottom
+	if (bottom) {
+		container.scrollBottom();
+	}
+});
+
+function handleImageInPreview(content, container) {
+	const img = content.find("img");
+
+	// Trigger scroll logic after the image loads
+	if (img.length && !img.width()) {
+		img.on("load", function() {
+			container.trigger("keepToBottom");
+		});
+	}
+}

client/views/index.js

@@ -25,9 +25,9 @@ module.exports = {
 	date_marker: require("./date-marker.tpl"),
 	msg: require("./msg.tpl"),
 	msg_action: require("./msg_action.tpl"),
+	msg_preview: require("./msg_preview.tpl"),
 	msg_unhandled: require("./msg_unhandled.tpl"),
 	network: require("./network.tpl"),
-	toggle: require("./toggle.tpl"),
 	unread_marker: require("./unread_marker.tpl"),
 	user: require("./user.tpl"),
 	user_filtered: require("./user_filtered.tpl"),

client/views/msg.tpl

@@ -7,17 +7,10 @@
 			{{> user_name nick=from}}
 		{{/if}}
 	</span>
-	{{#equal type "toggle"}}
-		<span class="text">
-			<div class="force-newline">
-				<button id="toggle-{{id}}" class="toggle-button" aria-label="Toggle prefetched media">···</button>
-			</div>
-			{{#if toggle}}
-				{{> toggle}}
-			{{/if}}
-		</span>
-	{{else}}
-		<span class="text">{{{parse text}}}</span>
-	{{/equal}}
+	<span class="text">
+		{{~{parse text}~}}
+		{{#if preview}}
+			{{> msg_preview}}
+		{{/if}}
 	</span>
 </div>

client/views/msg_preview.tpl

@@ -0,0 +1,18 @@
+{{#preview}}
+<div>
+	<button class="toggle-button" aria-label="Toggle prefetched media"></button>
+</div>
+<a href="{{link}}" target="_blank" rel="noopener" class="toggle-content toggle-type-{{type}}{{#if shown}} show{{/if}}">
+	{{#equal type "image"}}
+		<img src="{{link}}">
+	{{else}}
+		{{#if thumb}}
+			<img src="{{thumb}}" class="thumb">
+		{{/if}}
+		<div class="head">{{head}}</div>
+		<div class="body">
+			{{body}}
+		</div>
+	{{/equal}}
+</a>
+{{/preview}}

src/models/msg.js

@@ -16,7 +16,6 @@ Msg.Type = {
 	NOTICE: "notice",
 	PART: "part",
 	QUIT: "quit",
-	TOGGLE: "toggle",
 	CTCP: "ctcp",
 	TOPIC: "topic",
 	TOPIC_SET_BY: "topic_set_by",