diff --git a/gulpfile.js b/gulpfile.js
index 6baf3f5e..efdc7621 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -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 = [
diff --git a/package-lock.json b/package-lock.json
index 6841a7a3..0b1cbd62 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index 151ae45c..1f58e9eb 100644
--- a/package.json
+++ b/package.json
@@ -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": {}
}
diff --git a/src/index.html b/src/index.html
index 8a469871..9518a2e0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2124,6 +2124,7 @@
+
diff --git a/src/js/control.js b/src/js/control.js
index 8256a339..6630e6d9 100644
--- a/src/js/control.js
+++ b/src/js/control.js
@@ -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();
}
}, {
diff --git a/src/js/theme.js b/src/js/theme.js
index baabc4f7..17b6ad52 100644
--- a/src/js/theme.js
+++ b/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();
diff --git a/src/js/version.js b/src/js/version.js
index 60073926..65a69213 100644
--- a/src/js/version.js
+++ b/src/js/version.js
@@ -1,6 +1,6 @@
var version = (function() {
- var current = "4.18.0";
+ var current = "4.19.0";
var name = "Naughty Goose";
diff --git a/src/manifest.json b/src/manifest.json
index b2782d8c..c8b2ab0f 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -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"