@dotglitch/ngx-ctx-menu
Version:
Angular context menu that works with templates
79 lines • 12 kB
JavaScript
import { Directive, Input } from '@angular/core';
import { calcMenuItemBounds, ContextMenuComponent } from './context-menu/context-menu.component';
import { getPosition } from './utils';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/dialog";
export class NgxAppMenuDirective {
constructor(dialog, viewContainer) {
this.dialog = dialog;
this.viewContainer = viewContainer;
/**
* Configuration for opening the app menu
*/
this.config = {};
}
ngAfterViewInit() {
const el = this.viewContainer.element.nativeElement;
if (!this.config?.trigger) {
el.onclick = this.openDialog.bind(this);
}
else {
const triggers = Array.isArray(this.config.trigger) ? this.config.trigger : [this.config.trigger];
triggers.forEach(t => {
if (t == "contextmenu") {
el.addEventListener(t, (e) => {
e.preventDefault();
this.openDialog(e);
});
}
else {
el.addEventListener(t, this.openDialog.bind(this));
}
});
}
}
// Needs to be public so we can manually open the dialog
async openDialog(evt) {
const el = this.viewContainer.element.nativeElement;
const cords = getPosition(el, this.config, await calcMenuItemBounds(this.menuItems, this.data));
const specificId = crypto.randomUUID();
el.classList.add("ngx-app-menu-open");
// Create the context menu
let _s = this.dialog.open(ContextMenuComponent, {
data: {
data: this.data,
items: this.menuItems,
// dialog: this.dialog
config: this.config,
id: specificId
},
panelClass: ["ngx-app-menu", "ngx-ctx-menu", 'ngx-' + specificId].concat(this.config?.customClass || []),
position: cords,
backdropClass: "ngx-app-menu-backdrop"
})
.afterClosed() // What a stupid thing to make an observable.
.subscribe(() => {
_s.unsubscribe();
el.classList.remove("ngx-app-menu-open");
});
}
}
/** @nocollapse */ NgxAppMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgxAppMenuDirective, deps: [{ token: i1.MatDialog }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
/** @nocollapse */ NgxAppMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.0", type: NgxAppMenuDirective, isStandalone: true, selector: "[ngx-app-menu]", inputs: { menuItems: ["ngx-app-menu", "menuItems"], data: ["ngx-app-menu-context", "data"], config: ["ngx-app-menu-config", "config"] }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.0", ngImport: i0, type: NgxAppMenuDirective, decorators: [{
type: Directive,
args: [{
selector: '[ngx-app-menu]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i0.ViewContainerRef }]; }, propDecorators: { menuItems: [{
type: Input,
args: ["ngx-app-menu"]
}], data: [{
type: Input,
args: ["ngx-app-menu-context"]
}], config: [{
type: Input,
args: ["ngx-app-menu-config"]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwbWVudS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL2FwcG1lbnUuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFpRCxNQUFNLGVBQWUsQ0FBQztBQUVoRyxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSx1Q0FBdUMsQ0FBQztBQUVqRyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sU0FBUyxDQUFDOzs7QUEyQ3RDLE1BQU0sT0FBTyxtQkFBbUI7SUFpQjVCLFlBQ1ksTUFBaUIsRUFDakIsYUFBK0I7UUFEL0IsV0FBTSxHQUFOLE1BQU0sQ0FBVztRQUNqQixrQkFBYSxHQUFiLGFBQWEsQ0FBa0I7UUFQM0M7O1dBRUc7UUFDMkIsV0FBTSxHQUFzQixFQUFFLENBQUM7SUFLekQsQ0FBQztJQUVMLGVBQWU7UUFDWCxNQUFNLEVBQUUsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxhQUE0QixDQUFDO1FBRW5FLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLE9BQU8sRUFBRTtZQUN2QixFQUFFLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1NBQzNDO2FBQ0k7WUFDRCxNQUFNLFFBQVEsR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUM7WUFFbEcsUUFBUSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsRUFBRTtnQkFDakIsSUFBSSxDQUFDLElBQUksYUFBYSxFQUFFO29CQUNwQixFQUFFLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxFQUFFLEVBQUU7d0JBQ3pCLENBQUMsQ0FBQyxjQUFjLEVBQUUsQ0FBQzt3QkFDbkIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsQ0FBQztvQkFDdkIsQ0FBQyxDQUFDLENBQUM7aUJBQ047cUJBQ0k7b0JBQ0QsRUFBRSxDQUFDLGdCQUFnQixDQUFDLENBQUMsRUFBRSxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDO2lCQUN0RDtZQUNMLENBQUMsQ0FBQyxDQUFDO1NBQ047SUFDTCxDQUFDO0lBRUQsd0RBQXdEO0lBQ2hELEtBQUssQ0FBQyxVQUFVLENBQUMsR0FBZTtRQUNwQyxNQUFNLEVBQUUsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxhQUE0QixDQUFDO1FBRW5FLE1BQU0sS0FBSyxHQUFHLFdBQVcsQ0FBQyxFQUFFLEVBQUUsSUFBSSxDQUFDLE1BQU0sRUFBRSxNQUFNLGtCQUFrQixDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7UUFFaEcsTUFBTSxVQUFVLEdBQUcsTUFBTSxDQUFDLFVBQVUsRUFBRSxDQUFDO1FBRXZDLEVBQUUsQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLG1CQUFtQixDQUFDLENBQUM7UUFFdEMsMEJBQTBCO1FBQzFCLElBQUksRUFBRSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLG9CQUFvQixFQUFFO1lBQzVDLElBQUksRUFBRTtnQkFDRixJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUk7Z0JBQ2YsS0FBSyxFQUFFLElBQUksQ0FBQyxTQUFTO2dCQUNyQixzQkFBc0I7Z0JBQ3RCLE1BQU0sRUFBRSxJQUFJLENBQUMsTUFBTTtnQkFDbkIsRUFBRSxFQUFFLFVBQVU7YUFDakI7WUFDRCxVQUFVLEVBQUUsQ0FBQyxjQUFjLEVBQUUsY0FBYyxFQUFFLE1BQU0sR0FBRyxVQUFVLENBQUMsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxXQUFXLElBQUksRUFBRSxDQUFDO1lBQ3hHLFFBQVEsRUFBRSxLQUFLO1lBQ2YsYUFBYSxFQUFFLHVCQUF1QjtTQUN6QyxDQUFDO2FBQ0QsV0FBVyxFQUFFLENBQUMsNkNBQTZDO2FBQzNELFNBQVMsQ0FBQyxHQUFHLEVBQUU7WUFDWixFQUFFLENBQUMsV0FBVyxFQUFFLENBQUM7WUFFakIsRUFBRSxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsbUJBQW1CLENBQUMsQ0FBQztRQUM3QyxDQUFDLENBQUMsQ0FBQTtJQUNOLENBQUM7O21JQTFFUSxtQkFBbUI7dUhBQW5CLG1CQUFtQjsyRkFBbkIsbUJBQW1CO2tCQUovQixTQUFTO21CQUFDO29CQUNQLFFBQVEsRUFBRSxnQkFBZ0I7b0JBQzFCLFVBQVUsRUFBRSxJQUFJO2lCQUNuQjsrSEFNMEIsU0FBUztzQkFBL0IsS0FBSzt1QkFBQyxjQUFjO2dCQUtVLElBQUk7c0JBQWxDLEtBQUs7dUJBQUMsc0JBQXNCO2dCQUtDLE1BQU07c0JBQW5DLEtBQUs7dUJBQUMscUJBQXFCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGlyZWN0aXZlLCBJbnB1dCwgSG9zdExpc3RlbmVyLCBWaWV3Q29udGFpbmVyUmVmLCBBZnRlclZpZXdJbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNYXREaWFsb2cgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9kaWFsb2cnO1xuaW1wb3J0IHsgY2FsY01lbnVJdGVtQm91bmRzLCBDb250ZXh0TWVudUNvbXBvbmVudCB9IGZyb20gJy4vY29udGV4dC1tZW51L2NvbnRleHQtbWVudS5jb21wb25lbnQnO1xuaW1wb3J0IHsgQ29udGV4dE1lbnVJdGVtIH0gZnJvbSAnLi90eXBlcyc7XG5pbXBvcnQgeyBnZXRQb3NpdGlvbiB9IGZyb20gJy4vdXRpbHMnO1xuXG5leHBvcnQgdHlwZSBOZ3hBcHBNZW51VHJpZ2dlcnMgPSBcImNsaWNrXCIgfCBcImRibGNsaWNrXCIgfCBcImhvdmVyXCIgfCBcImNvbnRleHRtZW51XCI7XG5cbmV4cG9ydCB0eXBlIE5neEFwcE1lbnVPcHRpb25zID0gUGFydGlhbDx7XG4gICAgLyoqXG4gICAgICogUG9zaXRpb24gcmVsYXRpdmUgdG8gdGhlIGVsZW1lbnQgdGhlIG1lbnUgcG9wcy11cCBhdC5cbiAgICAgKi9cbiAgICBwb3NpdGlvbjogXCJ0b3BcIiB8IFwicmlnaHRcIiB8IFwiYm90dG9tXCIgfCBcImxlZnRcIixcbiAgICAvKipcbiAgICAgKiBIb3cgdGhlIHBvcHVwIGlzIGFsaWduZWQgcmVsYXRpdmUgdG8gdGhlIGVsZW1lbnQuXG4gICAgICovXG4gICAgYWxpZ25tZW50OiBcImNlbnRlclwiIHwgXCJiZWZvcmVzdGFydFwiIHwgXCJzdGFydFwiIHwgXCJlbmRcIiB8IFwiYWZ0ZXJlbmRcIixcbiAgICAvKipcbiAgICAgKiBAaGlkZGVuXG4gICAgICogV0lQOlxuICAgICAqIFNob3cgYW4gZXJyb3IgZnJvbSB0aGUgZGlhbG9nIHBvaW50aW5nIHRvIHRoZSBlbGVtZW50LlxuICAgICAqL1xuICAgIHNob3dBcnJvdzogYm9vbGVhbixcbiAgICAvKipcbiAgICAgKiBAaGlkZGVuXG4gICAgICogV0lQOlxuICAgICAqIFNpemUgb2YgdGhlIGFycm93LlxuICAgICAqL1xuICAgIGFycm93U2l6ZTogbnVtYmVyLFxuICAgIC8qKlxuICAgICAqIEhvdyBtdWNoIHBhZGRpbmcgdG8gYWRkIG5lYXIgdGhlIGVkZ2VzIG9mIHRoZSBzY3JlZW4uXG4gICAgICovXG4gICAgZWRnZVBhZGRpbmc6IG51bWJlcixcbiAgICAvKipcbiAgICAgKiBXaGljaCBldmVudCBzaG91bGQgdHJpZ2dlciB0aGUgYXBwIG1lbnUuXG4gICAgICovXG4gICAgdHJpZ2dlcjogTmd4QXBwTWVudVRyaWdnZXJzIHwgTmd4QXBwTWVudVRyaWdnZXJzW107XG4gICAgLyoqXG4gICAgICogQSBsaXN0IG9mIGN1c3RvbSBjbGFzc2VzIHRvIGFkZCB0byB0aGUgZGlhbG9nIHBvcHVwcy5cbiAgICAgKi9cbiAgICBjdXN0b21DbGFzczogc3RyaW5nW11cbn0+O1xuXG5ARGlyZWN0aXZlKHtcbiAgICBzZWxlY3RvcjogJ1tuZ3gtYXBwLW1lbnVdJyxcbiAgICBzdGFuZGFsb25lOiB0cnVlXG59KVxuZXhwb3J0IGNsYXNzIE5neEFwcE1lbnVEaXJlY3RpdmUgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0IHtcblxuICAgIC8qKlxuICAgICAqIFRoZSBpdGVtcyB0aGF0IHdpbGwgYmUgYm91bmQgdG8gdGhlIG1lbnUuXG4gICAgICovXG4gICAgQElucHV0KFwibmd4LWFwcC1tZW51XCIpIG1lbnVJdGVtczogQ29udGV4dE1lbnVJdGVtW107XG5cbiAgICAvKipcbiAgICAgKiBUaGUgZGF0YSByZXByZXNlbnRpbmcgdGhlIGl0ZW0gdGhlIGNvbnRleHQtbWVudSB3YXMgb3BlbmVkIGZvci5cbiAgICAgKi9cbiAgICBASW5wdXQoXCJuZ3gtYXBwLW1lbnUtY29udGV4dFwiKSBkYXRhOiBhbnk7XG5cbiAgICAvKipcbiAgICAgKiBDb25maWd1cmF0aW9uIGZvciBvcGVuaW5nIHRoZSBhcHAgbWVudVxuICAgICAqL1xuICAgIEBJbnB1dChcIm5neC1hcHAtbWVudS1jb25maWdcIikgY29uZmlnOiBOZ3hBcHBNZW51T3B0aW9ucyA9IHt9O1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIHByaXZhdGUgZGlhbG9nOiBNYXREaWFsb2csXG4gICAgICAgIHByaXZhdGUgdmlld0NvbnRhaW5lcjogVmlld0NvbnRhaW5lclJlZlxuICAgICkgeyB9XG5cbiAgICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgICAgIGNvbnN0IGVsID0gdGhpcy52aWV3Q29udGFpbmVyLmVsZW1lbnQubmF0aXZlRWxlbWVudCBhcyBIVE1MRWxlbWVudDtcblxuICAgICAgICBpZiAoIXRoaXMuY29uZmlnPy50cmlnZ2VyKSB7XG4gICAgICAgICAgICBlbC5vbmNsaWNrID0gdGhpcy5vcGVuRGlhbG9nLmJpbmQodGhpcyk7XG4gICAgICAgIH1cbiAgICAgICAgZWxzZSB7XG4gICAgICAgICAgICBjb25zdCB0cmlnZ2VycyA9IEFycmF5LmlzQXJyYXkodGhpcy5jb25maWcudHJpZ2dlcikgPyB0aGlzLmNvbmZpZy50cmlnZ2VyIDogW3RoaXMuY29uZmlnLnRyaWdnZXJdO1xuXG4gICAgICAgICAgICB0cmlnZ2Vycy5mb3JFYWNoKHQgPT4ge1xuICAgICAgICAgICAgICAgIGlmICh0ID09IFwiY29udGV4dG1lbnVcIikge1xuICAgICAgICAgICAgICAgICAgICBlbC5hZGRFdmVudExpc3RlbmVyKHQsIChlKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgICAgICBlLnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgICAgICAgICAgICAgICAgICB0aGlzLm9wZW5EaWFsb2coZSk7XG4gICAgICAgICAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICBlbHNlIHtcbiAgICAgICAgICAgICAgICAgICAgZWwuYWRkRXZlbnRMaXN0ZW5lcih0LCB0aGlzLm9wZW5EaWFsb2cuYmluZCh0aGlzKSk7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfSk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICAvLyBOZWVkcyB0byBiZSBwdWJsaWMgc28gd2UgY2FuIG1hbnVhbGx5IG9wZW4gdGhlIGRpYWxvZ1xuICAgIHByaXZhdGUgYXN5bmMgb3BlbkRpYWxvZyhldnQ6IE1vdXNlRXZlbnQpIHtcbiAgICAgICAgY29uc3QgZWwgPSB0aGlzLnZpZXdDb250YWluZXIuZWxlbWVudC5uYXRpdmVFbGVtZW50IGFzIEhUTUxFbGVtZW50O1xuXG4gICAgICAgIGNvbnN0IGNvcmRzID0gZ2V0UG9zaXRpb24oZWwsIHRoaXMuY29uZmlnLCBhd2FpdCBjYWxjTWVudUl0ZW1Cb3VuZHModGhpcy5tZW51SXRlbXMsIHRoaXMuZGF0YSkpO1xuXG4gICAgICAgIGNvbnN0IHNwZWNpZmljSWQgPSBjcnlwdG8ucmFuZG9tVVVJRCgpO1xuXG4gICAgICAgIGVsLmNsYXNzTGlzdC5hZGQoXCJuZ3gtYXBwLW1lbnUtb3BlblwiKTtcblxuICAgICAgICAvLyBDcmVhdGUgdGhlIGNvbnRleHQgbWVudVxuICAgICAgICBsZXQgX3MgPSB0aGlzLmRpYWxvZy5vcGVuKENvbnRleHRNZW51Q29tcG9uZW50LCB7XG4gICAgICAgICAgICBkYXRhOiB7XG4gICAgICAgICAgICAgICAgZGF0YTogdGhpcy5kYXRhLFxuICAgICAgICAgICAgICAgIGl0ZW1zOiB0aGlzLm1lbnVJdGVtcyxcbiAgICAgICAgICAgICAgICAvLyBkaWFsb2c6IHRoaXMuZGlhbG9nXG4gICAgICAgICAgICAgICAgY29uZmlnOiB0aGlzLmNvbmZpZyxcbiAgICAgICAgICAgICAgICBpZDogc3BlY2lmaWNJZFxuICAgICAgICAgICAgfSxcbiAgICAgICAgICAgIHBhbmVsQ2xhc3M6IFtcIm5neC1hcHAtbWVudVwiLCBcIm5neC1jdHgtbWVudVwiLCAnbmd4LScgKyBzcGVjaWZpY0lkXS5jb25jYXQodGhpcy5jb25maWc/LmN1c3RvbUNsYXNzIHx8IFtdKSxcbiAgICAgICAgICAgIHBvc2l0aW9uOiBjb3JkcyxcbiAgICAgICAgICAgIGJhY2tkcm9wQ2xhc3M6IFwibmd4LWFwcC1tZW51LWJhY2tkcm9wXCJcbiAgICAgICAgfSlcbiAgICAgICAgLmFmdGVyQ2xvc2VkKCkgLy8gV2hhdCBhIHN0dXBpZCB0aGluZyB0byBtYWtlIGFuIG9ic2VydmFibGUuXG4gICAgICAgIC5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgICAgICAgX3MudW5zdWJzY3JpYmUoKTtcblxuICAgICAgICAgICAgZWwuY2xhc3NMaXN0LnJlbW92ZShcIm5neC1hcHAtbWVudS1vcGVuXCIpO1xuICAgICAgICB9KVxuICAgIH1cbn1cbiJdfQ==