font-picker - npm Package Compare versions

Comparing version 2.0.4 to 2.0.5

lib/font-picker.js

@@ -301,58 +301,90 @@ (function (global, factory) {
 			if (pickerName !== '') {
-				this.pickerSelector = '-' + pickerName;
+				this.pickerSuffix = '-' + pickerName;
 			} else {
-				this.pickerSelector = '';
+				this.pickerSuffix = '';
 			}
+			this.stylesheetId = 'font-selectors' + this.pickerSuffix;
 
-			this.stylesheet = document.createElement('style');
-			this.stylesheet.rel = 'stylesheet';
-			this.stylesheet.type = 'text/css';
+			this.determineFontVariants(variants);
 
-			// Font weight/style for previews: split number and text in font variant parameter
-			var defaultVariant = variants[0].split(/(\d+)/).filter(Boolean);
+			// If stylesheet for applying font styles was created earlier, continue using it, otherwise
+			// create new one
+			var existingStylesheet = document.getElementById(this.stylesheetId);
+			if (existingStylesheet) {
+				this.stylesheet = existingStylesheet;
+			} else {
+				this.initStylesheet(activeFont);
+			}
+		}
 
-			// Apply the default font variant to the fonts in the font picker and the .apply-font class
-			if (defaultVariant.length === 1) {
-				// Either font weight or style is specified (e.g. 'regular, '300', 'italic')
-				if (defaultVariant[0] === 'regular' || defaultVariant[0] === 'italic') {
-					var _defaultVariant = slicedToArray(defaultVariant, 1);
-					// Font style is specified
+		/**
+	  * Determine the specified font variants (style and weight) and save them in the corresponding
+	  * object variables
+	  */
 
 
-					this.fontStyle = _defaultVariant[0];
+		createClass(StyleManager, [{
+			key: 'determineFontVariants',
+			value: function determineFontVariants(variants) {
+				// Font weight/style for previews: split number and text in font variant parameter
+				var defaultVariant = variants[0].split(/(\d+)/).filter(Boolean);
 
-					this.fontWeight = '400';
-				} else {
-					// Font weight is specified
-					this.fontStyle = 'regular';
+				// Determine font variants which will be applied to the fonts in the font picker and to elements
+				// of the .apply-font class
+				if (defaultVariant.length === 1) {
+					// Either font weight or style is specified (e.g. 'regular, '300', 'italic')
+					if (defaultVariant[0] === 'regular' || defaultVariant[0] === 'italic') {
+						var _defaultVariant = slicedToArray(defaultVariant, 1);
+						// Font style is specified
 
-					var _defaultVariant2 = slicedToArray(defaultVariant, 1);
 
-					this.fontWeight = _defaultVariant2[0];
-				}
-			} else if (defaultVariant.length === 2) {
-				var _defaultVariant3 = slicedToArray(defaultVariant, 2);
-				// Both font weight and style are specified
+						this.fontStyle = _defaultVariant[0];
 
+						this.fontWeight = '400';
+					} else {
+						// Font weight is specified
+						this.fontStyle = 'regular';
 
-				this.fontWeight = _defaultVariant3[0];
-				this.fontStyle = _defaultVariant3[1];
+						var _defaultVariant2 = slicedToArray(defaultVariant, 1);
+
+						this.fontWeight = _defaultVariant2[0];
+					}
+				} else if (defaultVariant.length === 2) {
+					var _defaultVariant3 = slicedToArray(defaultVariant, 2);
+					// Both font weight and style are specified
+
+
+					this.fontWeight = _defaultVariant3[0];
+					this.fontStyle = _defaultVariant3[1];
+				}
 			}
 
-			// Apply the default active font
-			var style = '\n\t\t\t.apply-font' + this.pickerSelector + ' {\n\t\t\t\tfont-family: "' + activeFont.family + '";\n\t\t\t\tfont-style: ' + this.fontStyle + ';\n\t\t\t\tfont-weight: ' + this.fontWeight + ';\n\t\t\t}\n\t\t';
-			this.stylesheet.appendChild(document.createTextNode(style));
-			document.head.appendChild(this.stylesheet);
-		}
+			/**
+	   * Generate the selector for the default font, set up the font picker's stylesheet and add it to
+	   * the document head
+	   */
 
-		/**
-	  * Add CSS selector for applying a preview font
-	  */
+		}, {
+			key: 'initStylesheet',
+			value: function initStylesheet(activeFont) {
+				this.stylesheet = document.createElement('style');
+				this.stylesheet.id = this.stylesheetId;
+				this.stylesheet.rel = 'stylesheet';
+				this.stylesheet.type = 'text/css';
 
+				// Apply the default active font
+				var style = '\n\t\t\t.apply-font' + this.pickerSuffix + ' {\n\t\t\t\tfont-family: "' + activeFont.family + '";\n\t\t\t\tfont-style: ' + this.fontStyle + ';\n\t\t\t\tfont-weight: ' + this.fontWeight + ';\n\t\t\t}\n\t\t';
+				this.stylesheet.appendChild(document.createTextNode(style));
+				document.head.appendChild(this.stylesheet);
+			}
 
-		createClass(StyleManager, [{
+			/**
+	   * Add CSS selector for applying a preview font
+	   */
+
+		}, {
 			key: 'applyPreviewStyle',
 			value: function applyPreviewStyle(font) {
 				var fontId = font.family.replace(/\s+/g, '-').toLowerCase();
-				var style = '\n\t\t\t.font-' + fontId + ' {\n\t\t\t\tfont-family: "' + font.family + '";\n\t\t\t\tfont-style: ' + this.fontStyle + ';\n\t\t\t\tfont-weight: ' + this.fontWeight + ';\n\t\t\t}\n\t\t';
+				var style = '\n\t\t\t.font-' + fontId + this.pickerSuffix + ' {\n\t\t\t\tfont-family: "' + font.family + '";\n\t\t\t\tfont-style: ' + this.fontStyle + ';\n\t\t\t\tfont-weight: ' + this.fontWeight + ';\n\t\t\t}\n\t\t';
 				this.stylesheet.appendChild(document.createTextNode(style));
@@ -370,3 +402,3 @@ }
 				var fallbackFont = activeFont.category === 'handwriting' ? 'cursive' : activeFont.category;
-				var style = '\n\t\t\t.apply-font' + this.pickerSelector + ' {\n\t\t\t\tfont-family: "' + activeFont.family + '", "' + previousFont + '", ' + fallbackFont + ';\n\t\t\t\tfont-style: ' + this.fontStyle + ';\n\t\t\t\tfont-weight: ' + this.fontWeight + ';\n\t\t\t}\n\t\t';
+				var style = '\n\t\t\t.apply-font' + this.pickerSuffix + ' {\n\t\t\t\tfont-family: "' + activeFont.family + '", "' + previousFont + '", ' + fallbackFont + ';\n\t\t\t\tfont-style: ' + this.fontStyle + ';\n\t\t\t\tfont-weight: ' + this.fontWeight + ';\n\t\t\t}\n\t\t';
 				this.stylesheet.replaceChild(document.createTextNode(style), this.stylesheet.childNodes[0]);
@@ -620,8 +652,9 @@ }
 
-			// Set font picker name
+			// Determine font picker ID and selector suffix from its name
 			if (options.name) {
-				this.pickerSelector = 'font-picker-' + options.name;
+				this.pickerSuffix = '-' + options.name;
 			} else {
-				this.pickerSelector = 'font-picker';
+				this.pickerSuffix = '';
 			}
+			this.pickerId = 'font-picker' + this.pickerSuffix;
 
@@ -645,5 +678,5 @@ // Initialize FontManager and FontPicker UI
 
-				var fontPickerDiv = document.getElementById(this.pickerSelector);
+				var fontPickerDiv = document.getElementById(this.pickerId);
 				if (!fontPickerDiv) {
-					throw Error('Missing div with id="' + this.pickerSelector + '"');
+					throw Error('Missing div with id="' + this.pickerId + '"');
 				}
@@ -687,2 +720,3 @@
 						var fontFamily = _this.fontManager.fonts[i].family;
+						var fontId = fontFamily.replace(/\s+/g, '-').toLowerCase();
 
@@ -694,3 +728,3 @@ // Write font name in the corresponding font, set onclick listener
 						fontButton.innerHTML = fontFamily;
-						fontButton.classList.add('font-' + fontFamily.replace(/\s+/g, '-').toLowerCase());
+						fontButton.classList.add('font-' + fontId + _this.pickerSuffix);
 						fontButton.onclick = function () {
@@ -739,3 +773,3 @@ _this.toggleExpanded(); // collapse font list
 				do {
-					if (targetElement === document.getElementById(this.pickerSelector)) {
+					if (targetElement === document.getElementById(this.pickerId)) {
 						// Click inside font picker
@@ -742,0 +776,0 @@ return;

package.json

 {
 	"name": "font-picker",
-	"version": "2.0.4",
+	"version": "2.0.5",
 	"description": "Font selector component for Google Fonts",
@@ -21,4 +21,4 @@ "keywords": [
 		"start": "npm-run-all build --parallel start:*",
-		"start:rollup": "rollup --config --watch",
-		"start:serve": "serve demo --cache=0 --open",
+		"start:rollup": "rollup --config --sourcemap --watch",
+		"start:serve": "serve demo --listen 3000",
 		"build": "rollup --config",
@@ -30,17 +30,17 @@ "lint": "eslint .",
 	"devDependencies": {
-		"autoprefixer": "^8.5.0",
-		"babel-core": "^6.26.0",
+		"autoprefixer": "^8.6.5",
+		"babel-core": "^6.26.3",
 		"babel-plugin-external-helpers": "^6.22.0",
-		"babel-preset-env": "^1.6.1",
+		"babel-preset-env": "^1.7.0",
 		"eslint": "^4.19.1",
 		"eslint-config-airbnb-base": "^12.1.0",
-		"eslint-plugin-import": "^2.9.0",
+		"eslint-plugin-import": "^2.13.0",
 		"husky": "^0.14.3",
-		"node-sass": "^4.8.3",
-		"npm-run-all": "^4.1.2",
-		"postcss": "^6.0.21",
-		"rollup": "^0.57.1",
-		"rollup-plugin-babel": "^3.0.3",
-		"rollup-plugin-postcss": "^1.4.0",
-		"serve": "^6.5.5"
+		"node-sass": "^4.9.2",
+		"npm-run-all": "^4.1.3",
+		"postcss": "^6.0.23",
+		"rollup": "^0.62.0",
+		"rollup-plugin-babel": "^3.0.7",
+		"rollup-plugin-postcss": "^1.6.2",
+		"serve": "^9.2.0"
 	},
@@ -47,0 +47,0 @@ "files": [

README.md

 # Font Picker
 
-[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/samuelmeuli/font-picker/blob/master/LICENSE)
-
 **A simple, customizable font picker allowing users to preview, select, and use Google Fonts on your website.**
@@ -102,3 +100,3 @@
 * **`getActiveFont()`**: Returns an object with information about the currently selected font
-* **`setActiveFont(fontFamily)`**: Change the active font programatically
+* **`setActiveFont(fontFamily)`**: Change the active font programmatically
 
@@ -112,2 +110,2 @@
 * `npm install`
-* `npm start` to generate the library bundle using [Rollup](https://github.com/rollup/rollup) and serve the demo website for previewing the component
+* `npm start` to generate the library bundle using [Rollup](https://github.com/rollup/rollup) and serve the demo website on `localhost:3000`

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

37491

increased by2.62%

Lines of code

736

increased by4.25%

Worsened metrics

Number of lines in readme file

110

decreased by-1.79%

No dependency changes