font-picker - npm Package Compare versions

Comparing version 3.3.0 to 3.4.0

dist/FontPicker.d.ts

 import { Font, FontList, Options } from "@samuelmeuli/font-manager";
 export default class FontPicker {
     private activeFontButton;
-    private dropdownButton;
     private dropdownFamily;
@@ -6,0 +5,0 @@ private expanded;

dist/FontPicker.js

@@ -1,2 +0,183 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.FontPicker=e():t.FontPicker=e()}(window,function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(o,i,function(e){return t[e]}.bind(null,i));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(t,e){t.exports=require("@samuelmeuli/font-manager")},function(t,e,n){"use strict";n.r(e),n.d(e,"default",function(){return a});var o=n(0);function i(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var a=function(){function t(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:o.FONT_FAMILY_DEFAULT,i=arguments.length>2?arguments[2]:void 0,a=i.pickerId,s=void 0===a?o.OPTIONS_DEFAULTS.pickerId:a,c=i.families,d=void 0===c?o.OPTIONS_DEFAULTS.families:c,l=i.categories,f=void 0===l?o.OPTIONS_DEFAULTS.categories:l,u=i.scripts,h=void 0===u?o.OPTIONS_DEFAULTS.scripts:u,v=i.variants,p=void 0===v?o.OPTIONS_DEFAULTS.variants:v,g=i.limit,m=void 0===g?o.OPTIONS_DEFAULTS.limit:g,y=i.sort,F=void 0===y?o.OPTIONS_DEFAULTS.sort:y,b=arguments.length>3&&void 0!==arguments[3]?arguments[3]:function(){};!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),r(this,"activeFontButton",void 0),r(this,"dropdownButton",void 0),r(this,"dropdownFamily",void 0),r(this,"expanded",!1),r(this,"fontManager",void 0),r(this,"fontPickerDiv",void 0),r(this,"ul",void 0),this.closeEventListener=this.closeEventListener.bind(this),this.toggleExpanded=this.toggleExpanded.bind(this);var E={pickerId:s,families:d,categories:f,scripts:h,variants:p,limit:m,sort:F};this.fontManager=new o.FontManager(e,n,E,b),this.generateUI(F)}var e,n,a;return e=t,(n=[{key:"generateUI",value:function(t){var e=this,n=this.fontManager.selectorSuffix,o="font-picker".concat(n);if(this.fontPickerDiv=document.getElementById(o),!this.fontPickerDiv)throw Error('Missing div with id="'.concat(o,'"'));this.dropdownButton=document.createElement("button"),this.dropdownButton.classList.add("dropdown-button"),this.dropdownButton.onclick=this.toggleExpanded,this.dropdownButton.onkeypress=this.toggleExpanded,this.dropdownButton.type="button",this.fontPickerDiv.appendChild(this.dropdownButton),this.dropdownFamily=document.createElement("p"),this.dropdownFamily.textContent=this.fontManager.getActiveFont().family,this.dropdownFamily.classList.add("dropdown-font-family"),this.dropdownButton.appendChild(this.dropdownFamily);var i=document.createElement("p");i.classList.add("dropdown-icon","loading"),this.dropdownButton.appendChild(i),this.fontManager.init().then(function(n){var o=Array.from(n.values());"alphabet"===t&&o.sort(function(t,e){return t.family.localeCompare(e.family)}),e.generateFontList(o),i.classList.replace("loading","finished")}).catch(function(t){i.classList.replace("loading","error"),console.error("Error trying to fetch the list of available fonts"),console.error(t)})}},{key:"generateFontList",value:function(t){var e=this;this.ul=document.createElement("ul"),t.forEach(function(t){e.addFontLi(t)}),this.fontPickerDiv.appendChild(this.ul)}},{key:"addFontLi",value:function(t,e){var n=this,i=Object(o.getFontId)(t.family),r=document.createElement("li"),a=document.createElement("button");a.type="button",a.id="font-button-".concat(i).concat(this.fontManager.selectorSuffix),a.textContent=t.family;var s=function(){n.toggleExpanded(),n.setActiveFont(t.family)};a.onclick=s,a.onkeypress=s,r.appendChild(a),t.family===this.fontManager.getActiveFont().family&&(a.classList.add("active-font"),this.activeFontButton=a),e?this.ul.insertBefore(r,this.ul.children[e]):this.ul.appendChild(r)}},{key:"closeEventListener",value:function(t){for(var e=t.target,n=document.getElementById("font-picker".concat(this.fontManager.selectorSuffix));;){if(e===n)return;if(!e.parentNode)return void this.toggleExpanded();e=e.parentNode}}},{key:"toggleExpanded",value:function(){this.expanded?(this.expanded=!1,this.fontPickerDiv.classList.remove("expanded"),document.removeEventListener("click",this.closeEventListener)):(this.expanded=!0,this.fontPickerDiv.classList.add("expanded"),document.addEventListener("click",this.closeEventListener))}},{key:"getFonts",value:function(){return this.fontManager.getFonts()}},{key:"addFont",value:function(t,e){if(Array.from(this.fontManager.getFonts().keys()).includes(t))throw Error('Did not add font to font picker: Font family "'.concat(t,'" is already in the list'));this.fontManager.addFont(t,!0);var n=this.fontManager.getFonts().get(t);n?this.addFontLi(n,e):console.error('Font "'.concat(t,'" is missing in font list'))}},{key:"removeFont",value:function(t){this.fontManager.removeFont(t);var e=Object(o.getFontId)(t),n=document.getElementById("font-button-".concat(e).concat(this.fontManager.selectorSuffix));if(!n)throw Error('Could not remove font from font picker: Font family "'.concat(t,'" is not in the list'));var i=n.parentElement;n.remove(),i&&i.remove()}},{key:"getActiveFont",value:function(){return this.fontManager.getActiveFont()}},{key:"setActiveFont",value:function(t){this.fontManager.setActiveFont(t);var e=Object(o.getFontId)(t);this.dropdownFamily.textContent=t,this.activeFontButton.classList.remove("active-font"),this.activeFontButton=document.getElementById("font-button-".concat(e).concat(this.fontManager.selectorSuffix)),this.activeFontButton.classList.add("active-font")}},{key:"setOnChange",value:function(t){this.fontManager.setOnChange(t)}}])&&i(e.prototype,n),a&&i(e,a),t}()}])});
-//# sourceMappingURL=FontPicker.js.map
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@samuelmeuli/font-manager')) :
+	typeof define === 'function' && define.amd ? define(['@samuelmeuli/font-manager'], factory) :
+	(global = global || self, global.FontPicker = factory(global.FontManager));
+}(this, function (fontManager) { 'use strict';
+
+	class FontPicker {
+	    constructor(apiKey, defaultFamily = fontManager.FONT_FAMILY_DEFAULT, { pickerId = fontManager.OPTIONS_DEFAULTS.pickerId, families = fontManager.OPTIONS_DEFAULTS.families, categories = fontManager.OPTIONS_DEFAULTS.categories, scripts = fontManager.OPTIONS_DEFAULTS.scripts, variants = fontManager.OPTIONS_DEFAULTS.variants, limit = fontManager.OPTIONS_DEFAULTS.limit, sort = fontManager.OPTIONS_DEFAULTS.sort, }, onChange = () => { }) {
+	        this.expanded = false;
+	        this.closeEventListener = this.closeEventListener.bind(this);
+	        this.toggleExpanded = this.toggleExpanded.bind(this);
+	        const options = {
+	            pickerId,
+	            families,
+	            categories,
+	            scripts,
+	            variants,
+	            limit,
+	            sort,
+	        };
+	        this.fontManager = new fontManager.FontManager(apiKey, defaultFamily, options, onChange);
+	        this.generateUI(sort);
+	    }
+	    generateUI(sort) {
+	        const { selectorSuffix } = this.fontManager;
+	        const pickerId = `font-picker${selectorSuffix}`;
+	        this.fontPickerDiv = document.getElementById(pickerId);
+	        if (!this.fontPickerDiv) {
+	            throw Error(`Missing div with id="${pickerId}"`);
+	        }
+	        const dropdownButton = document.createElement("button");
+	        dropdownButton.classList.add("dropdown-button");
+	        dropdownButton.onclick = this.toggleExpanded;
+	        dropdownButton.onkeypress = this.toggleExpanded;
+	        dropdownButton.type = "button";
+	        this.fontPickerDiv.appendChild(dropdownButton);
+	        this.dropdownFamily = document.createElement("p");
+	        this.dropdownFamily.textContent = this.fontManager.getActiveFont().family;
+	        this.dropdownFamily.classList.add("dropdown-font-family");
+	        dropdownButton.appendChild(this.dropdownFamily);
+	        const dropdownIcon = document.createElement("p");
+	        dropdownIcon.classList.add("dropdown-icon", "loading");
+	        dropdownButton.appendChild(dropdownIcon);
+	        this.fontManager
+	            .init()
+	            .then((fontMap) => {
+	            const fonts = Array.from(fontMap.values());
+	            if (sort === "alphabet") {
+	                fonts.sort((font1, font2) => font1.family.localeCompare(font2.family));
+	            }
+	            this.generateFontList(fonts);
+	            dropdownIcon.classList.replace("loading", "finished");
+	        })
+	            .catch((err) => {
+	            dropdownIcon.classList.replace("loading", "error");
+	            console.error("Error trying to fetch the list of available fonts");
+	            console.error(err);
+	        });
+	    }
+	    generateFontList(fonts) {
+	        this.ul = document.createElement("ul");
+	        this.ul.classList.add("font-list");
+	        fonts.forEach((font) => {
+	            this.addFontLi(font);
+	        });
+	        this.fontPickerDiv.appendChild(this.ul);
+	        const activeFontFamily = this.fontManager.getActiveFont().family;
+	        const activeFontId = fontManager.getFontId(activeFontFamily);
+	        const fontButtonId = `font-button-${activeFontId}${this.fontManager.selectorSuffix}`;
+	        this.activeFontButton = document.getElementById(fontButtonId);
+	        if (this.activeFontButton) {
+	            this.activeFontButton.classList.add("active-font");
+	        }
+	        else {
+	            console.error(`Could not find font button with ID (${fontButtonId})`);
+	        }
+	    }
+	    addFontLi(font, listIndex) {
+	        const fontId = fontManager.getFontId(font.family);
+	        const li = document.createElement("li");
+	        li.classList.add("font-list-item");
+	        const fontButton = document.createElement("button");
+	        fontButton.type = "button";
+	        fontButton.id = `font-button-${fontId}${this.fontManager.selectorSuffix}`;
+	        fontButton.classList.add("font-button");
+	        fontButton.textContent = font.family;
+	        const onActivate = () => {
+	            this.toggleExpanded();
+	            this.setActiveFont(font.family);
+	        };
+	        fontButton.onclick = onActivate;
+	        fontButton.onkeypress = onActivate;
+	        li.appendChild(fontButton);
+	        if (listIndex) {
+	            this.ul.insertBefore(li, this.ul.children[listIndex]);
+	        }
+	        else {
+	            this.ul.appendChild(li);
+	        }
+	    }
+	    closeEventListener(e) {
+	        let targetEl = e.target;
+	        const fontPickerEl = document.getElementById(`font-picker${this.fontManager.selectorSuffix}`);
+	        while (true) {
+	            if (targetEl === fontPickerEl) {
+	                return;
+	            }
+	            if (targetEl.parentNode) {
+	                targetEl = targetEl.parentNode;
+	            }
+	            else {
+	                this.toggleExpanded();
+	                return;
+	            }
+	        }
+	    }
+	    toggleExpanded() {
+	        if (this.expanded) {
+	            this.expanded = false;
+	            this.fontPickerDiv.classList.remove("expanded");
+	            document.removeEventListener("click", this.closeEventListener);
+	        }
+	        else {
+	            this.expanded = true;
+	            this.fontPickerDiv.classList.add("expanded");
+	            document.addEventListener("click", this.closeEventListener);
+	        }
+	    }
+	    getFonts() {
+	        return this.fontManager.getFonts();
+	    }
+	    addFont(fontFamily, index) {
+	        if (Array.from(this.fontManager.getFonts().keys()).includes(fontFamily)) {
+	            throw Error(`Did not add font to font picker: Font family "${fontFamily}" is already in the list`);
+	        }
+	        this.fontManager.addFont(fontFamily, true);
+	        const font = this.fontManager.getFonts().get(fontFamily);
+	        if (font) {
+	            this.addFontLi(font, index);
+	        }
+	        else {
+	            console.error(`Font "${fontFamily}" is missing in font list`);
+	        }
+	    }
+	    removeFont(fontFamily) {
+	        this.fontManager.removeFont(fontFamily);
+	        const fontId = fontManager.getFontId(fontFamily);
+	        const fontButton = document.getElementById(`font-button-${fontId}${this.fontManager.selectorSuffix}`);
+	        if (fontButton) {
+	            const fontLi = fontButton.parentElement;
+	            fontButton.remove();
+	            if (fontLi) {
+	                fontLi.remove();
+	            }
+	        }
+	        else {
+	            throw Error(`Could not remove font from font picker: Font family "${fontFamily}" is not in the list`);
+	        }
+	    }
+	    getActiveFont() {
+	        return this.fontManager.getActiveFont();
+	    }
+	    setActiveFont(fontFamily) {
+	        this.fontManager.setActiveFont(fontFamily);
+	        const fontId = fontManager.getFontId(fontFamily);
+	        this.dropdownFamily.textContent = fontFamily;
+	        if (this.activeFontButton) {
+	            this.activeFontButton.classList.remove("active-font");
+	            this.activeFontButton = document.getElementById(`font-button-${fontId}${this.fontManager.selectorSuffix}`);
+	            this.activeFontButton.classList.add("active-font");
+	        }
+	        else {
+	            console.error("`activeFontButton` is undefined");
+	        }
+	    }
+	    setOnChange(onChange) {
+	        this.fontManager.setOnChange(onChange);
+	    }
+	}
+
+	return FontPicker;
+
+}));

package.json

 {
 	"name": "font-picker",
-	"version": "3.3.0",
+	"version": "3.4.0",
 	"description": "Font selector component for Google Fonts",
@@ -23,2 +23,3 @@ "author": {
 	"main": "./dist/FontPicker.js",
+	"module": "./dist/FontPicker.es.js",
 	"types": "./dist/FontPicker.d.ts",
@@ -30,8 +31,8 @@ "files": [
 		"start": "npm-run-all build:ts --parallel start:*",
-		"start:ts": "webpack --mode development --watch",
+		"start:ts": "rollup --config --sourcemap --watch",
 		"start:serve": "serve ./demo --listen 3000",
 		"build": "run-s build:*",
 		"build:clean": "rm -rf ./dist/ ./dist-browser/ ./demo/dist/",
-		"build:ts": "webpack --mode production",
-		"build:types": "tsc --emitDeclarationOnly",
+		"build:ts": "rollup --config",
+		"test": "tsc --noEmit",
 		"format": "prettier --write",
@@ -42,3 +43,2 @@ "lint:css": "stylelint --fix --max-warnings 0",
 		"lint:ts": "eslint --ext .ts,.tsx --fix --max-warnings 0",
-		"typecheck": "tsc --noEmit",
 		"version": "yarn build",
@@ -48,40 +48,27 @@ "release": "np"
 	"dependencies": {
-		"@samuelmeuli/font-manager": "^1.1.1"
+		"@samuelmeuli/font-manager": "^1.2.0"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.5.5",
-		"@babel/plugin-proposal-class-properties": "^7.5.5",
-		"@babel/preset-env": "^7.5.5",
-		"@babel/preset-typescript": "^7.3.3",
-		"@samuelmeuli/eslint-config": "^2.1.0",
+		"@samuelmeuli/eslint-config": "^3.0.1",
 		"@samuelmeuli/stylelint-config": "^1.0.2",
 		"@samuelmeuli/tsconfig": "^0.1.1",
-		"@typescript-eslint/eslint-plugin": "^1.4.2",
-		"@typescript-eslint/parser": "^1.4.2",
-		"babel-loader": "^8.0.6",
-		"eslint": "5.3.0",
-		"eslint-config-airbnb-base": "13.2.0",
-		"eslint-config-prettier": "^6.0.0",
-		"eslint-plugin-import": "^2.17.2",
-		"husky": "^3.0.2",
-		"lint-staged": "^9.2.1",
+		"@typescript-eslint/eslint-plugin": "^2.0.0",
+		"@typescript-eslint/parser": "^2.0.0",
+		"eslint": "6.1.0",
+		"eslint-config-airbnb-base": "14.0.0",
+		"eslint-config-prettier": "^6.1.0",
+		"eslint-plugin-import": "^2.18.2",
+		"eslint-plugin-simple-import-sort": "^4.0.0",
+		"husky": "^3.0.4",
+		"lint-staged": "^9.2.3",
 		"np": "^5.0.2",
 		"npm-run-all": "^4.1.3",
 		"prettier": "^1.16.4",
+		"rollup": "^1.19.4",
+		"rollup-plugin-node-resolve": "^5.2.0",
+		"rollup-plugin-typescript2": "^0.22.1",
 		"serve": "^11.0.0",
 		"stylelint": "^10.1.0",
-		"typescript": "^3.5.3",
-		"webpack": "^4.39.1",
-		"webpack-cli": "^3.3.6",
-		"webpack-node-externals": "^1.7.2"
+		"typescript": "^3.5.3"
 	},
-	"babel": {
-		"presets": [
-			"@babel/preset-env",
-			"@babel/preset-typescript"
-		],
-		"plugins": [
-			"@babel/plugin-proposal-class-properties"
-		]
-	},
 	"eslintConfig": {
@@ -130,5 +117,5 @@ "root": true,
 		"hooks": {
-			"pre-commit": "yarn typecheck && lint-staged"
+			"pre-commit": "yarn test && lint-staged"
 		}
 	}
 }

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

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

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

21

decreased by-16%

Lines of code

378

increased by687.5%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

25364

decreased by-31.36%

Dependency changes

• Updated@samuelmeuli/font-manager@^1.2.0