From 643ecf6a004201e30994edea5209705149198670 Mon Sep 17 00:00:00 2001
From: Smithster <samsmith99@btinternet.com>
Date: Sun, 4 Apr 2021 17:29:50 +0100
Subject: [PATCH] Added functionality to add background image and background
 size

---
 src/js/config.js           | 22 ++++++++++++++++++++++
 src/js/theme-controller.js | 20 ++++++++++++++++++++
 src/sass/style.scss        |  2 +-
 3 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/js/config.js b/src/js/config.js
index 03ddf6456..b670b9008 100644
--- a/src/js/config.js
+++ b/src/js/config.js
@@ -113,6 +113,8 @@ let defaultConfig = {
   monkey: false,
   repeatQuotes: "off",
   oppositeShiftMode: "off",
+  customBackground: "https://i.imgur.com/OWbWz6i.jpg",
+  customBackgroundSize: "cover",
 };
 
 function isConfigKeyValid(name) {
@@ -1343,6 +1345,24 @@ export function setFontSize(fontSize, nosave) {
   if (!nosave) saveToCookie();
 }
 
+export function setCustomBackground(value, nosave) {
+  if (value == null || value == undefined) {
+    value = "";
+  }
+  config.customBackground = value;
+  ThemeController.applyCustomBackground();
+  if (!nosave) saveToCookie();
+}
+
+export function setCustomBackgroundSize(value, nosave) {
+  if (value != "cover" && value != "contain"){
+    value = "cover";
+  }
+  config.customBackgroundSize = value;
+  ThemeController.applyCustomBackgroundSize();
+  if (!nosave) saveToCookie();
+}
+
 export function apply(configObj) {
   if (configObj == null || configObj == undefined) {
     Notifications.add("Could not apply config", -1, 3);
@@ -1357,6 +1377,8 @@ export function apply(configObj) {
     setTheme(configObj.theme, true);
     setCustomThemeColors(configObj.customThemeColors, true);
     setCustomTheme(configObj.customTheme, true, true);
+    setCustomBackground(configObj.customBackground, true);
+    setCustomBackgroundSize(configObj.customBackgroundSize, true);
     setQuickTabMode(configObj.quickTab, true);
     setKeyTips(configObj.showKeyTips, true);
     setTimeConfig(configObj.time, true);
diff --git a/src/js/theme-controller.js b/src/js/theme-controller.js
index e556135da..79ad46253 100644
--- a/src/js/theme-controller.js
+++ b/src/js/theme-controller.js
@@ -4,6 +4,7 @@ import * as Misc from "./misc";
 import * as Notifications from "./notifications";
 import Config from "./config";
 import * as UI from "./ui";
+import config from "./config";
 
 let isPreviewingTheme = false;
 let randomTheme = null;
@@ -149,3 +150,22 @@ export function randomiseTheme() {
 export function clearRandom() {
   randomTheme = null;
 }
+
+export function applyCustomBackground(){
+  if (Config.customBackground != ""){
+    $("body").css({
+      backgroundImage: `url(${Config.customBackground})`,
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "center center",
+      backgroundAttachment: "fixed",
+    })
+  }
+}
+
+export function applyCustomBackgroundSize(){
+  if (Config.customBackgroundSize != ""){
+    $("body").css({
+      backgroundSize: Config.customBackgroundSize,
+    })
+  }
+}
\ No newline at end of file
diff --git a/src/sass/style.scss b/src/sass/style.scss
index bc45debe6..69d0e3cb9 100644
--- a/src/sass/style.scss
+++ b/src/sass/style.scss
@@ -107,10 +107,10 @@ body {
   margin: 0;
   padding: 0;
   min-height: 100vh;
-  background: var(--bg-color);
   font-family: var(--font);
   color: var(--main-color);
   overflow-x: hidden;
+  background: var(--bg-color);
 }
 
 html {