aria-hidden - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/es2015/index.d.ts

 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;

dist/es2015/index.js

 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 = {};
+        }
     };
 };

dist/es5/index.d.ts

 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;

dist/es5/index.js

 "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 = {};
+        }
     };
 };

package.json

 {
   "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"
   }
-}
+}

README.md

 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

No alert changes

Improved metrics

Total package byte prevSize

8171

76.25%

Lines of code

144

89.47%

Number of lines in readme file

41

32.26%

Worsened metrics

Dependency count

1

Infinity%

Dependency changes

• + Added

  tslib@^1.0.0

• + Added

  tslib@1.14.1
  (transitive)