font-picker - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

lib/font-picker.js

@@ -255,2 +255,40 @@ (function (global, factory) {
 
+	var slicedToArray = function () {
+	  function sliceIterator(arr, i) {
+	    var _arr = [];
+	    var _n = true;
+	    var _d = false;
+	    var _e = undefined;
+
+	    try {
+	      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+	        _arr.push(_s.value);
+
+	        if (i && _arr.length === i) break;
+	      }
+	    } catch (err) {
+	      _d = true;
+	      _e = err;
+	    } finally {
+	      try {
+	        if (!_n && _i["return"]) _i["return"]();
+	      } finally {
+	        if (_d) throw _e;
+	      }
+	    }
+
+	    return _arr;
+	  }
+
+	  return function (arr, i) {
+	    if (Array.isArray(arr)) {
+	      return arr;
+	    } else if (Symbol.iterator in Object(arr)) {
+	      return sliceIterator(arr, i);
+	    } else {
+	      throw new TypeError("Invalid attempt to destructure non-iterable instance");
+	    }
+	  };
+	}();
+
 	/**
@@ -260,3 +298,3 @@ * Class responsible for adding/removing CSS styles for applying the active font and font previews
 	var StyleManager = function () {
-		function StyleManager(pickerName, activeFont, defaultVariant) {
+		function StyleManager(pickerName, activeFont, variants) {
 			classCallCheck(this, StyleManager);
@@ -274,4 +312,4 @@
 
-			// 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}\n\t\t';
+			// Font weight/style for previews: split number and text in font variant parameter
+			var defaultVariant = variants[0].split(/(\d+)/).filter(Boolean);
 
@@ -281,14 +319,29 @@ // Apply the default font variant to the fonts in the font picker and the .apply-font class
 				// Either font weight or style is specified (e.g. 'regular, '300', 'italic')
-				if (defaultVariant[0] === 'regular') {
-					style += '\n\t\t\t\t\t.apply-font' + this.pickerSelector + ', #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' + this.pickerSelector + ', #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';
+				if (defaultVariant[0] === 'regular' || defaultVariant[0] === 'italic') {
+					var _defaultVariant = slicedToArray(defaultVariant, 1);
+					// Font style is specified
+
+
+					this.fontStyle = _defaultVariant[0];
+
+					this.fontWeight = '400';
 				} else {
-					style += '\n\t\t\t\t\t.apply-font' + this.pickerSelector + ', #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';
+					// Font weight is specified
+					this.fontStyle = 'regular';
+
+					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
-				style += '\n\t\t\t.apply-font' + this.pickerSelector + ', #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';
+
+
+				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));
@@ -307,3 +360,3 @@ document.head.appendChild(this.stylesheet);
 				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}\n\t\t';
+				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';
 				this.stylesheet.appendChild(document.createTextNode(style));
@@ -321,3 +374,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}\n\t\t';
+				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';
 				this.stylesheet.replaceChild(document.createTextNode(style), this.stylesheet.childNodes[0]);
@@ -454,8 +507,5 @@ }
 
-			// Font weight/style for previews: split number and text in font variant parameter
-			var defaultVariant = this.options.variants[0].split(/(\d+)/).filter(Boolean);
-
 			// Download and apply default font
 			checkFullFont(this.activeFont, this.options.variants);
-			this.styleManager = new StyleManager(this.options.name, this.activeFont, defaultVariant);
+			this.styleManager = new StyleManager(this.options.name, this.activeFont, this.options.variants);
 		}
@@ -462,0 +512,0 @@

package.json

 {
 	"name": "font-picker",
-	"version": "2.0.0",
+	"version": "2.0.1",
 	"description": "Font selector component for Google Fonts",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -17,3 +17,3 @@ # Font Picker
 <p align="center">
-    <img src=".github/demo.gif" width=700 alt="Demo">
+  <img src=".github/demo.gif" width=700 alt="Demo">
 </p>
@@ -31,7 +31,7 @@
 <script type="text/javascript">
-    const fontPicker = new FontPicker(
-        'YOUR_API_KEY', // Google API key
-        'Open Sans', // default font
-        { limit: 50 } // additional options
-    );
+  const fontPicker = new FontPicker(
+    'YOUR_API_KEY', // Google API key
+    'Open Sans', // default font
+    { limit: 50 } // additional options
+  );
 </script>
@@ -51,5 +51,5 @@ ```
 const fontPicker = new FontPicker(
-    'YOUR_API_KEY', // Google API key
-    'Open Sans', // default font
-    { limit: 50 } // additional options
+  'YOUR_API_KEY', // Google API key
+  'Open Sans', // default font
+  { limit: 50 } // additional options
 );
@@ -76,3 +76,3 @@ ```
 <p align="center">
-    <img src=".github/html-element-names.png" width=800 alt="Class names">
+  <img src=".github/html-element-names.png" width=800 alt="Class names">
 </p>
@@ -79,0 +79,0 @@

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

Total package byte prevSize

36051

increased by2.22%

Lines of code

701

increased by5.89%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes