font-picker-react - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

lib/FontPicker.es.js

 import React, { Component } from 'react';
+import throttle from 'lodash.throttle';
 import { FontManager } from 'font-picker';
@@ -73,28 +74,6 @@
 
+var THROTTLE_INTERVAL = 250;
 /**
  * React interface for the font picker
- * @prop {string} apiKey (required) - Google API key
- * @prop {string} activeFont - Font that should be selected in the font picker and applied to the
- * text (default: 'Open Sans'). Must be stored in component state, and be updated using an onChange
- * listener. See README.md for an example.
- * @prop {Object} options - Object with additional (optional) parameters:
- *   @prop {string} name - If you have multiple font pickers on your site, you need to give them
- *   unique names (which may only consist of letters and digits). These names must also be appended
- *   to the font picker's ID and the .apply-font class name.
- *   Example: If { name: 'main' }, use #font-picker-main and .apply-font-main
- *   @prop {string[]} families - If only specific fonts shall appear in the list, specify their
- *   names in an array
- *   @prop {string[]} categories - Array of font categories
- *   Possible values: 'sans-serif', 'serif', 'display', 'handwriting', 'monospace' (default: all
- *   categories)
- *   @prop {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'])
- *   @prop {number} limit - Maximum number of fonts to be displayed in the list (the least popular
- *   fonts will be omitted; default: 100)
- *   @prop {string} sort - Sorting attribute for the font list
- *   Possible values: 'alphabetical' (default), 'popularity'
- * @prop {function} onChange - Function which is executed whenever the user changes the active font
- * and its stylesheet finishes downloading
+ * @see README.md
  */
@@ -148,5 +127,6 @@
 
-    _this.setActiveFont = _this.setActiveFont.bind(_assertThisInitialized(_assertThisInitialized(_this)));
     _this.onClose = _this.onClose.bind(_assertThisInitialized(_assertThisInitialized(_this)));
     _this.onScroll = _this.onScroll.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.setActiveFont = _this.setActiveFont.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.downloadPreviews = throttle(_this.downloadPreviews.bind(_assertThisInitialized(_assertThisInitialized(_this))), THROTTLE_INTERVAL);
     _this.toggleExpanded = _this.toggleExpanded.bind(_assertThisInitialized(_assertThisInitialized(_this)));
@@ -191,3 +171,3 @@ return _this;
     /**
-     * Download the font previews for all visible font entries and the five after them
+     * Scroll event handler
      */
@@ -198,5 +178,4 @@
     value: function onScroll(e) {
-      var elementHeight = e.target.scrollHeight / this.fontManager.fonts.length;
-      var downloadIndex = Math.ceil((e.target.scrollTop + e.target.clientHeight) / elementHeight);
-      this.fontManager.downloadPreviews(downloadIndex + 5);
+      e.persist();
+      this.downloadPreviews(e);
     }
@@ -230,2 +209,14 @@ /**
     /**
+     * Download the font previews for all visible font entries and the five after them
+     */
+
+  }, {
+    key: "downloadPreviews",
+    value: function downloadPreviews(e) {
+      console.log('dl');
+      var elementHeight = e.target.scrollHeight / this.fontManager.fonts.length;
+      var downloadIndex = Math.ceil((e.target.scrollTop + e.target.clientHeight) / elementHeight);
+      this.fontManager.downloadPreviews(downloadIndex + 5);
+    }
+    /**
      * Expand/collapse the picker's font list
@@ -304,2 +295,1 @@ */
 export default FontPicker;
-//# sourceMappingURL=FontPicker.es.js.map

lib/FontPicker.js

@@ -7,2 +7,3 @@ 'use strict';
 var React__default = _interopDefault(React);
+var throttle = _interopDefault(require('lodash.throttle'));
 var fontPicker = require('font-picker');
@@ -79,28 +80,6 @@
 
+var THROTTLE_INTERVAL = 250;
 /**
  * React interface for the font picker
- * @prop {string} apiKey (required) - Google API key
- * @prop {string} activeFont - Font that should be selected in the font picker and applied to the
- * text (default: 'Open Sans'). Must be stored in component state, and be updated using an onChange
- * listener. See README.md for an example.
- * @prop {Object} options - Object with additional (optional) parameters:
- *   @prop {string} name - If you have multiple font pickers on your site, you need to give them
- *   unique names (which may only consist of letters and digits). These names must also be appended
- *   to the font picker's ID and the .apply-font class name.
- *   Example: If { name: 'main' }, use #font-picker-main and .apply-font-main
- *   @prop {string[]} families - If only specific fonts shall appear in the list, specify their
- *   names in an array
- *   @prop {string[]} categories - Array of font categories
- *   Possible values: 'sans-serif', 'serif', 'display', 'handwriting', 'monospace' (default: all
- *   categories)
- *   @prop {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'])
- *   @prop {number} limit - Maximum number of fonts to be displayed in the list (the least popular
- *   fonts will be omitted; default: 100)
- *   @prop {string} sort - Sorting attribute for the font list
- *   Possible values: 'alphabetical' (default), 'popularity'
- * @prop {function} onChange - Function which is executed whenever the user changes the active font
- * and its stylesheet finishes downloading
+ * @see README.md
  */
@@ -154,5 +133,6 @@
 
-    _this.setActiveFont = _this.setActiveFont.bind(_assertThisInitialized(_assertThisInitialized(_this)));
     _this.onClose = _this.onClose.bind(_assertThisInitialized(_assertThisInitialized(_this)));
     _this.onScroll = _this.onScroll.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.setActiveFont = _this.setActiveFont.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.downloadPreviews = throttle(_this.downloadPreviews.bind(_assertThisInitialized(_assertThisInitialized(_this))), THROTTLE_INTERVAL);
     _this.toggleExpanded = _this.toggleExpanded.bind(_assertThisInitialized(_assertThisInitialized(_this)));
@@ -197,3 +177,3 @@ return _this;
     /**
-     * Download the font previews for all visible font entries and the five after them
+     * Scroll event handler
      */
@@ -204,5 +184,4 @@
     value: function onScroll(e) {
-      var elementHeight = e.target.scrollHeight / this.fontManager.fonts.length;
-      var downloadIndex = Math.ceil((e.target.scrollTop + e.target.clientHeight) / elementHeight);
-      this.fontManager.downloadPreviews(downloadIndex + 5);
+      e.persist();
+      this.downloadPreviews(e);
     }
@@ -236,2 +215,14 @@ /**
     /**
+     * Download the font previews for all visible font entries and the five after them
+     */
+
+  }, {
+    key: "downloadPreviews",
+    value: function downloadPreviews(e) {
+      console.log('dl');
+      var elementHeight = e.target.scrollHeight / this.fontManager.fonts.length;
+      var downloadIndex = Math.ceil((e.target.scrollTop + e.target.clientHeight) / elementHeight);
+      this.fontManager.downloadPreviews(downloadIndex + 5);
+    }
+    /**
      * Expand/collapse the picker's font list
@@ -310,2 +301,1 @@ */
 module.exports = FontPicker;
-//# sourceMappingURL=FontPicker.js.map

package.json

 {
 	"name": "font-picker-react",
-	"version": "2.1.0",
+	"version": "2.2.0",
 	"description": "Font selector component for Google Fonts",
@@ -32,3 +32,4 @@ "keywords": [
 	"dependencies": {
-		"font-picker": "^2.1.0"
+		"font-picker": "^2.1.0",
+		"lodash.throttle": "^4.1.1"
 	},
@@ -53,3 +54,3 @@ "peerDependencies": {
 		"react-dom": "^16.4.2",
-		"rollup": "^0.67.1",
+		"rollup": "^1.1.0",
 		"rollup-plugin-babel": "^4.0.3"
@@ -56,0 +57,0 @@ },

README.md

@@ -5,2 +5,3 @@ # Font Picker for React
 
+* Simple setup
 * Automatic font download and generation of the required CSS styles
@@ -73,14 +74,14 @@ * Efficient font previews (previews are loaded dynamically and full fonts are only downloaded on selection)
 * **`apiKey` (required)**: Google API key (can be generated [here](https://developers.google.com/fonts/docs/developer_api#APIKey))
-* **`activeFont`**: Font that should be selected in the font picker and applied to the text (default: `'Open Sans'`). Must be stored in component state, and be updated using an `onChange` listener
-* **`options`**: Object with additional (optional) parameters:
-  * **`name`**: If you have multiple font pickers on your site, you need to give them unique names (which may only consist of letters and digits). These names must also be appended to the font picker's ID and the `.apply-font` class name; e.g. if `{ name: 'main' }`, use `#font-picker-main` and `.apply-font-main`
+* **`defaultFont`**: Font that is selected on initialization (default: `'Open Sans'`)
+* **`options`**: Object with additional optional parameters:
+  * **`name`**: If you have multiple font pickers on your site, you need to give them unique names (which may only consist of letters and digits). These names must also be appended to the font picker's ID and the `.apply-font` class name. Example: If `options = { name: 'main' }`, use `#font-picker-main` and `.apply-font-main`
   * **`families`**: If only specific fonts shall appear in the list, specify their names in an array (default: all font families)
   * **`categories`**: Array of font categories – possible values: `'sans-serif', 'serif', 'display', handwriting', 'monospace'` (default: all categories)
-  * **`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); e.g. `['regular', 'italic', '700', '700italic']` (default: `['regular']`)
+  * **`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']`)
   * **`limit`**: Maximum number of fonts to be displayed in the list (the least popular fonts will be omitted; default: `100`)
   * **`sort`**: Sorting attribute for the font list – possible values: `'alphabetical'` (default), `'popularity'`
-* **`onChange`**: Function which is executed whenever the user changes the active font and its stylesheet finishes downloading
+* **`onChange`**: Function which is executed when the user changes the active font and its stylesheet has finished downloading
 
 
-## Contributing
+## Development
 
@@ -92,1 +93,3 @@ To build the project locally, do the following:
 * `yarn start` to generate the library bundle using [Rollup](https://github.com/rollup/rollup) and and start the [Storybook](https://github.com/storybooks/storybook) for testing the component interactively (`localhost:3000`)
+
+Suggestions and contributions are always welcome! Please first discuss changes via issue before submitting a pull request.

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

Number of lines in readme file

93

increased by3.33%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

24084

decreased by-51.82%

Dependency count

3

increased by50%

Number of package files

5

decreased by-28.57%

Lines of code

489

decreased by-4.31%

Dependency changes

• + Addedlodash.throttle@^4.1.1