Răsfoiți Sursa

Merge pull request #333 from ckeditor/t/327

Implemented DomEventData.
Piotrek Koszuliński 9 ani în urmă
părinte
comite
95b1d4c12b

+ 74 - 0
packages/ckeditor5-engine/src/treeview/observer/domeventdata.js

@@ -0,0 +1,74 @@
+/**
+ * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import extend from '../../../utils/lib/lodash/extend.js';
+
+/**
+ * Information about a DOM event in context of the {@link engine.treeView.TreeView}.
+ * It wraps the native event, which usually should not be used as the wrapper contains
+ * additional data (like key code for keyboard events).
+ *
+ * @memberOf engine.treeView.observer
+ */
+export default class DomEventData {
+	/**
+	 * @param {engine.treeView.TreeView} treeView The instance of the tree view.
+	 * @param {Event} domEvent The DOM event.
+	 * @param {Object} [additionalData] Additional properties that the instance should contain.
+	 */
+	constructor( treeView, domEvent, additionalData ) {
+		/**
+		 * The instance of the tree view.
+		 *
+		 * @readonly
+		 * @member {engine.treeView.TreeView} engine.treeView.observer.DomEvent#treeView
+		 */
+		this.treeView = treeView;
+
+		/**
+		 * The DOM event.
+		 *
+		 * @readonly
+		 * @member {Event} engine.treeView.observer.DomEvent#domEvent
+		 */
+		this.domEvent = domEvent;
+
+		/**
+		 * The DOM target.
+		 *
+		 * @readonly
+		 * @member {HTMLElement} engine.treeView.observer.DomEvent#target
+		 */
+		this.domTarget = domEvent.target;
+
+		extend( this, additionalData );
+	}
+
+	/**
+	 * The tree view element representing the target.
+	 *
+	 * @readonly
+	 * @type engine.treeView.Element
+	 */
+	get target() {
+		return this.treeView.domConverter.getCorrespondingViewElement( this.domTarget );
+	}
+
+	/**
+	 * Prevents the native's event default action.
+	 */
+	preventDefault() {
+		this.domEvent.preventDefault();
+	}
+
+	/**
+	 * Stops native event propagation.
+	 */
+	stopPropagation() {
+		this.domEvent.stopPropagation();
+	}
+}

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

@@ -6,6 +6,7 @@
 'use strict';
 
 import Observer from './observer.js';
+import DomEventData from './domeventdata.js';
 
 /**
  * Base class for DOM event observers. This class handles
@@ -33,17 +34,13 @@ import Observer from './observer.js';
  * @extends engine.treeView.observer.Observer
  */
 export default class DomEventObserver extends Observer {
-	constructor( treeView ) {
-		super( treeView );
-
-		/**
-		 * 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.
-		 *
-		 * @readonly
-		 * @member {String|Array.<String>} engine.treeView.observer.DomEventObserver#domEventType
-		 */
-	}
+	/**
+	 * 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.
+	 *
+	 * @readonly
+	 * @member {String|Array.<String>} engine.treeView.observer.DomEventObserver#domEventType
+	 */
 
 	/**
 	 * Callback which should be called when the DOM event occurred. Note that the callback will not be called if
@@ -70,11 +67,14 @@ export default class DomEventObserver extends Observer {
 	 * {@link engine.treeView.observer.DomEventObserver#isEnabled is enabled}.
 	 *
 	 * @see engine.treeView.TreeView#fire
-	 * @param {...*} args Fire arguments {@link engine.treeView.TreeView#fire}.
+	 * @param {String} eventType The event type (name).
+	 * @param {Event} domEvent The DOM event.
+	 * @param {Object} [additionalData] The additional data which should extend the
+	 * {@link engine.treeView.observer.DomEventData event data} object.
 	 */
-	fire( ...args ) {
+	fire( eventType, domEvent, additionalData ) {
 		if ( this.isEnabled ) {
-			this.treeView.fire( ...args );
+			this.treeView.fire( eventType, new DomEventData( this.treeView, domEvent, additionalData ) );
 		}
 	}
 }

+ 3 - 13
packages/ckeditor5-engine/src/treeview/observer/focusobserver.js

@@ -21,15 +21,7 @@ export default class FocusObserver extends DomEventObserver {
 	}
 
 	onDomEvent( domEvt ) {
-		const treeView = this.treeView;
-
-		this.fire( domEvt.type, {
-			get target() {
-				return treeView.domConverter.getCorrespondingViewElement( domEvt.target );
-			},
-
-			domTarget: domEvt.target
-		} );
+		this.fire( domEvt.type, domEvt );
 	}
 }
 
@@ -37,14 +29,12 @@ export default class FocusObserver extends DomEventObserver {
  * Fired when one of the editables gets focus.
  *
  * @event engine.treeView.TreeView#focus
- * @param {engine.treeView.Element} data.target The event view target (editable element that was focused).
- * @param {HTMLElement} data.domTarget The event DOM target (editable element that was focused).
+ * @param {engine.treeView.observer.DomEventData} data Event data.
  */
 
 /**
  * Fired when one of the editables loses focus.
  *
  * @event engine.treeView.TreeView#blur
- * @param {engine.treeView.Element} data.target The event view target (editable element that was blurred).
- * @param {HTMLElement} data.domTarget The event DOM target (editable element that was blurred).
+ * @param {engine.treeView.observer.DomEventData} data Event data.
  */

+ 12 - 19
packages/ckeditor5-engine/src/treeview/observer/keyobserver.js

@@ -6,6 +6,7 @@
 'use strict';
 
 import DomEventObserver from './domeventobserver.js';
+import { getCode } from '../../../utils/keyboard.js';
 
 /**
  * {@link engine.treeView.TreeView#keydown Key down} event observer.
@@ -21,20 +22,16 @@ export default class KeyObserver extends DomEventObserver {
 	}
 
 	onDomEvent( domEvt ) {
-		const treeView = this.treeView;
-
-		this.fire( 'keydown', {
+		this.fire( 'keydown', domEvt, {
 			keyCode: domEvt.keyCode,
 
 			altKey: domEvt.altKey,
 			ctrlKey: domEvt.ctrlKey || domEvt.metaKey,
 			shiftKey: domEvt.shiftKey,
 
-			get target() {
-				return treeView.domConverter.getCorrespondingViewElement( domEvt.target );
-			},
-
-			domTarget: domEvt.target
+			get keystroke() {
+				return getCode( this );
+			}
 		} );
 	}
 }
@@ -43,24 +40,20 @@ export default class KeyObserver extends DomEventObserver {
  * Fired when a key has been pressed.
  *
  * @event engine.treeView.TreeView#keydown
- * @param {engine.treeView.observer.keyObserver.KeyData} keyData
+ * @param {engine.treeView.observer.keyObserver.KeyEventData} keyEventData
  */
 
 /**
  * The value of the {@link engine.treeView.TreeView#keydown} event.
  *
- * @interface engine.treeView.observer.keyObserver.KeyData
- * @implements utils.keyboard.KeystrokeInfo
- */
-
-/**
- * The event view target.
- *
- * @member {engine.treeView.Element} engine.treeView.observer.keyObserver.KeyData#target
+ * @class engine.treeView.observer.keyObserver.KeyEventData
+ * @extends engine.treeView.observer.DomEventData
+ * @implements utils.keyboard.KeystrokeData
  */
 
 /**
- * The event DOM target.
+ * Code of the whole keystroke. See {@link utils.keyboard.getCode}.
  *
- * @member {HTMLElement} engine.treeView.observer.keyObserver.KeyData#domTarget
+ * @readonly
+ * @member {Number} engine.treeView.observer.keyObserver.KeyEventData#keystroke
  */

+ 66 - 0
packages/ckeditor5-engine/tests/treeview/observer/domeventdata.js

@@ -0,0 +1,66 @@
+/**
+ * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* bender-tags: treeview */
+
+'use strict';
+
+import DomEventData from '/ckeditor5/engine/treeview/observer/domeventdata.js';
+import TreeView from '/ckeditor5/engine/treeview/treeview.js';
+
+describe( 'DomEventData', () => {
+	let treeView, viewBody;
+
+	beforeEach( () => {
+		treeView = new TreeView();
+
+		viewBody = treeView.domConverter.domToView( document.body, { bind: true } );
+	} );
+
+	describe( 'constructor', () => {
+		it( 'sets properties', () => {
+			const domEvt = { target: document.body };
+			const data = new DomEventData( treeView, domEvt, { foo: 1, bar: true } );
+
+			expect( data ).to.have.property( 'treeView', treeView );
+			expect( data ).to.have.property( 'domEvent', domEvt );
+			expect( data ).to.have.property( 'domTarget', document.body );
+
+			expect( data ).to.have.property( 'foo', 1 );
+			expect( data ).to.have.property( 'bar', true );
+		} );
+	} );
+
+	describe( 'target', () => {
+		it( 'returns bound element', () => {
+			const domEvt = { target: document.body };
+			const data = new DomEventData( treeView, domEvt );
+
+			expect( data ).to.have.property( 'target', viewBody );
+		} );
+	} );
+
+	describe( 'preventDefault', () => {
+		it( 'executes native preventDefault()', () => {
+			const domEvt = { target: document.body, preventDefault: sinon.spy() };
+			const data = new DomEventData( treeView, domEvt );
+
+			data.preventDefault();
+
+			expect( domEvt.preventDefault.calledOnce ).to.be.true;
+		} );
+	} );
+
+	describe( 'stopPropagation', () => {
+		it( 'executes native stopPropagation()', () => {
+			const domEvt = { target: document.body, stopPropagation: sinon.spy() };
+			const data = new DomEventData( treeView, domEvt );
+
+			data.stopPropagation();
+
+			expect( domEvt.stopPropagation.calledOnce ).to.be.true;
+		} );
+	} );
+} );

+ 10 - 6
packages/ckeditor5-engine/tests/treeview/observer/domeventobserver.js

@@ -19,7 +19,7 @@ class ClickObserver extends DomEventObserver {
 	}
 
 	onDomEvent( domEvt ) {
-		this.fire( 'click', 'foo', domEvt );
+		this.fire( 'click', domEvt, { foo: 1, bar: 2 } );
 	}
 }
 
@@ -31,7 +31,7 @@ class MultiObserver extends DomEventObserver {
 	}
 
 	onDomEvent( domEvt ) {
-		this.fire( domEvt.type );
+		this.fire( domEvt.type, domEvt );
 	}
 }
 
@@ -62,8 +62,12 @@ describe( 'DomEventObserver', () => {
 		domElement.dispatchEvent( domEvent );
 
 		expect( evtSpy.calledOnce ).to.be.true;
-		expect( evtSpy.args[ 0 ][ 1 ] ).to.equal( 'foo' );
-		expect( evtSpy.args[ 0 ][ 2 ] ).to.equal( domEvent );
+
+		const data = evtSpy.args[ 0 ][ 1 ];
+
+		expect( data ).to.have.property( 'foo', 1 );
+		expect( data ).to.have.property( 'bar', 2 );
+		expect( data ).to.have.property( 'domEvent', domEvent );
 	} );
 
 	it( 'should add multiple event listeners', () => {
@@ -134,13 +138,13 @@ describe( 'DomEventObserver', () => {
 
 			testObserver.disable();
 
-			testObserver.fire( 'click' );
+			testObserver.fire( 'click', {} );
 
 			expect( fireSpy.called ).to.be.false;
 
 			testObserver.enable();
 
-			testObserver.fire( 'click' );
+			testObserver.fire( 'click', {} );
 
 			expect( fireSpy.calledOnce ).to.be.true;
 		} );

+ 3 - 7
packages/ckeditor5-engine/tests/treeview/observer/focusobserver.js

@@ -11,14 +11,12 @@ import FocusObserver from '/ckeditor5/engine/treeview/observer/focusobserver.js'
 import TreeView from '/ckeditor5/engine/treeview/treeview.js';
 
 describe( 'FocusObserver', () => {
-	let treeView, viewBody, observer;
+	let treeView, observer;
 
 	beforeEach( () => {
 		treeView = new TreeView();
 		treeView.addObserver( FocusObserver );
 
-		viewBody = treeView.domConverter.domToView( document.body, { bind: true } );
-
 		observer = Array.from( treeView._observers )[ 0 ];
 	} );
 
@@ -27,7 +25,7 @@ describe( 'FocusObserver', () => {
 	} );
 
 	describe( 'onDomEvent', () => {
-		it( 'should fire focus with the target', () => {
+		it( 'should fire focus with the right event data', () => {
 			const spy = sinon.spy();
 
 			treeView.on( 'focus', spy );
@@ -37,11 +35,10 @@ describe( 'FocusObserver', () => {
 			expect( spy.calledOnce ).to.be.true;
 
 			const data = spy.args[ 0 ][ 1 ];
-			expect( data.target ).to.equal( viewBody );
 			expect( data.domTarget ).to.equal( document.body );
 		} );
 
-		it( 'should fire blur with the target', () => {
+		it( 'should fire blur with the right event data', () => {
 			const spy = sinon.spy();
 
 			treeView.on( 'blur', spy );
@@ -51,7 +48,6 @@ describe( 'FocusObserver', () => {
 			expect( spy.calledOnce ).to.be.true;
 
 			const data = spy.args[ 0 ][ 1 ];
-			expect( data.target ).to.equal( viewBody );
 			expect( data.domTarget ).to.equal( document.body );
 		} );
 	} );

+ 20 - 14
packages/ckeditor5-engine/tests/treeview/observer/keyobserver.js

@@ -9,16 +9,15 @@
 
 import KeyObserver from '/ckeditor5/engine/treeview/observer/keyobserver.js';
 import TreeView from '/ckeditor5/engine/treeview/treeview.js';
+import { getCode } from '/ckeditor5/utils/keyboard.js';
 
 describe( 'KeyObserver', () => {
-	let treeView, viewBody, observer;
+	let treeView, observer;
 
 	beforeEach( () => {
 		treeView = new TreeView();
 		treeView.addObserver( KeyObserver );
 
-		viewBody = treeView.domConverter.domToView( document.body, { bind: true } );
-
 		observer = Array.from( treeView._observers )[ 0 ];
 	} );
 
@@ -37,12 +36,15 @@ describe( 'KeyObserver', () => {
 			expect( spy.calledOnce ).to.be.true;
 
 			const data = spy.args[ 0 ][ 1 ];
-			expect( data.target ).to.equal( viewBody );
-			expect( data.domTarget ).to.equal( document.body );
-			expect( data.keyCode ).to.equal( 111 );
-			expect( data.altKey ).to.equal( false );
-			expect( data.ctrlKey ).to.equal( false );
-			expect( data.shiftKey ).to.equal( false );
+			expect( data ).to.have.property( 'domTarget', document.body );
+			expect( data ).to.have.property( 'keyCode', 111 );
+			expect( data ).to.have.property( 'altKey', false );
+			expect( data ).to.have.property( 'ctrlKey', false );
+			expect( data ).to.have.property( 'shiftKey', false );
+			expect( data ).to.have.property( 'keystroke', getCode( data ) );
+
+			// Just to be sure.
+			expect( getCode( data ) ).to.equal( 111 );
 		} );
 
 		it( 'should fire keydown with proper key modifiers info', () => {
@@ -53,10 +55,14 @@ describe( 'KeyObserver', () => {
 			observer.onDomEvent( { target: document.body, keyCode: 111, altKey: true, ctrlKey: true, metaKey: false, shiftKey: true } );
 
 			const data = spy.args[ 0 ][ 1 ];
-			expect( data.keyCode ).to.equal( 111 );
-			expect( data.altKey ).to.equal( true );
-			expect( data.ctrlKey ).to.equal( true );
-			expect( data.shiftKey ).to.equal( true );
+			expect( data ).to.have.property( 'keyCode', 111 );
+			expect( data ).to.have.property( 'altKey', true );
+			expect( data ).to.have.property( 'ctrlKey', true );
+			expect( data ).to.have.property( 'shiftKey', true );
+			expect( data ).to.have.property( 'keystroke', getCode( data ) );
+
+			// Just to be sure.
+			expect( getCode( data ) ).to.be.greaterThan( 111 );
 		} );
 
 		it( 'should fire keydown ctrlKey set to true one meta (cmd) was pressed', () => {
@@ -67,7 +73,7 @@ describe( 'KeyObserver', () => {
 			observer.onDomEvent( { target: document.body, keyCode: 111, metaKey: true } );
 
 			const data = spy.args[ 0 ][ 1 ];
-			expect( data.ctrlKey ).to.equal( true );
+			expect( data ).to.have.property( 'ctrlKey', true );
 		} );
 	} );
 } );