focustracker.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* global setTimeout, clearTimeout */
  6. /**
  7. * @module utils/focustracker
  8. */
  9. import DomEmitterMixin from './dom/emittermixin';
  10. import ObservableMixin from './observablemixin';
  11. import CKEditorError from './ckeditorerror';
  12. import mix from './mix';
  13. /**
  14. * Allows observing a group of `HTMLElement`s whether at least one of them is focused.
  15. *
  16. * Used by the {@link module:core/editor/editor~Editor} in order to track whether the focus is still within the application,
  17. * or were used outside of its UI.
  18. *
  19. * **Note** `focus` and `blur` listeners use event capturing, so it is only needed to register wrapper `HTMLElement`
  20. * which contain other `focusable` elements. But note that this wrapper element has to be focusable too
  21. * (have e.g. `tabindex="-1"`).
  22. *
  23. * @mixes module:utils/dom/emittermixin~EmitterMixin
  24. * @mixes module:utils/observablemixin~ObservableMixin
  25. */
  26. export default class FocusTracker {
  27. constructor() {
  28. /**
  29. * True when one of the registered elements is focused.
  30. *
  31. * @readonly
  32. * @observable
  33. * @member {Boolean} #isFocused
  34. */
  35. this.set( 'isFocused', false );
  36. /**
  37. * Currently focused element.
  38. *
  39. * @readonly
  40. * @member {HTMLElement}
  41. */
  42. this.focusedElement = null;
  43. /**
  44. * List of registered elements.
  45. *
  46. * @private
  47. * @member {Set.<HTMLElement>}
  48. */
  49. this._elements = new Set();
  50. /**
  51. * Event loop timeout.
  52. *
  53. * @private
  54. * @member {Number}
  55. */
  56. this._nextEventLoopTimeout = null;
  57. }
  58. /**
  59. * Starts tracking the specified element.
  60. *
  61. * @param {HTMLElement} element
  62. */
  63. add( element ) {
  64. if ( this._elements.has( element ) ) {
  65. throw new CKEditorError( 'focusTracker-add-element-already-exist' );
  66. }
  67. this.listenTo( element, 'focus', () => this._focus( element ), { useCapture: true } );
  68. this.listenTo( element, 'blur', () => this._blur(), { useCapture: true } );
  69. this._elements.add( element );
  70. }
  71. /**
  72. * Stops tracking the specified element and stops listening on this element.
  73. *
  74. * @param {HTMLElement} element
  75. */
  76. remove( element ) {
  77. if ( element === this.focusedElement ) {
  78. this._blur( element );
  79. }
  80. if ( this._elements.has( element ) ) {
  81. this.stopListening( element );
  82. this._elements.delete( element );
  83. }
  84. }
  85. /**
  86. * Stores currently focused element and set {#isFocused} as `true`.
  87. *
  88. * @private
  89. * @param {HTMLElement} element Element which has been focused.
  90. */
  91. _focus( element ) {
  92. clearTimeout( this._nextEventLoopTimeout );
  93. this.focusedElement = element;
  94. this.isFocused = true;
  95. }
  96. /**
  97. * Clears currently focused element and set {@link #isFocused} as `false`.
  98. * This method uses `setTimeout` to change order of fires `blur` and `focus` events.
  99. *
  100. * @private
  101. * @fires blur
  102. */
  103. _blur() {
  104. clearTimeout( this._nextEventLoopTimeout );
  105. this._nextEventLoopTimeout = setTimeout( () => {
  106. this.focusedElement = null;
  107. this.isFocused = false;
  108. }, 0 );
  109. }
  110. /**
  111. * @event focus
  112. */
  113. /**
  114. * @event blur
  115. */
  116. }
  117. mix( FocusTracker, DomEmitterMixin );
  118. mix( FocusTracker, ObservableMixin );