Added custom background filters

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",

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);

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();
+}
+
+

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,
     });
   }
-}
+}

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;

static/index.html

@@ -54,7 +54,7 @@
     </script>
     <script async src="https://s.nitropay.com/ads-693.js"></script>
   </head>
-
+  <div class="customBackground"></div>
   <body>
     <div id="backgroundLoader" style="display: none"></div>
     <div id="notificationCenter">
@@ -2964,6 +2964,40 @@
                   </div>
                 </div>
               </div>
+              <div class="section customBackgroundFilter">
+                <h1>custom background filter</h1>
+                <div class="text">Apply various effects to the custom background.</div>
+                <div class="tabs">
+                  <div class="groups">
+                    <div class="group">
+                      <div class="title">blur</div>
+                      <div class="blurValue"></div>
+                      <input type="range" min="0" max="5" value="0" step="0.1" class="blur">
+                    </div>
+                    <div class="group">
+                      <div class="title">brightness</div>
+                      <div class="brightnessValue"></div>
+                      <input type="range" min="0" max="2" value="1" step="0.1" class="brightness">
+                    </div>
+                    <div class="group">
+                      <div class="title">saturate</div>
+                      <div class="saturateValue"></div>
+                      <input type="range" min="0" max="2" value="1" step="0.1" class="saturate">
+                    </div>
+                    <div class="group">
+                      <div class="title">contrast</div>
+                      <div class="contrastValue"></div>
+                      <input type="range" min="0" max="2" value="1" step="0.1" class="contrast">
+                    </div>
+                    <div class="group">
+                      <div class="title">opacity</div>
+                      <div class="opacityValue"></div>
+                      <input type="range" min="0" max="1" value="1" step="0.1" class="opacity">
+                    </div>
+                  </div>
+                  <div class="button"><i class="fas fa-save fa-fw"></i></div>
+                </div>
+              </div>
               <div class="section themes">
                 <h1>theme</h1>
                 <div class="tabs">