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

Merge pull request #1503 from thelounge/astorije/image-preview-history

Browse Source 
Handle browser history when opening/closing image preview
This commit is contained in:
Pavel Djundik 2017-09-22 21:03:50 +03:00 committed by GitHub
commit b456ab997c
2 changed files with 42 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
client/js/lounge.js
View File

@ -315,7 +315,7 @@ $(function() {
const state = {};
if (self.hasClass("chan")) {
state.clickTarget = `.chan[data-id="${self.data("id")}"]`;
state.clickTarget = `#sidebar .chan[data-id="${self.data("id")}"]`;
} else {
state.clickTarget = `#footer button[data-target="${target}"]`;
}
@ -598,8 +598,21 @@ $(function() {
return;
}
const {clickTarget} = state;
let {clickTarget} = state;
if (clickTarget) {
// This will be true when click target corresponds to opening a thumbnail,
// browsing to the previous/next thumbnail, or closing the image viewer.
const imageViewerRelated = clickTarget.includes(".toggle-thumbnail");
// If the click target is not related to the image viewer but the viewer
// is currently opened, we need to close it.
if (!imageViewerRelated && $("#image-viewer").hasClass("opened")) {
clickTarget += ", #image-viewer";
}
// Emit the click to the target, while making sure it is not going to be
// added to the state again.
$(clickTarget).trigger("click", {
pushState: false
});

33
client/js/renderPreview.js
View File

@ -92,10 +92,12 @@ function handleImageInPreview(content, container) {
const imageViewer = $("#image-viewer");
$("#chat").on("click", ".toggle-thumbnail", function() {
$("#chat").on("click", ".toggle-thumbnail", function(event, data = {}) {
const link = $(this);
openImageViewer(link);
// Passing `data`, specifically `data.pushState`, to not add the action to the
// history state if back or forward buttons were pressed.
openImageViewer(link, data);
// Prevent the link to open a new page since we're opening the image viewer,
// but keep it a link to allow for Ctrl/Cmd+click.
@ -103,8 +105,10 @@ $("#chat").on("click", ".toggle-thumbnail", function() {
return false;
});
imageViewer.on("click", function() {
closeImageViewer();
imageViewer.on("click", function(event, data = {}) {
// Passing `data`, specifically `data.pushState`, to not add the action to the
// history state if back or forward buttons were pressed.
closeImageViewer(data);
});
$(document).keydown(function(e) {
@ -125,7 +129,7 @@ $(document).keydown(function(e) {
}
});
function openImageViewer(link) {
function openImageViewer(link, {pushState = true} = {}) {
$(".previous-image").removeClass("previous-image");
$(".next-image").removeClass("next-image");
@ -166,6 +170,15 @@ function openImageViewer(link) {
imageViewer
.off("transitionend")
.addClass("opened");
// History management
if (pushState) {
const clickTarget =
`#${link.closest(".msg").attr("id")} ` +
`a.toggle-thumbnail[href="${link.attr("href")}"] ` +
"img";
history.pushState({clickTarget}, null, null);
}
}
imageViewer.on("click", ".previous-image-btn", function() {
@ -178,7 +191,7 @@ imageViewer.on("click", ".next-image-btn", function() {
return false;
});
function closeImageViewer() {
function closeImageViewer({pushState = true} = {}) {
imageViewer
.removeClass("opened")
.one("transitionend", function() {
@ -186,4 +199,12 @@ function closeImageViewer() {
});
input.focus();
// History management
if (pushState) {
const clickTarget =
"#sidebar " +
`.chan[data-id="${$("#sidebar .chan.active").data("id")}"]`;
history.pushState({clickTarget}, null, null);
}
}