8
0
Просмотр исходного кода

Used keystroke API of the FocusCycler in ListView.

Aleksander Nowodzinski 9 лет назад
Родитель
Сommit
66e9f249a8
1 измененных файлов с 15 добавлено и 33 удалено
  1. 15 33
      packages/ckeditor5-ui/src/list/listview.js

+ 15 - 33
packages/ckeditor5-ui/src/list/listview.js

@@ -56,7 +56,18 @@ export default class ListView 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 list items backwards using the arrowup key.
+				focusPrevious: 'arrowup',
+
+				// Navigate toolbar items forwards using the arrowdown key.
+				focusNext: 'arrowdown',
+			}
+		} );
 
 		this.template = new Template( {
 			tag: 'ul',
@@ -84,28 +95,9 @@ export default class ListView extends View {
 	 * @inheritDoc
 	 */
 	init() {
+		// Start listening for the keystrokes coming from #element.
 		this.keystrokes.listenTo( this.element );
 
-		this.keystrokes.set( 'arrowup', ( data, cancel ) => {
-			const previousFocusable = this._focusCycler.previous;
-
-			if ( previousFocusable ) {
-				previousFocusable.focus();
-			}
-
-			cancel();
-		} );
-
-		this.keystrokes.set( 'arrowdown', ( data, cancel ) => {
-			const nextFocusable = this._focusCycler.next;
-
-			if ( nextFocusable ) {
-				nextFocusable.focus();
-			}
-
-			cancel();
-		} );
-
 		return super.init();
 	}
 
@@ -113,23 +105,13 @@ export default class ListView extends View {
 	 * Focuses the first focusable in {@link #items}.
 	 */
 	focus() {
-		// Find the very first list item that can be focused.
-		const firstFocusable = this._focusCycler.first;
-
-		if ( firstFocusable ) {
-			firstFocusable.focus();
-		}
+		this._focusCycler.focusFirst();
 	}
 
 	/**
 	 * Focuses the last focusable in {@link #items}.
 	 */
 	focusLast() {
-		// Find the last list item that can be focused.
-		const lastFocusable = this._focusCycler.last;
-
-		if ( lastFocusable ) {
-			lastFocusable.focus();
-		}
+		this._focusCycler.focusLast();
 	}
 }