Merge pull request #1186 from Smithster/master

Custom background image filter

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

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

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

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

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;

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">
@@ -2925,7 +2925,7 @@
                 <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.
+                  fully visible. Max fits the image corner to corner.
                 </div>
                 <div>
                   <div class="inputAndButton">
@@ -2961,6 +2961,48 @@
                     >
                       contain
                     </div>
+                    <div
+                      class="button"
+                      customBackGroundSize="max"
+                      tabindex="0"
+                      onclick="this.blur();"
+                    >
+                      max
+                    </div>
+                  </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="groups">
+                  <div class="group blur">
+                    <div class="title">blur</div>
+                    <div class="value"></div>
+                    <input type="range" min="0" max="5" value="0" step="0.1" />
+                  </div>
+                  <div class="group brightness">
+                    <div class="title">brightness</div>
+                    <div class="value"></div>
+                    <input type="range" min="0" max="2" value="1" step="0.1" />
+                  </div>
+                  <div class="group saturate">
+                    <div class="title">saturate</div>
+                    <div class="value"></div>
+                    <input type="range" min="0" max="2" value="1" step="0.1" />
+                  </div>
+                  <div class="group opacity">
+                    <div class="title">opacity</div>
+                    <div class="value"></div>
+                    <input type="range" min="0" max="1" value="1" step="0.1" />
+                  </div>
+                  <div class="saveContainer">
+                    <div class="save button" style="grid-column: 3">
+                      <!-- <i class="fas fa-save fa-fw"></i> -->
+                      save
+                    </div>
                   </div>
                 </div>
               </div>