Refactor link previews

client/css/style.css

@@ -1110,6 +1110,10 @@ kbd {
 	padding: 0 6px;
 }
 
+#chat .toggle-button:after {
+	content: "···";
+}
+
 #chat .toggle-content {
 	background: #f5f5f5;
 	border-radius: 2px;
@@ -1122,10 +1126,6 @@ kbd {
 	overflow: hidden;
 }
 
-#chat .toggle-content a {
-	color: inherit;
-}
-
 #chat .toggle-content img {
 	max-width: 100%;
 	max-height: 128px;

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/render.js

@@ -35,6 +35,12 @@ function buildChatMessage(data) {
 		target = "#chan-" + chat.find(".active").data("id");
 	}
 
+	if (data.msg.preview) {
+		data.msg.preview.shown =
+			(options.links && data.msg.preview.type === "link") ||
+			(options.thumbnails && data.msg.preview.type === "image");
+	}
+
 	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,36 @@
+"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.links && data.preview.type === "link") ||
+		(options.thumbnails && data.preview.type === "image");
+
+	const toggle = $("#msg-" + data.id);
+	toggle.find(".text").append(templates.toggle({preview: data.preview}));
+
+	toggle.parent(".messages").trigger("keepToBottom");
+});
+
+$("#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();
+	}
+});

client/views/msg.tpl

@@ -7,17 +7,11 @@
 			{{> 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}}
+			{{> toggle}}
+		{{/if}}
+	</span>
 	</span>
 </div>

client/views/toggle.tpl

@@ -1,19 +1,18 @@
-{{#toggle}}
-<div class="toggle-content toggle-type-{{type}}">
+{{#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"}}
-		<a href="{{link}}" target="_blank">
-			<img src="{{link}}">
-		</a>
+		<img src="{{link}}">
 	{{else}}
-		<a href="{{link}}" target="_blank">
-			{{#if thumb}}
-				<img src="{{thumb}}" class="thumb">
-			{{/if}}
-			<div class="head">{{head}}</div>
-			<div class="body">
-				{{body}}
-			</div>
-		</a>
+		{{#if thumb}}
+			<img src="{{thumb}}" class="thumb">
+		{{/if}}
+		<div class="head">{{head}}</div>
+		<div class="body">
+			{{body}}
+		</div>
 	{{/equal}}
-</div>
-{{/toggle}}
+</a>
+{{/preview}}

src/plugins/irc-events/link.js

@@ -8,12 +8,12 @@ const es = require("event-stream");
 
 process.setMaxListeners(0);
 
-module.exports = function(client, chan, originalMsg) {
+module.exports = function(client, chan, msg) {
 	if (!Helper.config.prefetch) {
 		return;
 	}
 
-	const links = originalMsg.text
+	const links = msg.text
 		.replace(/\x02|\x1D|\x1F|\x16|\x0F|\x03(?:[0-9]{1,2}(?:,[0-9]{1,2})?)?/g, "")
 		.split(" ")
 		.filter((w) => /^https?:\/\//.test(w));
@@ -22,13 +22,6 @@ module.exports = function(client, chan, originalMsg) {
 		return;
 	}
 
-	const msg = new Msg({
-		type: Msg.Type.TOGGLE,
-		time: originalMsg.time,
-		self: originalMsg.self,
-	});
-	chan.pushMessage(client, msg);
-
 	const link = escapeHeader(links[0]);
 	fetch(link, function(res) {
 		if (res === null) {
@@ -40,8 +33,7 @@ module.exports = function(client, chan, originalMsg) {
 };
 
 function parse(msg, url, res, client) {
-	var toggle = msg.toggle = {
-		id: msg.id,
+	const preview = {
 		type: "",
 		head: "",
 		body: "",
@@ -52,35 +44,35 @@ function parse(msg, url, res, client) {
 	switch (res.type) {
 	case "text/html":
 		var $ = cheerio.load(res.text);
-		toggle.type = "link";
-		toggle.head =
+		preview.type = "link";
+		preview.head =
 			$("meta[property=\"og:title\"]").attr("content")
 			|| $("title").text()
 			|| "";
-		toggle.body =
+		preview.body =
 			$("meta[property=\"og:description\"]").attr("content")
 			|| $("meta[name=\"description\"]").attr("content")
 			|| "";
-		toggle.thumb =
+		preview.thumb =
 			$("meta[property=\"og:image\"]").attr("content")
 			|| $("meta[name=\"twitter:image:src\"]").attr("content")
 			|| "";
 
 		// Make sure thumbnail is a valid url
-		if (!/^https?:\/\//.test(toggle.thumb)) {
-			toggle.thumb = "";
+		if (!/^https?:\/\//.test(preview.thumb)) {
+			preview.thumb = "";
 		}
 
 		// Verify that thumbnail pic exists and is under allowed size
-		if (toggle.thumb.length) {
-			fetch(escapeHeader(toggle.thumb), (resThumb) => {
+		if (preview.thumb.length) {
+			fetch(escapeHeader(preview.thumb), (resThumb) => {
 				if (resThumb === null
 				|| !(/^image\/.+/.test(resThumb.type))
 				|| resThumb.size > (Helper.config.prefetchMaxImageSize * 1024)) {
-					toggle.thumb = "";
+					preview.thumb = "";
 				}
 
-				emitToggle(client, toggle);
+				emitPreview(client, msg, preview);
 			});
 
 			return;
@@ -93,7 +85,7 @@ function parse(msg, url, res, client) {
 	case "image/jpg":
 	case "image/jpeg":
 		if (res.size < (Helper.config.prefetchMaxImageSize * 1024)) {
-			toggle.type = "image";
+			preview.type = "image";
 		} else {
 			return;
 		}
@@ -103,21 +95,26 @@ function parse(msg, url, res, client) {
 		return;
 	}
 
-	emitToggle(client, toggle);
+	emitPreview(client, msg, preview);
 }
 
-function emitToggle(client, toggle) {
+function emitPreview(client, msg, preview) {
 	// If there is no title but there is preview or description, set title
 	// otherwise bail out and show no preview
-	if (!toggle.head.length) {
-		if (toggle.thumb.length || toggle.body.length) {
-			toggle.head = "Untitled page";
+	if (!preview.head.length) {
+		if (preview.thumb.length || preview.body.length) {
+			preview.head = "Untitled page";
 		} else {
 			return;
 		}
 	}
 
-	client.emit("toggle", toggle);
+	msg.preview = preview;
+
+	client.emit("msg:preview", {
+		id: msg.id,
+		preview: preview
+	});
 }
 
 function fetch(url, cb) {