Fixed #6892 - Keyboard support for OrderList component

primefaces · Nov 21, 2018 · ba09383 · ba09383
1 parent f262074
commit ba09383
Showing 1 changed file with 91 additions and 3 deletions.
diff --git a/src/app/components/orderlist/orderlist.ts b/src/app/components/orderlist/orderlist.ts
@@ -1,4 +1,5 @@
-import {NgModule,Component,ElementRef,AfterViewChecked,AfterContentInit,Input,Output,ContentChildren,QueryList,TemplateRef,EventEmitter,ViewChild} from '@angular/core';
+import { NgModule, Component, ElementRef, AfterViewChecked, AfterContentInit, Input, Output, ContentChildren, QueryList, TemplateRef, EventEmitter,
+    ViewChild, HostListener } from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {ButtonModule} from '../button/button';
 import {SharedModule,PrimeTemplate} from '../common/shared';
@@ -26,7 +27,7 @@ import {ObjectUtils} from '../utils/objectutils';
                     <ng-template ngFor [ngForTrackBy]="trackBy" let-item [ngForOf]="value" let-i="index" let-l="last">
                         <li class="ui-orderlist-droppoint" *ngIf="dragdrop && isItemVisible(item)" (dragover)="onDragOver($event, i)" (drop)="onDrop($event, i)" (dragleave)="onDragLeave($event)" 
                             [ngClass]="{'ui-state-highlight': (i === dragOverItemIndex)}"></li>
-                        <li class="ui-orderlist-item"
+                        <li class="ui-orderlist-item" [attr.tabindex]="0"
                             [ngClass]="{'ui-state-highlight':isSelected(item)}" 
                             (click)="onItemClick($event,item,i)" (touchend)="onItemTouchEnd($event)"
                             [style.display]="isItemVisible(item) ? 'block' : 'none'"
@@ -96,6 +97,10 @@ export class OrderList implements AfterViewChecked,AfterContentInit {
 
     dragging: boolean;
 
+    focusedIndex: number;
+
+    focusedOption: any;
+
     public filterValue: string;
 
     public visibleOptions: any[];
@@ -182,6 +187,8 @@ export class OrderList implements AfterViewChecked,AfterContentInit {
             }
         }
 
+        this.focusedOption = item;
+
         //binding
         this.selectionChange.emit(this._selection);
 
@@ -192,7 +199,7 @@ export class OrderList implements AfterViewChecked,AfterContentInit {
     onFilterKeyup(event) {
         this.filterValue = event.target.value.trim().toLowerCase();
         this.filter();
-        
+
         this.onFilterEvent.emit({
             originalEvent: event,
             value: this.visibleOptions
@@ -202,6 +209,8 @@ export class OrderList implements AfterViewChecked,AfterContentInit {
     filter() {
         let searchFields: string[] = this.filterBy.split(',');
         this.visibleOptions = this.objectUtils.filter(this.value, searchFields, this.filterValue);
+        this.focusedOption = null;
+        this.focusedIndex = null;
     }
 
     isItemVisible(item: any): boolean {
@@ -351,6 +360,85 @@ export class OrderList implements AfterViewChecked,AfterContentInit {
                 this.listViewChild.nativeElement.scrollTop -= 15;
         }
     }
+
+    @HostListener('keydown',['$event'])
+    onKeyDown(event:KeyboardEvent){
+
+        let opts = this.filterValue ? this.visibleOptions : this.value;
+        this.focusedIndex = this.focusedOption ? this.objectUtils.findIndexInList(this.focusedOption,opts) : -1;
+        let currentOption = this.focusedIndex != -1 ? event.target : this.domHandler.findSingle(this.listViewChild.nativeElement, 'li.ui-orderlist-item');
+
+        switch(event.which) {
+            //down
+            case 40:
+                if (this.focusedIndex != -1) {
+                    this.focusedIndex = this.focusedIndex + 1;
+                    if (this.focusedIndex != (opts.length)) {
+                        this.focusedOption = opts[this.focusedIndex];
+                    }
+                    let nextOption = this.findNextOption(currentOption);
+                    if(nextOption) {
+                        nextOption.focus();
+                    }
+                }
+                else {
+                    this.focusedOption = opts[0];
+                    this.focusedIndex = 0;
+                    currentOption.focus();
+                }
+
+                event.preventDefault();
+                break;
+
+            //up
+            case 38:
+                if (this.focusedIndex > 0) {
+                    this.focusedIndex = this.focusedIndex - 1;
+                    this.focusedOption = opts[this.focusedIndex];
+                    let prevOption = this.findPrevOption(currentOption);
+                    if (prevOption) {
+                        prevOption.focus();
+                    }
+                }
+
+                event.preventDefault();
+                break;
+
+            //enter
+            case 13:
+                if (this.focusedOption) {
+                    this.onItemClick(event, this.focusedOption, this.focusedIndex);
+                }
+                event.preventDefault();
+                break;
+        }
+    }
+
+    findPrevOption(row)  {
+        let prevOption = row.previousElementSibling;
+        if (prevOption) {
+            if (this.domHandler.hasClass(prevOption, 'ui-orderlist-item') && prevOption.style.display == 'block')
+                return prevOption;
+            else
+                return this.findPrevOption(prevOption);
+        }
+        else {
+            return null;
+        }
+    }
+
+    findNextOption(row) {
+        let nextOption = row.nextElementSibling;
+        if (nextOption) {
+            if (this.domHandler.hasClass(nextOption, 'ui-orderlist-item') && nextOption.style.display == 'block')
+                return nextOption;
+            else
+                return this.findNextOption(nextOption);
+        }
+        else {
+            return null;
+        }
+    }
 }
 
 @NgModule({