2017-07-06 06:16:01 +00:00
|
|
|
"use strict";
|
|
|
|
|
|
|
|
const $ = require("jquery");
|
|
|
|
const options = require("./options");
|
|
|
|
const templates = require("../views");
|
2017-07-25 14:54:35 +00:00
|
|
|
const input = $("#input");
|
2017-07-06 06:16:01 +00:00
|
|
|
|
|
|
|
module.exports = renderPreview;
|
|
|
|
|
|
|
|
function renderPreview(preview, msg) {
|
2017-07-21 05:28:51 +00:00
|
|
|
if (preview.type === "loading") {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2017-07-21 10:22:59 +00:00
|
|
|
const escapedLink = preview.link.replace(/["\\]/g, "\\$&");
|
|
|
|
const previewContainer = msg.find(`.preview[data-url="${escapedLink}"]`);
|
|
|
|
|
|
|
|
// This is to fix a very rare case of rendering a preview twice
|
|
|
|
// This happens when a very large amount of messages is being sent to the client
|
|
|
|
// and they get queued, so the `preview` object on the server has time to load before
|
|
|
|
// it actually gets sent to the server, which makes the loaded preview sent twice,
|
|
|
|
// once in `msg` and another in `msg:preview`
|
|
|
|
if (!previewContainer.is(":empty")) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2017-07-06 06:16:01 +00:00
|
|
|
preview.shown = options.shouldOpenMessagePreview(preview.type);
|
|
|
|
|
|
|
|
const container = msg.closest(".chat");
|
|
|
|
let bottom = false;
|
|
|
|
if (container.length) {
|
|
|
|
bottom = container.isScrollBottom();
|
|
|
|
}
|
|
|
|
|
2017-07-21 10:22:59 +00:00
|
|
|
msg.find(`.text a[href="${escapedLink}"]`)
|
2017-07-06 07:35:54 +00:00
|
|
|
.first()
|
2017-07-21 10:22:59 +00:00
|
|
|
.after(templates.msg_preview_toggle({preview: preview}).trim());
|
2017-07-06 07:35:54 +00:00
|
|
|
|
2017-07-21 10:22:59 +00:00
|
|
|
previewContainer
|
2017-07-06 06:16:01 +00:00
|
|
|
.append(templates.msg_preview({preview: preview}));
|
|
|
|
|
|
|
|
if (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");
|
2017-07-20 05:58:04 +00:00
|
|
|
const content = self.closest(".content")
|
2017-07-06 07:35:54 +00:00
|
|
|
.find(`.preview[data-url="${self.data("url")}"] .toggle-content`);
|
2017-07-06 06:16:01 +00:00
|
|
|
const bottom = container.isScrollBottom();
|
|
|
|
|
|
|
|
if (bottom && !content.hasClass("show")) {
|
|
|
|
handleImageInPreview(content, container);
|
|
|
|
}
|
|
|
|
|
2017-07-06 07:35:54 +00:00
|
|
|
self.toggleClass("opened");
|
2017-07-06 06:16:01 +00:00
|
|
|
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");
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
2017-07-12 06:55:41 +00:00
|
|
|
|
|
|
|
/* Image viewer */
|
|
|
|
|
2017-07-24 06:31:12 +00:00
|
|
|
const imageViewer = $("#image-viewer");
|
|
|
|
|
2017-07-25 14:54:35 +00:00
|
|
|
$("#chat").on("click", ".toggle-thumbnail", function() {
|
2017-07-12 06:55:41 +00:00
|
|
|
const link = $(this);
|
|
|
|
|
|
|
|
openImageViewer(link);
|
|
|
|
|
|
|
|
// Prevent the link to open a new page since we're opening the image viewer,
|
2017-07-25 14:54:35 +00:00
|
|
|
// but keep it a link to allow for Ctrl/Cmd+click.
|
|
|
|
// By binding this event on #chat we prevent input gaining focus after clicking.
|
2017-07-12 06:55:41 +00:00
|
|
|
return false;
|
|
|
|
});
|
|
|
|
|
2017-07-24 06:31:12 +00:00
|
|
|
imageViewer.on("click", function() {
|
2017-07-12 06:55:41 +00:00
|
|
|
closeImageViewer();
|
|
|
|
});
|
|
|
|
|
|
|
|
$(document).keydown(function(e) {
|
|
|
|
switch (e.keyCode ? e.keyCode : e.which) {
|
|
|
|
case 27: // Escape
|
|
|
|
closeImageViewer();
|
|
|
|
break;
|
2017-07-23 17:14:27 +00:00
|
|
|
case 37: // Left arrow
|
2017-07-24 06:31:12 +00:00
|
|
|
if (imageViewer.hasClass("opened")) {
|
|
|
|
imageViewer.find(".previous-image-btn").click();
|
2017-07-23 17:14:27 +00:00
|
|
|
}
|
|
|
|
break;
|
|
|
|
case 39: // Right arrow
|
2017-07-24 06:31:12 +00:00
|
|
|
if (imageViewer.hasClass("opened")) {
|
|
|
|
imageViewer.find(".next-image-btn").click();
|
2017-07-23 17:14:27 +00:00
|
|
|
}
|
|
|
|
break;
|
2017-07-12 06:55:41 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
function openImageViewer(link) {
|
2017-07-23 17:14:27 +00:00
|
|
|
$(".previous-image").removeClass("previous-image");
|
|
|
|
$(".next-image").removeClass("next-image");
|
|
|
|
|
|
|
|
// The next two blocks figure out what are the previous/next images. We first
|
|
|
|
// look within the same message, as there can be multiple thumbnails per
|
|
|
|
// message, and if not, we look at previous/next messages and take the
|
|
|
|
// last/first thumbnail available.
|
|
|
|
// Only expanded thumbnails are being cycled through.
|
|
|
|
|
|
|
|
// Previous image
|
2017-07-24 06:14:14 +00:00
|
|
|
let previousImage = link.closest(".preview").prev(".preview")
|
2017-07-23 17:14:27 +00:00
|
|
|
.find(".toggle-content.show .toggle-thumbnail").last();
|
2017-07-24 06:14:14 +00:00
|
|
|
if (!previousImage.length) {
|
|
|
|
previousImage = link.closest(".msg").prevAll()
|
|
|
|
.find(".toggle-content.show .toggle-thumbnail").last();
|
|
|
|
}
|
2017-07-23 17:14:27 +00:00
|
|
|
previousImage.addClass("previous-image");
|
|
|
|
|
|
|
|
// Next image
|
2017-07-24 06:14:14 +00:00
|
|
|
let nextImage = link.closest(".preview").next(".preview")
|
2017-07-23 17:14:27 +00:00
|
|
|
.find(".toggle-content.show .toggle-thumbnail").first();
|
2017-07-24 06:14:14 +00:00
|
|
|
if (!nextImage.length) {
|
|
|
|
nextImage = link.closest(".msg").nextAll()
|
|
|
|
.find(".toggle-content.show .toggle-thumbnail").first();
|
|
|
|
}
|
2017-07-23 17:14:27 +00:00
|
|
|
nextImage.addClass("next-image");
|
|
|
|
|
2017-07-24 06:31:12 +00:00
|
|
|
imageViewer.html(templates.image_viewer({
|
2017-07-12 06:55:41 +00:00
|
|
|
image: link.find("img").attr("src"),
|
|
|
|
link: link.attr("href"),
|
2017-07-23 17:14:27 +00:00
|
|
|
type: link.parent().hasClass("toggle-type-image") ? "image" : "link",
|
|
|
|
hasPreviousImage: previousImage.length > 0,
|
|
|
|
hasNextImage: nextImage.length > 0,
|
2017-07-12 06:55:41 +00:00
|
|
|
}));
|
|
|
|
|
2017-07-24 06:31:12 +00:00
|
|
|
imageViewer.addClass("opened");
|
2017-07-12 06:55:41 +00:00
|
|
|
}
|
|
|
|
|
2017-07-24 06:31:12 +00:00
|
|
|
imageViewer.on("click", ".previous-image-btn", function() {
|
2017-07-23 17:14:27 +00:00
|
|
|
$(".previous-image").click();
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
|
2017-07-24 06:31:12 +00:00
|
|
|
imageViewer.on("click", ".next-image-btn", function() {
|
2017-07-23 17:14:27 +00:00
|
|
|
$(".next-image").click();
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
|
2017-07-12 06:55:41 +00:00
|
|
|
function closeImageViewer() {
|
2017-07-24 06:31:12 +00:00
|
|
|
imageViewer
|
|
|
|
.removeClass("opened")
|
2017-07-12 06:55:41 +00:00
|
|
|
.one("transitionend", function() {
|
2017-07-24 06:31:12 +00:00
|
|
|
imageViewer.empty();
|
2017-07-12 06:55:41 +00:00
|
|
|
});
|
2017-07-25 14:54:35 +00:00
|
|
|
|
|
|
|
input.focus();
|
2017-07-12 06:55:41 +00:00
|
|
|
}
|