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.3.0 to 3.4.0
| import { Font, FontList, Options } from "@samuelmeuli/font-manager"; | ||
| export default class FontPicker { | ||
| private activeFontButton; | ||
| private dropdownButton; | ||
| private dropdownFamily; | ||
@@ -6,0 +5,0 @@ private expanded; |
@@ -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; | ||
| })); |
| { | ||
| "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" | ||
| } | ||
| } | ||
| } |
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
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
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
Minified code
QualityThis 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
- decreased by-16%
21
- Lines of code
- increased by687.5%
378
- Number of low quality alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-31.36%
25364