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
  11.     var trapTemplate = '<div tabindex="0" class="keyboard-trap-boundary">';
  12.     var $topTrap = $(trapTemplate);
  13.     var $outerTrapBefore = $(trapTemplate);
  14.     var $innerTrapBefore = $(trapTemplate);
  15.     var $innerTrapAfter = $(trapTemplate);
  16.     var $outerTrapAfter = $(trapTemplate);
  17.     var $botTrap = $(trapTemplate);
  18.     var $trap;
  19.     var $firstTabElement;
  20.     var $lastTabElement;
  22.     function setFocusToFirstFocusableElement() {
  23.         $firstTabElement.focus();
  24.     }
  26.     function setFocusToLastFocusableElement() {
  27.         $lastTabElement.focus();
  28.     }
  30.     $topTrap.on('focus', setFocusToFirstFocusableElement);
  31.     $outerTrapBefore.on('focus', setFocusToFirstFocusableElement);
  32.     $innerTrapBefore.on('focus', setFocusToLastFocusableElement);
  33.     $innerTrapAfter.on('focus', setFocusToFirstFocusableElement);
  34.     $outerTrapAfter.on('focus', setFocusToLastFocusableElement);
  35.     $botTrap.on('focus', setFocusToLastFocusableElement);
  37.     /**
  38.     * @method "jQuery.trapKeyboard"
  39.     * @param {Object} [options]
  40.     * @fires keyboardTrap - when trap is activated
  41.     * @fires keyboardUntrap - when trap is deactivated
  42.     * @return {Object} chainable jQuery class
  43.     */
  44.     $.trapKeyboard = function trapKeyboard(el) {
  45.         var $focusable;
  47.         $.untrapKeyboard();
  49.         $trap = $(el);
  50.         $focusable = $trap.focusable();
  51.         $firstTabElement = $focusable.first();
  52.         $lastTabElement = $focusable.last();
  54.         $('body').prepend($topTrap);
  56.         $outerTrapBefore.insertBefore($trap);
  57.         $trap.prepend($innerTrapBefore);
  58.         $trap.append($innerTrapAfter);
  59.         $outerTrapAfter.insertAfter($trap);
  60.         $('body').append($botTrap);
  62.         $trap.addClass('keyboard-trap--active');
  63.         $trap.trigger('keyboardTrap');
  65.         return $trap;
  66.     };
  68.     $.untrapKeyboard = function untrapKeyboard() {
  69.         if ($trap !== undefined) {
  70.             $topTrap.detach();
  71.             $outerTrapBefore.detach();
  72.             $innerTrapBefore.detach();
  73.             $innerTrapAfter.detach();
  74.             $outerTrapAfter.detach();
  75.             $botTrap.detach();
  77.             $trap.off('focusExit');
  78.             $trap.removeClass('keyboard-trap--active');
  79.             $trap.trigger('keyboardUntrap');
  80.         }
  81.         return $trap;
  82.     };
  83. }(jQuery, window, document));
  85. /**
  86. * The jQuery plugin namespace.
  87. * @external "jQuery.fn"
  88. * @see {@link http://learn.jquery.com/plugins/|jQuery Plugins}
  89. */
  91. /**
  92. * keyboardTrap event
  93. *
  94. * @event keyboardTrap
  95. * @type {object}
  96. * @property {object} event - event object
  97. */
  99. /**
  100. * keyboardUntrap event
  101. *
  102. * @event keyboardUntrap
  103. * @type {object}
  104. * @property {object} event - event object
  105. */