From 643ecf6a004201e30994edea5209705149198670 Mon Sep 17 00:00:00 2001 From: Smithster Date: Sun, 4 Apr 2021 17:29:50 +0100 Subject: [PATCH 1/3] 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 { From e3db19050e33c87b6d1ea305917d15f14ca5309c Mon Sep 17 00:00:00 2001 From: Smithster Date: Sun, 4 Apr 2021 18:43:34 +0100 Subject: [PATCH 2/3] added custom background options in settings page --- src/js/settings.js | 12 ++++++++++++ src/sass/style.scss | 34 ++++++++++++++++++++++++++++++++++ static/index.html | 22 ++++++++++++++++++++++ 3 files changed, 68 insertions(+) diff --git a/src/js/settings.js b/src/js/settings.js index c312b83f1..53ef33e8b 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -735,3 +735,15 @@ $(".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"); +}); \ No newline at end of file diff --git a/src/sass/style.scss b/src/sass/style.scss index 69d0e3cb9..4fc869970 100644 --- a/src/sass/style.scss +++ b/src/sass/style.scss @@ -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; diff --git a/static/index.html b/static/index.html index 731ef8d9d..8e3ae7975 100644 --- a/static/index.html +++ b/static/index.html @@ -2920,6 +2920,28 @@ +
+

custom background

+
+ 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. +
+
+ +
+ +
+
cover
+
contain
+
+

theme

From bdfab7caeff8d0c3a9e249c981268470ccf3cb1c Mon Sep 17 00:00:00 2001 From: Smithster Date: Sun, 4 Apr 2021 19:33:59 +0100 Subject: [PATCH 3/3] -Now able to clear background images -removed default image -can now use enter to save background image -removed pointless test --- src/js/config.js | 12 ++++++++---- src/js/settings.js | 6 ++++++ src/js/theme-controller.js | 14 ++++++-------- 3 files changed, 20 insertions(+), 12 deletions(-) diff --git a/src/js/config.js b/src/js/config.js index b670b9008..1c9fb98eb 100644 --- a/src/js/config.js +++ b/src/js/config.js @@ -113,7 +113,7 @@ let defaultConfig = { monkey: false, repeatQuotes: "off", oppositeShiftMode: "off", - customBackground: "https://i.imgur.com/OWbWz6i.jpg", + customBackground: "", customBackgroundSize: "cover", }; @@ -1349,9 +1349,13 @@ export function setCustomBackground(value, nosave) { if (value == null || value == undefined) { value = ""; } - config.customBackground = value; - ThemeController.applyCustomBackground(); - if (!nosave) saveToCookie(); + 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) { diff --git a/src/js/settings.js b/src/js/settings.js index 53ef33e8b..eeeb65fa2 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -746,4 +746,10 @@ $(".pageSettings .section.customBackground .inputAndButton .cover").on("click", $(".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()) + } }); \ No newline at end of file diff --git a/src/js/theme-controller.js b/src/js/theme-controller.js index 79ad46253..c91bc9a52 100644 --- a/src/js/theme-controller.js +++ b/src/js/theme-controller.js @@ -152,14 +152,12 @@ export function clearRandom() { } export function applyCustomBackground(){ - if (Config.customBackground != ""){ - $("body").css({ - backgroundImage: `url(${Config.customBackground})`, - backgroundRepeat: "no-repeat", - backgroundPosition: "center center", - backgroundAttachment: "fixed", - }) - } + $("body").css({ + backgroundImage: `url(${Config.customBackground})`, + backgroundRepeat: "no-repeat", + backgroundPosition: "center center", + backgroundAttachment: "fixed", + }) } export function applyCustomBackgroundSize(){