Merge pull request #1176 from Smithster/master

Custom Background Images

src/js/config.js

@@ -113,6 +113,8 @@ let defaultConfig = {
   monkey: false,
   repeatQuotes: "off",
   oppositeShiftMode: "off",
+  customBackground: "",
+  customBackgroundSize: "cover",
 };
 
 function isConfigKeyValid(name) {
@@ -1343,6 +1345,28 @@ export function setFontSize(fontSize, nosave) {
   if (!nosave) saveToCookie();
 }
 
+export function setCustomBackground(value, nosave) {
+  if (value == null || value == undefined) {
+    value = "";
+  }
+  if( /(https|http):\/\/(www\.|).+\..+\/.+(\.png|\.gif|\.jpeg|\.jpg)/gi.test(value) || value == ""){
+    config.customBackground = value;
+    ThemeController.applyCustomBackground();
+    if (!nosave) saveToCookie();
+  } else {
+    Notifications.add("Invalid custom background URL", 0);
+  }
+}
+
+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 +1381,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);

src/js/settings.js

@@ -735,3 +735,21 @@ $(".pageSettings #resetPersonalBestsButton").on("click", (e) => {
 $(".pageSettings #updateAccountEmail").on("click", (e) => {
   SimplePopups.list.updateEmail.show();
 });
+
+$(".pageSettings .section.customBackground .inputAndButton .save").on("click", (e) => {
+  UpdateConfig.setCustomBackground($(".pageSettings .section.customBackground .inputAndButton input").val())
+});
+
+$(".pageSettings .section.customBackground .inputAndButton .cover").on("click", (e) => {
+  UpdateConfig.setCustomBackgroundSize("cover");
+});
+
+$(".pageSettings .section.customBackground .inputAndButton .contain").on("click", (e) => {
+  UpdateConfig.setCustomBackgroundSize("contain");
+});
+
+$(".pageSettings .section.customBackground .inputAndButton input").keypress( (e) => {
+  if(e.keyCode == 13){
+    UpdateConfig.setCustomBackground($(".pageSettings .section.customBackground .inputAndButton input").val())
+  }
+});

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,20 @@ export function randomiseTheme() {
 export function clearRandom() {
   randomTheme = null;
 }
+
+export function applyCustomBackground(){
+  $("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,
+    })
+  }
+}

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 {
@@ -2714,6 +2714,40 @@ key {
       }
     }
 
+    &.customBackground{
+      .inputAndButton{
+        display:grid;
+        grid-template-columns: 2fr 1fr 1fr;
+        grid-template-rows: 1fr 1fr;
+        gap: 0.5rem;
+        input{
+          grid-column: 1/3;
+          grid-row: 1/2;
+        }
+
+        .save{
+          grid-column:3/4;
+          grid-row:1/2;
+          height: auto;
+
+          .fas{
+            margin-right: 0rem;
+            vertical-align: sub;
+          }
+        }
+
+        .cover{
+          grid-column:1/2;
+          grid-row:2/3;
+        }
+
+        .contain{
+          grid-column:2/4;
+          grid-row:2/3;
+        }
+      }
+    }
+
     &.customTheme {
       grid-template-columns: 1fr 1fr 1fr 1fr;
       justify-items: stretch;

static/index.html

@@ -2920,6 +2920,28 @@
                   </div>
                 </div>
               </div>
+              <div class="section customBackground">
+                <h1>custom background</h1>
+                <div class="text">
+                  Set an image url to be a custom background image. Cover fits the image to cover the screen.
+                  Contain fits the image to be fully visible.
+                </div>
+                <div class="inputAndButton">
+                  <input type="text" placeholder="image url"
+                    class="input"
+                    tabindex="0"
+                  >
+                  <div
+                    class="button save"
+                    tabindex="0"
+                    onclick="this.blur();"
+                  >
+                  <i class="fas fa-save fa-fw"></i>
+                  </div>
+                  <div class="button cover" onclick="this.blur();">cover</div>
+                  <div class="button contain" onclick="this.blur();">contain</div>
+                </div>
+              </div>
               <div class="section themes">
                 <h1>theme</h1>
                 <div class="tabs">