8
0

domeventobserver.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * @module engine/view/observer/domeventobserver
  7. */
  8. import Observer from './observer';
  9. import DomEventData from './domeventdata';
  10. /**
  11. * Base class for DOM event observers. This class handles
  12. * {@link module:engine/view/observer/observer~Observer#observe adding} listeners to DOM elements,
  13. * {@link module:engine/view/observer/observer~Observer#disable disabling} and
  14. * {@link module:engine/view/observer/observer~Observer#enable re-enabling} events.
  15. * Child class needs to define
  16. * {@link module:engine/view/observer/domeventobserver~DomEventObserver#domEventType DOM event type} and
  17. * {@link module:engine/view/observer/domeventobserver~DomEventObserver#onDomEvent callback}.
  18. *
  19. * For instance:
  20. *
  21. * class ClickObserver extends DomEventObserver {
  22. * // It can also be defined as a normal property in the constructor.
  23. * get domEventType() {
  24. * return 'click';
  25. * }
  26. *
  27. * onDomEvent( domEvent ) {
  28. * this.fire( 'click', domEvent );
  29. * }
  30. * }
  31. *
  32. * @extends module:engine/view/observer/observer~Observer
  33. */
  34. export default class DomEventObserver extends Observer {
  35. /**
  36. * Type of the DOM event the observer should listen on. Array of types can be defined
  37. * if the obsever should listen to multiple DOM events.
  38. *
  39. * @readonly
  40. * @member {String|Array.<String>} #domEventType
  41. */
  42. /**
  43. * Callback which should be called when the DOM event occurred. Note that the callback will not be called if
  44. * observer {@link #isEnabled is not enabled}.
  45. *
  46. * @see #domEventType
  47. * @abstract
  48. * @method #onDomEvent
  49. */
  50. /**
  51. * @inheritDoc
  52. */
  53. constructor( view ) {
  54. super( view );
  55. /**
  56. * If set to `true` DOM events will be listened on the capturing phase.
  57. * Default value is `false`.
  58. *
  59. * @member {Boolean}
  60. */
  61. this.useCapture = false;
  62. }
  63. /**
  64. * @inheritDoc
  65. */
  66. observe( domElement ) {
  67. const types = typeof this.domEventType == 'string' ? [ this.domEventType ] : this.domEventType;
  68. types.forEach( type => {
  69. this.listenTo( domElement, type, ( eventInfo, domEvent ) => {
  70. if ( this.isEnabled && !this.checkShouldIgnoreEventFromTarget( domEvent.target ) ) {
  71. this.onDomEvent( domEvent );
  72. }
  73. }, { useCapture: this.useCapture } );
  74. } );
  75. }
  76. /**
  77. * Calls `Document#fire()` if observer {@link #isEnabled is enabled}.
  78. *
  79. * @see module:utils/emittermixin~EmitterMixin#fire
  80. * @param {String} eventType The event type (name).
  81. * @param {Event} domEvent The DOM event.
  82. * @param {Object} [additionalData] The additional data which should extend the
  83. * {@link module:engine/view/observer/domeventdata~DomEventData event data} object.
  84. */
  85. fire( eventType, domEvent, additionalData ) {
  86. if ( this.isEnabled ) {
  87. this.document.fire( eventType, new DomEventData( this.view, domEvent, additionalData ) );
  88. }
  89. }
  90. }