@hoso/ngx-contextmenu
Version:
An Angular component to show a context menu on an arbitrary component
101 lines • 12.4 kB
JavaScript
import { ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Inject, Input, Optional, Output, QueryList, ViewChild, ViewEncapsulation, } from '@angular/core';
import { Subscription } from 'rxjs';
import { first } from 'rxjs/operators';
import { ContextMenuItemDirective } from './contextMenu.item.directive';
import { ContextMenuService } from './contextMenu.service';
import { CONTEXT_MENU_OPTIONS } from './contextMenu.tokens';
export class ContextMenuComponent {
constructor(_contextMenuService, changeDetector, elementRef, options) {
this._contextMenuService = _contextMenuService;
this.changeDetector = changeDetector;
this.elementRef = elementRef;
this.options = options;
this.menuClass = "";
this.autoFocus = false;
this.useBootstrap4 = false;
this.disabled = false;
this.close = new EventEmitter();
this.open = new EventEmitter();
this.visibleMenuItems = [];
this.links = [];
this.subscription = new Subscription();
if (options) {
this.autoFocus = options.autoFocus;
this.useBootstrap4 = options.useBootstrap4;
}
this.subscription.add(_contextMenuService.show.subscribe(menuEvent => {
this.onMenuEvent(menuEvent);
}));
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
onMenuEvent(menuEvent) {
if (this.disabled) {
return;
}
const { contextMenu, event, item } = menuEvent;
if (contextMenu && contextMenu !== this) {
return;
}
this.event = event;
this.item = item;
this.setVisibleMenuItems();
this._contextMenuService.openContextMenu(Object.assign(Object.assign({}, menuEvent), { menuItems: this.visibleMenuItems, menuClass: this.menuClass }));
this._contextMenuService.close.asObservable().pipe(first()).subscribe(closeEvent => this.close.emit(closeEvent));
this.open.next(menuEvent);
}
isMenuItemVisible(menuItem) {
return this.evaluateIfFunction(menuItem.visible);
}
setVisibleMenuItems() {
this.visibleMenuItems = this.menuItems.filter(menuItem => this.isMenuItemVisible(menuItem));
}
evaluateIfFunction(value) {
if (value instanceof Function) {
return value(this.item);
}
return value;
}
}
ContextMenuComponent.decorators = [
{ type: Component, args: [{
encapsulation: ViewEncapsulation.None,
selector: 'context-menu',
template: ` `,
styles: [`
.cdk-overlay-container {
position: fixed;
z-index: 1000;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ngx-contextmenu.cdk-overlay-pane {
position: absolute;
pointer-events: auto;
box-sizing: border-box;
}
`]
},] }
];
/** @nocollapse */
ContextMenuComponent.ctorParameters = () => [
{ type: ContextMenuService },
{ type: ChangeDetectorRef },
{ type: ElementRef },
{ type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [CONTEXT_MENU_OPTIONS,] }] }
];
ContextMenuComponent.propDecorators = {
menuClass: [{ type: Input }],
autoFocus: [{ type: Input }],
useBootstrap4: [{ type: Input }],
disabled: [{ type: Input }],
close: [{ type: Output }],
open: [{ type: Output }],
menuItems: [{ type: ContentChildren, args: [ContextMenuItemDirective,] }],
menuElement: [{ type: ViewChild, args: ['menu', { static: false },] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udGV4dE1lbnUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWNvbnRleHRtZW51L3NyYy9saWIvY29udGV4dE1lbnUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDSCxpQkFBaUIsRUFDakIsU0FBUyxFQUNULGVBQWUsRUFDZixVQUFVLEVBQ1YsWUFBWSxFQUVaLE1BQU0sRUFDTixLQUFLLEVBRUwsUUFBUSxFQUNSLE1BQU0sRUFDTixTQUFTLEVBQ1QsU0FBUyxFQUNULGlCQUFpQixHQUNwQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQ3BDLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUV2QyxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUV4RSxPQUFPLEVBQUUsa0JBQWtCLEVBQWlELE1BQU0sdUJBQXVCLENBQUM7QUFDMUcsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFtQzVELE1BQU0sT0FBTyxvQkFBb0I7SUFnQi9CLFlBQ1UsbUJBQXVDLEVBQ3ZDLGNBQWlDLEVBQ2pDLFVBQXNCLEVBRVEsT0FBNEI7UUFKMUQsd0JBQW1CLEdBQW5CLG1CQUFtQixDQUFvQjtRQUN2QyxtQkFBYyxHQUFkLGNBQWMsQ0FBbUI7UUFDakMsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUVRLFlBQU8sR0FBUCxPQUFPLENBQXFCO1FBcEJwRCxjQUFTLEdBQUcsRUFBRSxDQUFDO1FBQ2YsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUNsQixrQkFBYSxHQUFHLEtBQUssQ0FBQztRQUN0QixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2hCLFVBQUssR0FBd0MsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUNoRSxTQUFJLEdBQXlDLElBQUks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cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgICBDb21wb25lbnQsXG4gICAgQ29udGVudENoaWxkcmVuLFxuICAgIEVsZW1lbnRSZWYsXG4gICAgRXZlbnRFbWl0dGVyLFxuICAgIEhvc3RMaXN0ZW5lcixcbiAgICBJbmplY3QsXG4gICAgSW5wdXQsXG4gICAgT25EZXN0cm95LFxuICAgIE9wdGlvbmFsLFxuICAgIE91dHB1dCxcbiAgICBRdWVyeUxpc3QsXG4gICAgVmlld0NoaWxkLFxuICAgIFZpZXdFbmNhcHN1bGF0aW9uLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgZmlyc3QgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5cbmltcG9ydCB7IENvbnRleHRNZW51SXRlbURpcmVjdGl2ZSB9IGZyb20gJy4vY29udGV4dE1lbnUuaXRlbS5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgSUNvbnRleHRNZW51T3B0aW9ucyB9IGZyb20gJy4vY29udGV4dE1lbnUub3B0aW9ucyc7XG5pbXBvcnQgeyBDb250ZXh0TWVudVNlcnZpY2UsIElDb250ZXh0TWVudUNsaWNrRXZlbnQsIENsb3NlQ29udGV4dE1lbnVFdmVudCB9IGZyb20gJy4vY29udGV4dE1lbnUuc2VydmljZSc7XG5pbXBvcnQgeyBDT05URVhUX01FTlVfT1BUSU9OUyB9IGZyb20gJy4vY29udGV4dE1lbnUudG9rZW5zJztcblxuZXhwb3J0IGludGVyZmFjZSBJTGlua0NvbmZpZyB7XG4gIGNsaWNrOiAoaXRlbTogYW55LCAkZXZlbnQ/OiBNb3VzZUV2ZW50KSA9PiB2b2lkO1xuICBlbmFibGVkPzogKGl0ZW06IGFueSkgPT4gYm9vbGVhbjtcbiAgaHRtbDogKGl0ZW06IGFueSkgPT4gc3RyaW5nO1xufVxuZXhwb3J0IGludGVyZmFjZSBNb3VzZUxvY2F0aW9uIHtcbiAgbGVmdD86IHN0cmluZztcbiAgbWFyZ2luTGVmdD86IHN0cmluZztcbiAgbWFyZ2luVG9wPzogc3RyaW5nO1xuICB0b3A/OiBzdHJpbmc7XG59XG5cbkBDb21wb25lbnQoe1xuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBzZWxlY3RvcjogJ2NvbnRleHQtbWVudScsXG4gIHN0eWxlczogW2BcbiAgICAuY2RrLW92ZXJsYXktY29udGFpbmVyIHtcbiAgICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICAgIHotaW5kZXg6IDEwMDA7XG4gICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICAgIHRvcDogMDtcbiAgICAgIGxlZnQ6IDA7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgIGhlaWdodDogMTAwJTtcbiAgICB9XG4gICAgLm5neC1jb250ZXh0bWVudS5jZGstb3ZlcmxheS1wYW5lIHtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIHBvaW50ZXItZXZlbnRzOiBhdXRvO1xuICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICB9XG4gIGBdLFxuICB0ZW1wbGF0ZTogYCBgLFxufSlcbmV4cG9ydCBjbGFzcyBDb250ZXh0TWVudUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gIEBJbnB1dCgpIHB1YmxpYyBtZW51Q2xhc3MgPSBcIlwiO1xuICBASW5wdXQoKSBwdWJsaWMgYXV0b0ZvY3VzID0gZmFsc2U7XG4gIEBJbnB1dCgpIHB1YmxpYyB1c2VCb290c3RyYXA0ID0gZmFsc2U7XG4gIEBJbnB1dCgpIHB1YmxpYyBkaXNhYmxlZCA9IGZhbHNlO1xuICBAT3V0cHV0KCkgcHVibGljIGNsb3NlOiBFdmVudEVtaXR0ZXI8Q2xvc2VDb250ZXh0TWVudUV2ZW50PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgQE91dHB1dCgpIHB1YmxpYyBvcGVuOiBFdmVudEVtaXR0ZXI8SUNvbnRleHRNZW51Q2xpY2tFdmVudD4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIEBDb250ZW50Q2hpbGRyZW4oQ29udGV4dE1lbnVJdGVtRGlyZWN0aXZlKSBwdWJsaWMgbWVudUl0ZW1zOiBRdWVyeUxpc3Q8Q29udGV4dE1lbnVJdGVtRGlyZWN0aXZlPjtcbiAgQFZpZXdDaGlsZCgnbWVudScsIHsgc3RhdGljOiBmYWxzZSB9KSBwdWJsaWMgbWVudUVsZW1lbnQ6IEVsZW1lbnRSZWY7XG4gIHB1YmxpYyB2aXNpYmxlTWVudUl0ZW1zOiBDb250ZXh0TWVudUl0ZW1EaXJlY3RpdmVbXSA9IFtdO1xuXG4gIHB1YmxpYyBsaW5rczogSUxpbmtDb25maWdbXSA9IFtdO1xuICBwdWJsaWMgaXRlbTogYW55O1xuICBwdWJsaWMgZXZlbnQ6IE1vdXNlRXZlbnQgfCBLZXlib2FyZEV2ZW50O1xuICBwcml2YXRlIHN1YnNjcmlwdGlvbjogU3Vic2NyaXB0aW9uID0gbmV3IFN1YnNjcmlwdGlvbigpO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgX2NvbnRleHRNZW51U2VydmljZTogQ29udGV4dE1lbnVTZXJ2aWNlLFxuICAgIHByaXZhdGUgY2hhbmdlRGV0ZWN0b3I6IENoYW5nZURldGVjdG9yUmVmLFxuICAgIHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZixcbiAgICBAT3B0aW9uYWwoKVxuICAgIEBJbmplY3QoQ09OVEVYVF9NRU5VX09QVElPTlMpIHByaXZhdGUgb3B0aW9uczogSUNvbnRleHRNZW51T3B0aW9ucyxcbiAgKSB7XG4gICAgaWYgKG9wdGlvbnMpIHtcbiAgICAgIHRoaXMuYXV0b0ZvY3VzID0gb3B0aW9ucy5hdXRvRm9jdXM7XG4gICAgICB0aGlzLnVzZUJvb3RzdHJhcDQgPSBvcHRpb25zLnVzZUJvb3RzdHJhcDQ7XG4gICAgfVxuICAgIHRoaXMuc3Vic2NyaXB0aW9uLmFkZChfY29udGV4dE1lbnVTZXJ2aWNlLnNob3cuc3Vic2NyaWJlKG1lbnVFdmVudCA9PiB7XG4gICAgICB0aGlzLm9uTWVudUV2ZW50KG1lbnVFdmVudCk7XG4gICAgfSkpO1xuICB9XG5cbiAgcHVibGljIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuc3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XG4gIH1cblxuICBwdWJsaWMgb25NZW51RXZlbnQobWVudUV2ZW50OiBJQ29udGV4dE1lbnVDbGlja0V2ZW50KTogdm9pZCB7XG4gICAgaWYgKHRoaXMuZGlzYWJsZWQpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgY29uc3QgeyBjb250ZXh0TWVudSwgZXZlbnQsIGl0ZW0gfSA9IG1lbnVFdmVudDtcbiAgICBpZiAoY29udGV4dE1lbnUgJiYgY29udGV4dE1lbnUgIT09IHRoaXMpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5ldmVudCA9IGV2ZW50O1xuICAgIHRoaXMuaXRlbSA9IGl0ZW07XG4gICAgdGhpcy5zZXRWaXNpYmxlTWVudUl0ZW1zKCk7XG4gICAgdGhpcy5fY29udGV4dE1lbnVTZXJ2aWNlLm9wZW5Db250ZXh0TWVudSh7IC4uLm1lbnVFdmVudCwgbWVudUl0ZW1zOiB0aGlzLnZpc2libGVNZW51SXRlbXMsIG1lbnVDbGFzczogdGhpcy5tZW51Q2xhc3MgfSk7XG4gICAgdGhpcy5fY29udGV4dE1lbnVTZXJ2aWNlLmNsb3NlLmFzT2JzZXJ2YWJsZSgpLnBpcGUoZmlyc3QoKSkuc3Vic2NyaWJlKGNsb3NlRXZlbnQgPT4gdGhpcy5jbG9zZS5lbWl0KGNsb3NlRXZlbnQpKTtcbiAgICB0aGlzLm9wZW4ubmV4dChtZW51RXZlbnQpO1xuICB9XG5cbiAgcHVibGljIGlzTWVudUl0ZW1WaXNpYmxlKG1lbnVJdGVtOiBDb250ZXh0TWVudUl0ZW1EaXJlY3RpdmUpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5ldmFsdWF0ZUlmRnVuY3Rpb24obWVudUl0ZW0udmlzaWJsZSk7XG4gIH1cblxuICBwdWJsaWMgc2V0VmlzaWJsZU1lbnVJdGVtcygpOiB2b2lkIHtcbiAgICB0aGlzLnZpc2libGVNZW51SXRlbXMgPSB0aGlzLm1lbnVJdGVtcy5maWx0ZXIobWVudUl0ZW0gPT4gdGhpcy5pc01lbnVJdGVtVmlzaWJsZShtZW51SXRlbSkpO1xuICB9XG5cbiAgcHVibGljIGV2YWx1YXRlSWZGdW5jdGlvbih2YWx1ZTogYW55KTogYW55IHtcbiAgICBpZiAodmFsdWUgaW5zdGFuY2VvZiBGdW5jdGlvbikge1xuICAgICAgcmV0dXJuIHZhbHVlKHRoaXMuaXRlbSk7XG4gICAgfVxuICAgIHJldHVybiB2YWx1ZTtcbiAgfVxufVxuIl19