[feature] add background image vignette controls

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
   "main": "index.js",
   "scripts": {

src/css/background.css

@@ -33,10 +33,24 @@
 .background-accent {
   background-color: rgba(var(--theme-accent), var(--background-accent));
   position: absolute;
-  top: 0;
+  top: -1em;
-  left: 0;
+  left: -1em;
-  width: 100%;
+  width: calc(100% + 2em);
-  height: 100%;
+  height: calc(100% + 2em);
   pointer-events: none;
   display: block;
 }
+
+.background-vignette {
+  position: absolute;
+  top: -1em;
+  left: -1em;
+  width: calc(100% + 2em);
+  height: calc(100% + 2em);
+  pointer-events: none;
+  background-image: radial-gradient(
+    circle,
+    transparent var(--background-vignette-end),
+    rgba(0, 0, 0, var(--background-vignette-opacity)) var(--background-vignette-start)
+  );
+}

src/css/variables.css

@@ -155,6 +155,9 @@
   --background-scale:                                   1;
   --background-accent:                                  0;
   --background-blur:                                    0;
+  --background-vignette-opacity:                        0%;
+  --background-vignette-start:                          90%;
+  --background-vignette-end:                            70%;
   /* form */
   --form-label:                                         var(--theme-color-16);
   --form-label-hover:                                   var(--theme-color-20);

src/html/background.html

@@ -1,4 +1,5 @@
 <div class="background">
   <div class="background-image"></div>
   <div class="background-accent"></div>
+  <div class="background-vignette"></div>
 </div>

src/html/menu/content/background/image.html

@@ -66,6 +66,7 @@
             <button class="control-background-image-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
           </div>
         </div>
+        <hr>
         <div class="form-wrap">
           <label for="control-background-image-grayscale-range">Greyscale</label>
           <div class="form-group form-group-block">
@@ -74,6 +75,7 @@
             <button class="control-background-image-grayscale-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
           </div>
         </div>
+        <hr>
         <div class="form-wrap">
           <label for="control-background-image-blur-range">Blur</label>
           <div class="form-group form-group-block">
@@ -82,6 +84,7 @@
             <button class="control-background-image-blur-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
           </div>
         </div>
+        <hr>
         <div class="form-wrap">
           <label for="control-background-image-accent-range">Accent overlay</label>
           <div class="form-group form-group-block">
@@ -90,6 +93,7 @@
             <button class="control-background-image-accent-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
           </div>
         </div>
+        <hr>
         <div class="form-wrap">
           <label for="control-background-image-scale-range">Size</label>
           <div class="form-group form-group-block">
@@ -98,6 +102,35 @@
             <button class="control-background-image-scale-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
           </div>
         </div>
+        <hr>
+        <div class="form-wrap">
+          <label for="control-background-image-vignette-opacity-range">Vignette</label>
+          <div class="form-group form-group-block">
+            <input id="control-background-image-vignette-opacity-range" class="control-background-image-vignette-opacity-range mr-3" type="range" value="0" tabindex="-1">
+            <input class="control-background-image-vignette-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+            <button class="control-background-image-vignette-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
+          </div>
+        </div>
+        <div class="form-wrap">
+          <div class="form-indent">
+            <div class="form-wrap">
+              <label for="control-background-image-vignette-start-range">Start</label>
+              <div class="form-group form-group-block">
+                <input id="control-background-image-vignette-start-range" class="control-background-image-vignette-start-range mr-3" type="range" value="0" tabindex="-1">
+                <input class="control-background-image-vignette-start-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+                <button class="control-background-image-vignette-start-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
+              </div>
+            </div>
+            <div class="form-wrap">
+              <label for="control-background-image-vignette-end-range">End</label>
+              <div class="form-group form-group-block">
+                <input id="control-background-image-vignette-end-range" class="control-background-image-vignette-end-range mr-3" type="range" value="0" tabindex="-1">
+                <input class="control-background-image-vignette-end-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+                <button class="control-background-image-vignette-end-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>

src/js/background.js

@@ -122,6 +122,21 @@ var background = (function() {
     html.style.setProperty("--background-accent", state.get.current().background.image.accent);
   };
 
+  render.vignette = {
+    opacity: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--background-vignette-opacity", state.get.current().background.image.vignette.opacity + "%");
+    },
+    start: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--background-vignette-start", state.get.current().background.image.vignette.start + "%");
+    },
+    end: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--background-vignette-end", state.get.current().background.image.vignette.end + "%");
+    }
+  };
+
   render.input = {
     clear: function() {
       helper.e(".control-background-image-file").value = "";
@@ -231,6 +246,9 @@ var background = (function() {
     render.opacity();
     render.scale();
     render.accent();
+    render.vignette.opacity();
+    render.vignette.start();
+    render.vignette.end();
     render.feedback.init();
   };
 

src/js/control.js

@@ -6801,7 +6801,6 @@ var control = (function() {
           func: function() {
             mod.default("background.image.opacity");
             background.render.opacity();
-            render.update.control.header();
             render.update.control.menu();
           }
         }, {
@@ -6846,7 +6845,6 @@ var control = (function() {
           func: function() {
             mod.default("background.image.grayscale");
             background.render.grayscale();
-            render.update.control.header();
             render.update.control.menu();
           }
         }, {
@@ -6887,7 +6885,6 @@ var control = (function() {
           func: function() {
             mod.default("background.image.blur");
             background.render.blur();
-            render.update.control.header();
             render.update.control.menu();
           }
         }, {
@@ -6932,7 +6929,6 @@ var control = (function() {
           func: function() {
             mod.default("background.image.accent");
             background.render.accent();
-            render.update.control.header();
             render.update.control.menu();
           }
         }, {
@@ -6977,7 +6973,166 @@ var control = (function() {
           func: function() {
             mod.default("background.image.scale");
             background.render.scale();
-            render.update.control.header();
+            render.update.control.menu();
+          }
+        }, {
+          element: ".control-background-image-vignette-opacity-range",
+          path: "background.image.vignette.opacity",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-background-image-vignette-opacity-number",
+            path: "background.image.vignette.opacity",
+            type: "number"
+          }],
+          func: function() {
+            background.render.vignette.opacity();
+            background.render.vignette.start();
+            background.render.vignette.end();
+          }
+        }, {
+          element: ".control-background-image-vignette-opacity-number",
+          path: "background.image.vignette.opacity",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-background-image-vignette-opacity-range",
+            path: "background.image.vignette.opacity",
+            type: "range"
+          }],
+          func: function() {
+            background.render.vignette.opacity();
+            background.render.vignette.start();
+            background.render.vignette.end();
+          }
+        }, {
+          element: ".control-background-image-vignette-opacity-default",
+          type: "button",
+          func: function() {
+            mod.default("background.image.vignette.opacity");
+            background.render.vignette.opacity();
+            background.render.vignette.start();
+            background.render.vignette.end();
+            render.update.control.menu();
+          }
+        }, {
+          element: ".control-background-image-vignette-start-range",
+          path: "background.image.vignette.start",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-background-image-vignette-start-number",
+            path: "background.image.vignette.start",
+            type: "number"
+          }],
+          limitElement: [{
+            element: ".control-background-image-vignette-end-range",
+            path: "background.image.vignette.end",
+            type: "range",
+            limit: "max"
+          }, {
+            element: ".control-background-image-vignette-end-number",
+            path: "background.image.vignette.end",
+            type: "number",
+            limit: "max"
+          }],
+          func: function() {
+            background.render.vignette.opacity();
+            background.render.vignette.start();
+            background.render.vignette.end();
+          }
+        }, {
+          element: ".control-background-image-vignette-start-number",
+          path: "background.image.vignette.start",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-background-image-vignette-start-range",
+            path: "background.image.vignette.start",
+            type: "range"
+          }],
+          func: function() {
+            background.render.vignette.opacity();
+            background.render.vignette.start();
+            background.render.vignette.end();
+          }
+        }, {
+          element: ".control-background-image-vignette-start-default",
+          type: "button",
+          func: function() {
+            mod.default("background.image.vignette.start");
+            background.render.vignette.opacity();
+            background.render.vignette.start();
+            background.render.vignette.end();
+            render.update.control.menu();
+          }
+        }, {
+          element: ".control-background-image-vignette-end-range",
+          path: "background.image.vignette.end",
+          type: "range",
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-background-image-vignette-end-number",
+            path: "background.image.vignette.end",
+            type: "number"
+          }],
+          limitElement: [{
+            element: ".control-background-image-vignette-start-range",
+            path: "background.image.vignette.start",
+            type: "range",
+            limit: "min"
+          }, {
+            element: ".control-background-image-vignette-start-number",
+            path: "background.image.vignette.start",
+            type: "number",
+            limit: "min"
+          }],
+          func: function() {
+            background.render.vignette.opacity();
+            background.render.vignette.start();
+            background.render.vignette.end();
+          }
+        }, {
+          element: ".control-background-image-vignette-end-number",
+          path: "background.image.vignette.end",
+          type: "number",
+          valueModify: {
+            min: 0,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-background-image-vignette-end-range",
+            path: "background.image.vignette.end",
+            type: "range"
+          }],
+          func: function() {
+            background.render.vignette.opacity();
+            background.render.vignette.start();
+            background.render.vignette.end();
+          }
+        }, {
+          element: ".control-background-image-vignette-end-default",
+          type: "button",
+          func: function() {
+            mod.default("background.image.vignette.end");
+            background.render.vignette.opacity();
+            background.render.vignette.start();
+            background.render.vignette.end();
             render.update.control.menu();
           }
         }]
@@ -7141,6 +7296,32 @@ var control = (function() {
       color: "change",
       file: "change"
     },
+    limit: function(sourceObject, targetObject) {
+      var sourceValue = helper.getObject({
+        object: state.get.current(),
+        path: sourceObject.path
+      });
+      var targetValue = helper.getObject({
+        object: state.get.current(),
+        path: targetObject.path
+      });
+      var _set = function() {
+        helper.setObject({
+          object: state.get.current(),
+          path: targetObject.path,
+          newValue: helper.getObject({
+            object: state.get.current(),
+            path: sourceObject.path
+          })
+        });
+      };
+      if (targetObject.limit == "max" && targetValue >= sourceValue) {
+        _set();
+      } else if (targetObject.limit == "min" && targetValue <= sourceValue) {
+        _set();
+      };
+      render.update.control.menu(targetObject);
+    },
     action: function(object) {
       if (object.element) {
         helper.e(object.element).addEventListener(bind.control.eventType[object.type], function(event) {
@@ -7168,6 +7349,13 @@ var control = (function() {
           }, false);
         });
       };
+      if (object.limitElement) {
+        object.limitElement.forEach(function(arrayItem, index) {
+          helper.e(object.element).addEventListener(bind.control.eventType[object.type], function(event) {
+            bind.control.limit(object, arrayItem);
+          }, false);
+        });
+      };
       if (object.valueModify) {
         object.mirrorElement.forEach(function(arrayItem, index) {
           helper.e(object.element).addEventListener(bind.control.eventType[object.type], function(event) {

src/js/state.js

@@ -340,7 +340,12 @@ var state = (function() {
         scale: 1,
         opacity: 1,
         grayscale: 0,
-        accent: 0
+        accent: 0,
+        vignette: {
+          opacity: 0,
+          start: 90,
+          end: 70
+        }
       }
     },
     edit: false,
@@ -507,7 +512,12 @@ var state = (function() {
         scale: 1,
         opacity: 1,
         grayscale: 0,
-        accent: 0
+        accent: 0,
+        vignette: {
+          opacity: 0,
+          start: 90,
+          end: 70
+        }
       }
     }
   };

src/js/update.js

@@ -958,6 +958,14 @@ var update = (function() {
         delete arrayItem.accent.b;
       });
       return data;
+    },
+    "5.4.0": function(data) {
+      data.state.background.image.vignette = {
+        opacity: 0,
+        start: 90,
+        end: 70
+      };
+      return data;
     }
   };
 

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "5.3.0";
+  var current = "5.4.0";
 
   var name = "Zonked Tarsier";
 

src/manifest.json

@@ -2,7 +2,7 @@
   "name": "nightTab",
   "short_name": "nightTab",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"