ngx-right-click-menu
Version:
ngx-right-click-menu is right click context menu for Angular 2+.
349 lines (338 loc) • 15.2 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/animations'), require('@angular/common'), require('@angular/material'), require('@angular/core')) :
typeof define === 'function' && define.amd ? define('ngx-right-click-menu', ['exports', '@angular/animations', '@angular/common', '@angular/material', '@angular/core'], factory) :
(factory((global['ngx-right-click-menu'] = {}),global.ng.animations,global.ng.common,global.ng.material,global.ng.core));
}(this, (function (exports,animations,common,material,i0) { 'use strict';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxRightClickMenuService = /** @class */ (function () {
function NgxRightClickMenuService() {
}
NgxRightClickMenuService.decorators = [
{ type: i0.Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
NgxRightClickMenuService.ctorParameters = function () { return []; };
/** @nocollapse */ NgxRightClickMenuService.ngInjectableDef = i0.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 i0.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: i0.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: [
animations.trigger('fadeInOut', [
animations.state('void', animations.style({
opacity: 0
})),
animations.transition('void <=> *', animations.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: i0.ElementRef }
];
};
NgxRightClickMenuComponent.propDecorators = {
itemClicked: [{ type: i0.Output }],
title: [{ type: i0.Input }],
items: [{ type: i0.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 i0.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: i0.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: i0.ElementRef }
];
};
NgxRightClickMenuBackDropComponent.propDecorators = {
backDropClick: [{ type: i0.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: i0.Directive, args: [{
selector: '[ngxContextMenu]'
},] }
];
/** @nocollapse */
NgxRightClickMenuDirective.ctorParameters = function () {
return [
{ type: i0.ComponentFactoryResolver },
{ type: i0.ViewContainerRef },
{ type: i0.ViewContainerRef }
];
};
NgxRightClickMenuDirective.propDecorators = {
ngxContextMenu: [{ type: i0.Input }],
menuContext: [{ type: i0.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: i0.NgModule, args: [{
declarations: [
NgxRightClickMenuComponent,
NgxRightClickMenuDirective,
NgxRightClickMenuBackDropComponent,
],
imports: [
common.CommonModule,
material.MatListModule,
material.MatIconModule,
material.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
*/
exports.NgxRightClickMenuService = NgxRightClickMenuService;
exports.NgxRightClickMenuComponent = NgxRightClickMenuComponent;
exports.NgxRightClickMenuModule = NgxRightClickMenuModule;
exports.NgxRightClickMenuDirective = NgxRightClickMenuDirective;
exports.ɵa = NgxRightClickMenuBackDropComponent;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ngx-right-click-menu.umd.js.map