8
0
Piotrek Koszuliński 10 лет назад
Родитель
Сommit
f26b4b40cf

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

@@ -92,7 +92,7 @@ export default class DomEventObserver {
 	 */
 	fire( ...args ) {
 		if ( this.isEnabled ) {
-			this.treeView.fire.apply( this.treeView, args );
+			this.treeView.fire( ...args );
 		}
 	}
 }

+ 40 - 0
packages/ckeditor5-engine/src/treeview/observer/focusobserver.js

@@ -0,0 +1,40 @@
+/**
+ * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+'use strict';
+
+import DomEventObserver from './domeventobserver.js';
+
+/**
+ * {@link core.treeView.TreeView#focus Focus} and {@link core.treeView.TreeView#blur blur} events observer.
+ *
+ * @memberOf core.treeView.observer
+ * @extends core.treeView.observer.DomEventObserver
+ */
+export default class FocusObserver extends DomEventObserver {
+	constructor( treeView ) {
+		super( treeView );
+
+		this.domEventType = [ 'focus', 'blur' ];
+	}
+
+	onDomEvent( domEvt ) {
+		this.fire( domEvt.type, domEvt.target );
+	}
+}
+
+/**
+ * Fired when one of the editables gets focus.
+ *
+ * @event core.treeView.TreeView#focus
+ * @param {HTMLElement} The event target (editable element that was focused).
+ */
+
+/**
+ * Fired when one of the editables loses focus.
+ *
+ * @event core.treeView.TreeView#blur
+ * @param {HTMLElement} The event target (editable element that was blurred).
+ */

+ 6 - 0
packages/ckeditor5-engine/tests/treeview/manual/focusobserver.html

@@ -0,0 +1,6 @@
+<div contenteditable="true" id="editable1" style="border: solid 1px blue">
+	<p>First editable.</p>
+</div>
+<div contenteditable="true" id="editable2" style="border: solid 1px blue">
+	<p>Second editable.</p>
+</div>

+ 21 - 0
packages/ckeditor5-engine/tests/treeview/manual/focusobserver.js

@@ -0,0 +1,21 @@
+/**
+ * @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/core/treeview/treeview.js';
+import FocusObserver from '/ckeditor5/core/treeview/observer/focusobserver.js';
+
+const treeView = new TreeView();
+
+treeView.on( 'focus', ( evt, target ) => console.log( 'focus', target ) );
+treeView.on( 'blur', ( evt, target ) => console.log( 'blur', target ) );
+
+treeView.addObserver( FocusObserver );
+
+treeView.createRoot( document.getElementById( 'editable1' ), 'editable1' );
+treeView.createRoot( document.getElementById( 'editable2' ), 'editable2' );

+ 9 - 0
packages/ckeditor5-engine/tests/treeview/manual/focusobserver.md

@@ -0,0 +1,9 @@
+@bender-ui: collapsed
+@bender-tags: treeview
+
+* Open console.
+* Focus the first editable.
+  * Focus in the 1st editable should be logged.
+* Focus the second editable.
+  * Blur in the 1st editable should be logged.
+  * Focus in the 2nd editable should be logged.

+ 50 - 0
packages/ckeditor5-engine/tests/treeview/observer/focusobserver.js

@@ -0,0 +1,50 @@
+/**
+ * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* bender-tags: treeview */
+
+'use strict';
+
+import FocusObserver from '/ckeditor5/core/treeview/observer/focusobserver.js';
+import TreeView from '/ckeditor5/core/treeview/treeview.js';
+
+describe( 'FocusObserver', () => {
+	let treeView, observer;
+
+	beforeEach( () => {
+		treeView = new TreeView();
+		treeView.addObserver( FocusObserver );
+
+		observer = Array.from( treeView._observers )[ 0 ];
+	} );
+
+	it( 'should define domEventType', () => {
+		expect( observer.domEventType ).to.deep.equal( [ 'focus', 'blur' ] );
+	} );
+
+	describe( 'onDomEvent', () => {
+		it( 'should fire focus with the target', () => {
+			const spy = sinon.spy();
+
+			treeView.on( 'focus', spy );
+
+			observer.onDomEvent( { type: 'focus', target: document.body } );
+
+			expect( spy.calledOnce ).to.be.true;
+			expect( spy.calledWith( document.body ) );
+		} );
+
+		it( 'should fire blur with the target', () => {
+			const spy = sinon.spy();
+
+			treeView.on( 'blur', spy );
+
+			observer.onDomEvent( { type: 'blur', target: document.body } );
+
+			expect( spy.calledOnce ).to.be.true;
+			expect( spy.calledWith( document.body ) );
+		} );
+	} );
+} );