Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
font-picker
Advanced tools
font-picker - npm Package Compare versions
Comparing version 3.0.0 to 3.0.1
@@ -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; |
@@ -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; |
@@ -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 |
| 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 |
@@ -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; |
@@ -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 |
| 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 |
@@ -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; |
| { | ||
| "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 <me@samuelmeuli.com>", |
@@ -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 |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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 riskPackage 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
- increased by3.9%
123645
- Lines of code
- increased by2.57%
1036
- Number of medium supply chain risk alerts
- decreased by-100%
0
No dependency changes