Browse Source

Implemented KeyObserver.

Piotrek Koszuliński 9 years ago
parent
commit
68ff80a894

+ 67 - 0
packages/ckeditor5-engine/src/treeview/observer/keyobserver.js

@@ -0,0 +1,67 @@
+/**
+ * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import DomEventObserver from './domeventobserver.js';
+
+/**
+ * {@link engine.treeView.TreeView#keydown Key down} event observer.
+ *
+ * @memberOf engine.treeView.observer
+ * @extends engine.treeView.observer.DomEventObserver
+ */
+export default class KeyObserver extends DomEventObserver {
+	constructor( treeView ) {
+		super( treeView );
+
+		this.domEventType = 'keydown';
+	}
+
+	onDomEvent( domEvt ) {
+		const treeView = this.treeView;
+
+		this.fire( 'keydown', {
+			key: domEvt.key,
+			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
+		} );
+	}
+}
+
+/**
+ * Fired when a key has been pressed.
+ *
+ * @event engine.treeView.TreeView#keydown
+ * @param {engine.treeView.observer.keyObserver.KeyData} keyData
+ */
+
+/**
+ * The value of the {@link engine.treeView.TreeView#keydown} event.
+ *
+ * @interface engine.treeView.observer.keyObserver.KeyData
+ * @implements ckeditor5.keystrokeHandler.KeystrokeData
+ */
+
+/**
+ * The event view target (editable element that was focused).
+ *
+ * @member {engine.treeView.Element} engine.treeView.observer.keyObserver.KeyData#taget
+ */
+
+/**
+ * The event DOM target (editable element that was focused).
+ *
+ * @member {HTMLElement} engine.treeView.observer.keyObserver.KeyData#taget
+ */

+ 3 - 0
packages/ckeditor5-engine/tests/treeview/manual/keyobserver.html

@@ -0,0 +1,3 @@
+<div contenteditable="true" id="editable" style="border: solid 1px blue">
+	<p>Foo.</p>
+</div>

+ 19 - 0
packages/ckeditor5-engine/tests/treeview/manual/keyobserver.js

@@ -0,0 +1,19 @@
+/**
+ * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global console:false */
+
+'use strict';
+
+import TreeView from '/ckeditor5/engine/treeview/treeview.js';
+import KeyObserver from '/ckeditor5/engine/treeview/observer/keyobserver.js';
+
+const treeView = new TreeView();
+
+treeView.on( 'keydown', ( evt, data ) => console.log( 'keydown', data ) );
+
+treeView.addObserver( KeyObserver );
+
+treeView.createRoot( document.getElementById( 'editable' ), 'editable' );

+ 10 - 0
packages/ckeditor5-engine/tests/treeview/manual/keyobserver.md

@@ -0,0 +1,10 @@
+@bender-ui: collapsed
+@bender-tags: treeview
+
+* Press some keys.
+* Check whether they are logged to the console with proper data:
+  * `keyCode`,
+  * `altKey`,
+  * `ctrlKey` (covers <kbd>Ctrl</kbd> and <kbd>Cmd</kbd>),
+  * `shitKey`,
+  * `domTarget` and `target`.

+ 73 - 0
packages/ckeditor5-engine/tests/treeview/observer/keyobserver.js

@@ -0,0 +1,73 @@
+/**
+ * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* bender-tags: treeview */
+
+'use strict';
+
+import KeyObserver from '/ckeditor5/engine/treeview/observer/keyobserver.js';
+import TreeView from '/ckeditor5/engine/treeview/treeview.js';
+
+describe( 'KeyObserver', () => {
+	let treeView, viewBody, observer;
+
+	beforeEach( () => {
+		treeView = new TreeView();
+		treeView.addObserver( KeyObserver );
+
+		viewBody = treeView.domConverter.domToView( document.body, { bind: true } );
+
+		observer = Array.from( treeView._observers )[ 0 ];
+	} );
+
+	it( 'should define domEventType', () => {
+		expect( observer.domEventType ).to.equal( 'keydown' );
+	} );
+
+	describe( 'onDomEvent', () => {
+		it( 'should fire keydown with the target and key info', () => {
+			const spy = sinon.spy();
+
+			treeView.on( 'keydown', spy );
+
+			observer.onDomEvent( { target: document.body, keyCode: 111, altKey: false, ctrlKey: false, metaKey: false, shiftKey: false } );
+
+			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 );
+		} );
+
+		it( 'should fire keydown with proper key modifiers info', () => {
+			const spy = sinon.spy();
+
+			treeView.on( 'keydown', spy );
+
+			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 );
+		} );
+
+		it( 'should fire keydown ctrlKey set to true one meta (cmd) was pressed', () => {
+			const spy = sinon.spy();
+
+			treeView.on( 'keydown', spy );
+
+			observer.onDomEvent( { target: document.body, keyCode: 111, metaKey: true } );
+
+			const data = spy.args[ 0 ][ 1 ];
+			expect( data.ctrlKey ).to.equal( true );
+		} );
+	} );
+} );