浏览代码

Used keystroke API of the FocusCycler in ToolbarView.

Aleksander Nowodzinski 9 年之前
父节点
当前提交
1c7d42f493
共有 2 个文件被更改,包括 15 次插入36 次删除
  1. 14 35
      packages/ckeditor5-ui/src/toolbar/toolbarview.js
  2. 1 1
      packages/ckeditor5-ui/tests/toolbar/toolbarview.js

+ 14 - 35
packages/ckeditor5-ui/src/toolbar/toolbarview.js

@@ -56,7 +56,18 @@ export default class ToolbarView extends View {
 		 * @protected
 		 * @member {module:ui/focuscycler~FocusCycler}
 		 */
-		this._focusCycler = new FocusCycler( this.items, this.focusTracker );
+		this._focusCycler = new FocusCycler( {
+			focusables: this.items,
+			focusTracker: this.focusTracker,
+			keystrokeHandler: this.keystrokes,
+			actions: {
+				// Navigate toolbar items backwards using the arrow[left,up] keys.
+				focusPrevious: [ 'arrowleft', 'arrowup' ],
+
+				// Navigate toolbar items forwards using the arrow[right,down] keys.
+				focusNext: [ 'arrowright', 'arrowdown' ]
+			}
+		} );
 
 		this.template = new Template( {
 			tag: 'div',
@@ -82,36 +93,9 @@ export default class ToolbarView extends View {
 	 * @inheritDoc
 	 */
 	init() {
+		// Start listening for the keystrokes coming from #element.
 		this.keystrokes.listenTo( this.element );
 
-		const focusNext = ( data, cancel ) => {
-			const nextFocusable = this._focusCycler.next;
-
-			if ( nextFocusable ) {
-				nextFocusable.focus();
-			}
-
-			cancel();
-		};
-
-		const focusPrevious = ( data, cancel ) => {
-			const previousFocusable = this._focusCycler.previous;
-
-			if ( previousFocusable ) {
-				previousFocusable.focus();
-			}
-
-			cancel();
-		};
-
-		// Navigate toolbar items back using the arrow left/up key.
-		this.keystrokes.set( 'arrowleft', focusPrevious );
-		this.keystrokes.set( 'arrowup', focusPrevious );
-
-		// Navigate toolbar items forwards using the arrow right/down key.
-		this.keystrokes.set( 'arrowright', focusNext );
-		this.keystrokes.set( 'arrowdown', focusNext );
-
 		return super.init();
 	}
 
@@ -119,12 +103,7 @@ export default class ToolbarView extends View {
 	 * Focuses the first focusable in {@link #items}.
 	 */
 	focus() {
-		// Find the very first toolbar item that can be focused.
-		const firstFocusable = this._focusCycler.first;
-
-		if ( firstFocusable ) {
-			firstFocusable.focus();
-		}
+		this._focusCycler.focusFirst();
 	}
 }
 

+ 1 - 1
packages/ckeditor5-ui/tests/toolbar/toolbarview.js

@@ -36,7 +36,7 @@ describe( 'ToolbarView', () => {
 			expect( view.focusTracker ).to.be.instanceOf( FocusTracker );
 		} );
 
-		it( 'creates #keystrokeHandler instance', () => {
+		it( 'creates #keystrokes instance', () => {
 			expect( view.keystrokes ).to.be.instanceOf( KeystrokeHandler );
 		} );