From a11a2acc8a10de17e5439219e1e9e17a49be1d87 Mon Sep 17 00:00:00 2001
From: Gerome Matilla <gerome.matilla07@gmail.com>
Date: Thu, 4 Jun 2020 08:53:55 +0800
Subject: [PATCH] cleanup body background blurring

---
 css/body-background.css   |  8 ++-----
 js/body-background-set.js | 45 +++++++++++++++++++++++----------------
 2 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/css/body-background.css b/css/body-background.css
index 3588d18..9e53642 100644
--- a/css/body-background.css
+++ b/css/body-background.css
@@ -9,15 +9,11 @@
 	margin: 0;
 	padding: 0;
 	overflow: hidden;
+	transition: all 3s;
 	color: var(--foreground);
 }
 
-.blurredBodyBackground {
+.blurFiltered {
 	filter: blur(5px);
 	-webkit-filter: blur(5px);
-	transition: all 1s;
-}
-
-.unblurredBodyBackground {
-	transition: all 1s;
 }
\ No newline at end of file
diff --git a/js/body-background-set.js b/js/body-background-set.js
index 6b475b4..dcc02df 100644
--- a/js/body-background-set.js
+++ b/js/body-background-set.js
@@ -1,34 +1,43 @@
-// High quality background, we'll lazy load this
-var hqBG = document.createElement("img");
 var backgroundBody = document.getElementById('bodyBackground') 
 
+// High quality background, we'll lazy load this
+var hqBackground = document.createElement("img");
+
 // Style body background
-const styleBodyBackground = () => {
-	backgroundBody.style.backgroundSize = 'cover';
-	backgroundBody.style.backgroundRepeat =  "no-repeat";
-	backgroundBody.style.backgroundPosition = "center";
-	backgroundBody.style.backgroundAttachment = "fixed";
+const styleBodyBackground = (bgBodyStyle) => {
+	bgBodyStyle.backgroundSize = 'cover';
+	bgBodyStyle.backgroundRepeat =  "no-repeat";
+	bgBodyStyle.backgroundPosition = "center";
+	bgBodyStyle.backgroundAttachment = "fixed";
 } 
 
 const lazyLoadBackground = (fileName) => {
 
-	// Set a low quality background image 
-	backgroundBody.style.background = "url('assets/backgrounds/" + 
-	fileName + "-low" + ".webp')";
-	styleBodyBackground();
-	backgroundBody.className = "blurredBodyBackground";
+	// Shorten backgroundBody.style or alias it
+	var bgBodyStyle = backgroundBody.style;
 
-	hqBG.onload = function() {
+	// Set a low quality background image 
+	bgBodyStyle.background = "url('assets/backgrounds/" + 
+	fileName + "-low" + ".webp')";
+	styleBodyBackground(bgBodyStyle);
+
+	// Add a class to blur it
+	backgroundBody.classList.add("blurFiltered");
+
+	hqBackground.onload = () => {
+		
 		// After downloading the HQ image, set it as bg
-		backgroundBody.style.background = "url("+ hqBG.src; + ")";
-		styleBodyBackground();
-		backgroundBody.className = "unblurredBodyBackground";
+		backgroundBody.style.background = "url("+ hqBackground.src; + ")";
+		styleBodyBackground(bgBodyStyle);
+
+		// Remove class to unblur
+		backgroundBody.classList.remove("blurFiltered");
 	}
 
 	// Add a delay when to fetch background
 	setTimeout(
-		function() {
-			hqBG.src = "assets/backgrounds/" + 
+		() => {
+			hqBackground.src = "assets/backgrounds/" + 
 			fileName + ".webp";
 		},
 		50