[refactor] switch to web font loader to handle theme fonts

This commit is contained in:
zombieFox 2020-01-14 12:16:13 +00:00
parent 4df83b7162
commit 70a874333a
8 changed files with 69 additions and 68 deletions

View File

@ -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
View File

@ -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",

View File

@ -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": {}
}

View File

@ -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>

View File

@ -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();
}
}, {

View File

@ -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();

View File

@ -1,6 +1,6 @@
var version = (function() {
var current = "4.18.0";
var current = "4.19.0";
var name = "Naughty Goose";

View File

@ -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"