ngx-right-click-menu
Version:
ngx-right-click-menu is right click context menu for Angular 2+.
340 lines (330 loc) • 13.1 kB
JavaScript
import { trigger, state, style, animate, transition } from '@angular/animations';
import { CommonModule } from '@angular/common';
import { MatListModule, MatIconModule, MatCardModule } from '@angular/material';
import { Injectable, Component, EventEmitter, Output, ElementRef, NgModule, Input, Directive, HostListener, ComponentFactoryResolver, ViewContainerRef, defineInjectable } from '@angular/core';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxRightClickMenuService = /** @class */ (function () {
function NgxRightClickMenuService() {
}
NgxRightClickMenuService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
NgxRightClickMenuService.ctorParameters = function () { return []; };
/** @nocollapse */ NgxRightClickMenuService.ngInjectableDef = defineInjectable({ factory: function NgxRightClickMenuService_Factory() { return new NgxRightClickMenuService(); }, token: NgxRightClickMenuService, providedIn: "root" });
return NgxRightClickMenuService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxRightClickMenuComponent = /** @class */ (function () {
function NgxRightClickMenuComponent(_element) {
this._element = _element;
this.itemClicked = new EventEmitter();
this.top = 0;
this.left = 0;
}
/**
* @return {?}
*/
NgxRightClickMenuComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () { };
/**
* @return {?}
*/
NgxRightClickMenuComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this.position(this._element.nativeElement.clientWidth, this._element.nativeElement.clientHeight);
};
/**
* @param {?=} clientW
* @param {?=} clientH
* @return {?}
*/
NgxRightClickMenuComponent.prototype.position = /**
* @param {?=} clientW
* @param {?=} clientH
* @return {?}
*/
function (clientW, clientH) {
if (clientW === void 0) { clientW = 130; }
if (clientH === void 0) { clientH = 340; }
/** @type {?} */
var el = this._element.nativeElement;
el.style.position = 'fixed';
/** @type {?} */
var diff = window.innerWidth - this.left;
if (diff < clientW) {
el.style.right = diff + 'px';
}
else {
el.style.left = this.left + 'px';
}
diff = window.innerHeight - this.top;
if (diff < clientH) {
el.style.bottom = diff + 'px';
}
else {
el.style.top = this.top + 'px';
}
el.style.zIndex = '9999';
};
/**
* @param {?} event
* @return {?}
*/
NgxRightClickMenuComponent.prototype.closeMenu = /**
* @param {?} event
* @return {?}
*/
function (event) {
event.preventDefault();
this.itemClicked.emit();
};
/**
* @param {?} event
* @param {?} index
* @return {?}
*/
NgxRightClickMenuComponent.prototype.itemClick = /**
* @param {?} event
* @param {?} index
* @return {?}
*/
function (event, index) {
var _this = this;
if (this.items[index].disable) {
return;
}
if (this.items[index].action && typeof this.items[index].action === 'function') {
this.items[index].action();
}
setTimeout((/**
* @return {?}
*/
function () {
_this.closeMenu(event);
}), 200);
};
NgxRightClickMenuComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-right-click-menu',
template: "\n <mat-card class=\"ngx-context-menu\" #ngxContextRef [@fadeInOut]>\n <mat-card-header>\n <mat-card-title>{{ title }}</mat-card-title>\n </mat-card-header>\n <mat-card-content>\n <mat-nav-list role=\"list\" class='menu-list'>\n <mat-list-item role=\"listitem\" *ngFor=\"let item of items; let i = index\"\n (click)=\"itemClick($event,i)\"\n [disableRipple]='item.disable'\n [class.disable]='item.disable'>\n <mat-icon *ngIf='item.icon' mat-list-icon>{{ item.icon }}</mat-icon>\n <h5>{{ item.label }}</h5>\n </mat-list-item>\n </mat-nav-list>\n </mat-card-content>\n </mat-card>\n",
animations: [
trigger('fadeInOut', [
state('void', style({
opacity: 0
})),
transition('void <=> *', animate(500)),
]),
],
styles: [".overlay-backdrop {\n position: fixed;\n top: 0px;\n bottom: 0px;\n right: 0px;\n left: 0px;\n z-index: 1000;\n }\n ",
".ngx-context-menu {\n position: relative;\n z-index: 9999;\n cursor: pointer;\n background: #fff;\n padding: 16px 0px 0px;\n user-select: none;\n }",
".mat-card-title {\n margin-bottom: 0px !important;\n }",
".mat-list-item {\n height: 36px !important;\n }",
".mat-list-item.disable {\n cursor: not-allowed;\n background: rgba(0, 0, 0, 0.06);\n }",
".mat-list-item h5 {\n padding-left: 4px;\n margin: 8px 0px;\n font-weight: 500;\n }\n }",
".mat-list-icon {\n color: rgba(0, 0, 0, 0.54);\n }",
".menu-list {\n padding: 0px;\n }"]
}] }
];
/** @nocollapse */
NgxRightClickMenuComponent.ctorParameters = function () { return [
{ type: ElementRef }
]; };
NgxRightClickMenuComponent.propDecorators = {
itemClicked: [{ type: Output }],
title: [{ type: Input }],
items: [{ type: Input }]
};
return NgxRightClickMenuComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxRightClickMenuBackDropComponent = /** @class */ (function () {
function NgxRightClickMenuBackDropComponent(_element) {
this._element = _element;
this.backDropClick = new EventEmitter();
/** @type {?} */
var el = this._element.nativeElement;
el.style.position = 'fixed';
el.style.top = '0px';
el.style.bottom = '0px';
el.style.left = '0px';
el.style.right = '0px';
el.style.zIndex = '1000';
}
/**
* @param {?} event
* @return {?}
*/
NgxRightClickMenuBackDropComponent.prototype.closeMenu = /**
* @param {?} event
* @return {?}
*/
function (event) {
event.preventDefault();
this.backDropClick.emit();
};
NgxRightClickMenuBackDropComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-right-click-menu-backdrop',
template: "\n <div class='overlay-backdrop' (contextmenu)='closeMenu($event)' (click)='closeMenu($event)'></div>\n ",
styles: [".overlay-backdrop {\n position: fixed;\n top: 0px;\n bottom: 0px;\n right: 0px;\n left: 0px;\n z-index: 1000;\n }"]
}] }
];
/** @nocollapse */
NgxRightClickMenuBackDropComponent.ctorParameters = function () { return [
{ type: ElementRef }
]; };
NgxRightClickMenuBackDropComponent.propDecorators = {
backDropClick: [{ type: Output }]
};
return NgxRightClickMenuBackDropComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxRightClickMenuDirective = /** @class */ (function () {
function NgxRightClickMenuDirective(_componentResolver, _viewContainerRef, _backdropRef) {
var _this = this;
this._componentResolver = _componentResolver;
this._viewContainerRef = _viewContainerRef;
this._backdropRef = _backdropRef;
this.menuContext = (/**
* @param {?} event
* @return {?}
*/
function (event) { return _this.openMenu(event); });
this.items = [];
}
Object.defineProperty(NgxRightClickMenuDirective.prototype, "ngxContextMenu", {
set: /**
* @param {?} data
* @return {?}
*/
function (data) {
this.title = data.title;
this.items = data.items;
},
enumerable: true,
configurable: true
});
/**
* @private
* @param {?} event
* @return {?}
*/
NgxRightClickMenuDirective.prototype.openMenu = /**
* @private
* @param {?} event
* @return {?}
*/
function (event) {
var _this = this;
event.preventDefault();
event.stopPropagation();
this._viewContainerRef.clear();
/** @type {?} */
var backdropFactory = this._componentResolver.resolveComponentFactory(NgxRightClickMenuBackDropComponent);
/** @type {?} */
var backdropRef = this._viewContainerRef.createComponent(backdropFactory);
/** @type {?} */
var componentFactory = this._componentResolver.resolveComponentFactory(NgxRightClickMenuComponent);
/** @type {?} */
var componentRef = this._viewContainerRef.createComponent(componentFactory);
this._contextMenu = componentRef.instance;
this._contextMenu.top = event.clientY;
this._contextMenu.left = event.clientX;
this._contextMenu.position();
this._contextMenu.title = this.title;
this._contextMenu.items = this.items;
backdropRef.instance['backDropClick'].subscribe((/**
* @return {?}
*/
function () {
_this._viewContainerRef.clear();
}));
this._contextMenu['itemClicked'].subscribe((/**
* @return {?}
*/
function () {
_this._viewContainerRef.clear();
}));
};
NgxRightClickMenuDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngxContextMenu]'
},] }
];
/** @nocollapse */
NgxRightClickMenuDirective.ctorParameters = function () { return [
{ type: ComponentFactoryResolver },
{ type: ViewContainerRef },
{ type: ViewContainerRef }
]; };
NgxRightClickMenuDirective.propDecorators = {
ngxContextMenu: [{ type: Input }],
menuContext: [{ type: HostListener, args: ['contextmenu', ['$event'],] }]
};
return NgxRightClickMenuDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxRightClickMenuModule = /** @class */ (function () {
function NgxRightClickMenuModule() {
}
NgxRightClickMenuModule.decorators = [
{ type: NgModule, args: [{
declarations: [
NgxRightClickMenuComponent,
NgxRightClickMenuDirective,
NgxRightClickMenuBackDropComponent,
],
imports: [
CommonModule,
MatListModule,
MatIconModule,
MatCardModule,
],
exports: [
NgxRightClickMenuComponent,
NgxRightClickMenuDirective,
],
entryComponents: [
NgxRightClickMenuComponent,
NgxRightClickMenuBackDropComponent
]
},] }
];
return NgxRightClickMenuModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NgxRightClickMenuService, NgxRightClickMenuComponent, NgxRightClickMenuModule, NgxRightClickMenuDirective, NgxRightClickMenuBackDropComponent as ɵa };
//# sourceMappingURL=ngx-right-click-menu.js.map