LP1852782 Context menu nagivation and FF repairs
[working/Evergreen.git] / Open-ILS / src / eg2 / src / app / share / context-menu / context-menu.directive.ts
1 import {Input, Output, EventEmitter, Directive} from '@angular/core';
2 import {NgbPopover} from '@ng-bootstrap/ng-bootstrap';
3 import {ContextMenuService, ContextMenu, ContextMenuEntry} from './context-menu.service';
4
5
6 /* Import all of this stuff so we can pass it to our parent
7  * class via its constructor */
8 import {
9     Inject, Injector, Renderer2, ElementRef, TemplateRef, ViewContainerRef,
10     ComponentFactoryResolver, NgZone, ChangeDetectorRef, ApplicationRef
11 } from '@angular/core';
12 import {DOCUMENT} from '@angular/common';
13 import {NgbPopoverConfig} from '@ng-bootstrap/ng-bootstrap';
14 /* --- */
15
16 @Directive({
17   selector: '[egContextMenu]',
18   exportAs: 'egContextMenu'
19 })
20 export class ContextMenuDirective extends NgbPopover {
21
22     // Only one active menu is allowed at a time.
23     static activeDirective: ContextMenuDirective;
24     static menuId = 0;
25
26     triggers = 'contextmenu';
27     popoverClass = 'eg-context-menu';
28
29     menuEntries: ContextMenuEntry[] = [];
30     menu: ContextMenu;
31
32     @Input() set egContextMenu(menuEntries: ContextMenuEntry[]) {
33         this.menuEntries = menuEntries;
34     }
35
36     @Output() menuItemSelected: EventEmitter<ContextMenuEntry>;
37
38     constructor(
39         p1: ElementRef<HTMLElement>, p2: Renderer2, p3: Injector,
40         p4: ComponentFactoryResolver, p5: ViewContainerRef, p6: NgbPopoverConfig,
41         p7: NgZone, @Inject(DOCUMENT) p8: any, p9: ChangeDetectorRef,
42         p10: ApplicationRef, private menuService: ContextMenuService) {
43
44         // relay injected services to parent
45         super(p1, p2, p3, p4, p5, p6, p7, p8, p9, p10);
46
47         this.menuItemSelected = new EventEmitter<ContextMenuEntry>();
48
49         this.menuService.menuItemSelected.subscribe(
50             (entry: ContextMenuEntry) => {
51
52             // Only broadcast entry selection to my listeners if I'm
53             // hosting the menu where the selection occurred.
54
55             if (this.activeMenuIsMe()) {
56                 this.menuItemSelected.emit(entry);
57
58                 // Item selection via keyboard fails to close the menu.
59                 // Force it closed.
60                 this.cleanup();
61             }
62         });
63     }
64
65     activeMenuIsMe(): boolean {
66         return (
67             this.menu &&
68             this.menuService.activeMenu &&
69             this.menu.id === this.menuService.activeMenu.id
70         );
71     }
72
73     // Close the active menu
74     cleanup() {
75         if (ContextMenuDirective.activeDirective) {
76             ContextMenuDirective.activeDirective.close();
77             ContextMenuDirective.activeDirective = null;
78             this.menuService.activeMenu = null;
79         }
80     }
81
82     open() {
83
84         // In certain scenarios (e.g. right-clicking on another context
85         // menu) an open popover will stay open.  Force it closed here.
86         this.cleanup();
87
88         if (!this.menuEntries ||
89              this.menuEntries.length === 0) {
90              return;
91         }
92
93         this.menu = new ContextMenu();
94         this.menu.id = ContextMenuDirective.menuId++;
95         this.menu.entries = this.menuEntries;
96
97         this.menuService.activeMenu = this.menu;
98         this.menuService.showMenuRequest.emit(this.menu);
99         this.ngbPopover = this.menuService.menuTemplate;
100
101         ContextMenuDirective.activeDirective = this;
102
103         super.open();
104     }
105 }
106
107