font-picker - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

dist/font-manager/font-manager/FontManager.d.ts

@@ -11,3 +11,2 @@ import { Font, FontList, Options } from "../shared/types";
     init(): Promise<FontList>;
-    private downloadFontPreviews;
     getFonts(): FontList;
@@ -14,0 +13,0 @@ addFont(fontFamily: string, downloadPreview?: boolean): void;

dist/font-manager/font-manager/FontManager.js

@@ -176,2 +176,22 @@ (function (global, factory) {
 
+    var activeFontStylesheet = document.createElement("style");
+    var previewFontsStylesheet = document.createElement("style");
+    document.head.appendChild(activeFontStylesheet);
+    document.head.appendChild(previewFontsStylesheet);
+    function applyFontPreview(previewFont, selectorSuffix) {
+        var fontId = getFontId(previewFont.family);
+        var style = "\n\t\t\t#font-button-" + fontId + selectorSuffix + " {\n\t\t\t\tfont-family: \"" + previewFont.family + "\";\n\t\t\t}\n\t\t";
+        previewFontsStylesheet.appendChild(document.createTextNode(style));
+    }
+    function applyActiveFont(activeFont, previousFontFamily, selectorSuffix) {
+        var style = "\n\t\t.apply-font" + selectorSuffix + " {\n\t\t\tfont-family: \"" + activeFont.family + "\"" + (previousFontFamily ? ", \"" + previousFontFamily + "\"" : "") + ";\n\t\t}\n\t";
+        var styleNode = document.createTextNode(style);
+        if (activeFontStylesheet.childNodes.length === 0) {
+            activeFontStylesheet.appendChild(styleNode);
+        }
+        else {
+            activeFontStylesheet.replaceChild(styleNode, activeFontStylesheet.childNodes[0]);
+        }
+    }
+
     var PREVIEW_ATTRIBUTE_NAME = "data-is-preview";
@@ -199,29 +219,25 @@ function getStylesheetId(fontId) {
 
-    function loadFonts(fonts, scripts, variants, previewsOnly) {
+    function loadFontPreviews(fonts, scripts, variants, selectorSuffix) {
         return __awaiter(this, void 0, void 0, function () {
-            var fontsToFetch, response, fontStyles;
+            var fontsArray, fontsToFetch, response, fontStyles;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        if (previewsOnly) {
-                            fontsToFetch = fonts.filter(function (font) { return !stylesheetExists(font.id, false) && !stylesheetExists(font.id, true); });
-                        }
-                        else {
-                            fontsToFetch = fonts.filter(function (font) { return !stylesheetExists(font.id, false); });
-                        }
-                        return [4, getStylesheet(fonts, scripts, variants, previewsOnly)];
+                        fontsArray = Array.from(fonts.values());
+                        fontsToFetch = fontsArray
+                            .map(function (font) { return font.id; })
+                            .filter(function (fontId) { return !stylesheetExists(fontId, false) && !stylesheetExists(fontId, true); });
+                        return [4, getStylesheet(fontsArray, scripts, variants, true)];
                     case 1:
                         response = _a.sent();
                         fontStyles = extractFontStyles(response);
-                        fontsToFetch.forEach(function (font) {
-                            if (!(font.id in fontStyles)) {
-                                console.error("Missing styles for font \"" + font.family + "\" (fontId \"" + font.id + "\") in Google Fonts response");
-                                return;
-                            }
-                            if (!previewsOnly) {
-                                if (stylesheetExists(font.id, true)) {
-                                    deleteStylesheet(font.id);
+                        fontsArray.forEach(function (font) {
+                            applyFontPreview(font, selectorSuffix);
+                            if (fontsToFetch.includes(font.id)) {
+                                if (!(font.id in fontStyles)) {
+                                    console.error("Missing styles for font \"" + font.family + "\" (fontId \"" + font.id + "\") in Google Fonts response");
+                                    return;
                                 }
+                                createStylesheet(font.id, fontStyles[font.id], true);
                             }
-                            createStylesheet(font.id, fontStyles[font.id], previewsOnly);
                         });
@@ -233,22 +249,25 @@ return [2];
     }
-
-    var activeFontStylesheet = document.createElement("style");
-    var previewFontsStylesheet = document.createElement("style");
-    document.head.appendChild(activeFontStylesheet);
-    document.head.appendChild(previewFontsStylesheet);
-    function applyFontPreview(previewFont, selectorSuffix) {
-        var fontId = getFontId(previewFont.family);
-        var style = "\n\t\t\t#font-button-" + fontId + selectorSuffix + " {\n\t\t\t\tfont-family: \"" + previewFont.family + "\";\n\t\t\t}\n\t\t";
-        previewFontsStylesheet.appendChild(document.createTextNode(style));
+    function loadActiveFont(font, previousFontFamily, scripts, variants, selectorSuffix) {
+        return __awaiter(this, void 0, void 0, function () {
+            var fontStyle;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!stylesheetExists(font.id, false)) return [3, 1];
+                        applyActiveFont(font, previousFontFamily, selectorSuffix);
+                        return [3, 3];
+                    case 1: return [4, getStylesheet([font], scripts, variants, false)];
+                    case 2:
+                        fontStyle = _a.sent();
+                        if (stylesheetExists(font.id, true)) {
+                            deleteStylesheet(font.id);
+                        }
+                        applyActiveFont(font, previousFontFamily, selectorSuffix);
+                        createStylesheet(font.id, fontStyle, false);
+                        _a.label = 3;
+                    case 3: return [2];
+                }
+            });
+        });
     }
-    function applyActiveFont(activeFont, selectorSuffix) {
-        var style = "\n\t\t.apply-font" + selectorSuffix + " {\n\t\t\tfont-family: \"" + activeFont.family + "\";\n\t\t}\n\t";
-        var styleNode = document.createTextNode(style);
-        if (activeFontStylesheet.childNodes.length === 0) {
-            activeFontStylesheet.appendChild(styleNode);
-        }
-        else {
-            activeFontStylesheet.replaceChild(styleNode, activeFontStylesheet.childNodes[0]);
-        }
-    }
 
@@ -279,3 +298,2 @@ function validatePickerId(pickerId) {
             this.onChange = onChange;
-            this.activeFontFamily = defaultFamily;
             this.addFont(defaultFamily, false);
@@ -286,3 +304,3 @@ this.setActiveFont(defaultFamily);
             return __awaiter(this, void 0, void 0, function () {
-                var fonts, _loop_1, this_1, i, state_1;
+                var fonts, _loop_1, this_1, i, state_1, fontsToLoad;
                 return __generator(this, function (_a) {
@@ -312,3 +330,5 @@ switch (_a.label) {
                             }
-                            this.downloadFontPreviews(Array.from(this.fonts.values()).slice(1));
+                            fontsToLoad = new Map(this.fonts);
+                            fontsToLoad.delete(this.activeFontFamily);
+                            loadFontPreviews(fontsToLoad, this.options.scripts, this.options.variants, this.selectorSuffix);
                             return [2, this.fonts];
@@ -319,9 +339,2 @@ }
         };
-        FontManager.prototype.downloadFontPreviews = function (fonts) {
-            var _this = this;
-            loadFonts(fonts, this.options.scripts, this.options.variants, true);
-            fonts.forEach(function (font) {
-                applyFontPreview(font, _this.selectorSuffix);
-            });
-        };
         FontManager.prototype.getFonts = function () {
@@ -338,3 +351,5 @@ return this.fonts;
             if (downloadPreview) {
-                this.downloadFontPreviews([font]);
+                var fontMap = new Map();
+                fontMap.set(fontFamily, font);
+                loadFontPreviews(fontMap, this.options.scripts, this.options.variants, this.selectorSuffix);
             }
@@ -354,8 +369,6 @@ };
             }
+            var previousFontFamily = this.activeFontFamily;
             var activeFont = this.fonts.get(fontFamily);
             this.activeFontFamily = fontFamily;
-            loadFonts([activeFont], this.options.scripts, this.options.variants, false).then(function () {
-                return _this.onChange(activeFont);
-            });
-            applyActiveFont(activeFont, this.selectorSuffix);
+            loadActiveFont(activeFont, previousFontFamily, this.options.scripts, this.options.variants, this.selectorSuffix).then(function () { return _this.onChange(activeFont); });
         };
@@ -362,0 +375,0 @@ return FontManager;

dist/font-manager/font-manager/loadFonts.d.ts

@@ -1,3 +0,4 @@
-import { Font, Script, Variant } from "../shared/types";
-export default function loadFonts(fonts: Font[], scripts: Script[], variants: Variant[], previewsOnly: boolean): Promise<void>;
+import { Font, FontList, Script, Variant } from "../shared/types";
+export declare function loadFontPreviews(fonts: FontList, scripts: Script[], variants: Variant[], selectorSuffix: string): Promise<void>;
+export declare function loadActiveFont(font: Font, previousFontFamily: string, scripts: Script[], variants: Variant[], selectorSuffix: string): Promise<void>;
 //# sourceMappingURL=loadFonts.d.ts.map

dist/font-manager/font-manager/styles/declarations.d.ts

 import { Font } from "../../shared/types";
 export declare function applyFontPreview(previewFont: Font, selectorSuffix: string): void;
-export declare function applyActiveFont(activeFont: Font, selectorSuffix: string): void;
+export declare function applyActiveFont(activeFont: Font, previousFontFamily: string, selectorSuffix: string): void;
 //# sourceMappingURL=declarations.d.ts.map

dist/font-picker/font-manager/FontManager.d.ts

@@ -11,3 +11,2 @@ import { Font, FontList, Options } from "../shared/types";
     init(): Promise<FontList>;
-    private downloadFontPreviews;
     getFonts(): FontList;
@@ -14,0 +13,0 @@ addFont(fontFamily: string, downloadPreview?: boolean): void;

dist/font-picker/font-manager/loadFonts.d.ts

@@ -1,3 +0,4 @@
-import { Font, Script, Variant } from "../shared/types";
-export default function loadFonts(fonts: Font[], scripts: Script[], variants: Variant[], previewsOnly: boolean): Promise<void>;
+import { Font, FontList, Script, Variant } from "../shared/types";
+export declare function loadFontPreviews(fonts: FontList, scripts: Script[], variants: Variant[], selectorSuffix: string): Promise<void>;
+export declare function loadActiveFont(font: Font, previousFontFamily: string, scripts: Script[], variants: Variant[], selectorSuffix: string): Promise<void>;
 //# sourceMappingURL=loadFonts.d.ts.map

dist/font-picker/font-manager/styles/declarations.d.ts

 import { Font } from "../../shared/types";
 export declare function applyFontPreview(previewFont: Font, selectorSuffix: string): void;
-export declare function applyActiveFont(activeFont: Font, selectorSuffix: string): void;
+export declare function applyActiveFont(activeFont: Font, previousFontFamily: string, selectorSuffix: string): void;
 //# sourceMappingURL=declarations.d.ts.map

dist/font-picker/font-picker/FontPicker.js

@@ -176,2 +176,22 @@ (function (global, factory) {
 
+    var activeFontStylesheet = document.createElement("style");
+    var previewFontsStylesheet = document.createElement("style");
+    document.head.appendChild(activeFontStylesheet);
+    document.head.appendChild(previewFontsStylesheet);
+    function applyFontPreview(previewFont, selectorSuffix) {
+        var fontId = getFontId(previewFont.family);
+        var style = "\n\t\t\t#font-button-" + fontId + selectorSuffix + " {\n\t\t\t\tfont-family: \"" + previewFont.family + "\";\n\t\t\t}\n\t\t";
+        previewFontsStylesheet.appendChild(document.createTextNode(style));
+    }
+    function applyActiveFont(activeFont, previousFontFamily, selectorSuffix) {
+        var style = "\n\t\t.apply-font" + selectorSuffix + " {\n\t\t\tfont-family: \"" + activeFont.family + "\"" + (previousFontFamily ? ", \"" + previousFontFamily + "\"" : "") + ";\n\t\t}\n\t";
+        var styleNode = document.createTextNode(style);
+        if (activeFontStylesheet.childNodes.length === 0) {
+            activeFontStylesheet.appendChild(styleNode);
+        }
+        else {
+            activeFontStylesheet.replaceChild(styleNode, activeFontStylesheet.childNodes[0]);
+        }
+    }
+
     var PREVIEW_ATTRIBUTE_NAME = "data-is-preview";
@@ -199,29 +219,25 @@ function getStylesheetId(fontId) {
 
-    function loadFonts(fonts, scripts, variants, previewsOnly) {
+    function loadFontPreviews(fonts, scripts, variants, selectorSuffix) {
         return __awaiter(this, void 0, void 0, function () {
-            var fontsToFetch, response, fontStyles;
+            var fontsArray, fontsToFetch, response, fontStyles;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        if (previewsOnly) {
-                            fontsToFetch = fonts.filter(function (font) { return !stylesheetExists(font.id, false) && !stylesheetExists(font.id, true); });
-                        }
-                        else {
-                            fontsToFetch = fonts.filter(function (font) { return !stylesheetExists(font.id, false); });
-                        }
-                        return [4, getStylesheet(fonts, scripts, variants, previewsOnly)];
+                        fontsArray = Array.from(fonts.values());
+                        fontsToFetch = fontsArray
+                            .map(function (font) { return font.id; })
+                            .filter(function (fontId) { return !stylesheetExists(fontId, false) && !stylesheetExists(fontId, true); });
+                        return [4, getStylesheet(fontsArray, scripts, variants, true)];
                     case 1:
                         response = _a.sent();
                         fontStyles = extractFontStyles(response);
-                        fontsToFetch.forEach(function (font) {
-                            if (!(font.id in fontStyles)) {
-                                console.error("Missing styles for font \"" + font.family + "\" (fontId \"" + font.id + "\") in Google Fonts response");
-                                return;
-                            }
-                            if (!previewsOnly) {
-                                if (stylesheetExists(font.id, true)) {
-                                    deleteStylesheet(font.id);
+                        fontsArray.forEach(function (font) {
+                            applyFontPreview(font, selectorSuffix);
+                            if (fontsToFetch.includes(font.id)) {
+                                if (!(font.id in fontStyles)) {
+                                    console.error("Missing styles for font \"" + font.family + "\" (fontId \"" + font.id + "\") in Google Fonts response");
+                                    return;
                                 }
+                                createStylesheet(font.id, fontStyles[font.id], true);
                             }
-                            createStylesheet(font.id, fontStyles[font.id], previewsOnly);
                         });
@@ -233,22 +249,25 @@ return [2];
     }
-
-    var activeFontStylesheet = document.createElement("style");
-    var previewFontsStylesheet = document.createElement("style");
-    document.head.appendChild(activeFontStylesheet);
-    document.head.appendChild(previewFontsStylesheet);
-    function applyFontPreview(previewFont, selectorSuffix) {
-        var fontId = getFontId(previewFont.family);
-        var style = "\n\t\t\t#font-button-" + fontId + selectorSuffix + " {\n\t\t\t\tfont-family: \"" + previewFont.family + "\";\n\t\t\t}\n\t\t";
-        previewFontsStylesheet.appendChild(document.createTextNode(style));
+    function loadActiveFont(font, previousFontFamily, scripts, variants, selectorSuffix) {
+        return __awaiter(this, void 0, void 0, function () {
+            var fontStyle;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!stylesheetExists(font.id, false)) return [3, 1];
+                        applyActiveFont(font, previousFontFamily, selectorSuffix);
+                        return [3, 3];
+                    case 1: return [4, getStylesheet([font], scripts, variants, false)];
+                    case 2:
+                        fontStyle = _a.sent();
+                        if (stylesheetExists(font.id, true)) {
+                            deleteStylesheet(font.id);
+                        }
+                        applyActiveFont(font, previousFontFamily, selectorSuffix);
+                        createStylesheet(font.id, fontStyle, false);
+                        _a.label = 3;
+                    case 3: return [2];
+                }
+            });
+        });
     }
-    function applyActiveFont(activeFont, selectorSuffix) {
-        var style = "\n\t\t.apply-font" + selectorSuffix + " {\n\t\t\tfont-family: \"" + activeFont.family + "\";\n\t\t}\n\t";
-        var styleNode = document.createTextNode(style);
-        if (activeFontStylesheet.childNodes.length === 0) {
-            activeFontStylesheet.appendChild(styleNode);
-        }
-        else {
-            activeFontStylesheet.replaceChild(styleNode, activeFontStylesheet.childNodes[0]);
-        }
-    }
 
@@ -279,3 +298,2 @@ function validatePickerId(pickerId) {
             this.onChange = onChange;
-            this.activeFontFamily = defaultFamily;
             this.addFont(defaultFamily, false);
@@ -286,3 +304,3 @@ this.setActiveFont(defaultFamily);
             return __awaiter(this, void 0, void 0, function () {
-                var fonts, _loop_1, this_1, i, state_1;
+                var fonts, _loop_1, this_1, i, state_1, fontsToLoad;
                 return __generator(this, function (_a) {
@@ -312,3 +330,5 @@ switch (_a.label) {
                             }
-                            this.downloadFontPreviews(Array.from(this.fonts.values()).slice(1));
+                            fontsToLoad = new Map(this.fonts);
+                            fontsToLoad.delete(this.activeFontFamily);
+                            loadFontPreviews(fontsToLoad, this.options.scripts, this.options.variants, this.selectorSuffix);
                             return [2, this.fonts];
@@ -319,9 +339,2 @@ }
         };
-        FontManager.prototype.downloadFontPreviews = function (fonts) {
-            var _this = this;
-            loadFonts(fonts, this.options.scripts, this.options.variants, true);
-            fonts.forEach(function (font) {
-                applyFontPreview(font, _this.selectorSuffix);
-            });
-        };
         FontManager.prototype.getFonts = function () {
@@ -338,3 +351,5 @@ return this.fonts;
             if (downloadPreview) {
-                this.downloadFontPreviews([font]);
+                var fontMap = new Map();
+                fontMap.set(fontFamily, font);
+                loadFontPreviews(fontMap, this.options.scripts, this.options.variants, this.selectorSuffix);
             }
@@ -354,8 +369,6 @@ };
             }
+            var previousFontFamily = this.activeFontFamily;
             var activeFont = this.fonts.get(fontFamily);
             this.activeFontFamily = fontFamily;
-            loadFonts([activeFont], this.options.scripts, this.options.variants, false).then(function () {
-                return _this.onChange(activeFont);
-            });
-            applyActiveFont(activeFont, this.selectorSuffix);
+            loadActiveFont(activeFont, previousFontFamily, this.options.scripts, this.options.variants, this.selectorSuffix).then(function () { return _this.onChange(activeFont); });
         };
@@ -362,0 +375,0 @@ return FontManager;

package.json

 {
 	"name": "font-picker",
-	"version": "3.0.0",
+	"version": "3.0.1",
 	"description": "Font selector component for Google Fonts",
@@ -5,0 +5,0 @@ "author": "Samuel Meuli <[e-mail]>",

README.md

@@ -10,3 +10,3 @@ # Font Picker
 
-→ **[Examples](https://samuelmeuli.github.io/font-picker)**
+→ **[Demo](https://samuelmeuli.github.io/font-picker)**
 
@@ -40,3 +40,3 @@ _If you use React, see [**Font Picker for React**](https://github.com/samuelmeuli/font-picker-react)._
 
-- **Using NPM:** If you're using a module bundler like Webpack, you can install the `font-picker` package from NPM and import it in your code:
+- **Using NPM:** If you're using a module bundler like Webpack, you can install the `font-picker` package using NPM and import it in your code:
 
@@ -43,0 +43,0 @@ ```sh

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

123645

increased by3.9%

Lines of code

1036

increased by2.57%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes