ngx-right-click-menu
Version:
ngx-right-click-menu is right click context menu for Angular 2+.
174 lines • 12.6 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, ElementRef, Output, Input, EventEmitter, } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
export 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 }]
};
if (false) {
/** @type {?} */
NgxRightClickMenuComponent.prototype.itemClicked;
/** @type {?} */
NgxRightClickMenuComponent.prototype.title;
/** @type {?} */
NgxRightClickMenuComponent.prototype.items;
/** @type {?} */
NgxRightClickMenuComponent.prototype.top;
/** @type {?} */
NgxRightClickMenuComponent.prototype.left;
/** @type {?} */
NgxRightClickMenuComponent.prototype._element;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXJpZ2h0LWNsaWNrLW1lbnUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LXJpZ2h0LWNsaWNrLW1lbnUvIiwic291cmNlcyI6WyJsaWIvbmd4LXJpZ2h0LWNsaWNrLW1lbnUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUF5QixVQUFVLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxZQUFZLEdBQUcsTUFBTSxlQUFlLENBQUM7QUFDM0csT0FBTyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQXlFakYsTUFBTSxPQUFPLDBCQUEwQjs7OztJQVVyQyxZQUFtQixRQUFvQjtRQUFwQixhQUFRLEdBQVIsUUFBUSxDQUFZO1FBVDdCLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQU1wQyxRQUFHLEdBQUcsQ0FBQyxDQUFDO1FBQ1IsU0FBSSxHQUFHLENBQUMsQ0FBQztJQUUyQixDQUFDOzs7O0lBRTVDLFFBQVEsS0FBSyxDQUFDOzs7O0lBRWQsZUFBZTtRQUNiLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsV0FBVyxFQUFFLElBQUksQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLFlBQVksQ0FBQyxDQUFBO0lBQ2xHLENBQUM7Ozs7OztJQUVNLFFBQVEsQ0FBQyxVQUFrQixHQUFHLEVBQUUsVUFBa0IsR0FBRzs7Y0FDcEQsRUFBRSxHQUFnQixJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWE7UUFDbkQsRUFBRSxDQUFDLEtBQUssQ0FBQyxRQUFRLEdBQUcsT0FBTyxDQUFDOztZQUV4QixJQUFJLEdBQUcsTUFBTSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsSUFBSTtRQUN4QyxJQUFJLElBQUksR0FBRyxPQUFPLEVBQUU7WUFDbEIsRUFBRSxDQUFDLEtBQUssQ0FBQyxLQUFLLEdBQUcsSUFBSSxHQUFHLElBQUksQ0FBQztTQUM5QjthQUFNO1lBQ0wsRUFBRSxDQUFDLEtBQUssQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUM7U0FDbEM7UUFFRCxJQUFJLEdBQUcsTUFBTSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDO1FBQ3JDLElBQUksSUFBSSxHQUFHLE9BQU8sRUFBRTtZQUNsQixFQUFFLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxJQUFJLEdBQUcsSUFBSSxDQUFDO1NBQy9CO2FBQU07WUFDTCxFQUFFLENBQUMsS0FBSyxDQUFDLEdBQUcsR0FBRyxJQUFJLENBQUMsR0FBRyxHQUFHLElBQUksQ0FBQztTQUNoQztRQUNELEVBQUUsQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQztJQUMzQixDQUFDOzs7OztJQUVNLFNBQVMsQ0FBQyxLQUFLO1FBQ3BCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN2QixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzFCLENBQUM7Ozs7OztJQUVNLFNBQVMsQ0FBQyxLQUFLLEVBQUUsS0FBYTtRQUNuQyxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUMsT0FBTyxFQUFFO1lBQzdCLE9BQU87U0FDUjtRQUNELElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQyxNQUFNLElBQUksT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDLE1BQU0sS0FBSyxVQUFVLEVBQUU7WUFDOUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQyxNQUFNLEVBQUUsQ0FBQztTQUM1QjtRQUNELFVBQVU7OztRQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDeEIsQ0FBQyxHQUFFLEdBQUcsQ0FBQyxDQUFDO0lBQ1YsQ0FBQzs7O1lBM0hGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsc0JBQXNCO2dCQTBDaEMsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7OztDQWlCWDtnQkFDQyxVQUFVLEVBQUU7b0JBQ1YsT0FBTyxDQUFDLFdBQVcsRUFBRTt3QkFDbkIsS0FBSyxDQUFDLE1BQU0sRUFBRSxLQUFLLENBQUM7NEJBQ2xCLE9BQU8sRUFBRSxDQUFDO3lCQUNYLENBQUMsQ0FBQzt3QkFDSCxVQUFVLENBQUMsWUFBWSxFQUFFLE9BQU8sQ0FBQyxHQUFHLENBQUMsQ0FBQztxQkFDdkMsQ0FBQztpQkFDSDt5QkFqRUM7Ozs7Ozs7O0tBUUM7b0JBQ0Q7Ozs7Ozs7TUFPRTtvQkFDRjs7TUFFRTtvQkFDRjs7TUFFRTtvQkFDRjs7O01BR0U7b0JBQ0Y7Ozs7O01BS0U7b0JBQ0Y7O01BRUU7b0JBQ0Y7O01BRUU7YUE0Qkw7Ozs7WUF6RTBDLFVBQVU7OzswQkEyRWxELE1BQU07b0JBRU4sS0FBSztvQkFFTCxLQUFLOzs7O0lBSk4saURBQTJDOztJQUUzQywyQ0FBdUI7O0lBRXZCLDJDQUEyQjs7SUFFM0IseUNBQWU7O0lBQ2YsMENBQWdCOztJQUVKLDhDQUEyQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBBZnRlclZpZXdJbml0LCBFbGVtZW50UmVmLCBPdXRwdXQsIElucHV0LCBFdmVudEVtaXR0ZXIsIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyB0cmlnZ2VyLCBzdGF0ZSwgc3R5bGUsIGFuaW1hdGUsIHRyYW5zaXRpb24gfSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcbmltcG9ydCB7IE1lbnVJdGVtIH0gZnJvbSAnLi9uZ3gtcmlnaHQtY2xpY2stbWVudS5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25neC1yaWdodC1jbGljay1tZW51JyxcbiAgc3R5bGVzOiBbXG4gICAgYC5vdmVybGF5LWJhY2tkcm9wIHtcbiAgICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICAgIHRvcDogMHB4O1xuICAgICAgYm90dG9tOiAwcHg7XG4gICAgICByaWdodDogMHB4O1xuICAgICAgbGVmdDogMHB4O1xuICAgICAgei1pbmRleDogMTAwMDtcbiAgICB9XG4gICAgYCxcbiAgICBgLm5neC1jb250ZXh0LW1lbnUge1xuICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgei1pbmRleDogOTk5OTtcbiAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgIGJhY2tncm91bmQ6ICNmZmY7XG4gICAgICBwYWRkaW5nOiAxNnB4IDBweCAwcHg7XG4gICAgICB1c2VyLXNlbGVjdDogbm9uZTtcbiAgICB9YCxcbiAgICBgLm1hdC1jYXJkLXRpdGxlIHtcbiAgICAgIG1hcmdpbi1ib3R0b206IDBweCAhaW1wb3J0YW50O1xuICAgIH1gLFxuICAgIGAubWF0LWxpc3QtaXRlbSB7XG4gICAgICBoZWlnaHQ6IDM2cHggIWltcG9ydGFudDtcbiAgICB9YCxcbiAgICBgLm1hdC1saXN0LWl0ZW0uZGlzYWJsZSB7XG4gICAgICBjdXJzb3I6IG5vdC1hbGxvd2VkO1xuICAgICAgYmFja2dyb3VuZDogcmdiYSgwLCAwLCAwLCAwLjA2KTtcbiAgICB9YCxcbiAgICBgLm1hdC1saXN0LWl0ZW0gaDUge1xuICAgICAgcGFkZGluZy1sZWZ0OiA0cHg7XG4gICAgICBtYXJnaW46IDhweCAwcHg7XG4gICAgICBmb250LXdlaWdodDogNTAwO1xuICB9XG4gICAgfWAsXG4gICAgYC5tYXQtbGlzdC1pY29uIHtcbiAgICAgIGNvbG9yOiByZ2JhKDAsIDAsIDAsIDAuNTQpO1xuICAgIH1gLFxuICAgIGAubWVudS1saXN0IHtcbiAgICAgIHBhZGRpbmc6IDBweDtcbiAgICB9YFxuICBdLFxuICB0ZW1wbGF0ZTogYFxuICA8bWF0LWNhcmQgY2xhc3M9XCJuZ3gtY29udGV4dC1tZW51XCIgI25neENvbnRleHRSZWYgW0BmYWRlSW5PdXRdPlxuICAgIDxtYXQtY2FyZC1oZWFkZXI+XG4gICAgICA8bWF0LWNhcmQtdGl0bGU+e3sgdGl0bGUgfX08L21hdC1jYXJkLXRpdGxlPlxuICAgIDwvbWF0LWNhcmQtaGVhZGVyPlxuICAgIDxtYXQtY2FyZC1jb250ZW50PlxuICAgICAgPG1hdC1uYXYtbGlzdCByb2xlPVwibGlzdFwiIGNsYXNzPSdtZW51LWxpc3QnPlxuICAgICAgICA8bWF0LWxpc3QtaXRlbSByb2xlPVwibGlzdGl0ZW1cIiAqbmdGb3I9XCJsZXQgaXRlbSBvZiBpdGVtczsgbGV0IGkgPSBpbmRleFwiXG4gICAgICAgICAgICAgICAgICAgICAgIChjbGljayk9XCJpdGVtQ2xpY2soJGV2ZW50LGkpXCJcbiAgICAgICAgICAgICAgICAgICAgICAgW2Rpc2FibGVSaXBwbGVdPSdpdGVtLmRpc2FibGUnXG4gICAgICAgICAgICAgICAgICAgICAgIFtjbGFzcy5kaXNhYmxlXT0naXRlbS5kaXNhYmxlJz5cbiAgICAgICAgICA8bWF0LWljb24gKm5nSWY9J2l0ZW0uaWNvbicgbWF0LWxpc3QtaWNvbj57eyBpdGVtLmljb24gfX08L21hdC1pY29uPlxuICAgICAgICAgIDxoNT57eyBpdGVtLmxhYmVsIH19PC9oNT5cbiAgICAgICAgPC9tYXQtbGlzdC1pdGVtPlxuICAgICAgPC9tYXQtbmF2LWxpc3Q+XG4gICAgPC9tYXQtY2FyZC1jb250ZW50PlxuICA8L21hdC1jYXJkPlxuYCxcbiAgYW5pbWF0aW9uczogW1xuICAgIHRyaWdnZXIoJ2ZhZGVJbk91dCcsIFtcbiAgICAgIHN0YXRlKCd2b2lkJywgc3R5bGUoe1xuICAgICAgICBvcGFjaXR5OiAwXG4gICAgICB9KSksXG4gICAgICB0cmFuc2l0aW9uKCd2b2lkIDw9PiAqJywgYW5pbWF0ZSg1MDApKSxcbiAgICBdKSxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgTmd4UmlnaHRDbGlja01lbnVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIEFmdGVyVmlld0luaXQge1xuICBAT3V0cHV0KCkgaXRlbUNsaWNrZWQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgQElucHV0KCkgdGl0bGU6IHN0cmluZztcblxuICBASW5wdXQoKSBpdGVtczogTWVudUl0ZW1bXTtcblxuICBwdWJsaWMgdG9wID0gMDtcbiAgcHVibGljIGxlZnQgPSAwO1xuXG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBfZWxlbWVudDogRWxlbWVudFJlZikgeyB9XG5cbiAgbmdPbkluaXQoKSB7IH1cblxuICBuZ0FmdGVyVmlld0luaXQoKSB7XG4gICAgdGhpcy5wb3NpdGlvbih0aGlzLl9lbGVtZW50Lm5hdGl2ZUVsZW1lbnQuY2xpZW50V2lkdGgsIHRoaXMuX2VsZW1lbnQubmF0aXZlRWxlbWVudC5jbGllbnRIZWlnaHQpXG4gIH1cblxuICBwdWJsaWMgcG9zaXRpb24oY2xpZW50VzogbnVtYmVyID0gMTMwLCBjbGllbnRIOiBudW1iZXIgPSAzNDApIHtcbiAgICBjb25zdCBlbDogSFRNTEVsZW1lbnQgPSB0aGlzLl9lbGVtZW50Lm5hdGl2ZUVsZW1lbnQ7XG4gICAgZWwuc3R5bGUucG9zaXRpb24gPSAnZml4ZWQnO1xuXG4gICAgbGV0IGRpZmYgPSB3aW5kb3cuaW5uZXJXaWR0aCAtIHRoaXMubGVmdDtcbiAgICBpZiAoZGlmZiA8IGNsaWVudFcpIHtcbiAgICAgIGVsLnN0eWxlLnJpZ2h0ID0gZGlmZiArICdweCc7XG4gICAgfSBlbHNlIHtcbiAgICAgIGVsLnN0eWxlLmxlZnQgPSB0aGlzLmxlZnQgKyAncHgnO1xuICAgIH1cblxuICAgIGRpZmYgPSB3aW5kb3cuaW5uZXJIZWlnaHQgLSB0aGlzLnRvcDtcbiAgICBpZiAoZGlmZiA8IGNsaWVudEgpIHtcbiAgICAgIGVsLnN0eWxlLmJvdHRvbSA9IGRpZmYgKyAncHgnO1xuICAgIH0gZWxzZSB7XG4gICAgICBlbC5zdHlsZS50b3AgPSB0aGlzLnRvcCArICdweCc7XG4gICAgfVxuICAgIGVsLnN0eWxlLnpJbmRleCA9ICc5OTk5JztcbiAgfVxuXG4gIHB1YmxpYyBjbG9zZU1lbnUoZXZlbnQpIHtcbiAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgIHRoaXMuaXRlbUNsaWNrZWQuZW1pdCgpO1xuICB9XG5cbiAgcHVibGljIGl0ZW1DbGljayhldmVudCwgaW5kZXg6IG51bWJlcikge1xuICAgIGlmICh0aGlzLml0ZW1zW2luZGV4XS5kaXNhYmxlKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIGlmICh0aGlzLml0ZW1zW2luZGV4XS5hY3Rpb24gJiYgdHlwZW9mIHRoaXMuaXRlbXNbaW5kZXhdLmFjdGlvbiA9PT0gJ2Z1bmN0aW9uJykge1xuICAgICAgdGhpcy5pdGVtc1tpbmRleF0uYWN0aW9uKCk7XG4gICAgfVxuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgdGhpcy5jbG9zZU1lbnUoZXZlbnQpO1xuICAgIH0sIDIwMCk7XG4gIH1cbn1cbiJdfQ==