font-picker
Advanced tools
font-picker - npm Package Compare versions
Comparing version 1.0.3 to 1.1.0
@@ -72,14 +72,23 @@ (function (global, factory) { | ||
| /** | ||
| * Fetch list of all fonts available on Google Fonts, sorted by popularity | ||
| */ | ||
| function fetchFontList(apiKey) { | ||
| return new Promise(function (resolve, reject) { | ||
| return window.fetch('https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key=' + apiKey).then(function (response) { | ||
| return response.json(); | ||
| }).then(function (json) { | ||
| return resolve(json.items); | ||
| }).catch(function (err) { | ||
| return reject(err); | ||
| }); | ||
| var url = 'https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key=' + apiKey; | ||
| var request = new XMLHttpRequest(); | ||
| request.overrideMimeType('application/json'); | ||
| request.open('GET', url, true); | ||
| request.onreadystatechange = function () { | ||
| // request has completed | ||
| if (request.readyState === 4) { | ||
| // success | ||
| if (request.status === 200) { | ||
| var response = JSON.parse(request.responseText); | ||
| return resolve(response.items); | ||
| } | ||
| // error | ||
| else { | ||
| return reject(new Error('Response has status code ' + request.status)); | ||
| } | ||
| } | ||
| }; | ||
| request.send(); | ||
| }); | ||
@@ -220,8 +229,2 @@ } | ||
| /** | ||
| * Class responsible for retrieving and filtering/sorting the font list, keeping track of the active | ||
| * font, and downloading and applying fonts and font previews | ||
| * @see FontPicker.js (same parameters) | ||
| */ | ||
| var FontHandler = function () { | ||
@@ -394,28 +397,5 @@ | ||
| var css = "#font-picker {\n display: inline-block;\n width: 200px;\n position: relative;\n box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); }\n #font-picker * {\n box-sizing: border-box; }\n #font-picker p {\n margin: 0;\n padding: 0; }\n #font-picker a {\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n outline: none; }\n #font-picker #dropdown-button {\n height: 35px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 10px;\n background-color: #CBCBCB; }\n #font-picker #dropdown-button:hover, #font-picker #dropdown-button.expanded, #font-picker #dropdown-button:focus {\n background-color: #bebebe; }\n #font-picker ul {\n max-height: 0;\n width: 100%;\n position: absolute;\n z-index: 1;\n overflow-x: hidden;\n overflow-y: auto;\n margin: 0;\n padding: 0;\n background-color: #EAEAEA;\n transition: 0.3s;\n box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);\n -webkit-overflow-scrolling: touch; }\n #font-picker ul.expanded {\n max-height: 200px; }\n #font-picker ul li {\n height: 35px;\n list-style: none; }\n #font-picker ul li a {\n height: 100%;\n display: flex;\n align-items: center;\n padding: 0 10px;\n white-space: nowrap;\n width: 100%; }\n #font-picker ul li a:hover, #font-picker ul li a:focus {\n background-color: #dddddd; }\n #font-picker ul li a.active-font {\n background-color: #d1d1d1; }\n"; | ||
| var css = "@charset \"UTF-8\";\n#font-picker {\n display: inline-block;\n width: 200px;\n position: relative;\n box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); }\n #font-picker * {\n box-sizing: border-box; }\n #font-picker p {\n margin: 0;\n padding: 0; }\n #font-picker a {\n color: inherit;\n text-decoration: none;\n cursor: pointer;\n outline: none; }\n #font-picker #dropdown-button {\n height: 35px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 10px;\n background-color: #CBCBCB; }\n #font-picker #dropdown-button:hover, #font-picker #dropdown-button.expanded, #font-picker #dropdown-button:focus {\n background-color: #bebebe; }\n\n@keyframes spinner {\n to {\n transform: rotate(360deg); } }\n #font-picker #dropdown-button .dropdown-icon.loading:before {\n content: '';\n display: block;\n height: 10px;\n width: 10px;\n border-radius: 50%;\n border: 2px solid #b2b2b2;\n border-top-color: black;\n animation: spinner 0.6s linear infinite; }\n #font-picker #dropdown-button .dropdown-icon.finished:before {\n content: '▾'; }\n #font-picker #dropdown-button .dropdown-icon.error:before {\n content: '⚠'; }\n #font-picker ul {\n max-height: 0;\n width: 100%;\n position: absolute;\n z-index: 1;\n overflow-x: hidden;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n margin: 0;\n padding: 0;\n background-color: #EAEAEA;\n transition: 0.3s;\n box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); }\n #font-picker ul.expanded {\n max-height: 200px; }\n #font-picker ul li {\n height: 35px;\n list-style: none; }\n #font-picker ul li a {\n height: 100%;\n display: flex;\n align-items: center;\n padding: 0 10px;\n white-space: nowrap;\n width: 100%; }\n #font-picker ul li a:hover, #font-picker ul li a:focus {\n background-color: #dddddd; }\n #font-picker ul li a.active-font {\n background-color: #d1d1d1; }\n"; | ||
| __$$styleInject(css); | ||
| /** | ||
| * Font picker interface | ||
| * @param {string} apiKey (required) - Google API key (can be generated at | ||
| * https://developers.google.com/fonts/docs/developer_api) | ||
| * @param {string} defaultFont - Font that is selected on initialization (default: 'Open Sans') | ||
| * @param {Object} options - Object with additional (optional) parameters: | ||
| * @param {string[]} families - If only specific fonts shall appear in the list, specify their | ||
| * names in an array | ||
| * @param {string[]} categories - Array of font categories | ||
| * Possible values: 'sans-serif', 'serif', 'display', 'handwriting', 'monospace' (default: | ||
| * all categories) | ||
| * @param {string[]} variants - Array of variants which the fonts must include and which will be | ||
| * downloaded; the first variant in the array will become the default variant (and will be | ||
| * used in the font picker and the .apply-font class) | ||
| * Example: ['regular', 'italic', '700', '700italic'] (default: ['regular']) | ||
| * @param {number} limit - Maximum number of fonts to be displayed in the list (the least popular | ||
| * fonts will be omitted; default: 100) | ||
| * @param {string} sort - Sorting attribute for the font list | ||
| * Possible values: 'alphabetical' (default), 'popularity' | ||
| * @param {function} onChange - Function which is executed whenever the user changes the active | ||
| * font and its stylesheet finishes downloading | ||
| */ | ||
| var FontPicker = function () { | ||
@@ -507,2 +487,4 @@ function FontPicker(apiKey, defaultFont) { | ||
| var dropdownIcon = document.createElement('p'); | ||
| dropdownIcon.classList.add('dropdown-icon', 'loading'); | ||
| this.dropdownButton.append(dropdownIcon); | ||
@@ -514,4 +496,4 @@ // HTML for font list | ||
| this.fontHandler.init().then(function () { | ||
| dropdownIcon.innerHTML = '▾'; | ||
| _this.dropdownButton.append(dropdownIcon); | ||
| dropdownIcon.classList.remove('loading'); | ||
| dropdownIcon.classList.add('finished'); | ||
@@ -556,4 +538,4 @@ // HTML for font list entries | ||
| }).catch(function (err) { | ||
| dropdownIcon.innerHTML = '⚠'; | ||
| _this.dropdownButton.append(dropdownIcon); | ||
| dropdownIcon.classList.remove('loading'); | ||
| dropdownIcon.classList.add('error'); | ||
| var errMessage = 'Error trying to fetch the list of available fonts'; | ||
@@ -560,0 +542,0 @@ console.error(errMessage); |
| { | ||
| "name": "font-picker", | ||
| "version": "1.0.3", | ||
| "version": "1.1.0", | ||
| "description": "Font picker component for previewing, selecting, and downloading Google Fonts", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
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
Worsened metrics
- Total package byte prevSize
- decreased by-2.43%
28077
- Lines of code
- decreased by-2.55%
536
No dependency changes