theme/boost/amd/src/bootstrap/util/focustrap.js

  1. /**
  2.  * --------------------------------------------------------------------------
  3.  * Bootstrap util/focustrap.js
  4.  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  5.  * --------------------------------------------------------------------------
  6.  */
  8. import EventHandler from '../dom/event-handler'
  9. import SelectorEngine from '../dom/selector-engine'
  10. import Config from './config'
  12. /**
  13.  * Constants
  14.  */
  16. const NAME = 'focustrap'
  17. const DATA_KEY = 'bs.focustrap'
  18. const EVENT_KEY = `.${DATA_KEY}`
  19. const EVENT_FOCUSIN = `focusin${EVENT_KEY}`
  20. const EVENT_KEYDOWN_TAB = `keydown.tab${EVENT_KEY}`
  22. const TAB_KEY = 'Tab'
  23. const TAB_NAV_FORWARD = 'forward'
  24. const TAB_NAV_BACKWARD = 'backward'
  26. const Default = {
  27.   autofocus: true,
  28.   trapElement: null // The element to trap focus inside of
  29. }
  31. const DefaultType = {
  32.   autofocus: 'boolean',
  33.   trapElement: 'element'
  34. }
  36. /**
  37.  * Class definition
  38.  */
  40. class FocusTrap extends Config {
  41.   constructor(config) {
  42.     super()
  43.     this._config = this._getConfig(config)
  44.     this._isActive = false
  45.     this._lastTabNavDirection = null
  46.   }
  48.   // Getters
  49.   static get Default() {
  50.     return Default
  51.   }
  53.   static get DefaultType() {
  54.     return DefaultType
  55.   }
  57.   static get NAME() {
  58.     return NAME
  59.   }
  61.   // Public
  62.   activate() {
  63.     if (this._isActive) {
  64.       return
  65.     }
  67.     if (this._config.autofocus) {
  68.       this._config.trapElement.focus()
  69.     }
  71.     EventHandler.off(document, EVENT_KEY) // guard against infinite focus loop
  72.     EventHandler.on(document, EVENT_FOCUSIN, event => this._handleFocusin(event))
  73.     EventHandler.on(document, EVENT_KEYDOWN_TAB, event => this._handleKeydown(event))
  75.     this._isActive = true
  76.   }
  78.   deactivate() {
  79.     if (!this._isActive) {
  80.       return
  81.     }
  83.     this._isActive = false
  84.     EventHandler.off(document, EVENT_KEY)
  85.   }
  87.   // Private
  88.   _handleFocusin(event) {
  89.     const { trapElement } = this._config
  91.     if (event.target === document || event.target === trapElement || trapElement.contains(event.target)) {
  92.       return
  93.     }
  95.     const elements = SelectorEngine.focusableChildren(trapElement)
  97.     if (elements.length === 0) {
  98.       trapElement.focus()
  99.     } else if (this._lastTabNavDirection === TAB_NAV_BACKWARD) {
  100.       elements[elements.length - 1].focus()
  101.     } else {
  102.       elements[0].focus()
  103.     }
  104.   }
  106.   _handleKeydown(event) {
  107.     if (event.key !== TAB_KEY) {
  108.       return
  109.     }
  111.     this._lastTabNavDirection = event.shiftKey ? TAB_NAV_BACKWARD : TAB_NAV_FORWARD
  112.   }
  113. }
  115. export default FocusTrap