extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-12-28 09:38:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

[refactor] [design] improve theme and prevent white flash on load

Browse Source
This commit is contained in:
Kuldeep M 2019-07-11 15:17:46 +01:00
parent f8c4d1bdb8
commit 63245d852e
8 changed files with 95 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" style="background-color: rgba(38, 40, 49)">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
@ -1145,7 +1145,6 @@
<script src="js/modal.js"></script> <script src="js/modal.js"></script>
<script src="js/tip.js"></script> <script src="js/tip.js"></script>
<script src="js/shade.js"></script> <script src="js/shade.js"></script>
<script src="js/accent.js"></script>
<script src="js/theme.js"></script> <script src="js/theme.js"></script>
<script src="js/date.js"></script> <script src="js/date.js"></script>
<script src="js/greeting.js"></script> <script src="js/greeting.js"></script>

78
src/js/accent.js
View File

@ -1,78 +0,0 @@
var accent = (function() {
var render = function() {
var html = helper.e("html");
var color = state.get().theme.accent.current;
html.style.setProperty("--theme-accent", color.r + ", " + color.g + ", " + color.b);
};
var random = function() {
if (state.get().theme.accent.random.active) {
var randomVal = function(min, max) {
return Math.floor(Math.random() * (max - min) + 1) + min;
};
var color = {
any: function() {
return {
h: randomVal(0, 360),
s: randomVal(0, 100),
l: randomVal(0, 100)
};
},
light: function() {
return {
h: randomVal(0, 360),
s: randomVal(50, 90),
l: randomVal(50, 90)
};
},
dark: function() {
return {
h: randomVal(0, 360),
s: randomVal(10, 50),
l: randomVal(10, 50)
};
},
pastel: function() {
return {
h: randomVal(0, 360),
s: 50,
l: 80
};
},
saturated: function() {
return {
h: randomVal(0, 360),
s: 100,
l: 50
};
}
};
var hsl = color[state.get().theme.accent.random.style]();
var randomColor = helper.hslToRgb({
h: hsl.h,
s: (hsl.s / 100),
l: (hsl.l / 100)
});
helper.setObject({
object: state.get(),
path: "theme.accent.current",
newValue: randomColor
});
helper.e(".control-theme-accent-current").value = helper.rgbToHex(randomColor);
};
};
var init = function() {
random();
render();
};
// exposed methods
return {
init: init,
render: render,
random: random
};
})();

18
src/js/control.js
View File

@ -25,7 +25,7 @@ var control = (function() {
path: "theme.accent.current", path: "theme.accent.current",
type: "color", type: "color",
func: function() { func: function() {
accent.render(); theme.render.accent.color();
link.clear(); link.clear();
link.render.item.all(); link.render.item.all();
sortable(".link-area"); sortable(".link-area");
@ -1992,7 +1992,7 @@ var control = (function() {
type: "radio", type: "radio",
func: function() { func: function() {
render(); render();
accent.render(); theme.render.accent.color();
} }
}, { }, {
element: helper.e(".control-theme-style-light"), element: helper.e(".control-theme-style-light"),
@ -2000,7 +2000,7 @@ var control = (function() {
type: "radio", type: "radio",
func: function() { func: function() {
render(); render();
accent.render(); theme.render.accent.color();
} }
}, { }, {
element: helper.e(".control-theme-radius"), element: helper.e(".control-theme-radius"),
@ -2024,7 +2024,7 @@ var control = (function() {
type: "checkbox", type: "checkbox",
func: function() { func: function() {
dependents(); dependents();
accent.render(); theme.render.accent.color();
} }
}, { }, {
element: helper.e(".control-theme-accent-random-style-any"), element: helper.e(".control-theme-accent-random-style-any"),
@ -2065,8 +2065,8 @@ var control = (function() {
element: helper.e(".control-theme-accent-randomise"), element: helper.e(".control-theme-accent-randomise"),
type: "button", type: "button",
func: function() { func: function() {
accent.random(); theme.render.accent.random();
accent.render(); theme.render.accent.color();
link.clear(); link.clear();
link.render.item.all(); link.render.item.all();
sortable(".link-area"); sortable(".link-area");
@ -2428,11 +2428,6 @@ var control = (function() {
helper.addClass(html, "is-layout-scrollpastend"); helper.addClass(html, "is-layout-scrollpastend");
}; };
}; };
var _theme = function() {
helper.removeClass(html, "is-theme-style-dark");
helper.removeClass(html, "is-theme-style-light");
helper.addClass(html, "is-theme-style-" + state.get().theme.style);
};
var _background = function() { var _background = function() {
if (state.get().background.image.show) { if (state.get().background.image.show) {
helper.addClass(html, "is-background-image-show"); helper.addClass(html, "is-background-image-show");
@ -2444,7 +2439,6 @@ var control = (function() {
_header(); _header();
_link(); _link();
_layout(); _layout();
_theme();
_background(); _background();
}; };

3
src/js/init.js
View File

@ -3,8 +3,8 @@ console.log("nightTab version", version.get());
data.init(); data.init();
state.init(); state.init();
bookmarks.init(); bookmarks.init();
theme.init();
menu.init(); menu.init();
accent.init();
link.init(); link.init();
control.init(); control.init();
greeting.init(); greeting.init();
@ -17,5 +17,4 @@ background.init();
search.init(); search.init();
title.init(); title.init();
header.init(); header.init();
theme.init();
version.init(); version.init();

2
src/js/keyboard.js
View File

@ -35,7 +35,7 @@ var keyboard = (function() {
// ctrl+alt+d // ctrl+alt+d
if (event.ctrlKey && event.altKey && event.keyCode == 68) { if (event.ctrlKey && event.altKey && event.keyCode == 68) {
theme.toggle(); theme.toggle();
control.render(); theme.render.theme();
control.update(); control.update();
data.save(); data.save();
}; };

84
src/js/theme.js
View File

@ -21,17 +21,101 @@ var theme = (function() {
}; };
var render = { var render = {
theme: function() {
_renderTheme();
},
radius: function() { radius: function() {
_renderRadius(); _renderRadius();
},
accent: {
color: function() {
_renderAccentColor();
},
random: function() {
_renderAccentRandom();
}
} }
}; };
var _renderTheme = 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().theme.style);
};
var _renderRadius = function() { var _renderRadius = function() {
var html = helper.e("html"); var html = helper.e("html");
html.style.setProperty("--theme-radius", state.get().theme.radius + "rem"); html.style.setProperty("--theme-radius", state.get().theme.radius + "rem");
}; };
var _renderAccentColor = function() {
var html = helper.e("html");
var color = state.get().theme.accent.current;
html.style.setProperty("--theme-accent", color.r + ", " + color.g + ", " + color.b);
};
var _renderAccentRandom = function() {
if (state.get().theme.accent.random.active) {
var randomVal = function(min, max) {
return Math.floor(Math.random() * (max - min) + 1) + min;
};
var color = {
any: function() {
return {
h: randomVal(0, 360),
s: randomVal(0, 100),
l: randomVal(0, 100)
};
},
light: function() {
return {
h: randomVal(0, 360),
s: randomVal(50, 90),
l: randomVal(50, 90)
};
},
dark: function() {
return {
h: randomVal(0, 360),
s: randomVal(10, 50),
l: randomVal(10, 50)
};
},
pastel: function() {
return {
h: randomVal(0, 360),
s: 50,
l: 80
};
},
saturated: function() {
return {
h: randomVal(0, 360),
s: 100,
l: 50
};
}
};
var hsl = color[state.get().theme.accent.random.style]();
var randomColor = helper.hslToRgb({
h: hsl.h,
s: (hsl.s / 100),
l: (hsl.l / 100)
});
helper.setObject({
object: state.get(),
path: "theme.accent.current",
newValue: randomColor
});
helper.e(".control-theme-accent-current").value = helper.rgbToHex(randomColor);
};
};
var init = function() { var init = function() {
render.theme();
render.accent.random();
render.accent.color();
render.radius(); render.radius();
}; };

2
src/js/version.js
View File

@ -1,6 +1,6 @@
var version = (function() { var version = (function() {
var current = "3.30.9"; var current = "3.31.0";
var compare = function(a, b) { var compare = function(a, b) {
var pa = a.split("."); var pa = a.split(".");

2
src/manifest.json
View File

@ -2,7 +2,7 @@
"name": "nightTab", "name": "nightTab",
"short_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.", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
"version": "3.30.9", "version": "3.31.0",
"manifest_version": 2, "manifest_version": 2,
"chrome_url_overrides": { "chrome_url_overrides": {
"newtab": "index.html" "newtab": "index.html"