mirror of
https://github.com/zombieFox/nightTab.git
synced 2024-12-24 23:58:57 +01:00
[refactor] switch to web font loader to handle theme fonts
This commit is contained in:
parent
4df83b7162
commit
70a874333a
@ -33,7 +33,7 @@ const filename = {
|
||||
const jsDependencies = [
|
||||
path.nodeModules + '/html5sortable/dist/html5sortable.min.js',
|
||||
path.nodeModules + '/invert-color/lib/invert.min.js',
|
||||
path.nodeModules + '/moment/min/moment.min.js'
|
||||
path.nodeModules + '/webfontloader/webfontloader.js'
|
||||
]
|
||||
|
||||
const cssFiles = [
|
||||
|
8
package-lock.json
generated
8
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nighttab",
|
||||
"version": "4.18.0",
|
||||
"version": "4.19.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@ -11002,6 +11002,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"webfontloader": {
|
||||
"version": "1.6.28",
|
||||
"resolved": "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz",
|
||||
"integrity": "sha1-23hhKSU8tujq5UwvsF+HCvZnW64=",
|
||||
"dev": true
|
||||
},
|
||||
"webidl-conversions": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nighttab",
|
||||
"version": "4.18.0",
|
||||
"version": "4.19.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": {
|
||||
@ -50,8 +50,9 @@
|
||||
"gulp-watch": "^5.0.1",
|
||||
"html5sortable": "^0.9.16",
|
||||
"invert-color": "^2.0.0",
|
||||
"moment": "^2.24.0",
|
||||
"web-ext": "^3.1.1",
|
||||
"moment": "^2.24.0"
|
||||
"webfontloader": "^1.6.28"
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
|
@ -2124,6 +2124,7 @@
|
||||
<script src="../node_modules/html5sortable/dist/html5sortable.min.js"></script>
|
||||
<script src="../node_modules/invert-color/lib/invert.min.js"></script>
|
||||
<script src="../node_modules/moment/min/moment.min.js"></script>
|
||||
<script src="../node_modules/webfontloader/webfontloader.js"></script>
|
||||
<!-- nightTab -->
|
||||
<script src="js/helper.js"></script>
|
||||
<script src="js/data.js"></script>
|
||||
|
@ -2547,7 +2547,6 @@ var control = (function() {
|
||||
type: "text",
|
||||
func: function() {
|
||||
theme.render.font.delay.display();
|
||||
theme.render.font.delay.ui();
|
||||
}
|
||||
}, {
|
||||
element: helper.e(".control-theme-font-display-name-default"),
|
||||
@ -2628,7 +2627,6 @@ var control = (function() {
|
||||
path: "theme.font.ui.name",
|
||||
type: "text",
|
||||
func: function() {
|
||||
theme.render.font.delay.display();
|
||||
theme.render.font.delay.ui();
|
||||
}
|
||||
}, {
|
||||
|
115
src/js/theme.js
115
src/js/theme.js
@ -1411,49 +1411,67 @@ var theme = (function() {
|
||||
};
|
||||
|
||||
render.font = {
|
||||
load: {
|
||||
preset: function() {
|
||||
var allPresetFonts = [];
|
||||
mod.preset.all.forEach(function(arrayItem, index) {
|
||||
var displayFont = arrayItem.font.display.name + ":" + arrayItem.font.display.weight;
|
||||
var uiFont = arrayItem.font.ui.name + ":" + arrayItem.font.ui.weight;
|
||||
if (arrayItem.font.display.name != "" && !allPresetFonts.includes(displayFont)) {
|
||||
allPresetFonts.push(displayFont);
|
||||
};
|
||||
if (arrayItem.font.ui.name != "" && !allPresetFonts.includes(uiFont)) {
|
||||
allPresetFonts.push(uiFont);
|
||||
};
|
||||
});
|
||||
WebFont.load({
|
||||
google: {
|
||||
families: allPresetFonts
|
||||
}
|
||||
});
|
||||
},
|
||||
custom: {
|
||||
display: function() {
|
||||
if (state.get.current().theme.font.display.name.trim().replace(/\s\s+/g, " ") != "") {
|
||||
WebFont.load({
|
||||
google: {
|
||||
families: [state.get.current().theme.font.display.name.trim().replace(/\s\s+/g, " ") + ":100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i"]
|
||||
}
|
||||
});
|
||||
};
|
||||
render.font.display.name();
|
||||
},
|
||||
ui: function() {
|
||||
if (state.get.current().theme.font.ui.name.trim().replace(/\s\s+/g, " ") != "") {
|
||||
WebFont.load({
|
||||
google: {
|
||||
families: [state.get.current().theme.font.ui.name.trim().replace(/\s\s+/g, " ") + ":100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i"]
|
||||
}
|
||||
});
|
||||
};
|
||||
render.font.ui.name();
|
||||
}
|
||||
}
|
||||
},
|
||||
delay: {
|
||||
display: function() {
|
||||
clearTimeout(_timerFontDisplay);
|
||||
_timerFontDisplay = setTimeout(render.font.display.name, 600);
|
||||
_timerFontDisplay = setTimeout(render.font.load.custom.display, 600);
|
||||
},
|
||||
ui: function() {
|
||||
clearTimeout(_timerFontUi);
|
||||
_timerFontUi = setTimeout(render.font.ui.name, 600);
|
||||
_timerFontUi = setTimeout(render.font.load.custom.ui, 600);
|
||||
}
|
||||
},
|
||||
display: {
|
||||
name: function() {
|
||||
var html = helper.e("html");
|
||||
var removeLink = function() {
|
||||
var link = helper.e(".theme-font-display-name");
|
||||
if (link) {
|
||||
link.remove();
|
||||
};
|
||||
var name = state.get.current().theme.font.display.name.trim().replace(/\s\s+/g, " ");
|
||||
if (name != "") {
|
||||
html.style.setProperty("--theme-font-display-name", "\"" + name + "\"" + ", \"Fjalla One\", sans-serif");
|
||||
} else {
|
||||
html.style.removeProperty("--theme-font-display-name");
|
||||
};
|
||||
var addLink = function() {
|
||||
var name = state.get.current().theme.font.display.name.trim().replace(/\s+/g, "+");
|
||||
if (name != "") {
|
||||
var head = helper.e("head");
|
||||
var link = helper.makeNode({
|
||||
tag: "link",
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "theme-font-display-name"
|
||||
}, {
|
||||
key: "href",
|
||||
value: "https://fonts.googleapis.com/css?family=" + name + ":100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap"
|
||||
}, {
|
||||
key: "rel",
|
||||
value: "stylesheet"
|
||||
}]
|
||||
});
|
||||
head.appendChild(link);
|
||||
html.style.setProperty("--theme-font-display-name", "\"" + state.get.current().theme.font.display.name.trim().replace(/\s\s+/g, " ") + "\"" + ", \"Fjalla One\", sans-serif");
|
||||
};
|
||||
};
|
||||
removeLink();
|
||||
addLink();
|
||||
},
|
||||
weight: function() {
|
||||
var html = helper.e("html");
|
||||
@ -1468,38 +1486,12 @@ var theme = (function() {
|
||||
ui: {
|
||||
name: function() {
|
||||
var html = helper.e("html");
|
||||
var removeLink = function() {
|
||||
var link = helper.e(".theme-font-ui-name");
|
||||
if (link) {
|
||||
link.remove();
|
||||
};
|
||||
var name = state.get.current().theme.font.ui.name.trim().replace(/\s\s+/g, " ");
|
||||
if (name != "") {
|
||||
html.style.setProperty("--theme-font-ui-name", "\"" + name + "\"" + ", \"Open Sans\", sans-serif");
|
||||
} else {
|
||||
html.style.removeProperty("--theme-font-ui-name");
|
||||
};
|
||||
var addLink = function() {
|
||||
var name = state.get.current().theme.font.ui.name.trim().replace(/\s+/g, "+");
|
||||
if (name != "") {
|
||||
if (name != state.get.current().theme.font.display.name) {
|
||||
var head = helper.e("head");
|
||||
var link = helper.makeNode({
|
||||
tag: "link",
|
||||
attr: [{
|
||||
key: "class",
|
||||
value: "theme-font-ui-name"
|
||||
}, {
|
||||
key: "href",
|
||||
value: "https://fonts.googleapis.com/css?family=" + name + ":100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap"
|
||||
}, {
|
||||
key: "rel",
|
||||
value: "stylesheet"
|
||||
}]
|
||||
});
|
||||
head.appendChild(link);
|
||||
};
|
||||
html.style.setProperty("--theme-font-ui-name", "\"" + state.get.current().theme.font.ui.name.trim().replace(/\s\s+/g, " ") + "\"" + ", \"Open Sans\", sans-serif");
|
||||
};
|
||||
};
|
||||
removeLink();
|
||||
addLink();
|
||||
},
|
||||
weight: function() {
|
||||
var html = helper.e("html");
|
||||
@ -1956,6 +1948,9 @@ var theme = (function() {
|
||||
accent.random();
|
||||
mod.accent.random();
|
||||
mod.custom.close();
|
||||
render.font.load.preset();
|
||||
render.font.load.custom.display();
|
||||
render.font.load.custom.ui();
|
||||
render.font.display.name();
|
||||
render.font.display.weight();
|
||||
render.font.display.style();
|
||||
|
@ -1,6 +1,6 @@
|
||||
var version = (function() {
|
||||
|
||||
var current = "4.18.0";
|
||||
var current = "4.19.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.18.0",
|
||||
"version": "4.19.0",
|
||||
"manifest_version": 2,
|
||||
"chrome_url_overrides": {
|
||||
"newtab": "index.html"
|
||||
|
Loading…
Reference in New Issue
Block a user