New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
focus-within-polyfill
Advanced tools
focus-within-polyfill - npm Package Compare versions
Comparing version 1.3.4 to 1.4.0
| { | ||
| "name": "focus-within-polyfill", | ||
| "version": "1.3.4", | ||
| "version": "1.4.0", | ||
| "description": "focus-within pseudo selector polyfill", | ||
| "main": "dist/focus-within.js", | ||
| "main": "dist/focus-within-polyfill.js", | ||
| "module": "dist/focus-within-polyfill.mjs", | ||
| "jsnext:main": "dist/focus-within-polyfill.mjs", | ||
| "scripts": { | ||
| "build": "npm run build:dev && npm run build:prod", | ||
| "build:dev": "rollup -c rollup.config.js --environment BUILD:development", | ||
| "build:prod": "rollup -c rollup.config.js --environment BUILD:production", | ||
| "build": "rollup -c rollup.config.js --environment BUILD:production", | ||
| "watch": "rollup -c rollup.config.js --environment BUILD:development -w", | ||
| "prepublish": "npm run build", | ||
| "preversion": "npm test", | ||
| "version": "npm run build", | ||
| "postversion": "git push && git push --tags", | ||
| "prepublish": "npm run build", | ||
| "test": "echo \"Error: no test specified\" && exit 0" | ||
@@ -16,0 +16,0 @@ }, |
@@ -1,42 +0,49 @@ | ||
| ��# ` : f o c u s - w i t h i n ` P s e u d o - C l a s s P o l y f i l l | ||
| [ ! [ n p m v e r s i o n ] ( h t t p s : / / b a d g e . f u r y . i o / j s / f o c u s - w i t h i n - p o l y f i l l . s v g ) ] ( h t t p s : / / b a d g e . f u r y . i o / j s / f o c u s - w i t h i n - p o l y f i l l ) [ ! [ B u i l d S t a t u s ] ( h t t p s : / / t r a v i s - c i . o r g / m a t t e o b a d / f o c u s - w i t h i n - p o l y f i l l . s v g ? b r a n c h = m a s t e r ) ] ( h t t p s : / / t r a v i s - c i . o r g / m a t t e o b a d / f o c u s - w i t h i n - p o l y f i l l / ) | ||
| * [ H o w t o u s e ] ( # h o t - t o - u s e ) | ||
| * [ B r o w s e r s u p p o r t ] ( # b r o w s e r - s u p p o r t ) | ||
| * [ : f o c u s - w i t h i n M D N ] ( h t t p s : / / d e v e l o p e r . m o z i l l a . o r g / e n - U S / d o c s / W e b / C S S / : f o c u s - w i t h i n ) | ||
| T h e ` : f o c u s - w i t h i n ` C S S p s e u d o - c l a s s r e p r e s e n t s a n e l e m e n t t h a t h a s r e c e i v e d f o c u s o r c o n t a i n s a n e l e m e n t t h a t h a s r e c e i v e d f o c u s . I n o t h e r w o r d s , i t r e p r e s e n t s a n e l e m e n t t h a t i s i t s e l f m a t c h e d b y t h e : f o c u s p s e u d o - c l a s s o r h a s a d e s c e n d a n t t h a t i s m a t c h e d b y : f o c u s . | ||
| M o r e i n f o r m a t i o n o n [ M D N ] ( h t t p s : / / d e v e l o p e r . m o z i l l a . o r g / e n - U S / d o c s / W e b / C S S / : f o c u s - w i t h i n ) . | ||
| # # H o w t o u s e | ||
| T h i s p a c k a g e i s a v a i l a b l e b o t h a s p r o d u c t i o n r e a d y s c r i p t a n d a s a p a c k a g e . T h e s c r i p t c a n b e d o w n l o a d e d [ h e r e ] ( h t t p s : / / u n p k g . c o m / f o c u s - w i t h i n - p o l y f i l l / d i s t / f o c u s - w i t h i n . m i n . j s ) , o r i n s t a l l e d w i t h a p a c k a g e m a n a g e r . | ||
| ` ` ` s h | ||
| # n p m | ||
| n p m i n s t a l l f o c u s - w i t h i n - p o l y f i l l - - s a v e | ||
| # y a r n | ||
| y a r n a d d f o c u s - w i t h i n - p o l y f i l l | ||
| ` ` ` | ||
| W h e n t h e p o l y f i l l i s i n c l u d e d v i a a s c r i p t t a g i t w i l l r u n i m m e d i a t e l y a f t e r l o a d . O n t h e o t h e r h a n d w h e n i m p o r t e d a s a d e p e n d e n c y , a c a l l t o ` p o l y f i l l ` m e t h o d i s r e q u i r e d . | ||
| ` ` ` j a v a s c r i p t | ||
| i m p o r t f o c u s w i t h i n f r o m ' f o c u s - w i t h i n - p o l y f i l l ' | ||
| / / k i c k o f f ! | ||
| f o c u s w i t h i n . p o l y f i l l ( ) | ||
| ` ` ` | ||
| # # B r o w s e r S u p p o r t | ||
| * _ N a t i v e l y s u p p o r t e d i n C h r o m e _ | ||
| * _ N a t i v e l y s u p p o r t e d i n F i r e f o x _ | ||
| * _ N a t i v e l y s u p p o r t e d i n S a f a r i _ | ||
| * _ N a t i v e l y s u p p o r t e d i n O p e r a _ | ||
| * I E 1 1 | ||
| * E d g e | ||
| # `:focus-within` Pseudo-Class Polyfill | ||
| [](https://badge.fury.io/js/focus-within-polyfill) [](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) | ||
| 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. | ||
| 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](https://unpkg.com/focus-within-polyfill/dist/focus-within.min.js), or installed with a package manager. | ||
| ```sh | ||
| # npm | ||
| npm install focus-within-polyfill --save | ||
| # yarn | ||
| yarn add focus-within-polyfill | ||
| ``` | ||
| When the polyfill is included via a script tag it will create a `focusWithin` object with a `loadPolyfill` and a `unloadPolyfill` method to initialize the code. On the other hand when imported as a dependency the same methods are exposed. | ||
| ```javascript | ||
| /* ES6 */ | ||
| import { polyfill, unloadPolyfill } from 'focus-within-polyfill' | ||
| polyfill() // load polyfill | ||
| unloadPolyfill() // unload polyfill | ||
| /* ES5 */ | ||
| <script src='path/to/focus-within-polyfill.js'></script> | ||
| focusWithin.polyfill() // load polyfill | ||
| focusWithin.unloadPolyfill() // unload polyfill | ||
| ``` | ||
| ## Browser Support | ||
| * _Natively supported in Chrome_ | ||
| * _Natively supported in Firefox_ | ||
| * _Natively supported in Safari_ | ||
| * _Natively supported in Opera_ | ||
| * IE 11 | ||
| * Edge |
@@ -1,56 +0,49 @@ | ||
| 'use strict' | ||
| import { supportsPseudo } from './supports-pseudo' | ||
| function polyfill() { | ||
| // Initilize polyfill | ||
| if (!supportsPseudo()) { | ||
| document.addEventListener('focus', update, true) | ||
| document.addEventListener('blur', update, true) | ||
| } | ||
| /** | ||
| * Update focus-within class on focus and blur events | ||
| * @param {FocusEvent} e | ||
| */ | ||
| function update(e) { | ||
| var el, element, running | ||
| /** | ||
| * 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 | ||
| } | ||
| } | ||
| var action = function() { | ||
| element = document.activeElement | ||
| running = false | ||
| /** | ||
| * Update focus-within class on focus and blur events | ||
| * @param {FocusEvent} e | ||
| */ | ||
| function update(e) { | ||
| var el, element, running | ||
| Array.prototype.slice | ||
| .call(document.getElementsByClassName('focus-within')) | ||
| .forEach(el => el.classList.remove('focus-within')) | ||
| var action = function() { | ||
| element = document.activeElement | ||
| running = false | ||
| if (e.type === 'focus' && element && element !== document.body) | ||
| for (el = element; el && el.nodeType === 1; el = el.parentNode) | ||
| el.classList.add('focus-within') | ||
| } | ||
| Array.prototype.slice | ||
| .call(document.getElementsByClassName('focus-within')) | ||
| .forEach(el => el.classList.remove('focus-within')) | ||
| if (!running) { | ||
| window.requestAnimationFrame(action) | ||
| running = true | ||
| } | ||
| } | ||
| if (e.type === 'focus' && element && element !== document.body) | ||
| for (el = element; el && el.nodeType === 1; el = el.parentNode) | ||
| el.classList.add('focus-within') | ||
| } | ||
| if (!running) { | ||
| window.requestAnimationFrame(action) | ||
| running = true | ||
| } | ||
| /** | ||
| * Load polyfill | ||
| */ | ||
| export function loadPolyfill() { | ||
| if (!supportsPseudo()) { | ||
| document.addEventListener('focus', update, true) | ||
| document.addEventListener('blur', update, true) | ||
| console.info(':focus-within polyfill loaded.') | ||
| } | ||
| } | ||
| if (typeof exports === 'object' && typeof module !== 'undefined') { | ||
| module.exports = { polyfill: polyfill } | ||
| } else { | ||
| polyfill() | ||
| /** | ||
| * Unload polyfill | ||
| */ | ||
| export function unloadPolyfill() { | ||
| if (!supportsPseudo()) { | ||
| document.removeEventListener('focus', update, true) | ||
| document.removeEventListener('blur', update, true) | ||
| console.info(':focus-within polyfill removed.') | ||
| } | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by741.89%
71468
- Number of package files
- increased by22.22%
11
- Number of lines in readme file
- increased by19.05%
50
Worsened metrics
- Lines of code
- decreased by-35.64%
65
No dependency changes