mirror of
https://github.com/zombieFox/nightTab.git
synced 2024-11-26 18:13:35 +01:00
[feature] add header background colour controls
This commit is contained in:
zombieFox
parent
30815c1729
commit
bd9b96f537
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nighttab",
|
||||
"version": "4.22.0",
|
||||
"version": "4.23.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
<main class="layout">
|
||||
|
||||
<header class="header">
|
||||
<div class="header-shade"></div>
|
||||
<div class="header-color"></div>
|
||||
<div class="header-border"></div>
|
||||
<div class="header-area">
|
||||
<div class="header-item-grid">
|
||||
@ -925,36 +925,61 @@
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<div class="menu-item-header">
|
||||
<h1 class="menu-item-header-text">Shade</h1>
|
||||
<h1 class="menu-item-header-text">Background colour</h1>
|
||||
</div>
|
||||
<div class="menu-item-form">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-shade-show" class="control-header-shade-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-shade-show"><span class="label-icon"></span> Show</label>
|
||||
<input id="control-header-color-show" class="control-header-color-show" type="checkbox" tabindex="-1">
|
||||
<label for="control-header-color-show"><span class="label-icon"></span> Show</label>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-shade-style-always" class="control-header-shade-style-always" type="radio" name="control-header-shade-style" value="always" tabindex="-1">
|
||||
<label for="control-header-shade-style-always"><span class="label-icon"></span> Always visible</label>
|
||||
<input id="control-header-color-style-always" class="control-header-color-style-always" type="radio" name="control-header-color-style" value="always" tabindex="-1">
|
||||
<label for="control-header-color-style-always"><span class="label-icon"></span> Always visible</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-shade-style-always-helper form-helper-item">Useful for when a Background Image is shown.</p>
|
||||
<p class="control-header-color-style-always-helper form-helper-item">Useful for when a Background Image is shown.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-shade-style-scroll" class="control-header-shade-style-scroll" type="radio" name="control-header-shade-style" value="scroll" tabindex="-1">
|
||||
<label for="control-header-shade-style-scroll"><span class="label-icon"></span> Visible on scroll</label>
|
||||
<input id="control-header-color-style-scroll" class="control-header-color-style-scroll" type="radio" name="control-header-color-style" value="scroll" tabindex="-1">
|
||||
<label for="control-header-color-style-scroll"><span class="label-icon"></span> Visible on scroll</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-shade-style-scroll-helper form-helper-item">The page will not scroll if Bookmarks are not shown.</p>
|
||||
<p class="control-header-color-style-scroll-helper form-helper-item">The page will not scroll if Bookmarks are not shown.</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-shade-opacity">Opacity</label>
|
||||
<input id="control-header-color-by-theme" class="control-header-color-by-theme" type="radio" name="control-header-color-by" value="theme" tabindex="-1">
|
||||
<label for="control-header-color-by-theme"><span class="label-icon"></span> Theme colour</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-color-by-theme-helper form-helper-item">Use the Background colour defined by the Theme.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<input id="control-header-color-by-custom" class="control-header-color-by-custom" type="radio" name="control-header-color-by" value="custom" tabindex="-1">
|
||||
<label for="control-header-color-by-custom"><span class="label-icon"></span> Custom colour</label>
|
||||
</div>
|
||||
<div class="form-helper">
|
||||
<p class="control-header-color-by-custom-helper form-helper-item">Use a custom Background colour.</p>
|
||||
</div>
|
||||
<div class="form-wrap">
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-color-rgb-picker" class="form-group-item-half control-header-color-rgb-picker" type="color" value="#000000" tabindex="1">
|
||||
<input id="control-header-color-rgb-hex" class="form-group-item-half control-header-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>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-wrap">
|
||||
<label for="control-header-color-opacity">Opacity</label>
|
||||
<div class="form-group form-group-block">
|
||||
<input id="control-header-shade-opacity" class="control-header-shade-opacity mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
|
||||
<div class="control-header-shade-opacity-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
||||
<button class="control-header-shade-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
|
||||
<input id="control-header-color-opacity" class="control-header-color-opacity mr-3" type="range" min="0" max="100" value="0" tabindex="-1">
|
||||
<div class="control-header-color-opacity-count form-group-text form-group-item-medium form-group-radius-left"></div>
|
||||
<button class="control-header-color-opacity-default button" tabindex="-1" title="Reset to default"><span class="icon-undo"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
@ -1871,8 +1896,8 @@
|
||||
<div class="form-indent">
|
||||
<div class="form-wrap">
|
||||
<div class="form-group form-group-block">
|
||||
<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">
|
||||
<input id="control-background-color-rgb-picker" class="form-group-item-half control-background-color-rgb-picker" type="color" value="#000000" tabindex="1">
|
||||
<input id="control-background-color-rgb-hex" class="form-group-item-half control-background-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>
|
||||
|
||||
@ -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);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = "4.22.0";
|
||||
var current = "4.23.0";
|
||||
|
||||
var name = "Naughty Goose";
|
||||
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user