From 230da777cb9ebc2a60be1f460e6a3ea5ec5e3d13 Mon Sep 17 00:00:00 2001 From: Smithster Date: Tue, 6 Apr 2021 00:29:24 +0100 Subject: [PATCH] Added custom background filters --- gulpfile.js | 1 + src/js/config.js | 10 +++ src/js/popups/custom-background-filter.js | 103 ++++++++++++++++++++++ src/js/theme-controller.js | 9 +- src/sass/style.scss | 35 +++++++- static/index.html | 36 +++++++- 6 files changed, 186 insertions(+), 8 deletions(-) create mode 100644 src/js/popups/custom-background-filter.js diff --git a/gulpfile.js b/gulpfile.js index 614bc63f5..fa16981bb 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -133,6 +133,7 @@ const refactoredSrc = [ "./src/js/popups/edit-tags-popup.js", "./src/js/popups/custom-theme-popup.js", "./src/js/popups/import-settings-popup.js", + "./src/js/popups/custom-background-filter.js", "./src/js/settings/language-picker.js", "./src/js/settings/theme-picker.js", diff --git a/src/js/config.js b/src/js/config.js index 3771e0123..c2f0f357f 100644 --- a/src/js/config.js +++ b/src/js/config.js @@ -16,6 +16,7 @@ import * as TestLogic from "./test-logic"; import * as PaceCaret from "./pace-caret"; import * as UI from "./ui"; import * as CommandlineLists from "./commandline-lists"; +import * as BackgroundFilter from "./custom-background-filter"; export let cookieConfig = null; export let dbConfigLoaded = false; @@ -116,6 +117,7 @@ let defaultConfig = { oppositeShiftMode: "off", customBackground: "", customBackgroundSize: "cover", + customBackgroundFilter: [0, 1, 1, 1, 1], }; function isConfigKeyValid(name) { @@ -1381,6 +1383,13 @@ export function setCustomBackgroundSize(value, nosave) { if (!nosave) saveToCookie(); } +export function setCustomBackgroundFilter(array, nosave) { + config.customBackgroundFilter = array; + BackgroundFilter.loadConfig(config.customBackgroundFilter); + BackgroundFilter.apply(); + if (!nosave) saveToCookie(); +} + export function apply(configObj) { if (configObj == null || configObj == undefined) { Notifications.add("Could not apply config", -1, 3); @@ -1397,6 +1406,7 @@ export function apply(configObj) { setCustomTheme(configObj.customTheme, true, true); setCustomBackground(configObj.customBackground, true); setCustomBackgroundSize(configObj.customBackgroundSize, true); + setCustomBackgroundFilter(configObj.customBackgroundFilter, true); setQuickTabMode(configObj.quickTab, true); setKeyTips(configObj.showKeyTips, true); setTimeConfig(configObj.time, true); diff --git a/src/js/popups/custom-background-filter.js b/src/js/popups/custom-background-filter.js new file mode 100644 index 000000000..c6da1ce42 --- /dev/null +++ b/src/js/popups/custom-background-filter.js @@ -0,0 +1,103 @@ +import Config, * as UpdateConfig from "./config"; + +let filters = { + blur: { + value: 0, + default: 0 + }, + brightness: { + value: 1, + default: 1 + }, + saturate: { + value: 1, + default: 1 + }, + contrast: { + value: 1, + default: 1 + }, + opacity: { + value: 1, + default: 1 + } +} + +export function apply() { + let filterCSS = getCSS(); + $(".customBackground").css({ + filter: filterCSS, + }); +} + +function syncSliders(){ + $(".blur").val(filters["blur"].value); + $(".brightness").val(filters["brightness"].value); + $(".saturate").val(filters["saturate"].value); + $(".contrast").val(filters["contrast"].value); + $(".opacity").val(filters["opacity"].value); +} + +$(".blur").on("input", (e) => { + filters["blur"].value = $(".blur").val(); + $(".blurValue").html(filters["blur"].value); + apply(); +}) + +$(".brightness").on("input", (e) => { + filters["brightness"].value = $(".brightness").val(); + $(".brightnessValue").html(filters["brightness"].value); + apply(); +}) + +$(".saturate").on("input", (e) => { + filters["saturate"].value = $(".saturate").val(); + $(".saturateValue").html(filters["saturate"].value); + apply(); +}) + +$(".contrast").on("input", (e) => { + filters["contrast"].value = $(".contrast").val(); + $(".contrastValue").html(filters["contrast"].value); + apply(); +}) + +$(".opacity").on("input", (e) => { + filters["opacity"].value = $(".opacity").val(); + $(".opacityValue").html(filters["opacity"].value); + apply(); +}) + +$(".customBackgroundFilter .button").click( (e) => { + let arr = []; + Object.keys(filters).forEach(filterKey => { + arr.push(filters[filterKey].value); + }) + UpdateConfig.setCustomBackgroundFilter(arr, false); +}); + +export function getCSS(){ + let ret = ""; + Object.keys(filters).forEach((filterKey) => { + if (filters[filterKey].value != filters[filterKey].default){ + ret += `${filterKey}(${filters[filterKey].value}${filterKey == "blur" ? "rem" : ""}) ` + } + }) + return ret; +} + +export function loadConfig(config){ + filters.blur.value = config[0]; + filters.brightness.value = config[1]; + filters.saturate.value = config[2]; + filters.contrast.value = config[3]; + filters.opacity.value = config[4]; + $(".blurValue").html(config[0]); + $(".brightnessValue").html(config[1]); + $(".saturateValue").html(config[2]); + $(".contrastValue").html(config[3]); + $(".opacityValue").html(config[4]); + syncSliders(); +} + + diff --git a/src/js/theme-controller.js b/src/js/theme-controller.js index 5f739befc..e3a3ca8ee 100644 --- a/src/js/theme-controller.js +++ b/src/js/theme-controller.js @@ -4,7 +4,6 @@ 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; @@ -152,10 +151,8 @@ export function clearRandom() { } export function applyCustomBackground() { - $("body").css({ + $(".customBackground").css({ backgroundImage: `url(${Config.customBackground})`, - backgroundRepeat: "no-repeat", - backgroundPosition: "center center", backgroundAttachment: "fixed", }); if (Config.customBackground === "") { @@ -167,8 +164,8 @@ export function applyCustomBackground() { export function applyCustomBackgroundSize() { if (Config.customBackgroundSize != "") { - $("body").css({ + $(".customBackground").css({ backgroundSize: Config.customBackgroundSize, }); } -} +} \ No newline at end of file diff --git a/src/sass/style.scss b/src/sass/style.scss index cdaba3f74..5f87b178c 100644 --- a/src/sass/style.scss +++ b/src/sass/style.scss @@ -44,6 +44,22 @@ input { font-family: var(--font); } +input[type="range"] { + -webkit-appearance: none; + padding: 0; + width: 100%; + height: 1rem; + border-radius: var(--roundness); + &::-webkit-slider-thumb{ + -webkit-appearance: none; + padding: 0; + width: 2rem; + height: 1rem; + border-radius: var(--roundness); + background-color: var(--main-color); + } +} + input[type="color"] { -webkit-appearance: none; padding: 0; @@ -110,7 +126,18 @@ body { font-family: var(--font); color: var(--main-color); overflow-x: hidden; - background: var(--bg-color); + background: var(--bg-color); +} + +.customBackground{ + content:""; + width:100vw; + height:100vh; + position: fixed; + left: 0; + top: 0; + background-position: center center; + background-repeat: no-repeat; } html { @@ -2741,6 +2768,12 @@ key { } } + &.customBackgroundFilter { + .fas { + margin-right: 0rem; + } + } + &.customTheme { grid-template-columns: 1fr 1fr 1fr 1fr; justify-items: stretch; diff --git a/static/index.html b/static/index.html index 8914100f6..d4a696a82 100644 --- a/static/index.html +++ b/static/index.html @@ -54,7 +54,7 @@ - +
@@ -2964,6 +2964,40 @@
+
+

custom background filter

+
Apply various effects to the custom background.
+
+
+
+
blur
+
+ +
+
+
brightness
+
+ +
+
+
saturate
+
+ +
+
+
contrast
+
+ +
+
+
opacity
+
+ +
+
+
+
+

theme