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

Remove background blur filter/transition when opening the image viewer

Browse Source
This commit is contained in:
Jérémie Astori 2017-07-24 02:31:12 -04:00
parent 2a81af6949
commit 5b60bb0b0c
No known key found for this signature in database
GPG Key ID: B9A4F245CD67BDE8
2 changed files with 16 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/css/style.css
View File

@ -347,9 +347,6 @@ kbd {
#wrap {
height: 100%;
overflow: hidden;
/* Needed to transition blurred background when image viewer is open */
transition: filter .2s;
}
#viewport {
@ -2045,18 +2042,14 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, .8);
background: black;
visibility: hidden;
opacity: 0;
transition: opacity .2s, visibility .2s;
z-index: 999;
}
.image-viewer-opened #wrap {
filter: blur(4px);
}
.image-viewer-opened #image-viewer {
#image-viewer.opened {
visibility: visible;
opacity: 1;
}

26
client/js/renderPreview.js
View File

@ -79,6 +79,8 @@ function handleImageInPreview(content, container) {
/* Image viewer */
const imageViewer = $("#image-viewer");
// FIXME Remove #input focus when this is open
// See https://github.com/thelounge/lounge/issues/1342
$("#viewport").on("click", ".toggle-thumbnail", function() {
@ -91,7 +93,7 @@ $("#viewport").on("click", ".toggle-thumbnail", function() {
return false;
});
$("#image-viewer").on("click", function() {
imageViewer.on("click", function() {
closeImageViewer();
});
@ -101,13 +103,13 @@ $(document).keydown(function(e) {
closeImageViewer();
break;
case 37: // Left arrow
if ($(document.body).hasClass("image-viewer-opened")) {
$("#image-viewer .previous-image-btn").click();
if (imageViewer.hasClass("opened")) {
imageViewer.find(".previous-image-btn").click();
}
break;
case 39: // Right arrow
if ($(document.body).hasClass("image-viewer-opened")) {
$("#image-viewer .next-image-btn").click();
if (imageViewer.hasClass("opened")) {
imageViewer.find(".next-image-btn").click();
}
break;
}
@ -141,7 +143,7 @@ function openImageViewer(link) {
.find(".toggle-content.show .toggle-thumbnail").first();
nextImage.addClass("next-image");
$("#image-viewer").html(templates.image_viewer({
imageViewer.html(templates.image_viewer({
image: link.find("img").attr("src"),
link: link.attr("href"),
type: link.parent().hasClass("toggle-type-image") ? "image" : "link",
@ -149,23 +151,23 @@ function openImageViewer(link) {
hasNextImage: nextImage.length > 0,
}));
$(document.body).addClass("image-viewer-opened");
imageViewer.addClass("opened");
}
$("#image-viewer").on("click", ".previous-image-btn", function() {
imageViewer.on("click", ".previous-image-btn", function() {
$(".previous-image").click();
return false;
});
$("#image-viewer").on("click", ".next-image-btn", function() {
imageViewer.on("click", ".next-image-btn", function() {
$(".next-image").click();
return false;
});
function closeImageViewer() {
$(document.body)
.removeClass("image-viewer-opened")
imageViewer
.removeClass("opened")
.one("transitionend", function() {
$("#image-viewer").empty();
imageViewer.empty();
});
}