mirror of
https://github.com/zombieFox/nightTab.git
synced 2024-11-23 08:33:38 +01:00
[feature] adding header shade options
This commit is contained in:
Kombie
zombieFox
parent
64887ec7fb
commit
5ebd94b384
9
css/animation.css
Normal file
9
css/animation.css
Normal file
@ -0,0 +1,9 @@
|
||||
@keyframes appear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -35,13 +35,3 @@
|
||||
pointer-events: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@ -41,6 +41,10 @@
|
||||
--z-index-shade: 5000;
|
||||
--z-index-modal: 6000;
|
||||
--z-index-menu: 7000;
|
||||
--header-shade-color: transparent;
|
||||
--header-shade-opacity: none;
|
||||
--header-height: 0;
|
||||
--header-shade-padding: 4;
|
||||
--background-image: none;
|
||||
--background-opacity: 1;
|
||||
--background-accent-opacity: 0;
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
.header {
|
||||
padding: calc(var(--gutter) * var(--header-shade-padding)) 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: var(--z-index-header);
|
||||
}
|
||||
|
||||
@ -7,22 +9,44 @@
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: background-color var(--animation-speed-slow) ease-in-out;
|
||||
}
|
||||
|
||||
.header-background {
|
||||
background-color: rgba(var(--gray-01), 0.95);
|
||||
.header .header-shade,
|
||||
.header .header-border {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.is-header-shade-style-scroll .header .header-shade {
|
||||
transition: background-color var(--animation-speed-fast) ease-in-out;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.is-header-shade-show .header .header-shade {
|
||||
background-color: rgb(var(--header-shade-color));
|
||||
opacity: var(--header-shade-opacity);
|
||||
}
|
||||
|
||||
.is-header-shade-border-top .header .header-border {
|
||||
border-top: var(--line-width) solid rgb(var(--accent));
|
||||
}
|
||||
|
||||
.is-header-shade-border-bottom .header .header-border {
|
||||
border-bottom: var(--line-width) solid rgb(var(--accent));
|
||||
}
|
||||
|
||||
.header-area {
|
||||
margin: calc(var(--gutter) * 4) calc(var(--gutter) * -1);
|
||||
margin: 0 calc(var(--gutter) * -1);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
/* display: grid; */
|
||||
/* grid-template-columns: auto 1fr auto auto auto; */
|
||||
/* grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); */
|
||||
}
|
||||
|
||||
.header-item {
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
.link {
|
||||
margin-bottom: 2em;
|
||||
margin-top: var(--header-height);
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
z-index: var(--z-index-link);
|
||||
display: none;
|
||||
/* transition: margin-top var(--animation-speed-fast) ease-in-out; */
|
||||
}
|
||||
|
||||
.is-bookmarks-show-link .link {
|
||||
|
||||
44
index.html
44
index.html
@ -8,6 +8,7 @@
|
||||
<title>New Tab</title>
|
||||
<link rel="stylesheet" href="css/reset.css">
|
||||
<link rel="stylesheet" href="css/base.css">
|
||||
<link rel="stylesheet" href="css/animation.css">
|
||||
<link rel="stylesheet" href="css/fonts.css">
|
||||
<link rel="stylesheet" href="css/icons.css">
|
||||
<link rel="stylesheet" href="css/state.css">
|
||||
@ -37,6 +38,8 @@
|
||||
</div>
|
||||
|
||||
<header class="header">
|
||||
<div class="header-shade"></div>
|
||||
<div class="header-border"></div>
|
||||
<div class="container">
|
||||
<div class="header-area">
|
||||
<div class="header-item header-clock">
|
||||
@ -245,6 +248,39 @@
|
||||
<p class="input-helper small muted">Available when Bookmarks are not shown.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Background Shade</h1>
|
||||
<div class="checkbox-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>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<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>
|
||||
<p class="input-helper small muted">Useful for when a Background Image is shown.</p>
|
||||
</div>
|
||||
<div class="radio-wrap form-indent-1">
|
||||
<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>
|
||||
<p class="input-helper small muted">The page will not scroll if Bookmarks are not shown.</p>
|
||||
</div>
|
||||
<div class="input-wrap form-indent-1">
|
||||
<label for="control-header-shade-opacity">Opacity</label>
|
||||
<input id="control-header-shade-opacity" class="control-header-shade-opacity" type="range" min="0" max="100" value="0" tabindex="1">
|
||||
</div>
|
||||
<div class="input-wrap form-indent-1">
|
||||
<label for="control-header-shade-padding">Top & bottom padding</label>
|
||||
<input id="control-header-shade-padding" class="control-header-shade-padding" type="range" min="2" max="20" value="0" tabindex="1">
|
||||
</div>
|
||||
<div class="checkbox-wrap form-indent-1">
|
||||
<input id="control-header-shade-border-top" class="control-header-shade-border-top" type="checkbox" value="always" tabindex="1">
|
||||
<label for="control-header-shade-border-top"><span class="label-icon"></span>Top border</label>
|
||||
</div>
|
||||
<div class="checkbox-wrap form-indent-1">
|
||||
<input id="control-header-shade-border-bottom" class="control-header-shade-border-bottom" type="checkbox" value="always" tabindex="1">
|
||||
<label for="control-header-shade-border-bottom"><span class="label-icon"></span>Bottom border</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-content-area menu-content-area-bookmarks is-hidden">
|
||||
@ -371,19 +407,19 @@
|
||||
</div>
|
||||
<div class="input-wrap form-indent-1">
|
||||
<label for="control-background-image-opacity">Opacity</label>
|
||||
<input id="control-background-image-opacity" class="control-background-image-opacity mb-0" type="range" min="0" max="100" value="0" placeholder="Path to file" tabindex="1">
|
||||
<input id="control-background-image-opacity" class="control-background-image-opacity" type="range" min="0" max="100" value="0" tabindex="1">
|
||||
</div>
|
||||
<div class="input-wrap form-indent-1">
|
||||
<label for="control-background-image-grayscale">Grayscale</label>
|
||||
<input id="control-background-image-grayscale" class="control-background-image-grayscale mb-0" type="range" min="0" max="100" value="0" placeholder="Path to file" tabindex="1">
|
||||
<input id="control-background-image-grayscale" class="control-background-image-grayscale" type="range" min="0" max="100" value="0" tabindex="1">
|
||||
</div>
|
||||
<div class="input-wrap form-indent-1">
|
||||
<label for="control-background-image-blur">Blur</label>
|
||||
<input id="control-background-image-blur" class="control-background-image-blur mb-0" type="range" min="0" max="100" value="0" placeholder="Path to file" tabindex="1">
|
||||
<input id="control-background-image-blur" class="control-background-image-blur" type="range" min="0" max="100" value="0" tabindex="1">
|
||||
</div>
|
||||
<div class="input-wrap form-indent-1">
|
||||
<label for="control-background-image-accent">Accent overlay</label>
|
||||
<input id="control-background-image-accent" class="control-background-image-accent mb-0" type="range" min="0" max="50" value="0" placeholder="URL or path to file" tabindex="1">
|
||||
<input id="control-background-image-accent" class="control-background-image-accent" type="range" min="0" max="50" value="0" tabindex="1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
104
js/control.js
104
js/control.js
@ -284,6 +284,64 @@ var control = (function() {
|
||||
func: function() {
|
||||
render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-shade-show"),
|
||||
path: "header.shade.show",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
dependents();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-shade-style-always"),
|
||||
path: "header.shade.style",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-shade-style-scroll"),
|
||||
path: "header.shade.style",
|
||||
type: "radio",
|
||||
func: function() {
|
||||
render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-shade-opacity"),
|
||||
path: "header.shade.opacity",
|
||||
type: "range",
|
||||
valueMod: ["reverse", "float"],
|
||||
func: function() {
|
||||
render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-shade-padding"),
|
||||
path: "header.shade.padding",
|
||||
type: "range",
|
||||
func: function() {
|
||||
render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-shade-border-top"),
|
||||
path: "header.shade.border.top",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-header-shade-border-bottom"),
|
||||
path: "header.shade.border.bottom",
|
||||
type: "checkbox",
|
||||
func: function() {
|
||||
render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-bookmarks-show-link"),
|
||||
path: "bookmarks.show.link",
|
||||
@ -441,6 +499,7 @@ var control = (function() {
|
||||
render();
|
||||
dependents();
|
||||
background.render();
|
||||
header.render();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-background-image-url"),
|
||||
@ -670,6 +729,28 @@ var control = (function() {
|
||||
helper.removeClass(html, "is-background-image-show");
|
||||
};
|
||||
};
|
||||
var _header = function() {
|
||||
if (state.get().header.shade.show) {
|
||||
helper.addClass(html, "is-header-shade-show");
|
||||
helper.addClass(html, "is-header-shade-style-" + state.get().header.shade.style);
|
||||
if (state.get().header.shade.border.top) {
|
||||
helper.addClass(html, "is-header-shade-border-top");
|
||||
} else {
|
||||
helper.removeClass(html, "is-header-shade-border-top");
|
||||
};
|
||||
if (state.get().header.shade.border.bottom) {
|
||||
helper.addClass(html, "is-header-shade-border-bottom");
|
||||
} else {
|
||||
helper.removeClass(html, "is-header-shade-border-bottom");
|
||||
};
|
||||
} else {
|
||||
helper.removeClass(html, "is-header-shade-show");
|
||||
helper.removeClass(html, "is-header-shade-style-always");
|
||||
helper.removeClass(html, "is-header-shade-style-scroll");
|
||||
helper.removeClass(html, "is-header-shade-border-top");
|
||||
helper.removeClass(html, "is-header-shade-border-bottom");
|
||||
};
|
||||
};
|
||||
_menu();
|
||||
_alignment();
|
||||
_edit();
|
||||
@ -681,6 +762,7 @@ var control = (function() {
|
||||
_link();
|
||||
_layout();
|
||||
_background();
|
||||
_header();
|
||||
};
|
||||
|
||||
var dependents = function() {
|
||||
@ -833,6 +915,27 @@ var control = (function() {
|
||||
helper.e(".control-background-image-accent").disabled = true;
|
||||
};
|
||||
};
|
||||
var _header = function() {
|
||||
if (state.get().header.shade.show) {
|
||||
helper.e(".control-header-shade-style-always").disabled = false;
|
||||
helper.e(".control-header-shade-style-scroll").disabled = false;
|
||||
helper.e("[for=control-header-shade-opacity]").removeAttribute("disabled");
|
||||
helper.e(".control-header-shade-opacity").disabled = false;
|
||||
helper.e("[for=control-header-shade-padding]").removeAttribute("disabled");
|
||||
helper.e(".control-header-shade-padding").disabled = false;
|
||||
helper.e(".control-header-shade-border-top").disabled = false;
|
||||
helper.e(".control-header-shade-border-bottom").disabled = false;
|
||||
} else {
|
||||
helper.e(".control-header-shade-style-always").disabled = true;
|
||||
helper.e(".control-header-shade-style-scroll").disabled = true;
|
||||
helper.e("[for=control-header-shade-opacity]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-shade-opacity").disabled = true;
|
||||
helper.e("[for=control-header-shade-padding]").setAttribute("disabled", "");
|
||||
helper.e(".control-header-shade-padding").disabled = true;
|
||||
helper.e(".control-header-shade-border-top").disabled = true;
|
||||
helper.e(".control-header-shade-border-bottom").disabled = true;
|
||||
};
|
||||
};
|
||||
_edit();
|
||||
_date();
|
||||
_clock();
|
||||
@ -840,6 +943,7 @@ var control = (function() {
|
||||
_theme();
|
||||
_link();
|
||||
_background();
|
||||
_header();
|
||||
};
|
||||
|
||||
var update = function() {
|
||||
|
||||
63
js/header.js
63
js/header.js
@ -1,11 +1,11 @@
|
||||
var header = (function() {
|
||||
|
||||
var _bind = function() {
|
||||
window.addEventListener("resize", function(event) {
|
||||
window.addEventListener("resize", function() {
|
||||
render();
|
||||
}, false);
|
||||
window.addEventListener("scroll", function(event) {
|
||||
_addHeaderBackground();
|
||||
window.addEventListener("scroll", function() {
|
||||
render();
|
||||
}, false);
|
||||
helper.eA(".container").forEach(function(arrayItem, index) {
|
||||
arrayItem.addEventListener("transitionend", function() {
|
||||
@ -14,26 +14,51 @@ var header = (function() {
|
||||
});
|
||||
};
|
||||
|
||||
var _addHeaderBackground = function() {
|
||||
var html = helper.e("html");
|
||||
var header = helper.e(".header");
|
||||
var scrollPosition = document.documentElement.scrollTop;
|
||||
var fontSize = parseInt(getComputedStyle(html).fontSize, 10);
|
||||
if (scrollPosition > (fontSize * 2)) {
|
||||
helper.addClass(header, "header-background");
|
||||
} else {
|
||||
helper.removeClass(header, "header-background");
|
||||
};
|
||||
};
|
||||
|
||||
var render = function() {
|
||||
var html = helper.e("html");
|
||||
var header = helper.e(".header");
|
||||
var link = helper.e(".link");
|
||||
var height = parseInt(getComputedStyle(header).height, 10);
|
||||
// var fontSize = parseInt(getComputedStyle(html).fontSize, 10);
|
||||
// link.style.marginTop = (height + fontSize) + "px";
|
||||
link.style.marginTop = height + "px";
|
||||
var fontSize = parseInt(getComputedStyle(html).fontSize, 10);
|
||||
var scrollPosition = document.documentElement.scrollTop;
|
||||
var _margin = function() {
|
||||
var height = parseInt(getComputedStyle(header).height, 10);
|
||||
var marginValue;
|
||||
if (state.get().background.image.show && (state.get().header.shade.show && state.get().header.shade.style == "always") || state.get().header.shade.style == "always" || state.get().header.shade.border.bottom) {
|
||||
marginValue = (height + fontSize);
|
||||
} else {
|
||||
marginValue = height;
|
||||
};
|
||||
html.style.setProperty("--header-height", marginValue + "px");
|
||||
};
|
||||
var _color = function() {
|
||||
if (state.get().header.shade.show) {
|
||||
if (state.get().header.shade.style == "always") {
|
||||
html.style.setProperty("--header-shade-color", "var(--gray-01)");
|
||||
} else if (state.get().header.shade.style == "scroll") {
|
||||
if (scrollPosition > (fontSize * 2)) {
|
||||
html.style.setProperty("--header-shade-color", "var(--gray-01)");
|
||||
} else {
|
||||
html.style.setProperty("--header-shade-color", "transparent");
|
||||
};
|
||||
} else {
|
||||
html.style.setProperty("--header-shade-color", "transparent");
|
||||
};
|
||||
} else {
|
||||
html.style.setProperty("--header-shade-color", "transparent");
|
||||
};
|
||||
};
|
||||
var _opacity = function() {
|
||||
if (state.get().header.shade.show) {
|
||||
html.style.setProperty("--header-shade-opacity", state.get().header.shade.opacity);
|
||||
};
|
||||
};
|
||||
var _padding = function() {
|
||||
html.style.setProperty("--header-shade-padding", state.get().header.shade.padding);
|
||||
};
|
||||
_color();
|
||||
_opacity();
|
||||
_padding();
|
||||
_margin();
|
||||
};
|
||||
|
||||
var init = function() {
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
var helper = (function() {
|
||||
|
||||
// methods on this object
|
||||
var e = function(selector) {
|
||||
return document.querySelector(selector);
|
||||
};
|
||||
|
||||
10
js/state.js
10
js/state.js
@ -53,6 +53,16 @@ var state = (function() {
|
||||
},
|
||||
accent: {
|
||||
show: true,
|
||||
},
|
||||
shade: {
|
||||
show: true,
|
||||
padding: 4,
|
||||
style: "scroll",
|
||||
opacity: 0.95,
|
||||
border: {
|
||||
top: false,
|
||||
bottom: false
|
||||
}
|
||||
}
|
||||
},
|
||||
bookmarks: {
|
||||
|
||||
19
js/update.js
19
js/update.js
@ -130,6 +130,21 @@ var update = (function() {
|
||||
return data;
|
||||
};
|
||||
|
||||
var _update_290 = function(data) {
|
||||
data.state.header.shade = {
|
||||
show: true,
|
||||
padding: 4,
|
||||
style: "scroll",
|
||||
opacity: 0.95,
|
||||
border: {
|
||||
top: false,
|
||||
bottom: false
|
||||
}
|
||||
};
|
||||
data.version = 2.90;
|
||||
return data;
|
||||
};
|
||||
|
||||
// var _update_300 = function(data) {
|
||||
// data.version = 3.00;
|
||||
// return data;
|
||||
@ -168,6 +183,10 @@ var update = (function() {
|
||||
console.log("\trunning update", 2.80);
|
||||
data = _update_280(data);
|
||||
};
|
||||
if (data.version < 2.90) {
|
||||
console.log("\trunning update", 2.90);
|
||||
data = _update_290(data);
|
||||
};
|
||||
// if (data.version < 3.00) {
|
||||
// console.log("\t# running update", 3.00);
|
||||
// data = _update_300(data);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
var version = (function() {
|
||||
|
||||
// version is normally bumped when the state needs changing or any new functionality is added
|
||||
var current = "2.8.0";
|
||||
var current = "2.9.0";
|
||||
|
||||
var get = function() {
|
||||
var number = current.split(".");
|
||||
|
||||
Loading…
Reference in New Issue
Block a user