[feature] add preset theme controls

This commit is contained in:
zombieFox 2019-12-24 01:24:43 +00:00
parent aa30ccefd4
commit e439e13651
9 changed files with 469 additions and 90 deletions

2
package-lock.json generated
View File

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

View File

@ -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": {

View File

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

View File

@ -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"),
path: "theme.accent.current",
type: "color",
element: helper.e(".control-theme-preset-nighttab"),
type: "button",
func: function() {
theme.accent();
theme.render.accent.input.quick();
theme.render.accent.input.hex();
link.groupAndItems();
theme.preset("nighttab");
theme.style.check();
theme.render.color.shade();
theme.render.accent.color();
theme.render.radius();
render.update();
}
}, {
element: helper.e(".control-theme-accent-current-hex"),
path: "theme.accent.current",
type: "text",
valueMod: ["hexTextString"],
element: helper.e(".control-theme-preset-nightingaleblue"),
type: "button",
func: function() {
theme.accent();
theme.render.accent.input.picker();
theme.render.accent.input.quick();
link.groupAndItems();
theme.preset("nightingaleblue");
theme.style.check();
theme.render.color.shade();
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.render.accent.color();
theme.accent.random();
theme.render.accent.input.quick();
theme.render.accent.input.picker();
theme.render.accent.input.hex();
link.groupAndItems();
}
}, {

View File

@ -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.render.accent.color();
theme.accent.random();
theme.render.accent.input.quick();
theme.render.accent.input.picker();
theme.render.accent.input.hex();
link.groupAndItems();
data.save();
};

View File

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

View File

@ -19,53 +19,7 @@ var theme = (function() {
}
};
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)
}
});
}
};
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);
},
mod.accent = {
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() {
if (state.get.current().theme.style == "dark") {
mod.style.light();
} else if (state.get.current().theme.style == "light") {
mod.style.dark();
};
render.theme();
var accent = {
random: function() {
mod.accent.random();
render.accent.color();
}
};
var accent = function() {
theme.render.accent.color();
var style = {
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,
accent: accent
style: style,
accent: accent,
preset: preset
};
})();

View File

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

View File

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