LP1803787: Add keyboard support (Shift+F10)

This allows a user to set focus to a row using a checkbox, then
press the standard keyboard shortcut to open the row context menu.

This commit sets the Shift+F10 keyboard combination to fire the
contextmenu javascript event throughout the Angular staff client, so
other interfaces that need to override the browser's context menu should
be able to respond to Shift+F10.

To test:

1) Open an eg2 grid interface (Server Administration -> Authority
Thesaurus is a good one).
2) Use the tab key to set focus onto the checkbox for one of the rows.
3) Note that pressing Shift + F10 opens the browser's context menu.
4) Apply this commit
5) Repeat steps 1+2
6) Press Shift + F10.
7) Note that the context menu opens, and that you can use Tab and
Shift+Tab to move through the various actions.
8) Note that you can press the Esc key to exit the context menu

Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
Signed-off-by: Bill Erickson <berickxx@gmail.com>

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
index b83c619..9ab26cd 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
@@ -14,7 +14,13 @@
 
     <ng-container *ngIf="!context.disableSelect">
       <div class="eg-grid-cell eg-grid-checkbox-cell eg-grid-cell-skinny">
-        <input type='checkbox' [(ngModel)]="context.rowSelector.indexes[context.getRowIndex(row)]">
+        <input type='checkbox' [(ngModel)]="context.rowSelector.indexes[context.getRowIndex(row)]"
+          #rowContextMenu="ngbPopover"
+          popoverTitle="Actions for Selected Rows" i18n-popoverTitle
+          (contextmenu)="onRowContextClick($event, row, rowContextMenu)"
+          [ngbPopover]="contextMenu"
+          placement="right"
+          triggers="manual">
       </div>
     </ng-container>
     <div class="eg-grid-cell eg-grid-number-cell eg-grid-cell-skinny">

diff --git a/Open-ILS/src/eg2/src/app/staff/staff.component.html b/Open-ILS/src/eg2/src/app/staff/staff.component.html
index 2a2539c..7afcc32 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/staff.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/staff.component.html
@@ -13,7 +13,11 @@
     keyDesc="Display AccessKey Info Dialog" i18n-keyDesc
     (click)="egAccessKeyInfo.open()">
 </a>
+<a egAccessKey keyCtx="base"
+    keySpec="shift+f10" i18n-keySpec
+    keyDesc="Display Context Menu" i18n-keyDesc
+    (click)="fireContextMenuEvent()">
+</a>
 
 <!-- global toast alerts -->
 <eg-toast></eg-toast>
-

diff --git a/Open-ILS/src/eg2/src/app/staff/staff.component.ts b/Open-ILS/src/eg2/src/app/staff/staff.component.ts
index 492b1df..dc58de1 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/staff.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/staff.component.ts
@@ -62,8 +62,6 @@ export class StaffComponent implements OnInit {
         this.route.data.subscribe((data: {staffResolver: any}) => {
             // Data fetched via StaffResolver is available here.
         });
-
-
     }
 
     /**
@@ -108,6 +106,22 @@ export class StaffComponent implements OnInit {
         this.keys.fire(evt);
     }
 
+    /**
+     * Make sure to fire the contextmenu Event on Shift+F10
+     */
+    fireContextMenuEvent(): void {
+        let event = new MouseEvent("contextmenu", {
+            bubbles: true,
+            cancelable: false,
+            view: window,
+            button: 2,
+            buttons: 0,
+        });
+        document.activeElement.dispatchEvent(event);
+    };
+
+
+
     /*
     @ViewChild('egAccessKeyInfo')
     private keyComponent: AccessKeyInfoComponent;
@@ -115,4 +129,3 @@ export class StaffComponent implements OnInit {
 
 }
 
-