From 16f9a8d57f8c4a9d1b95d609142429cc3e1a6551 Mon Sep 17 00:00:00 2001
From: Isaac Mann <isaacplmann@gmail.com>
Date: Wed, 28 Jun 2017 15:25:53 -0400
Subject: [PATCH] feat(hotkey): Arrow key navigation

---
 src/lib/contextMenu.component.ts        |  9 ++-
 src/lib/contextMenu.service.ts          | 17 +++++-
 src/lib/contextMenuContent.component.ts | 76 ++++++++++++++++---------
 3 files changed, 70 insertions(+), 32 deletions(-)

diff --git a/src/lib/contextMenu.component.ts b/src/lib/contextMenu.component.ts
index 9642a02..1f9510e 100644
--- a/src/lib/contextMenu.component.ts
+++ b/src/lib/contextMenu.component.ts
@@ -102,9 +102,7 @@ export class ContextMenuComponent implements OnDestroy {
       this.setVisibleMenuItems();
       this.contextMenuContent = this.contextMenuInjector.create({
         menuItems: this.visibleMenuItems,
-        item: this.item,
-        event: this.event,
-        parentContextMenu: menuEvent.parentContextMenu,
+        ...menuEvent,
       });
       this.open.next(menuEvent);
     });
@@ -124,6 +122,11 @@ export class ContextMenuComponent implements OnDestroy {
     this._contextMenuService.destroyLeafMenu();
   }
 
+  @HostListener('window:keydown.ArrowLeft')
+  public destroyLeafSubMenu(): void {
+    this._contextMenuService.destroyLeafMenu({ exceptRootMenu: true });
+  }
+
   public isMenuItemVisible(menuItem: ContextMenuItemDirective): boolean {
     return this.evaluateIfFunction(menuItem.visible);
   }
diff --git a/src/lib/contextMenu.service.ts b/src/lib/contextMenu.service.ts
index 7aa34a1..c0bd36c 100644
--- a/src/lib/contextMenu.service.ts
+++ b/src/lib/contextMenu.service.ts
@@ -9,6 +9,7 @@ export interface IContextMenuClickEvent {
   event: MouseEvent;
   parentContextMenu?: ContextMenuContentComponent;
   item: any;
+  activeMenuItemIndex?: number;
 }
 
 @Injectable()
@@ -21,7 +22,7 @@ export class ContextMenuService {
 
   constructor(private contextMenuInjector: ContextMenuInjectorService) {}
 
-  public destroyLeafMenu(): void {
+  public destroyLeafMenu({exceptRootMenu}: {exceptRootMenu?: boolean} = {}): void {
     if (this.isDestroyingLeafMenu) {
       return;
     }
@@ -31,10 +32,22 @@ export class ContextMenuService {
       if (cmContents && cmContents.length > 1) {
         cmContents[cmContents.length - 2].instance.focus();
       }
-      if (cmContents && cmContents.length > 0) {
+      if (cmContents && cmContents.length > (exceptRootMenu ? 1 : 0)) {
         this.contextMenuInjector.destroy(cmContents[cmContents.length - 1]);
       }
       this.isDestroyingLeafMenu = false;
     });
   }
+
+  public getLeafMenu(): ContextMenuContentComponent {
+    const cmContents: ComponentRef<ContextMenuContentComponent>[] = this.contextMenuInjector.getByType(this.contextMenuInjector.type);
+    if (cmContents && cmContents.length > 0) {
+      return cmContents[cmContents.length - 1].instance;
+    }
+    return undefined;
+  }
+
+  public isLeafMenu(cmContent: ContextMenuContentComponent): boolean {
+    return this.getLeafMenu() === cmContent;
+  }
 }
diff --git a/src/lib/contextMenuContent.component.ts b/src/lib/contextMenuContent.component.ts
index 674f3db..c4e86f4 100644
--- a/src/lib/contextMenuContent.component.ts
+++ b/src/lib/contextMenuContent.component.ts
@@ -11,9 +11,10 @@ import {
   Input,
   Optional,
   Renderer,
-  ViewChild
+  ViewChild,
+  ViewChildren,
 } from '@angular/core';
-import { OnDestroy, OnInit } from '@angular/core';
+import { OnDestroy, OnInit, QueryList } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
 
 export interface ILinkConfig {
@@ -46,11 +47,11 @@ export interface MouseLocation {
   ],
   template:
   `<div class="dropdown ngx-contextmenu" tabindex="0">
-        <ul #menu [ngStyle]="locationCss" class="dropdown-menu" tabindex="0">
-        <li *ngFor="let menuItem of menuItems; let i = index" [class.disabled]="!isMenuItemEnabled(menuItem)"
+      <ul #menu [ngStyle]="locationCss" class="dropdown-menu" tabindex="0">
+        <li #li *ngFor="let menuItem of menuItems; let i = index" [class.disabled]="!isMenuItemEnabled(menuItem)"
             [class.divider]="menuItem.divider" [class.dropdown-divider]="useBootstrap4 && menuItem.divider"
             [class.active]="i === activeMenuItemIndex && isMenuItemEnabled(menuItem)"
-            [attr.role]="menuItem.divider ? 'separator' : undefined" [id]="'item'+i">
+            [attr.role]="menuItem.divider ? 'separator' : undefined">
           <a *ngIf="!menuItem.divider && !menuItem.passive" href [class.dropdown-item]="useBootstrap4"
             [class.disabled]="useBootstrap4 && !isMenuItemEnabled(menuItem)" [class.hasSubMenu]="!!menuItem.subMenu"
             (click)="onMenuItemSelect(menuItem, $event)" (mouseenter)="openSubMenu(menuItem, $event)">
@@ -72,9 +73,10 @@ export class ContextMenuContentComponent implements OnInit, OnDestroy, AfterView
   @Input() public item: any;
   @Input() public event: MouseEvent;
   @Input() public parentContextMenu: ContextMenuContentComponent;
+  @Input() public activeMenuItemIndex = -1;
   @ViewChild('menu') public menuElement: ElementRef;
+  @ViewChildren('li') public menuItemElements: QueryList<ElementRef>;
 
-  public activeMenuItemIndex = -1;
   public autoFocus = false;
   public useBootstrap4 = false;
   public isShown = false;
@@ -97,6 +99,9 @@ export class ContextMenuContentComponent implements OnInit, OnDestroy, AfterView
 
   ngOnInit(): void {
     this.isOpening = true;
+    if (this.activeMenuItemIndex === undefined) {
+      this.activeMenuItemIndex = -1;
+    }
     setTimeout(() => this.isOpening = false, 400);
     if (this.menuItems) {
       // Declarative context menu
@@ -174,11 +179,11 @@ export class ContextMenuContentComponent implements OnInit, OnDestroy, AfterView
   }
 
   public isMenuItemEnabled(menuItem: ContextMenuItemDirective): boolean {
-    return this.evaluateIfFunction(menuItem.enabled);
+    return this.evaluateIfFunction(menuItem && menuItem.enabled);
   }
 
   public isMenuItemVisible(menuItem: ContextMenuItemDirective): boolean {
-    return this.evaluateIfFunction(menuItem.visible);
+    return this.evaluateIfFunction(menuItem && menuItem.visible);
   }
 
   public evaluateIfFunction(value: any): any {
@@ -197,8 +202,8 @@ export class ContextMenuContentComponent implements OnInit, OnDestroy, AfterView
     this.changeDetector.markForCheck();
   }
 
-  @HostListener('document:click')
-  @HostListener('document:contextmenu')
+  @HostListener('window:click')
+  @HostListener('window:contextmenu')
   public clickedOutside(): void {
     if (!this.isOpening) {
       this.hideMenu();
@@ -218,9 +223,9 @@ export class ContextMenuContentComponent implements OnInit, OnDestroy, AfterView
     this.changeDetector.markForCheck();
   }
 
-  @HostListener('document:keydown.ArrowUp', ['$event'])
+  @HostListener('window:keydown.ArrowDown', ['$event'])
   public nextItem(): void {
-    if (!this.isShown) {
+    if (!this._contextMenuService.isLeafMenu(this)) {
       return;
     }
     if (event) {
@@ -231,14 +236,15 @@ export class ContextMenuContentComponent implements OnInit, OnDestroy, AfterView
     } else {
       this.activeMenuItemIndex++;
     }
-    if (!this.isMenuItemEnabled(this.menuItems[this.activeMenuItemIndex]) || this.menuItems[this.activeMenuItemIndex].divider) {
+    const menuItem = this.menuItems[this.activeMenuItemIndex];
+    if (!this.isMenuItemEnabled(menuItem) || menuItem.divider || menuItem.passive) {
       this.nextItem();
     }
   }
 
-  @HostListener('document:keydown.ArrowDown', ['$event'])
+  @HostListener('window:keydown.ArrowUp', ['$event'])
   public prevItem(event?: KeyboardEvent): void {
-    if (!this.isShown) {
+    if (!this._contextMenuService.isLeafMenu(this)) {
       return;
     }
     if (event) {
@@ -249,14 +255,15 @@ export class ContextMenuContentComponent implements OnInit, OnDestroy, AfterView
     } else {
       this.activeMenuItemIndex--;
     }
-    if (!this.isMenuItemEnabled(this.menuItems[this.activeMenuItemIndex]) || this.menuItems[this.activeMenuItemIndex].divider) {
+    const menuItem = this.menuItems[this.activeMenuItemIndex];
+    if (!this.isMenuItemEnabled(menuItem) || menuItem.divider || menuItem.passive) {
       this.prevItem();
     }
   }
 
-  @HostListener('document:keydown.Enter', ['$event'])
-  public onEnter(event?: KeyboardEvent): void {
-    if (!this.isShown) {
+  @HostListener('window:keydown.ArrowRight', ['$event'])
+  public keyboardOpenSubMenu(event?: KeyboardEvent): void {
+    if (!this._contextMenuService.isLeafMenu(this)) {
       return;
     }
     if (event) {
@@ -264,32 +271,47 @@ export class ContextMenuContentComponent implements OnInit, OnDestroy, AfterView
     }
     if (this.activeMenuItemIndex >= 0) {
       const menuItem = this.menuItems[this.activeMenuItemIndex];
-      const clickEvent = new MouseEvent('click');
-      // clickEvent.target = menuItem.elementRef.nativeElement;
-    } else {
-      this.hideMenu();
+      const menuItemElement = this.menuItemElements.toArray()[this.activeMenuItemIndex].nativeElement;
+      this.openSubMenu(menuItem, <any>event, menuItemElement, 0);
+    }
+  }
+
+  @HostListener('window:keydown.Enter', ['$event'])
+  @HostListener('window:keydown.Space', ['$event'])
+  public keyboardMenuItemSelect(event?: KeyboardEvent): void {
+    if (!this._contextMenuService.isLeafMenu(this)) {
+      return;
+    }
+    if (event) {
+      event.preventDefault();
+    }
+    if (this.activeMenuItemIndex >= 0) {
+      const menuItem = this.menuItems[this.activeMenuItemIndex];
+      const menuItemElement = this.menuItemElements.toArray()[this.activeMenuItemIndex].nativeElement;
+      this.onMenuItemSelect(menuItem, <any>event, menuItemElement, 0);
     }
   }
 
-  public openSubMenu(menuItem: ContextMenuItemDirective, event: MouseEvent): void {
+  public openSubMenu(menuItem: ContextMenuItemDirective, event: MouseEvent, target?: HTMLElement, activeMenuItemIndex?: number): void {
     this._contextMenuService.triggerClose.next(this);
     if (!menuItem.subMenu) {
       return;
     }
-    const rect = (<HTMLElement>event.target).getBoundingClientRect();
+    const rect = (target || <HTMLElement>event.target).getBoundingClientRect();
     const newEvent = Object.assign({}, event, { clientX: rect.right, clientY: rect.top, view: event.view });
     this._contextMenuService.show.next({
       contextMenu: menuItem.subMenu,
       item: this.item,
       event: newEvent,
       parentContextMenu: this,
+      activeMenuItemIndex,
     });
   }
 
-  public onMenuItemSelect(menuItem: ContextMenuItemDirective, event: MouseEvent): void {
+  public onMenuItemSelect(menuItem: ContextMenuItemDirective, event: MouseEvent, target?: HTMLElement, activeMenuItemIndex?: number): void {
     event.preventDefault();
     event.stopPropagation();
-    this.openSubMenu(menuItem, event);
+    this.openSubMenu(menuItem, event, target);
     if (!menuItem.subMenu) {
       menuItem.triggerExecute(this.item, event);
     }