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