8
0
Pārlūkot izejas kodu

Support for multiple event types in DomEventObserver.

Piotrek Koszuliński 9 gadi atpakaļ
vecāks
revīzija
7abe757986

+ 9 - 6
packages/ckeditor5-engine/src/treeview/observer/domeventobserver.js

@@ -35,14 +35,17 @@ export default class DomEventObserver {
 		/**
 		 * Reference to the {@link core.treeView.TreeView} object.
 		 *
+		 * @readonly
 		 * @member {core.treeView.TreeView} core.treeView.observer.DomEventObserver#treeView
 		 */
 		this.treeView = treeView;
 
 		/**
-		 * Type of the DOM event the observer should listen on.
+		 * Type of the DOM event the observer should listen on. Array of types can be defined
+		 * if the obsever should listen to multiple DOM events.
 		 *
-		 * @member {String} core.treeView.observer.DomEventObserver#domEventType
+		 * @readonly
+		 * @member {String|Array.<String>} core.treeView.observer.DomEventObserver#domEventType
 		 */
 	}
 
@@ -59,10 +62,10 @@ export default class DomEventObserver {
 	 * @inheritDoc
 	 */
 	observe( domElement ) {
-		domElement.addEventListener( this.domEventType, domEvent => {
-			if ( this.isEnabled ) {
-				this.onDomEvent( domEvent );
-			}
+		const types = typeof this.domEventType == 'string' ? [ this.domEventType ] : this.domEventType;
+
+		types.forEach( type => {
+			domElement.addEventListener( type, domEvent => this.isEnabled && this.onDomEvent( domEvent ) );
 		} );
 	}
 

+ 36 - 5
packages/ckeditor5-engine/tests/treeview/observer/domeventobserver.js

@@ -10,7 +10,7 @@
 import DomEventObserver from '/ckeditor5/core/treeview/observer/domeventobserver.js';
 import TreeView from '/ckeditor5/core/treeview/treeview.js';
 
-class TestObserver extends DomEventObserver {
+class ClickObserver extends DomEventObserver {
 	constructor( treeView ) {
 		super( treeView );
 
@@ -22,6 +22,18 @@ class TestObserver extends DomEventObserver {
 	}
 }
 
+class MultiObserver extends DomEventObserver {
+	constructor( treeView ) {
+		super( treeView );
+
+		this.domEventType = [ 'evt1', 'evt2' ];
+	}
+
+	onDomEvent( domEvt ) {
+		this.fire( domEvt.type );
+	}
+}
+
 describe( 'DomEventObserver', () => {
 	let treeView;
 
@@ -35,7 +47,7 @@ describe( 'DomEventObserver', () => {
 		const evtSpy = sinon.spy();
 
 		treeView.createRoot( domElement, 'root' );
-		treeView.addObserver( TestObserver );
+		treeView.addObserver( ClickObserver );
 		treeView.on( 'click', evtSpy );
 
 		domElement.dispatchEvent( domEvent );
@@ -45,13 +57,32 @@ describe( 'DomEventObserver', () => {
 		expect( evtSpy.args[ 0 ][ 2 ] ).to.equal( domEvent );
 	} );
 
+	it( 'should add multiple event listeners', () => {
+		const domElement = document.createElement( 'p' );
+		const domEvent1 = new MouseEvent( 'evt1' );
+		const domEvent2 = new MouseEvent( 'evt2' );
+		const evtSpy1 = sinon.spy();
+		const evtSpy2 = sinon.spy();
+
+		treeView.createRoot( domElement, 'root' );
+		treeView.addObserver( MultiObserver );
+		treeView.on( 'evt1', evtSpy1 );
+		treeView.on( 'evt2', evtSpy2 );
+
+		domElement.dispatchEvent( domEvent1 );
+		expect( evtSpy1.calledOnce ).to.be.true;
+
+		domElement.dispatchEvent( domEvent2 );
+		expect( evtSpy2.calledOnce ).to.be.true;
+	} );
+
 	it( 'should not fire event if observer is disabled', () => {
 		const domElement = document.createElement( 'p' );
 		const domEvent = new MouseEvent( 'click' );
 		const evtSpy = sinon.spy();
 
 		treeView.createRoot( domElement, 'root' );
-		treeView.addObserver( TestObserver );
+		treeView.addObserver( ClickObserver );
 		treeView.on( 'click', evtSpy );
 
 		const testObserver = Array.from( treeView._observers )[ 0 ];
@@ -69,7 +100,7 @@ describe( 'DomEventObserver', () => {
 		const evtSpy = sinon.spy();
 
 		treeView.createRoot( domElement, 'root' );
-		treeView.addObserver( TestObserver );
+		treeView.addObserver( ClickObserver );
 		treeView.on( 'click', evtSpy );
 
 		const testObserver = Array.from( treeView._observers )[ 0 ];
@@ -89,7 +120,7 @@ describe( 'DomEventObserver', () => {
 
 	describe( 'fire', () => {
 		it( 'should do nothing if observer is disabled', () => {
-			const testObserver = new TestObserver( treeView );
+			const testObserver = new ClickObserver( treeView );
 			const fireSpy = sinon.spy( treeView, 'fire' );
 
 			testObserver.disable();