From 5b60bb0b0c8087208c715c0ae6d42a80c70c10f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
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();
 		});
 }