thelounge/client/js/socket-events/msg_preview.js

"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.closest(".chat");
	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(".chat");
	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");
		});
	}
}