Source: jquery.keyboardtrap.js

  1. /**
  2. * @file jQuery singleton traps keyboard focus cycle within given element's interactive children
  3. * @author Ian McBurnie <ianmcburnie@hotmail.com>
  4. * @version 1.0.1
  5. * @requires jquery
  6. * @requires jquery-focusable
  7. */
  8. (function($, window, document, undefined) {
  9. var pluginName = 'jquery-keyboard-trap'; // eslint-disable-line no-unused-vars
  10. var trapTemplate = '<div tabindex="0" class="keyboard-trap-boundary">';
  11. var $topTrap = $(trapTemplate);
  12. var $outerTrapBefore = $(trapTemplate);
  13. var $innerTrapBefore = $(trapTemplate);
  14. var $innerTrapAfter = $(trapTemplate);
  15. var $outerTrapAfter = $(trapTemplate);
  16. var $botTrap = $(trapTemplate);
  17. var $trap;
  18. var $firstTabElement;
  19. var $lastTabElement;
  20. function setFocusToFirstFocusableElement() {
  21. $firstTabElement.focus();
  22. }
  23. function setFocusToLastFocusableElement() {
  24. $lastTabElement.focus();
  25. }
  26. $topTrap.on('focus', setFocusToFirstFocusableElement);
  27. $outerTrapBefore.on('focus', setFocusToFirstFocusableElement);
  28. $innerTrapBefore.on('focus', setFocusToLastFocusableElement);
  29. $innerTrapAfter.on('focus', setFocusToFirstFocusableElement);
  30. $outerTrapAfter.on('focus', setFocusToLastFocusableElement);
  31. $botTrap.on('focus', setFocusToLastFocusableElement);
  32. /**
  33. * @method "jQuery.trapKeyboard"
  34. * @param {Object} [options]
  35. * @fires keyboardTrap - when trap is activated
  36. * @fires keyboardUntrap - when trap is deactivated
  37. * @return {Object} chainable jQuery class
  38. */
  39. $.trapKeyboard = function trapKeyboard(el) {
  40. var $focusable;
  41. $.untrapKeyboard();
  42. $trap = $(el);
  43. $focusable = $trap.focusable();
  44. $firstTabElement = $focusable.first();
  45. $lastTabElement = $focusable.last();
  46. $('body').prepend($topTrap);
  47. $outerTrapBefore.insertBefore($trap);
  48. $trap.prepend($innerTrapBefore);
  49. $trap.append($innerTrapAfter);
  50. $outerTrapAfter.insertAfter($trap);
  51. $('body').append($botTrap);
  52. $trap.addClass('keyboard-trap--active');
  53. $trap.trigger('keyboardTrap');
  54. return $trap;
  55. };
  56. $.untrapKeyboard = function untrapKeyboard() {
  57. if ($trap !== undefined) {
  58. $topTrap.detach();
  59. $outerTrapBefore.detach();
  60. $innerTrapBefore.detach();
  61. $innerTrapAfter.detach();
  62. $outerTrapAfter.detach();
  63. $botTrap.detach();
  64. $trap.off('focusExit');
  65. $trap.removeClass('keyboard-trap--active');
  66. $trap.trigger('keyboardUntrap');
  67. }
  68. return $trap;
  69. };
  70. }(jQuery, window, document));
  71. /**
  72. * The jQuery plugin namespace.
  73. * @external "jQuery.fn"
  74. * @see {@link http://learn.jquery.com/plugins/|jQuery Plugins}
  75. */
  76. /**
  77. * keyboardTrap event
  78. *
  79. * @event keyboardTrap
  80. * @type {object}
  81. * @property {object} event - event object
  82. */
  83. /**
  84. * keyboardUntrap event
  85. *
  86. * @event keyboardUntrap
  87. * @type {object}
  88. * @property {object} event - event object
  89. */