font-picker - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

lib/index.js

@@ -72,2 +72,5 @@ (function (global, factory) {
 
+/**
+ * Fetch list of all fonts available on Google Fonts, sorted by popularity
+ */
 function fetchFontList(apiKey) {
@@ -229,2 +232,8 @@ return new Promise(function (resolve, reject) {
 
+/**
+ * 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 () {
@@ -244,2 +253,3 @@
 		this.options = options;
+		this.name = options.name;
 		this.previewIndex = 0; // list index up to which font previews have been downloaded
@@ -258,3 +268,3 @@
 		this.stylesheet.type = 'text/css';
-		var style = '\n\t\t\t.apply-font {\n\t\t\t\tfont-family: "' + this.activeFont.family + '";\n\t\t\t}\n\t\t';
+		var style = '\n\t\t\t.apply-font' + this.name + ' {\n\t\t\t\tfont-family: "' + this.activeFont.family + '";\n\t\t\t}\n\t\t';
 		// font weight/style: split number and text in font variant parameter
@@ -265,7 +275,7 @@ var defaultVariant = this.options.variants[0].split(/(\d+)/).filter(Boolean);
 			if (defaultVariant[0] === 'regular') {
-				style += '\n\t\t\t\t\t.apply-font, #font-picker > ul > li > a {\n\t\t\t\t\t\tfont-weight: 400;\n\t\t\t\t\t\tfont-style: normal;\n\t\t\t\t\t}\n\t\t\t\t';
+				style += '\n\t\t\t\t\t.apply-font' + this.name + ', #font-picker > ul > li > a {\n\t\t\t\t\t\tfont-weight: 400;\n\t\t\t\t\t\tfont-style: normal;\n\t\t\t\t\t}\n\t\t\t\t';
 			} else if (defaultVariant[0] === 'italic') {
-				style += '\n\t\t\t\t\t.apply-font, #font-picker > ul > li > a {\n\t\t\t\t\t\tfont-weight: 400;\n\t\t\t\t\t\tfont-style: italic;\n\t\t\t\t\t}\n\t\t\t\t';
+				style += '\n\t\t\t\t\t.apply-font' + this.name + ', #font-picker > ul > li > a {\n\t\t\t\t\t\tfont-weight: 400;\n\t\t\t\t\t\tfont-style: italic;\n\t\t\t\t\t}\n\t\t\t\t';
 			} else {
-				style += '\n\t\t\t\t\t.apply-font, #font-picker > ul > li > a {\n\t\t\t\t\t\tfont-weight: ' + defaultVariant[0] + ';\n\t\t\t\t\t\tfont-style: normal;\n\t\t\t\t\t}\n\t\t\t\t';
+				style += '\n\t\t\t\t\t.apply-font' + this.name + ', #font-picker > ul > li > a {\n\t\t\t\t\t\tfont-weight: ' + defaultVariant[0] + ';\n\t\t\t\t\t\tfont-style: normal;\n\t\t\t\t\t}\n\t\t\t\t';
 			}
@@ -275,3 +285,3 @@ }
 		else if (defaultVariant.length === 2) {
-				style += '\n\t\t\t.apply-font, #font-picker > ul > li > a {\n\t\t\t\tfont-weight: ' + defaultVariant[0] + ';\n\t\t\t\tfont-style: ' + defaultVariant[1] + ';\n\t\t\t}\n\t\t';
+				style += '\n\t\t\t.apply-font' + this.name + ', #font-picker > ul > li > a {\n\t\t\t\tfont-weight: ' + defaultVariant[0] + ';\n\t\t\t\tfont-style: ' + defaultVariant[1] + ';\n\t\t\t}\n\t\t';
 			}
@@ -364,3 +374,3 @@ this.stylesheet.appendChild(document.createTextNode(style));
 			var fallbackFont = this.activeFont.category === 'handwriting' ? 'cursive' : this.activeFont.category;
-			var style = '\n\t\t\t.apply-font {\n\t\t\t\tfont-family: "' + this.activeFont.family + '", "' + previousFont + '", ' + fallbackFont + ';\n\t\t\t}\n\t\t';
+			var style = '\n\t\t\t.apply-font' + this.name + ' {\n\t\t\t\tfont-family: "' + this.activeFont.family + '", "' + previousFont + '", ' + fallbackFont + ';\n\t\t\t}\n\t\t';
 			this.stylesheet.replaceChild(document.createTextNode(style), this.stylesheet.childNodes[0]);
@@ -402,5 +412,32 @@
 
-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";
+var css = "@charset \"UTF-8\";\ndiv[id^=\"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  div[id^=\"font-picker\"] * {\n    box-sizing: border-box; }\n  div[id^=\"font-picker\"] p {\n    margin: 0;\n    padding: 0; }\n  div[id^=\"font-picker\"] a {\n    color: inherit;\n    text-decoration: none;\n    cursor: pointer;\n    outline: none; }\n  div[id^=\"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    div[id^=\"font-picker\"] .dropdown-button:hover, div[id^=\"font-picker\"] .dropdown-button.expanded, div[id^=\"font-picker\"] .dropdown-button:focus {\n      background-color: #bebebe; }\n\n@keyframes spinner {\n  to {\n    transform: rotate(360deg); } }\n    div[id^=\"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    div[id^=\"font-picker\"] .dropdown-button .dropdown-icon.finished:before {\n      content: '▾'; }\n    div[id^=\"font-picker\"] .dropdown-button .dropdown-icon.error:before {\n      content: '⚠'; }\n  div[id^=\"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    div[id^=\"font-picker\"] ul.expanded {\n      max-height: 200px; }\n    div[id^=\"font-picker\"] ul li {\n      height: 35px;\n      list-style: none; }\n      div[id^=\"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        div[id^=\"font-picker\"] ul li a:hover, div[id^=\"font-picker\"] ul li a:focus {\n          background-color: #dddddd; }\n        div[id^=\"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} 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' }, then use #font-picker-main and .apply-font-main
+ * 	 @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 () {
@@ -422,16 +459,24 @@ function FontPicker(apiKey, defaultFont) {
 		}
+		if (options.name) {
+			if (typeof options.name !== 'string') {
+				throw Error('options.name parameter is not a string');
+			}
+			if (options.name.match(/[^0-9a-z]/i)) {
+				throw Error('options.name may only contain letters and digits');
+			}
+		}
 		if (options.families && !(options.families instanceof Array)) {
-			throw Error('families parameter is not an array');
+			throw Error('options.families parameter is not an array');
 		}
 		if (options.categories && !(options.categories instanceof Array)) {
-			throw Error('categories parameter is not an array');
+			throw Error('options.categories parameter is not an array');
 		}
 		if (options.variants && !(options.variants instanceof Array)) {
-			throw Error('variants parameter is not an array');
+			throw Error('options.variants parameter is not an array');
 		}
 		if (options.limit && typeof options.limit !== 'number') {
-			throw Error('limit parameter is not a number');
+			throw Error('options.limit parameter is not a number');
 		}
 		if (options.sort && typeof options.sort !== 'string') {
-			throw Error('sort parameter is not a string');
+			throw Error('options.sort parameter is not a string');
 		}
@@ -445,2 +490,8 @@ if (onChange && typeof onChange !== 'function') {
 		var newOptions = options;
+		if (options.name) {
+			this.name = '-' + options.name;
+		} else {
+			this.name = '';
+		}
+		newOptions.name = this.name;
 		if (!options.limit) {
@@ -474,7 +525,11 @@ newOptions.limit = 100;
 			this.expanded = false;
-			var fontPickerDiv = document.getElementById('font-picker');
 
+			var fontPickerDiv = document.getElementById('font-picker' + this.name);
+			if (!fontPickerDiv) {
+				throw Error('Missing div with id="font-picker' + this.name + '"');
+			}
+
 			// HTML for dropdown button (name of active font and dropdown arrow)
 			this.dropdownButton = document.createElement('a');
-			this.dropdownButton.id = 'dropdown-button';
+			this.dropdownButton.classList.add('dropdown-button');
 			this.dropdownButton.role = 'button';
@@ -573,3 +628,3 @@ this.dropdownButton.tabIndex = 0;
 			do {
-				if (targetElement === document.getElementById('font-picker')) {
+				if (targetElement === document.getElementById('font-picker' + this.name)) {
 					// click inside font picker
@@ -576,0 +631,0 @@ return;

package.json

 {
 	"name": "font-picker",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"description": "Font picker component for previewing, selecting, and downloading Google Fonts",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -91,2 +91,3 @@ # Font Picker
 * **`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' }`, then 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)
@@ -93,0 +94,0 @@ * **`categories`**: Array of font categories – possible values: `'sans-serif', 'serif', 'display', handwriting', 'monospace'` (default: all categories)

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

Improved metrics

Total package byte prevSize

31363

increased by11.7%

Lines of code

589

increased by9.89%

Number of lines in readme file

113

increased by0.89%

No dependency changes