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

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 = [

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

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

src/index.html

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

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

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 name = state.get.current().theme.font.display.name.trim().replace(/\s\s+/g, " ");
-          var link = helper.e(".theme-font-display-name");
+        if (name != "") {
-          if (link) {
+          html.style.setProperty("--theme-font-display-name", "\"" + name + "\"" + ", \"Fjalla One\", sans-serif");
-            link.remove();
+        } 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 name = state.get.current().theme.font.ui.name.trim().replace(/\s\s+/g, " ");
-          var link = helper.e(".theme-font-ui-name");
+        if (name != "") {
-          if (link) {
+          html.style.setProperty("--theme-font-ui-name", "\"" + name + "\"" + ", \"Open Sans\", sans-serif");
-            link.remove();
+        } 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();

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

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"