|
6 | 6 | * found in the LICENSE file at https://angular.io/license
|
7 | 7 | */
|
8 | 8 |
|
| 9 | +import { |
| 10 | + A, |
| 11 | + DOWN_ARROW, |
| 12 | + END, |
| 13 | + ENTER, |
| 14 | + HOME, |
| 15 | + LEFT_ARROW, |
| 16 | + NINE, |
| 17 | + RIGHT_ARROW, |
| 18 | + SPACE, |
| 19 | + TAB, |
| 20 | + UP_ARROW, |
| 21 | + Z, |
| 22 | + ZERO, |
| 23 | +} from '@angular/cdk/keycodes'; |
9 | 24 | import {QueryList} from '@angular/core';
|
10 | 25 | import {isObservable, Observable, Subject} from 'rxjs';
|
11 | 26 |
|
@@ -154,7 +169,58 @@ export class TreeKeyManager<T extends TreeKeyManagerItem> {
|
154 | 169 | * Handles a keyboard event on the tree.
|
155 | 170 | * @param event Keyboard event that represents the user interaction with the tree.
|
156 | 171 | */
|
157 |
| - onKeydown(event: KeyboardEvent) {} |
| 172 | + onKeydown(event: KeyboardEvent) { |
| 173 | + const keyCode = event.keyCode; |
| 174 | + |
| 175 | + switch (keyCode) { |
| 176 | + case TAB: |
| 177 | + this.tabOut.next(); |
| 178 | + return; |
| 179 | + |
| 180 | + case DOWN_ARROW: |
| 181 | + this._focusNextItem(); |
| 182 | + break; |
| 183 | + |
| 184 | + case UP_ARROW: |
| 185 | + this._focusPreviousItem(); |
| 186 | + break; |
| 187 | + |
| 188 | + case RIGHT_ARROW: |
| 189 | + this._horizontal === 'rtl' ? this._collapseCurrentItem() : this._expandCurrentItem(); |
| 190 | + break; |
| 191 | + |
| 192 | + case LEFT_ARROW: |
| 193 | + this._horizontal === 'rtl' ? this._expandCurrentItem() : this._collapseCurrentItem(); |
| 194 | + break; |
| 195 | + |
| 196 | + case HOME: |
| 197 | + this._focusFirstItem(); |
| 198 | + break; |
| 199 | + |
| 200 | + case END: |
| 201 | + this._focusLastItem(); |
| 202 | + break; |
| 203 | + |
| 204 | + case ENTER: |
| 205 | + case SPACE: |
| 206 | + this._activateCurrentItem(); |
| 207 | + break; |
| 208 | + |
| 209 | + default: |
| 210 | + // The keyCode for `*` is the same as the keyCode for `8`, so we check the event key |
| 211 | + // instead. |
| 212 | + if (event.key === '*') { |
| 213 | + this._expandAllItemsAtCurrentItemLevel(); |
| 214 | + break; |
| 215 | + } |
| 216 | + |
| 217 | + // Note that we return here, in order to avoid preventing the default action of |
| 218 | + // non-navigational keys or resetting the buffer of pressed letters. |
| 219 | + return; |
| 220 | + } |
| 221 | + |
| 222 | + event.preventDefault(); |
| 223 | + } |
158 | 224 |
|
159 | 225 | /**
|
160 | 226 | * Handles a mouse click on a particular tree item.
|
@@ -205,6 +271,31 @@ export class TreeKeyManager<T extends TreeKeyManagerItem> {
|
205 | 271 | private _getItems(): Observable<T[]> {
|
206 | 272 | return coerceObservable(this._items);
|
207 | 273 | }
|
| 274 | + |
| 275 | + //// Navigational methods |
| 276 | + |
| 277 | + private _focusFirstItem() {} |
| 278 | + |
| 279 | + private _focusLastItem() {} |
| 280 | + |
| 281 | + private _focusPreviousItem() {} |
| 282 | + |
| 283 | + private _focusNextItem() {} |
| 284 | + |
| 285 | + /** |
| 286 | + * If the item is already expanded, we collapse the item. Otherwise, we will focus the parent. |
| 287 | + */ |
| 288 | + private _collapseCurrentItem() {} |
| 289 | + |
| 290 | + /** |
| 291 | + * If the item is already collapsed, we expand the item. Otherwise, we will focus the first child. |
| 292 | + */ |
| 293 | + private _expandCurrentItem() {} |
| 294 | + |
| 295 | + /** For all items that are the same level as the current item, we expand those items. */ |
| 296 | + private _expandAllItemsAtCurrentItemLevel() {} |
| 297 | + |
| 298 | + private _activateCurrentItem() {} |
208 | 299 | }
|
209 | 300 |
|
210 | 301 | // tslint:enable
|
0 commit comments