ngx-right-click-menu
Version:
ngx-right-click-menu is right click context menu for Angular 2+.
148 lines • 13.7 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';
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;
}());
export { NgxRightClickMenuComponent };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXJpZ2h0LWNsaWNrLW1lbnUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LXJpZ2h0LWNsaWNrLW1lbnUvIiwic291cmNlcyI6WyJsaWIvbmd4LXJpZ2h0LWNsaWNrLW1lbnUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUF5QixVQUFVLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxZQUFZLEdBQUcsTUFBTSxlQUFlLENBQUM7QUFDM0csT0FBTyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUdqRjtJQWdGRSxvQ0FBbUIsUUFBb0I7UUFBcEIsYUFBUSxHQUFSLFFBQVEsQ0FBWTtRQVQ3QixnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFNcEMsUUFBRyxHQUFHLENBQUMsQ0FBQztRQUNSLFNBQUksR0FBRyxDQUFDLENBQUM7SUFFMkIsQ0FBQzs7OztJQUU1Qyw2Q0FBUTs7O0lBQVIsY0FBYSxDQUFDOzs7O0lBRWQsb0RBQWU7OztJQUFmO1FBQ0UsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxXQUFXLEVBQUUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsWUFBWSxDQUFDLENBQUE7SUFDbEcsQ0FBQzs7Ozs7O0lBRU0sNkNBQVE7Ozs7O0lBQWYsVUFBZ0IsT0FBcUIsRUFBRSxPQUFxQjtRQUE1Qyx3QkFBQSxFQUFBLGFBQXFCO1FBQUUsd0JBQUEsRUFBQSxhQUFxQjs7WUFDcEQsRUFBRSxHQUFnQixJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWE7UUFDbkQsRUFBRSxDQUFDLEtBQUssQ0FBQyxRQUFRLEdBQUcsT0FBTyxDQUFDOztZQUV4QixJQUFJLEdBQUcsTUFBTSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsSUFBSTtRQUN4QyxJQUFJLElBQUksR0FBRyxPQUFPLEVBQUU7WUFDbEIsRUFBRSxDQUFDLEtBQUssQ0FBQyxLQUFLLEdBQUcsSUFBSSxHQUFHLElBQUksQ0FBQztTQUM5QjthQUFNO1lBQ0wsRUFBRSxDQUFDLEtBQUssQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUM7U0FDbEM7UUFFRCxJQUFJLEdBQUcsTUFBTSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDO1FBQ3JDLElBQUksSUFBSSxHQUFHLE9BQU8sRUFBRTtZQUNsQixFQUFFLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxJQUFJLEdBQUcsSUFBSSxDQUFDO1NBQy9CO2FBQU07WUFDTCxFQUFFLENBQUMsS0FBSyxDQUFDLEdBQUcsR0FBRyxJQUFJLENBQUMsR0FBRyxHQUFHLElBQUksQ0FBQztTQUNoQztRQUNELEVBQUUsQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQztJQUMzQixDQUFDOzs7OztJQUVNLDhDQUFTOzs7O0lBQWhCLFVBQWlCLEtBQUs7UUFDcEIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDMUIsQ0FBQzs7Ozs7O0lBRU0sOENBQVM7Ozs7O0lBQWhCLFVBQWlCLEtBQUssRUFBRSxLQUFhO1FBQXJDLGlCQVVDO1FBVEMsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDLE9BQU8sRUFBRTtZQUM3QixPQUFPO1NBQ1I7UUFDRCxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUMsTUFBTSxJQUFJLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQyxNQUFNLEtBQUssVUFBVSxFQUFFO1lBQzlFLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUMsTUFBTSxFQUFFLENBQUM7U0FDNUI7UUFDRCxVQUFVOzs7UUFBQztZQUNULEtBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDeEIsQ0FBQyxHQUFFLEdBQUcsQ0FBQyxDQUFDO0lBQ1YsQ0FBQzs7Z0JBM0hGLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsc0JBQXNCO29CQTBDaEMsUUFBUSxFQUFFLHFzQkFpQlg7b0JBQ0MsVUFBVSxFQUFFO3dCQUNWLE9BQU8sQ0FBQyxXQUFXLEVBQUU7NEJBQ25CLEtBQUssQ0FBQyxNQUFNLEVBQUUsS0FBSyxDQUFDO2dDQUNsQixPQUFPLEVBQUUsQ0FBQzs2QkFDWCxDQUFDLENBQUM7NEJBQ0gsVUFBVSxDQUFDLFlBQVksRUFBRSxPQUFPLENBQUMsR0FBRyxDQUFDLENBQUM7eUJBQ3ZDLENBQUM7cUJBQ0g7NkJBakVDLDBKQVFDO3dCQUNELHNMQU9FO3dCQUNGLGdFQUVFO3dCQUNGLHlEQUVFO3dCQUNGLHFHQUdFO3dCQUNGLDRHQUtFO3dCQUNGLDREQUVFO3dCQUNGLDBDQUVFO2lCQTRCTDs7OztnQkF6RTBDLFVBQVU7Ozs4QkEyRWxELE1BQU07d0JBRU4sS0FBSzt3QkFFTCxLQUFLOztJQWlEUixpQ0FBQztDQUFBLEFBNUhELElBNEhDO1NBdERZLDBCQUEwQjs7O0lBQ3JDLGlEQUEyQzs7SUFFM0MsMkNBQXVCOztJQUV2QiwyQ0FBMkI7O0lBRTNCLHlDQUFlOztJQUNmLDBDQUFnQjs7SUFFSiw4Q0FBMkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgQWZ0ZXJWaWV3SW5pdCwgRWxlbWVudFJlZiwgT3V0cHV0LCBJbnB1dCwgRXZlbnRFbWl0dGVyLCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgdHJpZ2dlciwgc3RhdGUsIHN0eWxlLCBhbmltYXRlLCB0cmFuc2l0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5pbXBvcnQgeyBNZW51SXRlbSB9IGZyb20gJy4vbmd4LXJpZ2h0LWNsaWNrLW1lbnUubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZ3gtcmlnaHQtY2xpY2stbWVudScsXG4gIHN0eWxlczogW1xuICAgIGAub3ZlcmxheS1iYWNrZHJvcCB7XG4gICAgICBwb3NpdGlvbjogZml4ZWQ7XG4gICAgICB0b3A6IDBweDtcbiAgICAgIGJvdHRvbTogMHB4O1xuICAgICAgcmlnaHQ6IDBweDtcbiAgICAgIGxlZnQ6IDBweDtcbiAgICAgIHotaW5kZXg6IDEwMDA7XG4gICAgfVxuICAgIGAsXG4gICAgYC5uZ3gtY29udGV4dC1tZW51IHtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIHotaW5kZXg6IDk5OTk7XG4gICAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgICBiYWNrZ3JvdW5kOiAjZmZmO1xuICAgICAgcGFkZGluZzogMTZweCAwcHggMHB4O1xuICAgICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgfWAsXG4gICAgYC5tYXQtY2FyZC10aXRsZSB7XG4gICAgICBtYXJnaW4tYm90dG9tOiAwcHggIWltcG9ydGFudDtcbiAgICB9YCxcbiAgICBgLm1hdC1saXN0LWl0ZW0ge1xuICAgICAgaGVpZ2h0OiAzNnB4ICFpbXBvcnRhbnQ7XG4gICAgfWAsXG4gICAgYC5tYXQtbGlzdC1pdGVtLmRpc2FibGUge1xuICAgICAgY3Vyc29yOiBub3QtYWxsb3dlZDtcbiAgICAgIGJhY2tncm91bmQ6IHJnYmEoMCwgMCwgMCwgMC4wNik7XG4gICAgfWAsXG4gICAgYC5tYXQtbGlzdC1pdGVtIGg1IHtcbiAgICAgIHBhZGRpbmctbGVmdDogNHB4O1xuICAgICAgbWFyZ2luOiA4cHggMHB4O1xuICAgICAgZm9udC13ZWlnaHQ6IDUwMDtcbiAgfVxuICAgIH1gLFxuICAgIGAubWF0LWxpc3QtaWNvbiB7XG4gICAgICBjb2xvcjogcmdiYSgwLCAwLCAwLCAwLjU0KTtcbiAgICB9YCxcbiAgICBgLm1lbnUtbGlzdCB7XG4gICAgICBwYWRkaW5nOiAwcHg7XG4gICAgfWBcbiAgXSxcbiAgdGVtcGxhdGU6IGBcbiAgPG1hdC1jYXJkIGNsYXNzPVwibmd4LWNvbnRleHQtbWVudVwiICNuZ3hDb250ZXh0UmVmIFtAZmFkZUluT3V0XT5cbiAgICA8bWF0LWNhcmQtaGVhZGVyPlxuICAgICAgPG1hdC1jYXJkLXRpdGxlPnt7IHRpdGxlIH19PC9tYXQtY2FyZC10aXRsZT5cbiAgICA8L21hdC1jYXJkLWhlYWRlcj5cbiAgICA8bWF0LWNhcmQtY29udGVudD5cbiAgICAgIDxtYXQtbmF2LWxpc3Qgcm9sZT1cImxpc3RcIiBjbGFzcz0nbWVudS1saXN0Jz5cbiAgICAgICAgPG1hdC1saXN0LWl0ZW0gcm9sZT1cImxpc3RpdGVtXCIgKm5nRm9yPVwibGV0IGl0ZW0gb2YgaXRlbXM7IGxldCBpID0gaW5kZXhcIlxuICAgICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwiaXRlbUNsaWNrKCRldmVudCxpKVwiXG4gICAgICAgICAgICAgICAgICAgICAgIFtkaXNhYmxlUmlwcGxlXT0naXRlbS5kaXNhYmxlJ1xuICAgICAgICAgICAgICAgICAgICAgICBbY2xhc3MuZGlzYWJsZV09J2l0ZW0uZGlzYWJsZSc+XG4gICAgICAgICAgPG1hdC1pY29uICpuZ0lmPSdpdGVtLmljb24nIG1hdC1saXN0LWljb24+e3sgaXRlbS5pY29uIH19PC9tYXQtaWNvbj5cbiAgICAgICAgICA8aDU+e3sgaXRlbS5sYWJlbCB9fTwvaDU+XG4gICAgICAgIDwvbWF0LWxpc3QtaXRlbT5cbiAgICAgIDwvbWF0LW5hdi1saXN0PlxuICAgIDwvbWF0LWNhcmQtY29udGVudD5cbiAgPC9tYXQtY2FyZD5cbmAsXG4gIGFuaW1hdGlvbnM6IFtcbiAgICB0cmlnZ2VyKCdmYWRlSW5PdXQnLCBbXG4gICAgICBzdGF0ZSgndm9pZCcsIHN0eWxlKHtcbiAgICAgICAgb3BhY2l0eTogMFxuICAgICAgfSkpLFxuICAgICAgdHJhbnNpdGlvbigndm9pZCA8PT4gKicsIGFuaW1hdGUoNTAwKSksXG4gICAgXSksXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIE5neFJpZ2h0Q2xpY2tNZW51Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBBZnRlclZpZXdJbml0IHtcbiAgQE91dHB1dCgpIGl0ZW1DbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIEBJbnB1dCgpIHRpdGxlOiBzdHJpbmc7XG5cbiAgQElucHV0KCkgaXRlbXM6IE1lbnVJdGVtW107XG5cbiAgcHVibGljIHRvcCA9IDA7XG4gIHB1YmxpYyBsZWZ0ID0gMDtcblxuICBjb25zdHJ1Y3RvcihwdWJsaWMgX2VsZW1lbnQ6IEVsZW1lbnRSZWYpIHsgfVxuXG4gIG5nT25Jbml0KCkgeyB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIHRoaXMucG9zaXRpb24odGhpcy5fZWxlbWVudC5uYXRpdmVFbGVtZW50LmNsaWVudFdpZHRoLCB0aGlzLl9lbGVtZW50Lm5hdGl2ZUVsZW1lbnQuY2xpZW50SGVpZ2h0KVxuICB9XG5cbiAgcHVibGljIHBvc2l0aW9uKGNsaWVudFc6IG51bWJlciA9IDEzMCwgY2xpZW50SDogbnVtYmVyID0gMzQwKSB7XG4gICAgY29uc3QgZWw6IEhUTUxFbGVtZW50ID0gdGhpcy5fZWxlbWVudC5uYXRpdmVFbGVtZW50O1xuICAgIGVsLnN0eWxlLnBvc2l0aW9uID0gJ2ZpeGVkJztcblxuICAgIGxldCBkaWZmID0gd2luZG93LmlubmVyV2lkdGggLSB0aGlzLmxlZnQ7XG4gICAgaWYgKGRpZmYgPCBjbGllbnRXKSB7XG4gICAgICBlbC5zdHlsZS5yaWdodCA9IGRpZmYgKyAncHgnO1xuICAgIH0gZWxzZSB7XG4gICAgICBlbC5zdHlsZS5sZWZ0ID0gdGhpcy5sZWZ0ICsgJ3B4JztcbiAgICB9XG5cbiAgICBkaWZmID0gd2luZG93LmlubmVySGVpZ2h0IC0gdGhpcy50b3A7XG4gICAgaWYgKGRpZmYgPCBjbGllbnRIKSB7XG4gICAgICBlbC5zdHlsZS5ib3R0b20gPSBkaWZmICsgJ3B4JztcbiAgICB9IGVsc2Uge1xuICAgICAgZWwuc3R5bGUudG9wID0gdGhpcy50b3AgKyAncHgnO1xuICAgIH1cbiAgICBlbC5zdHlsZS56SW5kZXggPSAnOTk5OSc7XG4gIH1cblxuICBwdWJsaWMgY2xvc2VNZW51KGV2ZW50KSB7XG4gICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICB0aGlzLml0ZW1DbGlja2VkLmVtaXQoKTtcbiAgfVxuXG4gIHB1YmxpYyBpdGVtQ2xpY2soZXZlbnQsIGluZGV4OiBudW1iZXIpIHtcbiAgICBpZiAodGhpcy5pdGVtc1tpbmRleF0uZGlzYWJsZSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICBpZiAodGhpcy5pdGVtc1tpbmRleF0uYWN0aW9uICYmIHR5cGVvZiB0aGlzLml0ZW1zW2luZGV4XS5hY3Rpb24gPT09ICdmdW5jdGlvbicpIHtcbiAgICAgIHRoaXMuaXRlbXNbaW5kZXhdLmFjdGlvbigpO1xuICAgIH1cbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIHRoaXMuY2xvc2VNZW51KGV2ZW50KTtcbiAgICB9LCAyMDApO1xuICB9XG59XG4iXX0=