From e31571e5080bdf842bff92c040d19a3ca7797605 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20Tron=C3=AD=C4=8Dek?= <filip.tronicek@seznam.cz>
Date: Wed, 20 Jan 2021 17:50:43 +0100
Subject: [PATCH] Rewrite style injection as a template string

---
 animations.js | 41 ++++++++++++++++++++++-------------------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/animations.js b/animations.js
index 85549b0..482a1f9 100644
--- a/animations.js
+++ b/animations.js
@@ -10,25 +10,28 @@ $(".column").on('click', function() {
 	$("#empty-container").remove();
 	$('<div id="empty-container" class="column"></div>').insertAfter(this);
 
-	let styles = '';
-	styles = '@keyframes outlightbox {';
-	styles += '0% {';
-	styles += 'height: 100%;';
-	styles += 'width: 100%;';
-	styles += 'top: 0px;';
-	styles += 'left: 0px;';
-	styles += '}';
-	styles += '50% {';
-	styles += 'height: 220px;';
-	styles += 'top: ' + bounding_box.y + 'px;';
-	styles += '}';
-	styles += '100% {';
-	styles += 'height: 220px;';
-	styles += 'width: '+bounding_box.width+'px;';
-	styles += 'top: ' + bounding_box.y + 'px;';
-	styles += 'left: ' + bounding_box.x + 'px;';
-	styles += '}';
-	styles += '}';
+	const styles = `
+		@keyframes outlightbox {
+			0% {
+				height: 100%;
+				width: 100%;
+				top: 0px;
+				left: 0px;
+			}
+
+			50% {
+				height: 220px;
+				top: ${bounding_box.y}px;
+			}
+
+			100% {
+				height: 220px;
+				width: ${bounding_box.width}px;
+				top: ${bounding_box.y}px;
+				left: ${bounding_box.x}px;
+			}
+		}
+	`;
 
 	$("#lightbox-animations").empty();
 	$("#lightbox-animations").get(0).sheet.insertRule(styles, 0);