瀏覽代碼

Re-enabled toolbar keyboard navigation on arrowup and down.

Aleksander Nowodzinski 6 年之前
父節點
當前提交
99e37807fa
共有 1 個文件被更改,包括 77 次插入40 次删除
  1. 77 40
      packages/ckeditor5-ui/src/toolbar/toolbarview.js

+ 77 - 40
packages/ckeditor5-ui/src/toolbar/toolbarview.js

@@ -143,7 +143,13 @@ export default class ToolbarView extends View {
 		this._resizeObserver = null;
 		this._resizeObserver = null;
 
 
 		/**
 		/**
-		 * TODO
+		 *	┌────────────────────────────────── #_components ──────────────────────────────────────┐
+		 *	|                                                                                      |
+		 *	|    ┌──── #itemsView───────┐ ┌──────────────────────┐ ┌──────────────────────────┐    |
+		 *	|    |         ...          | | ToolbarSeparatorView | | #overflowedItemsDropdown |    |
+		 *	|    └─────────────────────-┘ └──────────────────────┘ └──────────────────────────┘    |
+		 *	|                             \---------- only when #shouldGroupWhenFull ---------/    |
+		 *	+──────────────────────────────────────────────────────────────────────────────────────┘
 		 *
 		 *
 		 * @readonly
 		 * @readonly
 		 * @protected
 		 * @protected
@@ -169,45 +175,10 @@ export default class ToolbarView extends View {
 			focusTracker: this.focusTracker,
 			focusTracker: this.focusTracker,
 		} );
 		} );
 
 
-		this.keystrokes.set( 'arrowright', ( keyEvtData, cancel ) => {
-			if ( this.itemsView.focusTracker.isFocused ) {
-				if ( this._itemsFocusCycler.next === this._itemsFocusCycler.first ) {
-					this._componentsFocusCycler.focusNext();
-				} else {
-					this._itemsFocusCycler.focusNext();
-				}
-
-				cancel();
-			} else {
-				this._componentsFocusCycler.focusNext();
-
-				cancel();
-			}
-		} );
-
-		this.keystrokes.set( 'arrowleft', ( keyEvtData, cancel ) => {
-			if ( this.itemsView.focusTracker.isFocused ) {
-				if ( this._itemsFocusCycler.previous === this._itemsFocusCycler.last ) {
-					if ( this._hasOverflowedItemsDropdown ) {
-						this._componentsFocusCycler.focusLast();
-					} else {
-						this._itemsFocusCycler.focusPrevious();
-					}
-				} else {
-					this._itemsFocusCycler.focusPrevious();
-				}
-
-				cancel();
-			} else {
-				if ( this._componentsFocusCycler.previous === this.itemsView ) {
-					this._itemsFocusCycler.focusLast();
-				} else {
-					this._componentsFocusCycler.focusPrevious();
-				}
-
-				cancel();
-			}
-		} );
+		this.keystrokes.set( 'arrowleft', this._onKeyboardPrevious.bind( this ) );
+		this.keystrokes.set( 'arrowup', this._onKeyboardPrevious.bind( this ) );
+		this.keystrokes.set( 'arrowright', this._onKeyboardNext.bind( this ) );
+		this.keystrokes.set( 'arrowdown', this._onKeyboardNext.bind( this ) );
 
 
 		this.setTemplate( {
 		this.setTemplate( {
 			tag: 'div',
 			tag: 'div',
@@ -478,6 +449,72 @@ export default class ToolbarView extends View {
 		return overflowedItemsDropdown;
 		return overflowedItemsDropdown;
 	}
 	}
 
 
+	/**
+	 *	┌────────────────────────────── #_components ────────────────────────────────────────┐
+	 *	|                                                                                    |
+	 *	|    /────▶────\                  /───────▶───────▶───────\          /────▶─────\    |
+	 *	|    |         ▼                  ▲                       ▼          ▲          |    |
+	 *	|    |       ┌─|──── #items ──────|─┐             ┌───────|──────────|───────┐  |    |
+	 *	|    ▲       | \───▶──────────▶───/ |             | #overflowedItemsDropdown |  ▼    |
+	 *	|    |       └─────────────────────-┘             └──────────────────────────┘  |    |
+	 *	|    |                                                                          |    |
+	 *	|    └─────◀───────────◀────────────◀──────────────◀──────────────◀─────────────/    |
+	 *	|                                                                                    |
+	 *	+────────────────────────────────────────────────────────────────────────────────────┘
+	 */
+	_onKeyboardNext( keyEvtData, cancel ) {
+		if ( this.itemsView.focusTracker.isFocused ) {
+			if ( this._itemsFocusCycler.next === this._itemsFocusCycler.first ) {
+				this._componentsFocusCycler.focusNext();
+			} else {
+				this._itemsFocusCycler.focusNext();
+			}
+
+			cancel();
+		} else {
+			this._componentsFocusCycler.focusNext();
+
+			cancel();
+		}
+	}
+
+	/**
+	 *	┌────────────────────────────── #_components ────────────────────────────────────────┐
+	 *	|                                                                                    |
+	 *	|    /────◀────\                  /───────◀───────◀───────\          /────◀─────\    |
+	 *	|    |         ▲                  ▼                       ▲          ▼          |    |
+	 *	|    |       ┌─|──── #items ──────|─┐             ┌───────|──────────|───────┐  |    |
+	 *	|    ▼       | \───◀──────────◀───/ |             | #overflowedItemsDropdown |  ▲    |
+	 *	|    |       └─────────────────────-┘             └──────────────────────────┘  |    |
+	 *	|    |                                                                          |    |
+	 *	|    └─────▶───────────▶────────────▶──────────────▶──────────────▶─────────────/    |
+	 *	|                                                                                    |
+	 *	+────────────────────────────────────────────────────────────────────────────────────┘
+	 */
+	_onKeyboardPrevious( keyEvtData, cancel ) {
+		if ( this.itemsView.focusTracker.isFocused ) {
+			if ( this._itemsFocusCycler.previous === this._itemsFocusCycler.last ) {
+				if ( this._hasOverflowedItemsDropdown ) {
+					this._componentsFocusCycler.focusLast();
+				} else {
+					this._itemsFocusCycler.focusPrevious();
+				}
+			} else {
+				this._itemsFocusCycler.focusPrevious();
+			}
+
+			cancel();
+		} else {
+			if ( this._componentsFocusCycler.previous === this.itemsView ) {
+				this._itemsFocusCycler.focusLast();
+			} else {
+				this._componentsFocusCycler.focusPrevious();
+			}
+
+			cancel();
+		}
+	}
+
 	/**
 	/**
 	 * Enables the toolbar functionality that prevents its {@link #items} from overflow
 	 * Enables the toolbar functionality that prevents its {@link #items} from overflow
 	 * when the space becomes scarce. Instead, the toolbar items are grouped under the
 	 * when the space becomes scarce. Instead, the toolbar items are grouped under the