font-picker - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

lib/index.js

@@ -75,6 +75,12 @@ (function (global, factory) {
  */
-async function fetchFontList(apiKey) {
-	const response = await window.fetch(`https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key=${apiKey}`);
-	const json = await response.json();
-	return json.items;
+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);
+		});
+	});
 }
@@ -87,19 +93,19 @@
 	// generate the stylesheet URL
-	let url = 'https://fonts.googleapis.com/css?family=';
+	var url = 'https://fonts.googleapis.com/css?family=';
 	// font name
 	url += font.family.replace(/ /g, '+');
 	// font variants
-	url += `:${variants[0]}`;
-	for (let i = 1; i < variants.length; i += 1) {
-		url += `|${variants[i]}`;
+	url += ':' + variants[0];
+	for (var i = 1; i < variants.length; i += 1) {
+		url += '|' + variants[i];
 	}
 
 	// add the stylesheet to the document head
-	const link = document.createElement('link');
+	var link = document.createElement('link');
 	link.rel = 'stylesheet';
 	link.href = url;
-	link.id = `font-full-${fontId}`;
+	link.id = 'font-full-' + fontId;
 	// if onChange function is specified: execute it once the stylesheet has loaded
 	if (onChange) {
-		link.onload = () => {
+		link.onload = function () {
 			onChange(font);
@@ -117,21 +123,23 @@ };
 	// generate the stylesheet URL
-	let url = 'https://fonts.googleapis.com/css?family=';
+	var url = 'https://fonts.googleapis.com/css?family=';
 	// font name
 	url += font.family.replace(/ /g, '+');
 	// font variants
-	url += `:${variants[0]}`;
-	for (let i = 1; i < variants.length; i += 1) {
-		url += `|${variants[i]}`;
+	url += ':' + variants[0];
+	for (var i = 1; i < variants.length; i += 1) {
+		url += '|' + variants[i];
 	}
 	// characters to download: remove spaces and duplicate letters from the font name
-	let downloadChars = font.family;
+	var downloadChars = font.family;
 	downloadChars = downloadChars.replace(/\s+/g, '');
-	downloadChars = downloadChars.split('').filter((x, n, s) => s.indexOf(x) === n).join('');
-	url += `&text=${downloadChars}`;
+	downloadChars = downloadChars.split('').filter(function (x, n, s) {
+		return s.indexOf(x) === n;
+	}).join('');
+	url += '&text=' + downloadChars;
 
 	// add the stylesheet to the document head
-	const link = document.createElement('link');
+	var link = document.createElement('link');
 	link.rel = 'stylesheet';
 	link.href = url;
-	link.id = `font-preview-${fontId}`;
+	link.id = 'font-preview-' + fontId;
 	document.head.appendChild(link);
@@ -144,11 +152,11 @@ }
 function checkFullFont(font, variants, onChange) {
-	const fontId = font.family.replace(/\s+/g, '-').toLowerCase();
+	var fontId = font.family.replace(/\s+/g, '-').toLowerCase();
 
 	// if preview font is available: replace it with the full font
-	if (document.getElementById(`font-preview-${fontId}`)) {
-		document.getElementById(`font-preview-${fontId}`).outerHTML = '';
+	if (document.getElementById('font-preview-' + fontId)) {
+		document.getElementById('font-preview-' + fontId).outerHTML = '';
 		downloadFullFont(font, fontId, variants, onChange);
 	}
 	// if font is not available: download it
-	else if (!document.getElementById(`font-full-${fontId}`) && !isFontAvailable(font.family)) {
+	else if (!document.getElementById('font-full-' + fontId) && !isFontAvailable(font.family)) {
 			downloadFullFont(font, fontId, variants, onChange);
@@ -167,6 +175,6 @@ }
 function checkPreviewFont(font, variants) {
-	const fontId = font.family.replace(/\s+/g, '-').toLowerCase();
+	var fontId = font.family.replace(/\s+/g, '-').toLowerCase();
 
 	// if full font is not available: download preview font
-	if (!document.getElementById(`font-full-${fontId}`) && !isFontAvailable(font.family)) {
+	if (!document.getElementById('font-full-' + fontId) && !isFontAvailable(font.family)) {
 		downloadPreviewFont(font, fontId, variants);
@@ -176,2 +184,42 @@ }
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
+  return typeof obj;
+} : function (obj) {
+  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+};
+
+
+
+
+
+
+
+
+
+
+
+var classCallCheck = function (instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+};
+
+var createClass = function () {
+  function defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  return function (Constructor, protoProps, staticProps) {
+    if (protoProps) defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) defineProperties(Constructor, staticProps);
+    return Constructor;
+  };
+}();
+
 /**
@@ -182,9 +230,12 @@ * Class responsible for retrieving and filtering/sorting the font list, keeping track of the active
  */
-class FontHandler {
 
+var FontHandler = function () {
+
 	/**
   * Download the default font (if necessary) and apply it
   */
-	constructor(apiKey, defaultFont, options, onChange) {
+	function FontHandler(apiKey, defaultFont, options, onChange) {
+		classCallCheck(this, FontHandler);
 
+
 		this.activeFont = defaultFont;
@@ -208,32 +259,13 @@ this.apiKey = apiKey;
 		this.stylesheet.type = 'text/css';
-		let style = `
-			.apply-font {
-				font-family: "${this.activeFont.family}";
-			}
-		`;
+		var style = '\n\t\t\t.apply-font {\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
-		const defaultVariant = this.options.variants[0].split(/(\d+)/).filter(Boolean);
+		var defaultVariant = this.options.variants[0].split(/(\d+)/).filter(Boolean);
 		// either font weight or style is specified (e.g. 'regular, '300', 'italic')
 		if (defaultVariant.length === 1) {
 			if (defaultVariant[0] === 'regular') {
-				style += `
-					.apply-font, #font-picker > ul > li > a {
-						font-weight: 400;
-						font-style: normal;
-					}
-				`;
+				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';
 			} else if (defaultVariant[0] === 'italic') {
-				style += `
-					.apply-font, #font-picker > ul > li > a {
-						font-weight: 400;
-						font-style: 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';
 			} else {
-				style += `
-					.apply-font, #font-picker > ul > li > a {
-						font-weight: ${defaultVariant[0]};
-						font-style: normal;
-					}
-				`;
+				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';
 			}
@@ -243,9 +275,4 @@ }
 		else if (defaultVariant.length === 2) {
-				style += `
-			.apply-font, #font-picker > ul > li > a {
-				font-weight: ${defaultVariant[0]};
-				font-style: ${defaultVariant[1]};
+				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';
 			}
-		`;
-			}
 		this.stylesheet.appendChild(document.createTextNode(style));
@@ -259,100 +286,116 @@ document.head.appendChild(this.stylesheet);
   */
-	async init() {
-		let fontList = await fetchFontList(this.apiKey);
 
-		// 'families' parameter (only keep fonts whose names are included in the provided array)
-		if (this.options.families) {
-			fontList = fontList.filter(font => this.options.families.includes(font.family));
-		}
 
-		// 'categories' parameter (only keep fonts in categories from the provided array)
-		if (this.options.categories) {
-			fontList = fontList.filter(font => this.options.categories.includes(font.category));
-		}
+	createClass(FontHandler, [{
+		key: 'init',
+		value: function init() {
+			var _this = this;
 
-		// 'variants' parameter (only keep fonts with at least the specified variants)
-		if (this.options.variants) {
-			fontList = fontList.filter(font => {
-				for (let i = 0; i < this.options.variants.length; i += 1) {
-					if (font.variants.indexOf(this.options.variants[i]) === -1) {
-						return false;
-					}
+			return fetchFontList(this.apiKey).then(function (fetchedList) {
+				var fontList = fetchedList;
+
+				// 'families' parameter (only keep fonts whose names are included in the provided array)
+				if (_this.options.families) {
+					fontList = fontList.filter(function (font) {
+						return _this.options.families.includes(font.family);
+					});
 				}
-				return true;
-			});
-		}
 
-		// add default font to beginning of list if it is not already in it
-		if (fontList.filter(font => font.family === this.activeFont.family).length === 0) {
-			fontList.unshift(this.activeFont);
-		}
+				// 'categories' parameter (only keep fonts in categories from the provided array)
+				if (_this.options.categories) {
+					fontList = fontList.filter(function (font) {
+						return _this.options.categories.includes(font.category);
+					});
+				}
 
-		// 'limit' parameter (limit font list size)
-		if (this.options.limit) {
-			fontList = fontList.slice(0, this.options.limit);
-		}
+				// 'variants' parameter (only keep fonts with at least the specified variants)
+				if (_this.options.variants) {
+					fontList = fontList.filter(function (font) {
+						for (var i = 0; i < _this.options.variants.length; i += 1) {
+							if (font.variants.indexOf(_this.options.variants[i]) === -1) {
+								return false;
+							}
+						}
+						return true;
+					});
+				}
 
-		// 'sort' parameter (list is already sorted by popularity)
-		if (this.options.sort === 'alphabetical') {
-			fontList = fontList.sort((fontA, fontB) => fontA.family.localeCompare(fontB.family));
-		}
+				// add default font to beginning of list if it is not already in it
+				if (fontList.filter(function (font) {
+					return font.family === _this.activeFont.family;
+				}).length === 0) {
+					fontList.unshift(_this.activeFont);
+				}
 
-		// save modified font list
-		this.fonts = fontList;
+				// 'limit' parameter (limit font list size)
+				if (_this.options.limit) {
+					fontList = fontList.slice(0, _this.options.limit);
+				}
 
-		// download previews for the first 10 fonts in the list
-		this.downloadPreviews(10);
-	}
+				// 'sort' parameter (list is already sorted by popularity)
+				if (_this.options.sort === 'alphabetical') {
+					fontList = fontList.sort(function (fontA, fontB) {
+						return fontA.family.localeCompare(fontB.family);
+					});
+				}
 
-	/**
-  * Set the font with the given font list index as the active one, download (if necessary) and
-  * apply it
-  */
-	changeActiveFont(index) {
-		const previousFont = this.activeFont.family;
+				// save modified font list
+				_this.fonts = fontList;
 
-		// change font
-		this.activeFont = this.fonts[index];
+				// download previews for the first 10 fonts in the list
+				_this.downloadPreviews(10);
+			});
+		}
 
-		// apply font and set fallback fonts
-		const fallbackFont = this.activeFont.category === 'handwriting' ? 'cursive' : this.activeFont.category;
-		const style = `
-			.apply-font {
-				font-family: "${this.activeFont.family}", "${previousFont}", ${fallbackFont};
-			}
-		`;
-		this.stylesheet.replaceChild(document.createTextNode(style), this.stylesheet.childNodes[0]);
+		/**
+   * Set the font with the given font list index as the active one, download (if necessary) and
+   * apply it
+   */
 
-		// download font (if necessary)
-		checkFullFont(this.activeFont, this.options.variants, this.onChange);
-	}
+	}, {
+		key: 'changeActiveFont',
+		value: function changeActiveFont(index) {
+			var previousFont = this.activeFont.family;
 
-	/**
-  * Download font previews for the list entries up to the given index
-  */
-	downloadPreviews(downloadIndex) {
-		// stop at the end of the font list
-		let downloadIndexMax;
-		if (downloadIndex > this.fonts.length) {
-			downloadIndexMax = this.fonts.length;
-		} else {
-			downloadIndexMax = downloadIndex;
-		}
+			// change font
+			this.activeFont = this.fonts[index];
 
-		// download the previews up to the given index and apply them to the list entries
-		for (let i = this.previewIndex; i < downloadIndexMax; i += 1) {
-			checkPreviewFont(this.fonts[i], this.options.variants);
-			const style = `
-				.font-${this.fonts[i].family.replace(/\s+/g, '-').toLowerCase()} {
-					font-family: "${this.fonts[i].family}";
-				}
-			`;
-			this.stylesheet.appendChild(document.createTextNode(style));
+			// apply font and set fallback fonts
+			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';
+			this.stylesheet.replaceChild(document.createTextNode(style), this.stylesheet.childNodes[0]);
+
+			// download font (if necessary)
+			checkFullFont(this.activeFont, this.options.variants, this.onChange);
 		}
 
-		if (downloadIndexMax > this.previewIndex) {
-			this.previewIndex = downloadIndexMax;
+		/**
+   * Download font previews for the list entries up to the given index
+   */
+
+	}, {
+		key: 'downloadPreviews',
+		value: function downloadPreviews(downloadIndex) {
+			// stop at the end of the font list
+			var downloadIndexMax = void 0;
+			if (downloadIndex > this.fonts.length) {
+				downloadIndexMax = this.fonts.length;
+			} else {
+				downloadIndexMax = downloadIndex;
+			}
+
+			// download the previews up to the given index and apply them to the list entries
+			for (var i = this.previewIndex; i < downloadIndexMax; i += 1) {
+				checkPreviewFont(this.fonts[i], this.options.variants);
+				var style = '\n\t\t\t\t.font-' + this.fonts[i].family.replace(/\s+/g, '-').toLowerCase() + ' {\n\t\t\t\t\tfont-family: "' + this.fonts[i].family + '";\n\t\t\t\t}\n\t\t\t';
+				this.stylesheet.appendChild(document.createTextNode(style));
+			}
+
+			if (downloadIndexMax > this.previewIndex) {
+				this.previewIndex = downloadIndexMax;
+			}
 		}
-	}
-}
+	}]);
+	return FontHandler;
+}();
 
@@ -384,5 +427,9 @@ 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: 200px;\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    #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";
  */
-class FontPicker {
 
-	constructor(apiKey, defaultFont, options = {}, onChange) {
+var FontPicker = function () {
+	function FontPicker(apiKey, defaultFont) {
+		var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+		var onChange = arguments[3];
+		classCallCheck(this, FontPicker);
+
 		// parameter validation
@@ -395,3 +442,3 @@ if (!apiKey || typeof apiKey !== 'string') {
 		}
-		if (typeof options !== 'object') {
+		if ((typeof options === 'undefined' ? 'undefined' : _typeof(options)) !== 'object') {
 			throw Error('options parameter is not an object');
@@ -419,4 +466,4 @@ }
 		// default parameters
-		const newDefaultFont = defaultFont || 'Open Sans';
-		const newOptions = options;
+		var newDefaultFont = defaultFont || 'Open Sans';
+		var newOptions = options;
 		if (!options.limit) {
@@ -442,140 +489,174 @@ newOptions.limit = 100;
   */
-	async init() {
-		this.expanded = false;
-		const fontPickerDiv = document.getElementById('font-picker');
 
-		// HTML for dropdown button (name of active font and dropdown arrow)
-		this.dropdownButton = document.createElement('a');
-		this.dropdownButton.id = 'dropdown-button';
-		this.dropdownButton.role = 'button';
-		this.dropdownButton.tabIndex = 0;
-		this.dropdownButton.onclick = () => this.toggleExpanded();
-		this.dropdownButton.onkeypress = () => this.toggleExpanded();
 
-		this.dropdownFont = document.createElement('p');
-		this.dropdownFont.innerHTML = this.fontHandler.activeFont.family;
+	createClass(FontPicker, [{
+		key: 'init',
+		value: function init() {
+			var _this = this;
 
-		this.dropdownButton.append(this.dropdownFont);
-		fontPickerDiv.appendChild(this.dropdownButton);
-		const dropdownIcon = document.createElement('p');
+			this.expanded = false;
+			var fontPickerDiv = document.getElementById('font-picker');
 
-		// HTML for font list
-		this.ul = document.createElement('ul');
+			// HTML for dropdown button (name of active font and dropdown arrow)
+			this.dropdownButton = document.createElement('a');
+			this.dropdownButton.id = 'dropdown-button';
+			this.dropdownButton.role = 'button';
+			this.dropdownButton.tabIndex = 0;
+			this.dropdownButton.onclick = function () {
+				return _this.toggleExpanded();
+			};
+			this.dropdownButton.onkeypress = function () {
+				return _this.toggleExpanded();
+			};
 
-		// fetch font list, display dropdown arrow if successful
-		try {
-			await this.fontHandler.init();
-			dropdownIcon.innerHTML = '▾';
-		} catch (err) {
-			const errMessage = 'Error trying to fetch the list of available fonts';
-			console.error(errMessage);
-			console.error(err);
-			dropdownIcon.innerHTML = '⚠';
-			fontPickerDiv.title = errMessage;
-		}
-		this.dropdownButton.append(dropdownIcon);
+			this.dropdownFont = document.createElement('p');
+			this.dropdownFont.innerHTML = this.fontHandler.activeFont.family;
 
-		// HTML for font list entries
-		this.ul.onscroll = () => this.onScroll(); // download font previews on scroll
-		for (let i = 0; i < this.fontHandler.fonts.length; i += 1) {
-			const li = document.createElement('li');
-			const a = document.createElement('a');
+			this.dropdownButton.append(this.dropdownFont);
+			fontPickerDiv.appendChild(this.dropdownButton);
+			var dropdownIcon = document.createElement('p');
 
-			// write font name in the corresponding font, set onclick listener
-			a.innerHTML = this.fontHandler.fonts[i].family;
-			a.classList.add(`font-${this.fontHandler.fonts[i].family.replace(/\s+/g, '-').toLowerCase()}`);
-			a.role = 'button';
-			a.tabIndex = 0;
-			a.onclick = () => {
-				this.toggleExpanded(); // collapse font list
-				this.selectFont(i); // make font with index i active
-			};
-			a.onkeypress = () => {
-				this.toggleExpanded(); // collapse font list
-				this.selectFont(i); // make font with index i active
-			};
-			li.appendChild(a);
+			// HTML for font list
+			this.ul = document.createElement('ul');
 
-			// if active font: highlight it and save reference
-			if (this.fontHandler.fonts[i].family === this.fontHandler.activeFont.family) {
-				a.classList.add('active-font');
-				this.activeFontA = a;
-			}
+			// fetch font list, display dropdown arrow if successful
+			this.fontHandler.init().then(function () {
+				dropdownIcon.innerHTML = '▾';
+				_this.dropdownButton.append(dropdownIcon);
 
-			this.ul.appendChild(li);
+				// HTML for font list entries
+				_this.ul.onscroll = function () {
+					return _this.onScroll();
+				}; // download font previews on scroll
+
+				var _loop = function _loop(i) {
+					var li = document.createElement('li');
+					var a = document.createElement('a');
+
+					// write font name in the corresponding font, set onclick listener
+					a.innerHTML = _this.fontHandler.fonts[i].family;
+					a.classList.add('font-' + _this.fontHandler.fonts[i].family.replace(/\s+/g, '-').toLowerCase());
+					a.role = 'button';
+					a.tabIndex = 0;
+					a.onclick = function () {
+						_this.toggleExpanded(); // collapse font list
+						_this.selectFont(i); // make font with index i active
+					};
+					a.onkeypress = function () {
+						_this.toggleExpanded(); // collapse font list
+						_this.selectFont(i); // make font with index i active
+					};
+					li.appendChild(a);
+
+					// if active font: highlight it and save reference
+					if (_this.fontHandler.fonts[i].family === _this.fontHandler.activeFont.family) {
+						a.classList.add('active-font');
+						_this.activeFontA = a;
+					}
+
+					_this.ul.appendChild(li);
+				};
+
+				for (var i = 0; i < _this.fontHandler.fonts.length; i += 1) {
+					_loop(i);
+				}
+				fontPickerDiv.appendChild(_this.ul);
+			}).catch(function (err) {
+				dropdownIcon.innerHTML = '⚠';
+				_this.dropdownButton.append(dropdownIcon);
+				var errMessage = 'Error trying to fetch the list of available fonts';
+				console.error(errMessage);
+				console.error(err);
+				fontPickerDiv.title = errMessage;
+			});
 		}
-		fontPickerDiv.appendChild(this.ul);
-	}
 
-	/**
-  * Return the object of the currently selected font
-  */
-	getActiveFont() {
-		return this.fontHandler.activeFont;
-	}
+		/**
+   * Return the object of the currently selected font
+   */
 
-	/**
-  * EventListener for closing the font picker when clicking anywhere outside it
-  */
-	closeEventListener(e) {
-		let targetElement = e.target; // clicked element
+	}, {
+		key: 'getActiveFont',
+		value: function getActiveFont() {
+			return this.fontHandler.activeFont;
+		}
 
-		do {
-			if (targetElement === document.getElementById('font-picker')) {
-				// click inside font picker
-				return;
-			}
-			// move up the DOM
-			targetElement = targetElement.parentNode;
-		} while (targetElement);
+		/**
+   * EventListener for closing the font picker when clicking anywhere outside it
+   */
 
-		// click outside font picker
-		this.toggleExpanded();
-	}
+	}, {
+		key: 'closeEventListener',
+		value: function closeEventListener(e) {
+			var targetElement = e.target; // clicked element
 
-	/**
-  * Download the font previews for all visible font entries and the five after them
-  */
-	onScroll() {
-		const elementHeight = this.ul.scrollHeight / this.fontHandler.fonts.length;
-		const downloadIndex = Math.ceil((this.ul.scrollTop + this.ul.clientHeight) / elementHeight);
-		this.fontHandler.downloadPreviews(downloadIndex + 5);
-	}
+			do {
+				if (targetElement === document.getElementById('font-picker')) {
+					// click inside font picker
+					return;
+				}
+				// move up the DOM
+				targetElement = targetElement.parentNode;
+			} while (targetElement);
 
-	/**
-  * Set the font with the given font list index as the active one and highlight it in the list
-  */
-	selectFont(index) {
-		// change font
-		this.fontHandler.changeActiveFont(index);
+			// click outside font picker
+			this.toggleExpanded();
+		}
 
-		// write new font name in dropdown button
-		this.dropdownFont.innerHTML = this.fontHandler.activeFont.family;
+		/**
+   * Download the font previews for all visible font entries and the five after them
+   */
 
-		// highlight new active font
-		this.activeFontA.classList.remove('active-font');
-		this.activeFontA = this.ul.getElementsByTagName('li')[index].firstChild;
-		this.activeFontA.classList.add('active-font');
-	}
+	}, {
+		key: 'onScroll',
+		value: function onScroll() {
+			var elementHeight = this.ul.scrollHeight / this.fontHandler.fonts.length;
+			var downloadIndex = Math.ceil((this.ul.scrollTop + this.ul.clientHeight) / elementHeight);
+			this.fontHandler.downloadPreviews(downloadIndex + 5);
+		}
 
-	/**
-  * Expand/collapse the picker's font list
-  */
-	toggleExpanded() {
-		if (this.expanded) {
-			this.expanded = false;
-			this.dropdownButton.classList.remove('expanded');
-			this.ul.classList.remove('expanded');
-			document.removeEventListener('click', this.closeEventListener);
-		} else {
-			this.expanded = true;
-			this.dropdownButton.classList.add('expanded');
-			this.ul.classList.add('expanded');
-			document.addEventListener('click', this.closeEventListener);
+		/**
+   * Set the font with the given font list index as the active one and highlight it in the list
+   */
+
+	}, {
+		key: 'selectFont',
+		value: function selectFont(index) {
+			// change font
+			this.fontHandler.changeActiveFont(index);
+
+			// write new font name in dropdown button
+			this.dropdownFont.innerHTML = this.fontHandler.activeFont.family;
+
+			// highlight new active font
+			this.activeFontA.classList.remove('active-font');
+			this.activeFontA = this.ul.getElementsByTagName('li')[index].firstChild;
+			this.activeFontA.classList.add('active-font');
 		}
-	}
-}
 
+		/**
+   * Expand/collapse the picker's font list
+   */
+
+	}, {
+		key: 'toggleExpanded',
+		value: function toggleExpanded() {
+			if (this.expanded) {
+				this.expanded = false;
+				this.dropdownButton.classList.remove('expanded');
+				this.ul.classList.remove('expanded');
+				document.removeEventListener('click', this.closeEventListener);
+			} else {
+				this.expanded = true;
+				this.dropdownButton.classList.add('expanded');
+				this.ul.classList.add('expanded');
+				document.addEventListener('click', this.closeEventListener);
+			}
+		}
+	}]);
+	return FontPicker;
+}();
+
 return FontPicker;
 
 })));

package.json

 {
 	"name": "font-picker",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"description": "Font picker component for previewing, selecting, and downloading Google Fonts",
@@ -25,3 +25,2 @@ "keywords": [
 		"babel-core": "^6.26.0",
-		"babel-eslint": "^8.2.1",
 		"babel-plugin-external-helpers": "^6.22.0",
@@ -28,0 +27,0 @@ "babel-preset-env": "^1.6.1",

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

28734

increased by11.2%

Dev dependency count

12

decreased by-7.69%

Lines of code

550

increased by9.78%

No dependency changes