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 0d9993a54..e36848af7 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) { @@ -1373,7 +1375,7 @@ export function setCustomBackground(value, nosave) { } export function setCustomBackgroundSize(value, nosave) { - if (value != "cover" && value != "contain") { + if (value != "cover" && value != "contain" && value!= "max") { value = "cover"; } config.customBackgroundSize = value; @@ -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..e67a63f44 --- /dev/null +++ b/src/js/popups/custom-background-filter.js @@ -0,0 +1,118 @@ +import * as UpdateConfig from "./config"; +import * as Notifications from "./notifications"; + +let filters = { + blur: { + value: 0, + default: 0, + }, + brightness: { + value: 1, + default: 1, + }, + saturate: { + value: 1, + default: 1, + }, + opacity: { + value: 1, + default: 1, + }, +}; + +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 apply() { + let filterCSS = getCSS(); + $(".customBackground").css({ + filter: filterCSS, + }); +} + +function syncSliders() { + $(".section.customBackgroundFilter .blur input").val(filters["blur"].value); + $(".section.customBackgroundFilter .brightness input").val( + filters["brightness"].value + ); + $(".section.customBackgroundFilter .saturate input").val( + filters["saturate"].value + ); + $(".section.customBackgroundFilter .opacity input").val( + filters["opacity"].value + ); +} + +$(".section.customBackgroundFilter .blur input").on("input", (e) => { + filters["blur"].value = $( + ".section.customBackgroundFilter .blur input" + ).val(); + updateNumbers(); + apply(); +}); + +$(".section.customBackgroundFilter .brightness input").on("input", (e) => { + filters["brightness"].value = $( + ".section.customBackgroundFilter .brightness input" + ).val(); + updateNumbers(); + apply(); +}); + +$(".section.customBackgroundFilter .saturate input").on("input", (e) => { + filters["saturate"].value = $( + ".section.customBackgroundFilter .saturate input" + ).val(); + updateNumbers(); + apply(); +}); + +$(".section.customBackgroundFilter .opacity input").on("input", (e) => { + filters["opacity"].value = $( + ".section.customBackgroundFilter .opacity input" + ).val(); + updateNumbers(); + apply(); +}); + +$(".section.customBackgroundFilter .save.button").click((e) => { + let arr = []; + Object.keys(filters).forEach((filterKey) => { + arr.push(filters[filterKey].value); + }); + UpdateConfig.setCustomBackgroundFilter(arr, false); + Notifications.add("Custom background filters saved", 1); +}); + +export function loadConfig(config) { + filters.blur.value = config[0]; + filters.brightness.value = config[1]; + filters.saturate.value = config[2]; + filters.opacity.value = config[3]; + updateNumbers(); + syncSliders(); +} + +function updateNumbers() { + $(".section.customBackgroundFilter .blur .value").html( + parseFloat(filters.blur.value).toFixed(1) + ); + $(".section.customBackgroundFilter .brightness .value").html( + parseFloat(filters.brightness.value).toFixed(1) + ); + $(".section.customBackgroundFilter .saturate .value").html( + parseFloat(filters.saturate.value).toFixed(1) + ); + $(".section.customBackgroundFilter .opacity .value").html( + parseFloat(filters.opacity.value).toFixed(1) + ); +} diff --git a/src/js/settings.js b/src/js/settings.js index 62597b727..41a142d83 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -755,20 +755,6 @@ $(".pageSettings .section.customBackgroundSize .inputAndButton .save").on( } ); -$(".pageSettings .section.customBackgroundSize .inputAndButton .cover").on( - "click", - (e) => { - UpdateConfig.setCustomBackgroundSize("cover"); - } -); - -$(".pageSettings .section.customBackgroundSize .inputAndButton .contain").on( - "click", - (e) => { - UpdateConfig.setCustomBackgroundSize("contain"); - } -); - $(".pageSettings .section.customBackgroundSize .inputAndButton input").keypress( (e) => { if (e.keyCode == 13) { diff --git a/src/js/theme-controller.js b/src/js/theme-controller.js index 5f739befc..3600323cf 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 === "") { @@ -166,9 +163,13 @@ export function applyCustomBackground() { } export function applyCustomBackgroundSize() { - if (Config.customBackgroundSize != "") { - $("body").css({ + if (Config.customBackgroundSize == "max"){ + $(".customBackground").css({ + backgroundSize: "100% 100%" , + }); + } else if (Config.customBackgroundSize != "") { + $(".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..a6dc4a452 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; @@ -113,6 +129,17 @@ body { 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 { overflow-y: scroll; } @@ -2741,6 +2768,34 @@ key { } } + &.customBackgroundFilter { + .groups { + grid-area: buttons; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + margin-top: 2rem; + .group { + display: grid; + grid-template-columns: 1fr auto 2fr; + gap: 1rem; + .title, + .value { + color: var(--text-color); + } + } + } + .saveContainer { + grid-column: -1/-3; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 1rem; + } + .fas { + margin-right: 0rem; + } + } + &.customTheme { grid-template-columns: 1fr 1fr 1fr 1fr; justify-items: stretch; @@ -2987,7 +3042,8 @@ key { &.keymapLayout, &.fontFamily, &.funbox, - &.keymapStyle { + &.keymapStyle, + &.customBackgroundFilter { grid-template-columns: 2fr 1fr; grid-template-areas: "title tabs" @@ -3542,6 +3598,15 @@ key { } } + .pageSettings .section.customBackgroundFilter { + .groups { + grid-template-columns: 1fr; + } + .saveContainer { + grid-column: -1/-2; + } + } + #commandLine, #commandLineInput { width: 500px !important; diff --git a/static/index.html b/static/index.html index 8914100f6..291030904 100644 --- a/static/index.html +++ b/static/index.html @@ -54,7 +54,7 @@ - +
@@ -2925,7 +2925,7 @@
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. + fully visible. Max fits the image corner to corner.
@@ -2961,6 +2961,48 @@ > contain
+
+ max +
+
+
+ +
+

custom background filter

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