From 5b60bb0b0c8087208c715c0ae6d42a80c70c10f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Mon, 24 Jul 2017 02:31:12 -0400 Subject: [PATCH] Remove background blur filter/transition when opening the image viewer --- client/css/style.css | 11 ++--------- client/js/renderPreview.js | 26 ++++++++++++++------------ 2 files changed, 16 insertions(+), 21 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index c941448e..e517fe36 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -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; } diff --git a/client/js/renderPreview.js b/client/js/renderPreview.js index b2229bec..dc88fa2e 100644 --- a/client/js/renderPreview.js +++ b/client/js/renderPreview.js @@ -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(); }); }