focus-within-polyfill - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

dist/focus-within-polyfill.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("focus-within-polyfill",[],t):"object"==typeof exports?exports["focus-within-polyfill"]=t():e["focus-within-polyfill"]=t()}(window,function(){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)o.d(n,r,function(t){return e[t]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(e,t){!function(e,t){"use strict";var o;try{t.querySelector(":focus-within"),o=":focus-within pseudo class already supported."}catch(e){t.addEventListener("focus",n,!0),t.addEventListener("blur",n,!0),o=":focus-within pseudo class polyfilled.\nStyle for the '.focus-within' class is needed."}finally{console.groupCollapsed("Polyfill :focus-within"),console.info("%c".concat(o),"color: green"),console.groupEnd()}function n(o){var n,r,i;i||(e.requestAnimationFrame(function(){if(r=t.activeElement,i=!1,Array.prototype.slice.call(t.getElementsByClassName("focus-within")).forEach(function(e){return e.classList.remove("focus-within")}),"focus"===o.type&&r&&r!==t.body)for(n=r;n&&1===n.nodeType;n=n.parentNode)n.classList.add("focus-within")}),i=!0)}}(window,document)}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("focus-within-polyfill",[],t):"object"==typeof exports?exports["focus-within-polyfill"]=t():e["focus-within-polyfill"]=t()}(window,function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t){!function(e,t){"use strict";function n(n){var o,r,i;i||(e.requestAnimationFrame(function(){if(r=t.activeElement,i=!1,Array.prototype.slice.call(t.getElementsByClassName("focus-within")).forEach(function(e){return e.classList.remove("focus-within")}),"focus"===n.type&&r&&r!==t.body)for(o=r;o&&1===o.nodeType;o=o.parentNode)o.classList.add("focus-within")}),i=!0)}(function(){try{return t.querySelector(":focus-within"),console.info(":focus-within supported"),!0}catch(e){return console.info(":focus-within not supported"),!1}})()||(t.addEventListener("focus",n,!0),t.addEventListener("blur",n,!0))}(window,document)}])});

package.json

 {
 	"name": "focus-within-polyfill",
-	"version": "1.2.0",
+	"version": "1.3.0",
 	"description": "focus-within pseudo selector polyfill",
@@ -8,3 +8,3 @@ "main": "dist/focus-within-polyfill.js",
 		"build": "webpack --mode production",
-		"build:dev": "webpack --mode development --progress --colors",
+		"build:dev": "webpack --mode development --progress",
 		"version": "npm run build && npm --no-git-tag-version version",
@@ -11,0 +11,0 @@ "test": "echo \"Error: no test specified\" && exit 1"

README.md

 ��# :focus-within Pseudo-Class Polyfill
 
-in progress...
+[![Build Status](https://travis-ci.org/matteobad/focus-within-polyfill.svg?branch=master)](https://travis-ci.org/matteobad/focus-within-polyfill/)
 
----
+-   [How to use](#hot-to-use)
+-   [Browser support](#browser-support)
+-   [:focus-within MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within)
 
-### TODO
+The `:focus-within` CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus.
 
--   [ ] Write README.md
--   [ ] Build both normal and minified version with webpack
--   [ ] Extract check for pseudo-class support from main file
+More information on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within).
+
+## How to use
+
+This package is available both as production ready script and as a package. The script can be downloaded here, or install the package as follow.
+
+```bash
+# npm
+npm install focus-within-polyfill --save
+
+# yarn
+yarn add focus-within-polyfill
+```
+
+When the polyfill is included via a script tag it will run immediately after load. On the other hand when imported as a dependency, a call to `polyfill` method is required.
+
+```javascript
+import focuswithin from "focus-within-polyfill";
+
+// kick off!
+focuswithin.polyfill();
+```
+
+## Browser Support
+
+-   _Natively supported in Chrome_
+-   _Natively supported in Firefox_
+-   _Natively supported in Safari_
+-   _Natively supported in Opera_
+-   IE 11
+-   Edge
+
+## TODO
+
 -   [ ] Write some tests and examples
 -   [ ] Publish on npm
 

src/focus-within-polyfill.js

@@ -1,23 +0,26 @@
-!(function focusWithinPolyfill(window, document) {
+(function(window, document) {
 	"use strict";
 
-	var message;
-
-	// TODO extract support check
-	try {
-		document.querySelector(":focus-within");
-		message = ":focus-within pseudo class already supported.";
-	} catch (error) {
+	// Initilize polyfill
+	if (!supportsPseudo()) {
 		document.addEventListener("focus", update, true);
 		document.addEventListener("blur", update, true);
-		message =
-			":focus-within pseudo class polyfilled.\n" +
-			"Style for the '.focus-within' class is needed.";
-	} finally {
-		console.groupCollapsed("Polyfill :focus-within");
-		console.info(`%c${message}`, `color: green`);
-		console.groupEnd();
 	}
 
 	/**
+	 * Check for :focus-within pseudo class support
+	 * @returns {Boolean}
+	 */
+	function supportsPseudo() {
+		try {
+			document.querySelector(":focus-within");
+			console.info(":focus-within supported");
+			return true;
+		} catch (error) {
+			console.info(":focus-within not supported");
+			return false;
+		}
+	}
+
+	/**
 	 * Update focus-within class on focus and blur events
@@ -24,0 +27,0 @@ * @param {FocusEvent} e

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

47

increased by235.71%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

9655

decreased by-31.29%

Number of package files

10

decreased by-23.08%

Lines of code

43

decreased by-58.25%

No dependency changes