diff --git a/package-lock.json b/package-lock.json index 5b34ec3d..0a812f89 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "nighttab", - "version": "4.22.0", + "version": "4.23.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 2f1b2536..7492307b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nighttab", - "version": "4.22.0", + "version": "4.23.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": { diff --git a/src/css/header.css b/src/css/header.css index 874705bb..99ff8999 100755 --- a/src/css/header.css +++ b/src/css/header.css @@ -6,7 +6,7 @@ pointer-events: none; } -.is-header-shade-show .header { +.is-header-color-show .header { pointer-events: all; } @@ -40,7 +40,7 @@ bottom: 0; } -.header-shade { +.header-color { background-color: transparent; content: ""; width: 100%; @@ -53,18 +53,24 @@ transition: background-color var(--layout-timing-medium), opacity var(--layout-timing-medium), border-radius var(--layout-timing-extra-fast); } -.is-header-radius .header-shade { +.is-header-radius .header-color { border-radius: calc(var(--theme-radius) * 4); } -.is-background-color-by-theme.is-header-shade-style-always .header-shade, -.is-background-color-by-theme.is-header-shade-style-scroll .header-shade { - background-color: rgba(var(--header-shade-color), var(--header-shade-opacity)); +.is-header-color-by-theme.is-header-color-style-always .header-color { + background-color: rgba(var(--header-color-theme), var(--header-opacity)); } -.is-background-color-by-custom.is-header-shade-style-always .header-shade, -.is-background-color-by-custom.is-header-shade-style-scroll .header-shade { - background-color: rgba(var(--background-color-custom), var(--header-shade-opacity)); +.is-header-color-by-theme.is-header-color-style-scroll.is-header-color-style-scrolling .header-color { + background-color: rgba(var(--header-color-theme), var(--header-opacity)); +} + +.is-header-color-by-custom.is-header-color-style-always .header-color { + background-color: rgba(var(--header-color-custom), var(--header-opacity)); +} + +.is-header-color-by-custom.is-header-color-style-scroll.is-header-color-style-scrolling .header-color { + background-color: rgba(var(--header-color-custom), var(--header-opacity)); } .header-area { @@ -100,7 +106,7 @@ border-bottom: calc(var(--layout-line-width) * var(--header-border-bottom)) solid rgb(var(--theme-accent)); } -.is-header-radius .header-shade { +.is-header-radius .header-color { border-radius: calc(var(--theme-radius) * 4); } diff --git a/src/css/link.css b/src/css/link.css index a2fe09db..af6c36cc 100755 --- a/src/css/link.css +++ b/src/css/link.css @@ -30,12 +30,12 @@ } .is-layout-order-headerlink.is-header-border-bottom .link, -.is-layout-order-headerlink.is-header-shade-style-always .link { +.is-layout-order-headerlink.is-header-color-style-always .link { margin-top: 0; } .is-layout-order-linkheader.is-header-border-top .link, -.is-layout-order-linkheader.is-header-shade-style-always .link { +.is-layout-order-linkheader.is-header-color-style-always .link { margin-bottom: 0; } diff --git a/src/css/variables.css b/src/css/variables.css index 1f05f580..d38dabb9 100644 --- a/src/css/variables.css +++ b/src/css/variables.css @@ -74,8 +74,9 @@ --theme-shade-opacity: 0.4; /* header */ --header-area-width: 100%; - --header-shade-color: var(--theme-color-01); - --header-shade-opacity: 0.95; + --header-color-theme: var(--theme-color-01); + --header-color-custom: rgb(0, 0, 0); + --header-opacity: 0.95; --header-search-width: 0%; --header-border-top: 0; --header-border-bottom: 0; diff --git a/src/index.html b/src/index.html index 2e3c8959..60260438 100644 --- a/src/index.html +++ b/src/index.html @@ -50,7 +50,7 @@
-
+
@@ -925,36 +925,61 @@
-

Shade

+

Background colour

- - + +
- - + +
-

Useful for when a Background Image is shown.

+

Useful for when a Background Image is shown.

- - + +
-

The page will not scroll if Bookmarks are not shown.

+

The page will not scroll if Bookmarks are not shown.

- + + +
+
+

Use the Background colour defined by the Theme.

+
+
+ + +
+
+

Use a custom Background colour.

+
+
+
+
+
+ + +
+
+
+
+
+
+
- -
- + +
+
@@ -1871,8 +1896,8 @@
- - + +
diff --git a/src/js/background.js b/src/js/background.js index 84e81c2a..3c78b70f 100644 --- a/src/js/background.js +++ b/src/js/background.js @@ -127,10 +127,10 @@ var background = (function() { helper.e(".control-background-image-file").value = ""; }, picker: function() { - helper.e(".control-background-color-picker").value = helper.convertColor.rgb.hex(state.get.current().background.color.rgb); + helper.e(".control-background-color-rgb-picker").value = helper.convertColor.rgb.hex(state.get.current().background.color.rgb); }, hex: function() { - helper.e(".control-background-color-hex").value = helper.convertColor.rgb.hex(state.get.current().background.color.rgb); + helper.e(".control-background-color-rgb-hex").value = helper.convertColor.rgb.hex(state.get.current().background.color.rgb); } }; diff --git a/src/js/control.js b/src/js/control.js index 62be2fc6..ccecfedf 100644 --- a/src/js/control.js +++ b/src/js/control.js @@ -298,7 +298,7 @@ var control = (function() { func: function() { render.class(); layout.render.order(); - header.render.shade(); + header.render.color.scrolling(); } }, { element: helper.e(".control-layout-order-linkheader"), @@ -307,7 +307,7 @@ var control = (function() { func: function() { render.class(); layout.render.order(); - header.render.shade(); + header.render.color.scrolling(); } }, { element: helper.e(".control-layout-padding"), @@ -458,7 +458,7 @@ var control = (function() { type: "checkbox", func: function() { render.class(); - header.render.shade(); + header.render.color.scrolling(); } }, { element: helper.e(".control-header-area-width"), @@ -1762,47 +1762,80 @@ var control = (function() { render.update(); } }, { - element: helper.e(".control-header-shade-show"), - path: "header.shade.show", + element: helper.e(".control-header-color-show"), + path: "header.color.show", type: "checkbox", func: function() { render.class(); render.dependents(); - header.render.shade(); + header.render.color.scrolling(); } }, { - element: helper.e(".control-header-shade-style-always"), - path: "header.shade.style", + element: helper.e(".control-header-color-style-always"), + path: "header.color.style", type: "radio", func: function() { render.class(); - header.render.shade(); + header.render.color.scrolling(); } }, { - element: helper.e(".control-header-shade-style-scroll"), - path: "header.shade.style", + element: helper.e(".control-header-color-style-scroll"), + path: "header.color.style", type: "radio", func: function() { render.class(); - header.render.shade(); + header.render.color.scrolling(); } }, { - element: helper.e(".control-header-shade-opacity"), - path: "header.shade.opacity", + element: helper.e(".control-header-color-by-theme"), + path: "header.color.by", + type: "radio", + func: function() { + render.class(); + render.dependents(); + } + }, { + element: helper.e(".control-header-color-by-custom"), + path: "header.color.by", + type: "radio", + func: function() { + render.class(); + render.dependents(); + } + }, { + element: helper.e(".control-header-color-rgb-picker"), + path: "header.color.rgb", + type: "color", + func: function() { + header.render.color.custom(); + header.render.input.hex(); + } + }, { + element: helper.e(".control-header-color-rgb-hex"), + path: "header.color.rgb", + type: "text", + valueMod: ["hexTextString"], + func: function() { + header.render.color.custom(); + header.render.input.picker(); + } + }, { + element: helper.e(".control-header-color-opacity"), + path: "header.color.opacity", type: "range", valueMod: ["float"], - rangeCountElement: helper.e(".control-header-shade-opacity-count"), + rangeCountElement: helper.e(".control-header-color-opacity-count"), func: function() { header.render.opacity(); render.range.count(this); } }, { - element: helper.e(".control-header-shade-opacity-default"), + element: helper.e(".control-header-color-opacity-default"), type: "button", func: function() { - mod.setValue("header.shade.opacity", helper.getObject({ + mod.setValue("header.color.opacity", helper.getObject({ object: state.get.default(), - path: "header.shade.opacity" + path: "header.color.opacity" })); header.render.opacity(); render.update(); @@ -3151,7 +3184,7 @@ var control = (function() { render.class(); } }, { - element: helper.e(".control-background-color-picker"), + element: helper.e(".control-background-color-rgb-picker"), path: "background.color.rgb", type: "color", func: function() { @@ -3159,7 +3192,7 @@ var control = (function() { background.render.input.hex(); } }, { - element: helper.e(".control-background-color-hex"), + element: helper.e(".control-background-color-rgb-hex"), path: "background.color.rgb", type: "text", valueMod: ["hexTextString"], @@ -3544,15 +3577,22 @@ var control = (function() { helper.removeClass(html, "is-header-transitional-show"); }; }; - var _shade = function() { - helper.removeClass(html, "is-header-shade-show"); - if (state.get.current().header.shade.show) { - helper.addClass(html, "is-header-shade-show"); + var _color = function() { + helper.removeClass(html, "is-header-color-show"); + helper.removeClass(html, "is-header-color-style-scroll"); + helper.removeClass(html, "is-header-color-style-always"); + helper.removeClass(html, "is-header-color-by-theme"); + helper.removeClass(html, "is-header-color-by-custom"); + if (state.get.current().header.color.show) { + helper.addClass(html, "is-header-color-show"); + helper.addClass(html, "is-header-color-style-" + state.get.current().header.color.style); + helper.addClass(html, "is-header-color-by-" + state.get.current().header.color.by); }; - if (state.get.current().header.radius) { + }; + var _radius = function() { + helper.removeClass(html, "is-header-radius"); + if (state.get.current().header.radius > 0) { helper.addClass(html, "is-header-radius"); - } else { - helper.removeClass(html, "is-header-radius"); }; }; var _border = function() { @@ -3576,7 +3616,8 @@ var control = (function() { _date(); _search(); _button(); - _shade(); + _color(); + _radius(); _border(); _greeting(); _position(); @@ -3908,29 +3949,48 @@ var control = (function() { }; }; var _shade = function() { - if (state.get.current().header.shade.show) { - _disable.input(".control-header-shade-style-always", false); - _disable.element(".control-header-shade-style-always-helper", false); - _disable.input(".control-header-shade-style-scroll", false); - _disable.element(".control-header-shade-style-scroll-helper", false); - _disable.element("[for=control-header-shade-opacity]", false); - _disable.input(".control-header-shade-opacity", false); - _disable.element(".control-header-shade-opacity-count", false); - _disable.input(".control-header-shade-opacity-default", false); + if (state.get.current().header.color.show) { + _disable.input(".control-header-color-style-always", false); + _disable.element(".control-header-color-style-always-helper", false); + _disable.input(".control-header-color-style-scroll", false); + _disable.element(".control-header-color-style-scroll-helper", false); + _disable.input(".control-header-color-by-theme", false); + _disable.element(".control-header-color-by-theme-helper", false); + _disable.input(".control-header-color-by-custom", false); + _disable.element(".control-header-color-by-custom-helper", false); + _disable.input(".control-header-color-rgb-picker", false); + _disable.input(".control-header-color-rgb-hex", false); + _disable.element("[for=control-header-color-opacity]", false); + _disable.input(".control-header-color-opacity", false); + _disable.element(".control-header-color-opacity-count", false); + _disable.input(".control-header-color-opacity-default", false); _disable.input(".control-header-radius", false); _disable.element(".control-header-radius-helper", false); } else { - _disable.input(".control-header-shade-style-always", true); - _disable.element(".control-header-shade-style-always-helper", true); - _disable.input(".control-header-shade-style-scroll", true); - _disable.element(".control-header-shade-style-scroll-helper", true); - _disable.element("[for=control-header-shade-opacity]", true); - _disable.input(".control-header-shade-opacity", true); - _disable.element(".control-header-shade-opacity-count", true); - _disable.input(".control-header-shade-opacity-default", true); + _disable.input(".control-header-color-style-always", true); + _disable.element(".control-header-color-style-always-helper", true); + _disable.input(".control-header-color-style-scroll", true); + _disable.element(".control-header-color-style-scroll-helper", true); + _disable.input(".control-header-color-by-theme", true); + _disable.element(".control-header-color-by-theme-helper", true); + _disable.input(".control-header-color-by-custom", true); + _disable.element(".control-header-color-by-custom-helper", true); + _disable.input(".control-header-color-rgb-picker", true); + _disable.input(".control-header-color-rgb-hex", true); + _disable.element("[for=control-header-color-opacity]", true); + _disable.input(".control-header-color-opacity", true); + _disable.element(".control-header-color-opacity-count", true); + _disable.input(".control-header-color-opacity-default", true); _disable.input(".control-header-radius", true); _disable.element(".control-header-radius-helper", true); }; + if (state.get.current().header.color.by == "theme") { + _disable.input(".control-header-color-rgb-picker", true); + _disable.input(".control-header-color-rgb-hex", true); + } else if (state.get.current().header.color.by == "custom") { + _disable.input(".control-header-color-rgb-picker", false); + _disable.input(".control-header-color-rgb-hex", false); + }; }; var _button = function() { _disable.input(".control-header-button-coloraccent-dot-show", true); @@ -4387,11 +4447,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-picker", true); - _disable.input(".control-background-color-hex", true); + _disable.input(".control-background-color-rgb-picker", true); + _disable.input(".control-background-color-rgb-hex", true); } else if (state.get.current().background.color.by == "custom") { - _disable.input(".control-background-color-picker", false); - _disable.input(".control-background-color-hex", false); + _disable.input(".control-background-color-rgb-picker", false); + _disable.input(".control-background-color-rgb-hex", false); }; }; _header(); diff --git a/src/js/header.js b/src/js/header.js index 09c05c24..d48693b1 100644 --- a/src/js/header.js +++ b/src/js/header.js @@ -4,24 +4,24 @@ var header = (function() { bind.resize = function() { window.addEventListener("resize", function() { - render.shade(); + render.color.scrolling(); }, false); }; bind.scroll = function() { window.addEventListener("scroll", function() { - render.shade(); + render.color.scrolling(); }, false); helper.eA(".container").forEach(function(arrayItem, index) { arrayItem.addEventListener("transitionend", function() { - render.shade(); + render.color.scrolling(); }, false); }); }; bind.fonts = function() { document.fonts.ready.then(function() { - render.shade(); + render.color.scrolling(); }); }; @@ -34,50 +34,56 @@ var header = (function() { } }; - render.shade = function() { - var html = helper.e("html"); - var headerRect = helper.e(".header").getBoundingClientRect(); - var layoutRect = helper.e(".layout").getBoundingClientRect(); - var fontSize = parseInt(getComputedStyle(html).fontSize, 10); - var scrollTop = document.documentElement.scrollTop; - // var scrollHeight = document.documentElement.scrollHeight; - var innerHeight = window.innerHeight; - // if shade show - if (state.get.current().header.shade.show) { - // shade always - if (state.get.current().header.shade.style == "always") { - helper.removeClass(html, "is-header-shade-style-scroll"); - helper.addClass(html, "is-header-shade-style-always"); - // shade scroll - } else if (state.get.current().header.shade.style == "scroll") { - helper.removeClass(html, "is-header-shade-style-always"); - // check header position - if (state.get.current().layout.order == "headerlink") { - // check scroll position - if (scrollTop > fontSize * 2 && headerRect.top == 0) { - helper.addClass(html, "is-header-shade-style-scroll"); - } else { - helper.removeClass(html, "is-header-shade-style-scroll"); - }; - } else if (state.get.current().layout.order == "linkheader") { - // check scroll position - if (headerRect.bottom == innerHeight && (scrollTop + innerHeight) < ((scrollTop + layoutRect.bottom) - (fontSize * 2))) { - helper.addClass(html, "is-header-shade-style-scroll"); - } else { - helper.removeClass(html, "is-header-shade-style-scroll"); + render.color = { + custom: function() { + helper.e("html").style.setProperty("--header-color-custom", state.get.current().header.color.rgb.r + ", " + state.get.current().header.color.rgb.g + ", " + state.get.current().header.color.rgb.b); + }, + scrolling: function() { + var html = helper.e("html"); + var headerRect = helper.e(".header").getBoundingClientRect(); + var layoutRect = helper.e(".layout").getBoundingClientRect(); + var fontSize = parseInt(getComputedStyle(html).fontSize, 10); + var scrollTop = document.documentElement.scrollTop; + // var scrollHeight = document.documentElement.scrollHeight; + var innerHeight = window.innerHeight; + // if color show + if (state.get.current().header.color.show) { + // color always + if (state.get.current().header.color.style == "scroll") { + // check header position + if (state.get.current().layout.order == "headerlink") { + // check scroll position + if (scrollTop > fontSize * 2 && headerRect.top == 0) { + helper.addClass(html, "is-header-color-style-scrolling"); + } else { + helper.removeClass(html, "is-header-color-style-scrolling"); + }; + } else if (state.get.current().layout.order == "linkheader") { + // check scroll position + if (headerRect.bottom == innerHeight && (scrollTop + innerHeight) < ((scrollTop + layoutRect.bottom) - (fontSize * 2))) { + helper.addClass(html, "is-header-color-style-scrolling"); + } else { + helper.removeClass(html, "is-header-color-style-scrolling"); + }; }; }; }; - } else { - helper.removeClass(html, "is-header-shade-style-scroll"); - helper.removeClass(html, "is-header-shade-style-always"); - }; + } + }; + + render.input = { + picker: function() { + helper.e(".control-header-color-rgb-picker").value = helper.convertColor.rgb.hex(state.get.current().header.color.rgb); + }, + hex: function() { + helper.e(".control-header-color-rgb-hex").value = helper.convertColor.rgb.hex(state.get.current().header.color.rgb); + } }; render.opacity = function() { var html = helper.e("html"); - if (state.get.current().header.shade.show) { - html.style.setProperty("--header-shade-opacity", state.get.current().header.shade.opacity); + if (state.get.current().header.color.show) { + html.style.setProperty("--header-opacity", state.get.current().header.color.opacity); }; }; @@ -174,7 +180,8 @@ var header = (function() { bind.scroll(); bind.fonts(); render.area.width(); - render.shade(); + render.color.scrolling(); + render.color.custom(); render.opacity(); render.border(); render.greeting.size(); diff --git a/src/js/state.js b/src/js/state.js index c3f20bc6..fef56bbe 100644 --- a/src/js/state.js +++ b/src/js/state.js @@ -113,7 +113,13 @@ var state = (function() { style: "box", size: 1 }, - shade: { + color: { + by: "theme", + rgb: { + r: 0, + g: 0, + b: 0 + }, show: true, style: "scroll", opacity: 0.95 @@ -323,7 +329,7 @@ var state = (function() { button: { size: 1 }, - shade: { + color: { opacity: 0.95 }, border: { diff --git a/src/js/update.js b/src/js/update.js index 72a3b642..8adbe70c 100644 --- a/src/js/update.js +++ b/src/js/update.js @@ -790,6 +790,17 @@ var update = (function() { data.state.background.color.rgb = data.state.background.color.custom; delete data.state.background.color.custom; return data; + }, + "4.23.0": function(data) { + data.state.header.color = data.state.header.shade; + delete data.state.header.shade; + data.state.header.color.by = "theme"; + data.state.header.color.rgb = { + r: 0, + g: 0, + b: 0 + }; + return data; } }; diff --git a/src/js/version.js b/src/js/version.js index 9d211a69..d60dc923 100644 --- a/src/js/version.js +++ b/src/js/version.js @@ -1,6 +1,6 @@ var version = (function() { - var current = "4.22.0"; + var current = "4.23.0"; var name = "Naughty Goose"; diff --git a/src/manifest.json b/src/manifest.json index 32e26aa5..5fdb2036 100644 --- a/src/manifest.json +++ b/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.22.0", + "version": "4.23.0", "manifest_version": 2, "chrome_url_overrides": { "newtab": "index.html"