focus-lock - npm Package Compare versions

Comparing version 0.6.8 to 0.7.0

CHANGELOG.md

@@ -1,2 +0,2 @@
-## [0.6.8](https://github.com/theKashey/focus-lock/compare/v0.6.7...v0.6.8) (2020-04-24)
+# [0.7.0](https://github.com/theKashey/focus-lock/compare/v0.6.7...v0.7.0) (2020-06-18)
 
@@ -6,3 +6,5 @@
 
+* accept all focusable elements for autofocus, fixes [#16](https://github.com/theKashey/focus-lock/issues/16) ([88efbe8](https://github.com/theKashey/focus-lock/commit/88efbe8))
 * dataset of null error ([7cb428b](https://github.com/theKashey/focus-lock/commit/7cb428b))
+* update logic for index diff calculations, fixes [#14](https://github.com/theKashey/focus-lock/issues/14) ([4c7e637](https://github.com/theKashey/focus-lock/commit/4c7e637))
 
@@ -9,0 +11,0 @@

dist/cjs/focusMerge.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.getFocusabledIn = exports.newFocus = undefined;
+exports.getFocusabledIn = exports.newFocus = exports.NEW_FOCUS = undefined;
 
@@ -21,2 +21,4 @@ var _DOMutils = require('./utils/DOMutils');
 
+var _correctFocus = require('./utils/correctFocus');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -37,3 +39,5 @@
 
-var newFocus = exports.newFocus = function newFocus(innerNodes, outerNodes, activeElement, lastNode, autoFocused) {
+var NEW_FOCUS = exports.NEW_FOCUS = 'NEW_FOCUS';
+
+var newFocus = exports.newFocus = function newFocus(innerNodes, outerNodes, activeElement, lastNode) {
   var cnt = innerNodes.length;
@@ -56,2 +60,5 @@ var firstFocus = innerNodes[0];
 
+  var correctedNodes = (0, _correctFocus.correctNodes)(outerNodes);
+  var correctedIndexDiff = correctedNodes.indexOf(activeElement) - correctedNodes.indexOf(lastNode || activeIndex);
+
   var returnFirstNode = (0, _firstFocus.pickFocusable)(innerNodes, 0);
@@ -62,3 +69,3 @@ var returnLastNode = (0, _firstFocus.pickFocusable)(innerNodes, cnt - 1);
   if (activeIndex === -1 || lastNodeInside === -1) {
-    return innerNodes.indexOf(autoFocused && autoFocused.length ? (0, _firstFocus2.default)(autoFocused) : (0, _firstFocus2.default)(innerNodes));
+    return NEW_FOCUS;
   }
@@ -74,7 +81,7 @@ // old focus
   // last element
-  if (activeIndex >= firstNodeIndex && isOnGuard && Math.abs(indexDiff) > 1) {
+  if (activeIndex >= lastNodeIndex && isOnGuard && Math.abs(indexDiff) > 1) {
     return returnFirstNode;
   }
   // jump out, but not on the guard
-  if (indexDiff && Math.abs(indexDiff) > 1) {
+  if (indexDiff && Math.abs(correctedIndexDiff) > 1) {
     return lastNodeInside;
@@ -170,2 +177,3 @@ }
 
+  var anyFocusable = (0, _DOMutils.getAllTabbableNodes)(entries);
   var innerElements = (0, _DOMutils.getTabbableNodes)(entries).filter(function (_ref4) {
@@ -177,6 +185,3 @@ var node = _ref4.node;
   if (!innerElements[0]) {
-    innerElements = (0, _DOMutils.getAllTabbableNodes)(entries).filter(function (_ref5) {
-      var node = _ref5.node;
-      return notAGuard(node);
-    });
+    innerElements = anyFocusable;
     if (!innerElements[0]) {
@@ -187,14 +192,25 @@ return undefined;
 
-  var outerNodes = (0, _DOMutils.getTabbableNodes)([commonParent]).map(function (_ref6) {
-    var node = _ref6.node;
+  var outerNodes = (0, _DOMutils.getAllTabbableNodes)([commonParent]).map(function (_ref5) {
+    var node = _ref5.node;
     return node;
   });
   var orderedInnerElements = reorderNodes(outerNodes, innerElements);
-  var innerNodes = orderedInnerElements.map(function (_ref7) {
-    var node = _ref7.node;
+  var innerNodes = orderedInnerElements.map(function (_ref6) {
+    var node = _ref6.node;
     return node;
   });
 
-  var newId = newFocus(innerNodes, outerNodes, activeElement, lastNode, innerNodes.filter(findAutoFocused(allParentAutofocusables(entries))));
+  var newId = newFocus(innerNodes, outerNodes, activeElement, lastNode);
 
+  if (newId === "NEW_FOCUS") {
+    var autoFocusable = anyFocusable.map(function (_ref7) {
+      var node = _ref7.node;
+      return node;
+    }).filter(findAutoFocused(allParentAutofocusables(entries)));
+
+    return {
+      node: autoFocusable && autoFocusable.length ? (0, _firstFocus2.default)(autoFocusable) : (0, _firstFocus2.default)(innerNodes)
+    };
+  }
+
   if (newId === undefined) {
@@ -201,0 +217,0 @@ return newId;

dist/cjs/utils/DOMutils.js

@@ -22,3 +22,3 @@ 'use strict';
 var isVisible = exports.isVisible = function isVisible(node) {
-  return !node || node === document || node.nodeType === Node.DOCUMENT_NODE || !isElementHidden(window.getComputedStyle(node, null)) && isVisible(node.parentNode);
+  return !node || node === document || node.nodeType === Node.DOCUMENT_NODE || !isElementHidden(window.getComputedStyle(node, null)) && isVisible(node.parentNode && node.parentNode.nodeType === node.DOCUMENT_FRAGMENT_NODE ? node.parentNode.host : node.parentNode);
 };
@@ -65,2 +65,5 @@
 
+/**
+ * actually anything focusable
+ */
 var getAllTabbableNodes = exports.getAllTabbableNodes = function getAllTabbableNodes(topNodes) {
@@ -67,0 +70,0 @@ return (0, _tabOrder.orderByTabIndex)(filterFocusable((0, _tabUtils.getFocusables)(topNodes)), false);

dist/cjs/utils/firstFocus.js

@@ -6,19 +6,9 @@ 'use strict';
 });
-var isRadio = function isRadio(node) {
-  return node.tagName === 'INPUT' && node.type === 'radio';
-};
+exports.pickFocusable = undefined;
 
-var findSelectedRadio = function findSelectedRadio(node, nodes) {
-  return nodes.filter(isRadio).filter(function (el) {
-    return el.name === node.name;
-  }).filter(function (el) {
-    return el.checked;
-  })[0] || node;
-};
+var _correctFocus = require('./correctFocus');
 
 var pickFirstFocus = function pickFirstFocus(nodes) {
   if (nodes[0] && nodes.length > 1) {
-    if (isRadio(nodes[0]) && nodes[0].name) {
-      return findSelectedRadio(nodes[0], nodes);
-    }
+    return (0, _correctFocus.correctNode)(nodes[0], nodes);
   }
@@ -30,5 +20,3 @@ return nodes[0];
   if (nodes.length > 1) {
-    if (isRadio(nodes[index]) && nodes[index].name) {
-      return nodes.indexOf(findSelectedRadio(nodes[index], nodes));
-    }
+    return nodes.indexOf((0, _correctFocus.correctNode)(nodes[index], nodes));
   }
@@ -35,0 +23,0 @@ return index;

dist/es2015/focusMerge.js

@@ -5,2 +5,3 @@ import { getCommonParent, getTabbableNodes, getAllTabbableNodes, parentAutofocusables } from './utils/DOMutils';
 import { asArray } from './utils/array';
+import { correctNodes } from './utils/correctFocus';
 
@@ -20,3 +21,5 @@ var findAutoFocused = function findAutoFocused(autoFocusables) {
 
-export var newFocus = function newFocus(innerNodes, outerNodes, activeElement, lastNode, autoFocused) {
+export var NEW_FOCUS = 'NEW_FOCUS';
+
+export var newFocus = function newFocus(innerNodes, outerNodes, activeElement, lastNode) {
   var cnt = innerNodes.length;
@@ -39,2 +42,5 @@ var firstFocus = innerNodes[0];
 
+  var correctedNodes = correctNodes(outerNodes);
+  var correctedIndexDiff = correctedNodes.indexOf(activeElement) - correctedNodes.indexOf(lastNode || activeIndex);
+
   var returnFirstNode = pickFocusable(innerNodes, 0);
@@ -45,3 +51,3 @@ var returnLastNode = pickFocusable(innerNodes, cnt - 1);
   if (activeIndex === -1 || lastNodeInside === -1) {
-    return innerNodes.indexOf(autoFocused && autoFocused.length ? pickFirstFocus(autoFocused) : pickFirstFocus(innerNodes));
+    return NEW_FOCUS;
   }
@@ -57,7 +63,7 @@ // old focus
   // last element
-  if (activeIndex >= firstNodeIndex && isOnGuard && Math.abs(indexDiff) > 1) {
+  if (activeIndex >= lastNodeIndex && isOnGuard && Math.abs(indexDiff) > 1) {
     return returnFirstNode;
   }
   // jump out, but not on the guard
-  if (indexDiff && Math.abs(indexDiff) > 1) {
+  if (indexDiff && Math.abs(correctedIndexDiff) > 1) {
     return lastNodeInside;
@@ -153,2 +159,3 @@ }
 
+  var anyFocusable = getAllTabbableNodes(entries);
   var innerElements = getTabbableNodes(entries).filter(function (_ref4) {
@@ -160,6 +167,3 @@ var node = _ref4.node;
   if (!innerElements[0]) {
-    innerElements = getAllTabbableNodes(entries).filter(function (_ref5) {
-      var node = _ref5.node;
-      return notAGuard(node);
-    });
+    innerElements = anyFocusable;
     if (!innerElements[0]) {
@@ -170,14 +174,25 @@ return undefined;
 
-  var outerNodes = getTabbableNodes([commonParent]).map(function (_ref6) {
-    var node = _ref6.node;
+  var outerNodes = getAllTabbableNodes([commonParent]).map(function (_ref5) {
+    var node = _ref5.node;
     return node;
   });
   var orderedInnerElements = reorderNodes(outerNodes, innerElements);
-  var innerNodes = orderedInnerElements.map(function (_ref7) {
-    var node = _ref7.node;
+  var innerNodes = orderedInnerElements.map(function (_ref6) {
+    var node = _ref6.node;
     return node;
   });
 
-  var newId = newFocus(innerNodes, outerNodes, activeElement, lastNode, innerNodes.filter(findAutoFocused(allParentAutofocusables(entries))));
+  var newId = newFocus(innerNodes, outerNodes, activeElement, lastNode);
 
+  if (newId === "NEW_FOCUS") {
+    var autoFocusable = anyFocusable.map(function (_ref7) {
+      var node = _ref7.node;
+      return node;
+    }).filter(findAutoFocused(allParentAutofocusables(entries)));
+
+    return {
+      node: autoFocusable && autoFocusable.length ? pickFirstFocus(autoFocusable) : pickFirstFocus(innerNodes)
+    };
+  }
+
   if (newId === undefined) {
@@ -184,0 +199,0 @@ return newId;

dist/es2015/utils/DOMutils.js

@@ -13,3 +13,3 @@ import { orderByTabIndex } from './tabOrder';
 export var isVisible = function isVisible(node) {
-  return !node || node === document || node.nodeType === Node.DOCUMENT_NODE || !isElementHidden(window.getComputedStyle(node, null)) && isVisible(node.parentNode);
+  return !node || node === document || node.nodeType === Node.DOCUMENT_NODE || !isElementHidden(window.getComputedStyle(node, null)) && isVisible(node.parentNode && node.parentNode.nodeType === node.DOCUMENT_FRAGMENT_NODE ? node.parentNode.host : node.parentNode);
 };
@@ -56,2 +56,5 @@
 
+/**
+ * actually anything focusable
+ */
 export var getAllTabbableNodes = function getAllTabbableNodes(topNodes) {
@@ -58,0 +61,0 @@ return orderByTabIndex(filterFocusable(getFocusables(topNodes)), false);

dist/es2015/utils/firstFocus.js

@@ -1,18 +0,6 @@
-var isRadio = function isRadio(node) {
-  return node.tagName === 'INPUT' && node.type === 'radio';
-};
+import { correctNode } from './correctFocus';
 
-var findSelectedRadio = function findSelectedRadio(node, nodes) {
-  return nodes.filter(isRadio).filter(function (el) {
-    return el.name === node.name;
-  }).filter(function (el) {
-    return el.checked;
-  })[0] || node;
-};
-
 var pickFirstFocus = function pickFirstFocus(nodes) {
   if (nodes[0] && nodes.length > 1) {
-    if (isRadio(nodes[0]) && nodes[0].name) {
-      return findSelectedRadio(nodes[0], nodes);
-    }
+    return correctNode(nodes[0], nodes);
   }
@@ -24,5 +12,3 @@ return nodes[0];
   if (nodes.length > 1) {
-    if (isRadio(nodes[index]) && nodes[index].name) {
-      return nodes.indexOf(findSelectedRadio(nodes[index], nodes));
-    }
+    return nodes.indexOf(correctNode(nodes[index], nodes));
   }
@@ -29,0 +15,0 @@ return index;

package.json

 {
   "name": "focus-lock",
-  "version": "0.6.8",
+  "version": "0.7.0",
   "description": "DOM trap for a focus",
@@ -5,0 +5,0 @@ "main": "dist/cjs/index.js",

No alert changes

Improved metrics

Total package byte prevSize

45899

increased by5.56%

Number of package files

35

increased by6.06%

Lines of code

932

increased by6.76%

No dependency changes