supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Add (semi-working) image viewer support for images shown in changelogs

Browse Source 
Semi-working because this does not support Preview/Next. The existing image viewer is very custom to in-channel message previews and expects a certain markup, that needs rework tobe more generic.
This commit is contained in:
Jérémie Astori 2017-12-24 18:58:01 -05:00
parent 3eb429dde3
commit f725e944dd
No known key found for this signature in database
GPG Key ID: B9A4F245CD67BDE8
2 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
client/js/renderPreview.js
View File

@ -99,7 +99,7 @@ function handleImageInPreview(content, container) {
const imageViewer = $("#image-viewer");
$("#chat").on("click", ".toggle-thumbnail", function(event, data = {}) {
$("#windows").on("click", ".toggle-thumbnail", function(event, data = {}) {
const link = $(this);
// Passing `data`, specifically `data.pushState`, to not add the action to the
@ -158,7 +158,7 @@ function openImageViewer(link, {pushState = true} = {}) {
imageViewer.html(templates.image_viewer({
image: link.find("img").attr("src"),
link: link.attr("href"),
type: link.parent().hasClass("toggle-type-image") ? "image" : "link",
type: link.parent().hasClass("toggle-type-link") ? "link" : "image",
hasPreviousImage: previousImage.length > 0,
hasNextImage: nextImage.length > 0,
}));
@ -171,10 +171,14 @@ function openImageViewer(link, {pushState = true} = {}) {
// History management
if (pushState) {
const clickTarget =
`#${link.closest(".msg").attr("id")} ` +
`a.toggle-thumbnail[href="${link.attr("href")}"] ` +
"img";
let clickTarget = "";
// Images can be in a message (channel URL previews) or not (window URL
// preview, e.g. changelog). This is sub-optimal and needs improvement to
// make image preview more generic and not specific for channel previews.
if (link.closest(".msg").length > 0) {
clickTarget = `#${link.closest(".msg").attr("id")} `;
}
clickTarget += `a.toggle-thumbnail[href="${link.attr("href")}"] img`;
history.pushState({clickTarget}, null, null);
}
}

6
client/js/socket-events/changelog.js
View File

@ -21,8 +21,12 @@ function requestIfNeeded() {
socket.on("changelog", function(data) {
// 1. Release notes window for the current version
$("#changelog").html(templates.windows.changelog(data.current));
const links = $("#changelog .changelog-text a");
// Make sure all links will open a new tab instead of exiting the application
$("#changelog .changelog-text a").attr("target", "_blank");
links.attr("target", "_blank");
// Add required metadata to image links, to support built-in image viewer
links.has("img").addClass("toggle-thumbnail");
// 2. Version checker visible in Help window
let status;