[refactor] store link and background colour under rgb key in state data

This commit is contained in:
zombieFox 2020-01-16 15:20:51 +00:00
parent 0ef6cbc316
commit 30815c1729
10 changed files with 39 additions and 32 deletions

2
package-lock.json generated
View File

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

View File

@ -1,6 +1,6 @@
{
"name": "nighttab",
"version": "4.21.1",
"version": "4.22.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

@ -1330,8 +1330,8 @@
<div class="form-indent">
<div class="form-wrap">
<div class="form-group form-group-block">
<input id="control-link-item-color-by-picker" class="form-group-item-half control-link-item-color-by-picker" type="color" value="#000000" tabindex="1">
<input id="control-link-item-color-by-hex" class="form-group-item-half control-link-item-color-by-hex" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<input id="control-link-item-color-rgb-picker" class="form-group-item-half control-link-item-color-rgb-picker" type="color" value="#000000" tabindex="1">
<input id="control-link-item-color-rgb-hex" class="form-group-item-half control-link-item-color-rgb-hex" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
</div>
</div>
</div>
@ -1871,8 +1871,8 @@
<div class="form-indent">
<div class="form-wrap">
<div class="form-group form-group-block">
<input id="control-background-color-by-picker" class="form-group-item-half control-background-color-by-picker" type="color" value="#000000" tabindex="1">
<input id="control-background-color-by-hex" class="form-group-item-half control-background-color-by-hex" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<input id="control-background-color-picker" class="form-group-item-half control-background-color-picker" type="color" value="#000000" tabindex="1">
<input id="control-background-color-hex" class="form-group-item-half control-background-color-hex" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
</div>
</div>
</div>

View File

@ -71,7 +71,7 @@ var background = (function() {
render.color = {
custom: function() {
helper.e("html").style.setProperty("--background-color-custom", state.get.current().background.color.custom.r + ", " + state.get.current().background.color.custom.g + ", " + state.get.current().background.color.custom.b);
helper.e("html").style.setProperty("--background-color-custom", state.get.current().background.color.rgb.r + ", " + state.get.current().background.color.rgb.g + ", " + state.get.current().background.color.rgb.b);
},
clearHTML: function() {
helper.e("html").style.backgroundColor = "";
@ -127,10 +127,10 @@ var background = (function() {
helper.e(".control-background-image-file").value = "";
},
picker: function() {
helper.e(".control-background-color-by-picker").value = helper.convertColor.rgb.hex(state.get.current().background.color.custom);
helper.e(".control-background-color-picker").value = helper.convertColor.rgb.hex(state.get.current().background.color.rgb);
},
hex: function() {
helper.e(".control-background-color-by-hex").value = helper.convertColor.rgb.hex(state.get.current().background.color.custom);
helper.e(".control-background-color-hex").value = helper.convertColor.rgb.hex(state.get.current().background.color.rgb);
}
};

View File

@ -2530,16 +2530,16 @@ var control = (function() {
render.class();
}
}, {
element: helper.e(".control-link-item-color-by-picker"),
path: "link.item.color.custom",
element: helper.e(".control-link-item-color-rgb-picker"),
path: "link.item.color.rgb",
type: "color",
func: function() {
link.render.item.color.custom();
link.render.input.hex();
}
}, {
element: helper.e(".control-link-item-color-by-hex"),
path: "link.item.color.custom",
element: helper.e(".control-link-item-color-rgb-hex"),
path: "link.item.color.rgb",
type: "text",
valueMod: ["hexTextString"],
func: function() {
@ -3151,16 +3151,16 @@ var control = (function() {
render.class();
}
}, {
element: helper.e(".control-background-color-by-picker"),
path: "background.color.custom",
element: helper.e(".control-background-color-picker"),
path: "background.color.rgb",
type: "color",
func: function() {
background.render.color.custom();
background.render.input.hex();
}
}, {
element: helper.e(".control-background-color-by-hex"),
path: "background.color.custom",
element: helper.e(".control-background-color-hex"),
path: "background.color.rgb",
type: "text",
valueMod: ["hexTextString"],
func: function() {
@ -4173,8 +4173,8 @@ var control = (function() {
_disable.element(".control-link-item-color-by-theme-helper", true);
_disable.input(".control-link-item-color-by-custom", true);
_disable.element(".control-link-item-color-by-custom-helper", true);
_disable.input(".control-link-item-color-by-picker", true);
_disable.input(".control-link-item-color-by-hex", true);
_disable.input(".control-link-item-color-rgb-picker", true);
_disable.input(".control-link-item-color-rgb-hex", true);
_disable.element("[for=control-link-item-border]", true);
_disable.input(".control-link-item-border", true);
_disable.element(".control-link-item-border-count", true);
@ -4295,8 +4295,8 @@ var control = (function() {
_disable.input(".control-link-item-display-gutter-default", false);
};
if (state.get.current().link.item.color.by == "custom") {
_disable.input(".control-link-item-color-by-picker", false);
_disable.input(".control-link-item-color-by-hex", false);
_disable.input(".control-link-item-color-rgb-picker", false);
_disable.input(".control-link-item-color-rgb-hex", false);
};
};
};
@ -4387,11 +4387,11 @@ var control = (function() {
_disable.element(".control-background-image-url-helper", true);
};
if (state.get.current().background.color.by == "theme") {
_disable.input(".control-background-color-by-picker", true);
_disable.input(".control-background-color-by-hex", true);
_disable.input(".control-background-color-picker", true);
_disable.input(".control-background-color-hex", true);
} else if (state.get.current().background.color.by == "custom") {
_disable.input(".control-background-color-by-picker", false);
_disable.input(".control-background-color-by-hex", false);
_disable.input(".control-background-color-picker", false);
_disable.input(".control-background-color-hex", false);
};
};
_header();

View File

@ -547,7 +547,7 @@ var link = (function() {
render.item = {
color: {
custom: function() {
helper.e("html").style.setProperty("--link-item-color-custom", state.get.current().link.item.color.custom.r + ", " + state.get.current().link.item.color.custom.g + ", " + state.get.current().link.item.color.custom.b);
helper.e("html").style.setProperty("--link-item-color-custom", state.get.current().link.item.color.rgb.r + ", " + state.get.current().link.item.color.rgb.g + ", " + state.get.current().link.item.color.rgb.b);
}
},
link: function() {
@ -1714,10 +1714,10 @@ var link = (function() {
render.input = {
picker: function() {
helper.e(".control-link-item-color-by-picker").value = helper.convertColor.rgb.hex(state.get.current().link.item.color.custom);
helper.e(".control-link-item-color-rgb-picker").value = helper.convertColor.rgb.hex(state.get.current().link.item.color.rgb);
},
hex: function() {
helper.e(".control-link-item-color-by-hex").value = helper.convertColor.rgb.hex(state.get.current().link.item.color.custom);
helper.e(".control-link-item-color-rgb-hex").value = helper.convertColor.rgb.hex(state.get.current().link.item.color.rgb);
}
};

View File

@ -144,7 +144,7 @@ var state = (function() {
item: {
color: {
by: "theme",
custom: {
rgb: {
r: 0,
g: 0,
b: 0
@ -273,7 +273,7 @@ var state = (function() {
background: {
color: {
by: "theme",
custom: {
rgb: {
r: 0,
g: 0,
b: 0

View File

@ -783,6 +783,13 @@ var update = (function() {
});
});
return data;
},
"4.22.0": function(data) {
data.state.link.item.color.rgb = data.state.link.item.color.custom;
delete data.state.link.item.color.custom;
data.state.background.color.rgb = data.state.background.color.custom;
delete data.state.background.color.custom;
return data;
}
};

View File

@ -1,6 +1,6 @@
var version = (function() {
var current = "4.21.1";
var current = "4.22.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.21.1",
"version": "4.22.0",
"manifest_version": 2,
"chrome_url_overrides": {
"newtab": "index.html"