[feature] add preset theme controls

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "4.4.1",
+  "version": "4.5.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "4.4.1",
+  "version": "4.5.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/index.html

@@ -1303,6 +1303,37 @@
         </div>
 
         <div class="menu-content-area menu-content-area-theme is-hidden">
+          <div class="menu-item">
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Presets</h1>
+            </div>
+            <div class="menu-item-form">
+              <div class="button-wrap form-inline">
+                <button class="control-theme-preset-nighttab button mb-0" tabindex="-1">nightTab</button>
+              </div>
+              <div class="button-wrap form-inline">
+                <button class="control-theme-preset-nightingaleblue button mb-0" tabindex="-1">Nightingale Blue</button>
+              </div>
+              <div class="button-wrap form-inline">
+                <button class="control-theme-preset-bluegum button mb-0" tabindex="-1">Blue Gum</button>
+              </div>
+              <div class="button-wrap form-inline">
+                <button class="control-theme-preset-sharpmint button mb-0" tabindex="-1">Sharp Mint</button>
+              </div>
+              <div class="button-wrap form-inline">
+                <button class="control-theme-preset-snowblue button mb-0" tabindex="-1">Snow Blue</button>
+              </div>
+              <div class="button-wrap form-inline">
+                <button class="control-theme-preset-coralgreen button mb-0" tabindex="-1">Coral Green</button>
+              </div>
+              <div class="button-wrap form-inline">
+                <button class="control-theme-preset-purplegem button mb-0" tabindex="-1">Purple Gem</button>
+              </div>
+              <div class="button-wrap form-inline">
+                <button class="control-theme-preset-hotpepper button mb-0" tabindex="-1">Hot Pepper</button>
+              </div>
+            </div>
+          </div>
           <div class="menu-item">
             <div class="menu-item-header">
               <h1 class="menu-item-header-text">Style</h1>
@@ -1473,6 +1504,9 @@
                   <input id="control-theme-accent-current-hex" class="form-group-item-half control-theme-accent-current-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
                 </div>
               </div>
+              <div class="button-wrap">
+                <button class="control-theme-accent-current-default button mb-0" tabindex="-1">Default accent</button>
+              </div>
               <p class="control-theme-style-light-helper form-helper small">Accent Colour can also be changed from the Header Area.</p>
               <hr>
               <div class="input-wrap">

src/js/control.js

@@ -85,7 +85,7 @@ var control = (function() {
     path: "theme.accent.current",
     type: "color",
     func: function() {
-      theme.accent();
+      theme.render.accent.color();
       theme.render.accent.input.picker();
       theme.render.accent.input.hex();
       link.groupAndItems();
@@ -2531,39 +2531,106 @@ var control = (function() {
       link.groupAndItems();
     }
   }, {
-    element: helper.e(".control-theme-accent-current-picker"),
+    element: helper.e(".control-theme-preset-nighttab"),
-    path: "theme.accent.current",
+    type: "button",
-    type: "color",
     func: function() {
-      theme.accent();
+      theme.preset("nighttab");
-      theme.render.accent.input.quick();
+      theme.style.check();
-      theme.render.accent.input.hex();
+      theme.render.color.shade();
-      link.groupAndItems();
+      theme.render.accent.color();
+      theme.render.radius();
+      render.update();
     }
   }, {
-    element: helper.e(".control-theme-accent-current-hex"),
+    element: helper.e(".control-theme-preset-nightingaleblue"),
-    path: "theme.accent.current",
+    type: "button",
-    type: "text",
-    valueMod: ["hexTextString"],
     func: function() {
-      theme.accent();
+      theme.preset("nightingaleblue");
-      theme.render.accent.input.picker();
+      theme.style.check();
-      theme.render.accent.input.quick();
+      theme.render.color.shade();
-      link.groupAndItems();
+      theme.render.accent.color();
+      theme.render.radius();
+      render.update();
+    }
+  }, {
+    element: helper.e(".control-theme-preset-bluegum"),
+    type: "button",
+    func: function() {
+      theme.preset("bluegum");
+      theme.style.check();
+      theme.render.color.shade();
+      theme.render.accent.color();
+      theme.render.radius();
+      render.update();
+    }
+  }, {
+    element: helper.e(".control-theme-preset-sharpmint"),
+    type: "button",
+    func: function() {
+      theme.preset("sharpmint");
+      theme.style.check();
+      theme.render.color.shade();
+      theme.render.accent.color();
+      theme.render.radius();
+      render.update();
+    }
+  }, {
+    element: helper.e(".control-theme-preset-snowblue"),
+    type: "button",
+    func: function() {
+      theme.preset("snowblue");
+      theme.style.check();
+      theme.render.color.shade();
+      theme.render.accent.color();
+      theme.render.radius();
+      render.update();
+    }
+  }, {
+    element: helper.e(".control-theme-preset-coralgreen"),
+    type: "button",
+    func: function() {
+      theme.preset("coralgreen");
+      theme.style.check();
+      theme.render.color.shade();
+      theme.render.accent.color();
+      theme.render.radius();
+      render.update();
+    }
+  }, {
+    element: helper.e(".control-theme-preset-purplegem"),
+    type: "button",
+    func: function() {
+      theme.preset("purplegem");
+      theme.style.check();
+      theme.render.color.shade();
+      theme.render.accent.color();
+      theme.render.radius();
+      render.update();
+    }
+  }, {
+    element: helper.e(".control-theme-preset-hotpepper"),
+    type: "button",
+    func: function() {
+      theme.preset("hotpepper");
+      theme.style.check();
+      theme.render.color.shade();
+      theme.render.accent.color();
+      theme.render.radius();
+      render.update();
     }
   }, {
     element: helper.e(".control-theme-style-dark"),
     path: "theme.style",
     type: "radio",
     func: function() {
-      theme.render.theme();
+      theme.style.dark();
     }
   }, {
     element: helper.e(".control-theme-style-light"),
     path: "theme.style",
     type: "radio",
     func: function() {
-      theme.render.theme();
+      theme.style.light();
     }
   }, {
     element: helper.e(".control-theme-radius"),
@@ -2702,6 +2769,40 @@ var control = (function() {
       render.range.count(this);
       render.update();
     }
+  }, {
+    element: helper.e(".control-theme-accent-current-picker"),
+    path: "theme.accent.current",
+    type: "color",
+    func: function() {
+      theme.render.accent.color();
+      theme.render.accent.input.quick();
+      theme.render.accent.input.hex();
+      link.groupAndItems();
+    }
+  }, {
+    element: helper.e(".control-theme-accent-current-hex"),
+    path: "theme.accent.current",
+    type: "text",
+    valueMod: ["hexTextString"],
+    func: function() {
+      theme.render.accent.color();
+      theme.render.accent.input.picker();
+      theme.render.accent.input.quick();
+      link.groupAndItems();
+    }
+  }, {
+    element: helper.e(".control-theme-accent-current-default"),
+    type: "button",
+    func: function() {
+      mod.setValue("theme.accent.current", helper.getObject({
+        object: state.get.default(),
+        path: "theme.accent.current"
+      }));
+      theme.render.accent.color();
+      theme.render.accent.input.picker();
+      theme.render.accent.input.quick();
+      link.groupAndItems();
+    }
   }, {
     element: helper.e(".control-theme-accent-random-active"),
     path: "theme.accent.random.active",
@@ -2749,8 +2850,10 @@ var control = (function() {
     element: helper.e(".control-theme-accent-randomise"),
     type: "button",
     func: function() {
-      theme.render.accent.random();
+      theme.accent.random();
-      theme.render.accent.color();
+      theme.render.accent.input.quick();
+      theme.render.accent.input.picker();
+      theme.render.accent.input.hex();
       link.groupAndItems();
     }
   }, {

src/js/keyboard.js

@@ -86,7 +86,7 @@ var keyboard = (function() {
     window.addEventListener("keydown", function(event) {
       // ctrl+alt+d
       if (event.ctrlKey && event.altKey && event.keyCode == 68) {
-        theme.toggle();
+        theme.style.toggle();
         control.render.update();
         data.save();
       };
@@ -127,8 +127,10 @@ var keyboard = (function() {
     window.addEventListener("keydown", function(event) {
       // ctrl+alt+r
       if (state.get.current().theme.accent.random.active && event.ctrlKey && event.altKey && event.keyCode == 82) {
-        theme.render.accent.random();
+        theme.accent.random();
-        theme.render.accent.color();
+        theme.render.accent.input.quick();
+        theme.render.accent.input.picker();
+        theme.render.accent.input.hex();
         link.groupAndItems();
         data.save();
       };

src/js/state.js

@@ -344,6 +344,13 @@ var state = (function() {
       width: 80
     },
     theme: {
+      accent: {
+        current: {
+          r: 0,
+          g: 80,
+          b: 255
+        }
+      },
       color: {
         hsl: {
           h: 222,
@@ -360,12 +367,186 @@ var state = (function() {
     }
   };
 
+  mod.preset = {
+    nighttab: {
+      color: {
+        hsl: {
+          h: 222,
+          s: 14,
+          l: 56
+        },
+        rgb: {
+          r: 129,
+          g: 138,
+          b: 160
+        }
+      },
+      accent: {
+        r: 0,
+        g: 80,
+        b: 255
+      },
+      radius: 0.25,
+      style: "dark"
+    },
+    nightingaleblue: {
+      color: {
+        hsl: {
+          h: 220,
+          s: 60,
+          l: 50
+        },
+        rgb: {
+          r: 51,
+          g: 102,
+          b: 204
+        }
+      },
+      accent: {
+        r: 255,
+        g: 0,
+        b: 119
+      },
+      radius: 0.5,
+      style: "dark"
+    },
+    bluegum: {
+      color: {
+        hsl: {
+          h: 217,
+          s: 46,
+          l: 64
+        },
+        rgb: {
+          r: 120,
+          g: 153,
+          b: 205
+        }
+      },
+      accent: {
+        r: 255,
+        g: 251,
+        b: 0
+      },
+      radius: 0.2,
+      style: "dark"
+    },
+    sharpmint: {
+      color: {
+        hsl: {
+          h: 157,
+          s: 50,
+          l: 49
+        },
+        rgb: {
+          r: 63,
+          g: 191,
+          b: 143
+        }
+      },
+      accent: {
+        r: 255,
+        g: 10,
+        b: 178
+      },
+      radius: 0.8,
+      style: "dark"
+    },
+    snowblue: {
+      color: {
+        hsl: {
+          h: 197,
+          s: 14,
+          l: 61
+        },
+        rgb: {
+          r: 141,
+          g: 161,
+          b: 169
+        }
+      },
+      accent: {
+        r: 105,
+        g: 183,
+        b: 214
+      },
+      radius: 0,
+      style: "light"
+    },
+    coralgreen: {
+      color: {
+        hsl: {
+          h: 184,
+          s: 38,
+          l: 61
+        },
+        rgb: {
+          r: 119,
+          g: 188,
+          b: 194
+        }
+      },
+      accent: {
+        r: 255,
+        g: 161,
+        b: 161
+      },
+      radius: 2,
+      style: "dark"
+    },
+    purplegem: {
+      color: {
+        hsl: {
+          h: 300,
+          s: 30,
+          l: 51
+        },
+        rgb: {
+          r: 170,
+          g: 95,
+          b: 169
+        }
+      },
+      accent: {
+        r: 26,
+        g: 167,
+        b: 255
+      },
+      radius: 0.40,
+      style: "dark"
+    },
+    hotpepper: {
+      color: {
+        hsl: {
+          h: 0,
+          s: 69,
+          l: 66
+        },
+        rgb: {
+          r: 228,
+          g: 108,
+          b: 108
+        }
+      },
+      accent: {
+        r: 255,
+        g: 136,
+        b: 0
+      },
+      radius: 0.6,
+      style: "dark"
+    }
+  };
+
   mod.get = {
     current: function() {
       return mod.current;
     },
     default: function() {
       return JSON.parse(JSON.stringify(mod.default));
+    },
+    preset: function() {
+      return JSON.parse(JSON.stringify(mod.preset));
     }
   };
 
@@ -387,6 +568,9 @@ var state = (function() {
     },
     default: function() {
       return mod.get.default();
+    },
+    preset: function() {
+      return mod.get.preset();
     }
   };
 

src/js/theme.js

@@ -19,53 +19,7 @@ var theme = (function() {
     }
   };
 
-  mod.color = {
+  mod.accent = {
-    hsl: function() {
-      var hsl = helper.convertColor.rgb.hsl(state.get.current().theme.color.rgb);
-      helper.setObject({
-        object: state.get.current(),
-        path: "theme.color.hsl",
-        newValue: {
-          h: parseInt(hsl.h, 10),
-          s: parseInt(hsl.s, 10),
-          l: parseInt(hsl.l, 10)
-        }
-      });
-    },
-    rgb: function() {
-      var rgb = helper.convertColor.hsl.rgb(state.get.current().theme.color.hsl);
-      helper.setObject({
-        object: state.get.current(),
-        path: "theme.color.rgb",
-        newValue: {
-          r: parseInt(rgb.r, 10),
-          g: parseInt(rgb.g, 10),
-          b: parseInt(rgb.b, 10)
-        }
-      });
-    }
-  };
-
-  var render = {};
-
-  render.theme = function() {
-    var html = helper.e("html");
-    helper.removeClass(html, "is-theme-style-dark");
-    helper.removeClass(html, "is-theme-style-light");
-    helper.addClass(html, "is-theme-style-" + state.get.current().theme.style);
-  };
-
-  render.radius = function() {
-    var html = helper.e("html");
-    html.style.setProperty("--theme-radius", state.get.current().theme.radius + "rem");
-  };
-
-  render.accent = {
-    color: function() {
-      var html = helper.e("html");
-      var color = state.get.current().theme.accent.current;
-      html.style.setProperty("--theme-accent", color.r + ", " + color.g + ", " + color.b);
-    },
     random: function() {
       if (state.get.current().theme.accent.random.active) {
         var randomVal = function(min, max) {
@@ -119,10 +73,87 @@ var theme = (function() {
             b: parseInt(rgb.b, 10)
           }
         });
-        helper.e(".control-theme-accent-current-quick").value = hex;
-        helper.e(".control-theme-accent-current-picker").value = hex;
-        helper.e(".control-theme-accent-current-hex").value = hex;
       };
+    }
+  };
+
+  mod.color = {
+    hsl: function() {
+      var hsl = helper.convertColor.rgb.hsl(state.get.current().theme.color.rgb);
+      helper.setObject({
+        object: state.get.current(),
+        path: "theme.color.hsl",
+        newValue: {
+          h: parseInt(hsl.h, 10),
+          s: parseInt(hsl.s, 10),
+          l: parseInt(hsl.l, 10)
+        }
+      });
+    },
+    rgb: function() {
+      var rgb = helper.convertColor.hsl.rgb(state.get.current().theme.color.hsl);
+      helper.setObject({
+        object: state.get.current(),
+        path: "theme.color.rgb",
+        newValue: {
+          r: parseInt(rgb.r, 10),
+          g: parseInt(rgb.g, 10),
+          b: parseInt(rgb.b, 10)
+        }
+      });
+    }
+  };
+
+  mod.preset = {
+    set: function(name) {
+      helper.setObject({
+        object: state.get.current(),
+        path: "theme.accent.current",
+        newValue: state.get.preset()[name].accent
+      });
+      helper.setObject({
+        object: state.get.current(),
+        path: "theme.color",
+        newValue: state.get.preset()[name].color
+      });
+      helper.setObject({
+        object: state.get.current(),
+        path: "theme.style",
+        newValue: state.get.preset()[name].style
+      });
+      helper.setObject({
+        object: state.get.current(),
+        path: "theme.radius",
+        newValue: state.get.preset()[name].radius
+      });
+    }
+  };
+
+  var render = {};
+
+  render.style = {
+    dark: function() {
+      var html = helper.e("html");
+      helper.addClass(html, "is-theme-style-dark");
+      helper.removeClass(html, "is-theme-style-light");
+    },
+    light: function() {
+      var html = helper.e("html");
+      helper.removeClass(html, "is-theme-style-dark");
+      helper.addClass(html, "is-theme-style-light");
+    }
+  };
+
+  render.radius = function() {
+    var html = helper.e("html");
+    html.style.setProperty("--theme-radius", state.get.current().theme.radius + "rem");
+  };
+
+  render.accent = {
+    color: function() {
+      var html = helper.e("html");
+      var color = state.get.current().theme.accent.current;
+      html.style.setProperty("--theme-accent", color.r + ", " + color.g + ", " + color.b);
     },
     input: {
       quick: function() {
@@ -209,23 +240,47 @@ var theme = (function() {
     }
   };
 
-  var toggle = function() {
+  var accent = {
-    if (state.get.current().theme.style == "dark") {
+    random: function() {
-      mod.style.light();
+      mod.accent.random();
-    } else if (state.get.current().theme.style == "light") {
+      render.accent.color();
-      mod.style.dark();
+    }
-    };
-    render.theme();
   };
 
-  var accent = function() {
+  var style = {
-    theme.render.accent.color();
+    dark: function() {
+      mod.style.dark();
+      render.style.dark();
+    },
+    light: function() {
+      mod.style.light();
+      render.style.light();
+    },
+    check: function() {
+      if (state.get.current().theme.style == "dark") {
+        style.dark();
+      } else if (state.get.current().theme.style == "light") {
+        style.light();
+      };
+    },
+    toggle: function() {
+      if (state.get.current().theme.style == "dark") {
+        style.light();
+      } else if (state.get.current().theme.style == "light") {
+        style.dark();
+      };
+    }
+  }
+
+  var preset = function(name) {
+    mod.preset.set(name);
   };
 
   var init = function() {
-    render.theme();
+    style.check();
+    accent.random();
+    mod.accent.random();
     render.color.shade();
-    render.accent.random();
     render.accent.color();
     render.radius();
   };
@@ -235,8 +290,9 @@ var theme = (function() {
     init: init,
     mod: mod,
     render: render,
-    toggle: toggle,
+    style: style,
-    accent: accent
+    accent: accent,
+    preset: preset
   };
 
 })();

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "4.4.1";
+  var current = "4.5.0";
 
   var name = "Naughty Goose";
 

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": "4.4.1",
+  "version": "4.5.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"