aria-hidden
Advanced tools
Comparing version 1.0.0 to 1.1.0
export declare type Undo = () => void; | ||
export declare const hideOthers: (target: HTMLElement, parentNode?: HTMLElement) => Undo; | ||
export declare const hideOthers: (target: HTMLElement | HTMLElement[], parentNode?: HTMLElement, markerName?: string) => Undo; |
var defaultParent = typeof document !== 'undefined' ? document.body : null; | ||
export var hideOthers = function (target, parentNode) { | ||
var counterMap = new WeakMap(); | ||
var uncontrolledNodes = new WeakMap(); | ||
var markerMap = {}; | ||
var lockCount = 0; | ||
export var hideOthers = function (target, parentNode, markerName) { | ||
if (parentNode === void 0) { parentNode = defaultParent; } | ||
var originalValues = new Map(); | ||
if (markerName === void 0) { markerName = "data-aria-hidden"; } | ||
var targets = Array.isArray(target) ? target : [target]; | ||
if (!markerMap[markerName]) { | ||
markerMap[markerName] = new WeakMap(); | ||
} | ||
var markerCounter = markerMap[markerName]; | ||
var hiddenNodes = []; | ||
var deep = function (parent) { | ||
@@ -10,3 +20,3 @@ if (!parent || parent === target) { | ||
Array.prototype.forEach.call(parent.children, function (node) { | ||
if (node.contains(target)) { | ||
if (targets.some(function (target) { return node.contains(target); })) { | ||
deep(node); | ||
@@ -17,7 +27,16 @@ } | ||
var alreadyHidden = attr !== null && attr !== 'false'; | ||
if (alreadyHidden) { | ||
return; | ||
var counterValue = (counterMap.get(node) || 0) + 1; | ||
var markerValue = (markerCounter.get(node) || 0) + 1; | ||
counterMap.set(node, counterValue); | ||
markerCounter.set(node, markerValue); | ||
hiddenNodes.push(node); | ||
if (counterValue === 1 && alreadyHidden) { | ||
uncontrolledNodes.set(node, true); | ||
} | ||
originalValues.set(node, attr); | ||
node.setAttribute('aria-hidden', 'true'); | ||
if (markerValue === 1) { | ||
node.setAttribute(markerName, 'true'); | ||
} | ||
if (!alreadyHidden) { | ||
node.setAttribute('aria-hidden', 'true'); | ||
} | ||
} | ||
@@ -27,12 +46,27 @@ }); | ||
deep(parentNode); | ||
lockCount++; | ||
return function () { | ||
originalValues.forEach(function (hiddenAttr, node) { | ||
if (hiddenAttr === null) { | ||
node.removeAttribute('aria-hidden'); | ||
hiddenNodes.forEach(function (node) { | ||
var counterValue = counterMap.get(node) - 1; | ||
var markerValue = markerCounter.get(node) - 1; | ||
counterMap.set(node, counterValue); | ||
markerCounter.set(node, markerValue); | ||
if (!counterValue) { | ||
if (!uncontrolledNodes.has(node)) { | ||
node.removeAttribute('aria-hidden'); | ||
} | ||
uncontrolledNodes.delete(node); | ||
} | ||
else { | ||
node.setAttribute('aria-hidden', hiddenAttr); | ||
if (!markerValue) { | ||
node.removeAttribute(markerName); | ||
} | ||
}); | ||
lockCount--; | ||
if (!lockCount) { | ||
counterMap = new WeakMap(); | ||
counterMap = new WeakMap(); | ||
uncontrolledNodes = new WeakMap(); | ||
markerMap = {}; | ||
} | ||
}; | ||
}; |
export declare type Undo = () => void; | ||
export declare const hideOthers: (target: HTMLElement, parentNode?: HTMLElement) => Undo; | ||
export declare const hideOthers: (target: HTMLElement | HTMLElement[], parentNode?: HTMLElement, markerName?: string) => Undo; |
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var defaultParent = typeof document !== 'undefined' ? document.body : null; | ||
exports.hideOthers = function (target, parentNode) { | ||
var counterMap = new WeakMap(); | ||
var uncontrolledNodes = new WeakMap(); | ||
var markerMap = {}; | ||
var lockCount = 0; | ||
exports.hideOthers = function (target, parentNode, markerName) { | ||
if (parentNode === void 0) { parentNode = defaultParent; } | ||
var originalValues = new Map(); | ||
if (markerName === void 0) { markerName = "data-aria-hidden"; } | ||
var targets = Array.isArray(target) ? target : [target]; | ||
if (!markerMap[markerName]) { | ||
markerMap[markerName] = new WeakMap(); | ||
} | ||
var markerCounter = markerMap[markerName]; | ||
var hiddenNodes = []; | ||
var deep = function (parent) { | ||
@@ -12,3 +22,3 @@ if (!parent || parent === target) { | ||
Array.prototype.forEach.call(parent.children, function (node) { | ||
if (node.contains(target)) { | ||
if (targets.some(function (target) { return node.contains(target); })) { | ||
deep(node); | ||
@@ -19,7 +29,16 @@ } | ||
var alreadyHidden = attr !== null && attr !== 'false'; | ||
if (alreadyHidden) { | ||
return; | ||
var counterValue = (counterMap.get(node) || 0) + 1; | ||
var markerValue = (markerCounter.get(node) || 0) + 1; | ||
counterMap.set(node, counterValue); | ||
markerCounter.set(node, markerValue); | ||
hiddenNodes.push(node); | ||
if (counterValue === 1 && alreadyHidden) { | ||
uncontrolledNodes.set(node, true); | ||
} | ||
originalValues.set(node, attr); | ||
node.setAttribute('aria-hidden', 'true'); | ||
if (markerValue === 1) { | ||
node.setAttribute(markerName, 'true'); | ||
} | ||
if (!alreadyHidden) { | ||
node.setAttribute('aria-hidden', 'true'); | ||
} | ||
} | ||
@@ -29,12 +48,27 @@ }); | ||
deep(parentNode); | ||
lockCount++; | ||
return function () { | ||
originalValues.forEach(function (hiddenAttr, node) { | ||
if (hiddenAttr === null) { | ||
node.removeAttribute('aria-hidden'); | ||
hiddenNodes.forEach(function (node) { | ||
var counterValue = counterMap.get(node) - 1; | ||
var markerValue = markerCounter.get(node) - 1; | ||
counterMap.set(node, counterValue); | ||
markerCounter.set(node, markerValue); | ||
if (!counterValue) { | ||
if (!uncontrolledNodes.has(node)) { | ||
node.removeAttribute('aria-hidden'); | ||
} | ||
uncontrolledNodes.delete(node); | ||
} | ||
else { | ||
node.setAttribute('aria-hidden', hiddenAttr); | ||
if (!markerValue) { | ||
node.removeAttribute(markerName); | ||
} | ||
}); | ||
lockCount--; | ||
if (!lockCount) { | ||
counterMap = new WeakMap(); | ||
counterMap = new WeakMap(); | ||
uncontrolledNodes = new WeakMap(); | ||
markerMap = {}; | ||
} | ||
}; | ||
}; |
{ | ||
"name": "aria-hidden", | ||
"version": "1.0.0", | ||
"version": "1.1.0", | ||
"description": "Cast aria-hidden to everything, except...", | ||
@@ -32,3 +32,8 @@ "main": "dist/es5/index.js", | ||
], | ||
"keywords": ["DOM", "aria", "hidden", "inert"], | ||
"keywords": [ | ||
"DOM", | ||
"aria", | ||
"hidden", | ||
"inert" | ||
], | ||
"homepage": "https://github.com/theKashey/aria-hidden#readme", | ||
@@ -38,3 +43,6 @@ "repository": { | ||
"url": "git+https://github.com/theKashey/aria-hidden.git" | ||
}, | ||
"dependencies": { | ||
"tslib": "^1.0.0" | ||
} | ||
} | ||
} |
aria-hidden | ||
==== | ||
[![NPM](https://nodei.co/npm/aria-hidden.png?downloads=true&stars=true)](https://nodei.co/npm/aria-hidden/) | ||
Hides from ARIA everything, except provided node. | ||
@@ -27,2 +29,10 @@ Helps to isolate modal dialogs and focused task - the content will be not accessible using | ||
# Inspiration | ||
Based on [smooth-ui](https://github.com/smooth-code/smooth-ui) modal dialogs. | ||
# See also | ||
- [inert](https://github.com/WICG/inert) - The HTML attribute/property to mark parts of the DOM tree as "inert". | ||
- [react-focus-lock](https://github.com/theKashey/react-focus-lock) to lock Focus inside modal. | ||
- [react-scroll-lock](https://github.com/theKashey/react-scroll-lock) to disable page scroll while modal is opened. | ||
# Size | ||
@@ -29,0 +39,0 @@ Code is 30 lines long |
8171
144
41
1
+ Addedtslib@^1.0.0
+ Addedtslib@1.14.1(transitive)