baseframe-js
Version:
A suite of useful Javascript plugins and functions to help with Front-end Development on websites
74 lines (73 loc) • 2.78 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _cashDom = _interopRequireDefault(require("cash-dom"));
var _helpers = require("../util/helpers");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
;
var defaultProps = {
focusFirst: true,
nameSpace: 'trapFocus',
focusable: ['button', 'a', 'input', 'select', 'textarea', '[tabindex]']
};
;
var canFocusEls = function canFocusEls(i, el) {
var baseFocusableRules = (0, _helpers.isVisible)(el, true) && el.tabIndex !== -1;
var nodeName = el.nodeName.toUpperCase();
if (nodeName === 'BUTTON' || nodeName === 'INPUT') {
return baseFocusableRules && !el.disabled;
}
return baseFocusableRules && el.style.pointerEvents !== 'none';
};
var trapFocus = function trapFocus(modalEl, props) {
var _$$extend = _cashDom["default"].extend({}, defaultProps, props),
focusFirst = _$$extend.focusFirst,
focusable = _$$extend.focusable,
nameSpace = _$$extend.nameSpace;
var $trapElem = (0, _cashDom["default"])(modalEl);
var focusableJoined = typeof focusable === 'string' ? focusable : focusable.join(',');
var $firstFocusable = $trapElem.find(focusableJoined).filter(canFocusEls);
var firstFocusable = $firstFocusable.length ? $firstFocusable[0] : null;
if (focusFirst && firstFocusable) {
firstFocusable.focus();
}
(0, _cashDom["default"])(document.body).on("keydown.".concat(nameSpace), function (e) {
var $focusable = $trapElem.find(focusableJoined).filter(canFocusEls);
if (!$focusable.length) return;
var activeEl = document.activeElement;
var lastFocusable = $focusable[$focusable.length - 1];
var isTabPressed = e.key === 'Tab';
firstFocusable = $focusable[0];
if (!isTabPressed) {
return;
}
if (activeEl.nodeName.toUpperCase() === 'BODY') {
// somehow we lost focus
// this can happen if the last element is disabled if it was focused
// so re-assign to the first element
firstFocusable && firstFocusable.focus();
e.preventDefault();
}
if (e.shiftKey) {
// if shift key pressed for shift + tab combination
if (activeEl && firstFocusable && document.activeElement.isSameNode(firstFocusable)) {
lastFocusable && lastFocusable.focus();
e.preventDefault();
}
} else {
// if tab key is pressed
if (activeEl && lastFocusable && activeEl.isSameNode(lastFocusable)) {
firstFocusable && firstFocusable.focus();
e.preventDefault();
}
}
});
return {
remove: function remove() {
(0, _cashDom["default"])(document.body).off("keydown.".concat(nameSpace));
}
};
};
var _default = exports["default"] = trapFocus;