diff --git a/README.md b/README.md index 676073e..43f2c81 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,21 @@ # ngx-contextmenu A context menu built with Angular (6) inspired by [ui.bootstrap.contextMenu](https://github.com/Templarian/ui.bootstrap.contextMenu). Bootstrap classes are included in the markup, but there is no explicit dependency on Bootstrap. [Demo](https://isaacplmann.github.io/ngx-contextmenu/) [Stackblitz example](https://stackblitz.com/edit/ngx-contextmenu-example) +Originally created by [Isaac Mann](isaacplmann@gmail.com), just slightly edited by me. +Changes are: +- Option to enable trace of selection path + +When selecting a subMenu item the parent item will stay highlighted. + +Usage: +In your module import set the highlightParentItems option to true: + +```js + ContextMenuModule.forRoot({ highlightParentItems: true }), +``` + +ToDo: +The component seems to "remember" the last selected item, so when the menu is closed and reopend the last selected menu item is still highlighted. ## Installation diff --git a/package.json b/package.json index e4c6be2..de804c5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ngx-contextmenu-platform", - "version": "5.2.0", + "version": "5.2.1", "description": "An Angular component to show a context menu on an arbitrary component", "keywords": [ "angular2", diff --git a/projects/ngx-contextmenu/package.json b/projects/ngx-contextmenu/package.json index 8210a74..1533496 100644 --- a/projects/ngx-contextmenu/package.json +++ b/projects/ngx-contextmenu/package.json @@ -1,6 +1,6 @@ { - "name": "ngx-contextmenu", - "version": "5.2.0", + "name": "@avdbrink/ngx-contextmenu", + "version": "5.2.1", "description": "An Angular component to show a context menu on an arbitrary component", "keywords": [ "angular2", @@ -11,11 +11,11 @@ "ng2", "ng2-contextmenu" ], - "author": "Isaac Mann ", + "author": "Arno van den Brink ", "license": "MIT", "repository": { "type": "git", - "url": "git+ssh://git@github.com/isaacplmann/ngx-contextmenu.git" + "url": "git+ssh://git@github.com/avdbrink/ngx-contextmenu.git" }, "peerDependencies": { "@angular/cdk": ">=6.0.0 <9.0.0", diff --git a/projects/ngx-contextmenu/src/lib/contextMenu.component.ts b/projects/ngx-contextmenu/src/lib/contextMenu.component.ts index ed623dc..5219897 100644 --- a/projects/ngx-contextmenu/src/lib/contextMenu.component.ts +++ b/projects/ngx-contextmenu/src/lib/contextMenu.component.ts @@ -59,6 +59,7 @@ export class ContextMenuComponent implements OnDestroy { @Input() public menuClass = ""; @Input() public autoFocus = false; @Input() public useBootstrap4 = false; + @Input() public highlightParentItems = false; @Input() public disabled = false; @Output() public close: EventEmitter = new EventEmitter(); @Output() public open: EventEmitter = new EventEmitter(); @@ -81,6 +82,7 @@ export class ContextMenuComponent implements OnDestroy { if (options) { this.autoFocus = options.autoFocus; this.useBootstrap4 = options.useBootstrap4; + this.highlightParentItems = options.highlightParentItems; } this.subscription.add(_contextMenuService.show.subscribe(menuEvent => { this.onMenuEvent(menuEvent); diff --git a/projects/ngx-contextmenu/src/lib/contextMenu.item.directive.ts b/projects/ngx-contextmenu/src/lib/contextMenu.item.directive.ts index be2e947..9369780 100644 --- a/projects/ngx-contextmenu/src/lib/contextMenu.item.directive.ts +++ b/projects/ngx-contextmenu/src/lib/contextMenu.item.directive.ts @@ -16,6 +16,7 @@ export class ContextMenuItemDirective implements Highlightable { public currentItem: any; public isActive = false; + public isActiveParent = false; public get disabled() { return this.passive || this.divider || @@ -38,6 +39,13 @@ export class ContextMenuItemDirective implements Highlightable { this.isActive = false; } + public setActiveParentStyles(): void { + this.isActiveParent = true; + } + public setInActiveParentStyles(): void { + this.isActiveParent = false; + } + public triggerExecute(item: any, $event?: MouseEvent | KeyboardEvent): void { if (!this.evaluateIfFunction(this.enabled, item)) { return; diff --git a/projects/ngx-contextmenu/src/lib/contextMenu.options.ts b/projects/ngx-contextmenu/src/lib/contextMenu.options.ts index a607f69..e6e3ad7 100644 --- a/projects/ngx-contextmenu/src/lib/contextMenu.options.ts +++ b/projects/ngx-contextmenu/src/lib/contextMenu.options.ts @@ -1,4 +1,5 @@ export interface IContextMenuOptions { useBootstrap4?: boolean; autoFocus?: boolean; + highlightParentItems?: boolean; } diff --git a/projects/ngx-contextmenu/src/lib/contextMenuContent.component.ts b/projects/ngx-contextmenu/src/lib/contextMenuContent.component.ts index c244f01..752181c 100644 --- a/projects/ngx-contextmenu/src/lib/contextMenuContent.component.ts +++ b/projects/ngx-contextmenu/src/lib/contextMenuContent.component.ts @@ -42,6 +42,11 @@ const ARROW_LEFT_KEYCODE = 37; .hasSubMenu:before { content: "\u25B6"; float: right; + } + .activeParent { + text-decoration: none; + color: #262626; + background-color: #f5f5f5; }`, ], template: @@ -53,6 +58,7 @@ const ARROW_LEFT_KEYCODE = 37; [attr.role]="menuItem.divider ? 'separator' : undefined"> @@ -86,6 +92,7 @@ export class ContextMenuContentComponent implements OnInit, OnDestroy, AfterView public autoFocus = false; public useBootstrap4 = false; + public highlightParentItems = false; private _keyManager: ActiveDescendantKeyManager; private subscription: Subscription = new Subscription(); constructor( @@ -98,6 +105,7 @@ export class ContextMenuContentComponent implements OnInit, OnDestroy, AfterView if (options) { this.autoFocus = options.autoFocus; this.useBootstrap4 = options.useBootstrap4; + this.highlightParentItems = options.highlightParentItems; } } @@ -207,6 +215,9 @@ export class ContextMenuContentComponent implements OnInit, OnDestroy, AfterView public onOpenSubMenu(menuItem: ContextMenuItemDirective, event?: MouseEvent | KeyboardEvent): void { const anchorElementRef = this.menuItemElements.toArray()[this._keyManager.activeItemIndex]; const anchorElement = anchorElementRef && anchorElementRef.nativeElement; + if (this.highlightParentItems) { + this.menuItems.forEach(item => item.isActiveParent = (item === menuItem && menuItem.subMenu) ); + } this.openSubMenu.emit({ anchorElement, contextMenu: menuItem.subMenu, diff --git a/src/demo/app.module.ts b/src/demo/app.module.ts index 1eda11d..8910a60 100644 --- a/src/demo/app.module.ts +++ b/src/demo/app.module.ts @@ -18,6 +18,7 @@ import { ChildTwoComponent } from './child2.component'; ContextMenuModule.forRoot({ autoFocus: true, // useBootstrap4: true, + highlightParentItems: true }), RouterModule.forRoot([ {