gnezim
284 lines
12 KiB
JavaScript
284 lines
12 KiB
JavaScript
import { Component, ViewEncapsulation, Inject, forwardRef, Input, EventEmitter, ChangeDetectionStrategy, ElementRef, Renderer2, ChangeDetectorRef, ViewChild, Output, NgModule } from '@angular/core';
|
||
import { trigger, transition, style, animate } from '@angular/animations';
|
||
import { CommonModule } from '@angular/common';
|
||
import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
|
||
import { RouterModule } from '@angular/router';
|
||
import { RippleModule } from 'primeng/ripple';
|
||
|
||
class MenuItemContent {
|
||
constructor(menu) {
|
||
this.menu = menu;
|
||
}
|
||
}
|
||
MenuItemContent.decorators = [
|
||
{ type: Component, args: [{
|
||
selector: '[pMenuItemContent]',
|
||
template: `
|
||
<a *ngIf="!item.routerLink" [attr.href]="item.url||null" class="p-menuitem-link" [attr.tabindex]="item.disabled ? null : '0'" [attr.data-automationid]="item.automationId" [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id"
|
||
[ngClass]="{'p-disabled':item.disabled}" (click)="menu.itemClick($event, item)" role="menuitem">
|
||
<span class="p-menuitem-icon" *ngIf="item.icon" [ngClass]="item.icon"></span>
|
||
<span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlLabel">{{item.label}}</span>
|
||
<ng-template #htmlLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
|
||
</a>
|
||
<a *ngIf="item.routerLink" [routerLink]="item.routerLink" [attr.data-automationid]="item.automationId" [queryParams]="item.queryParams" [routerLinkActive]="'p-menuitem-link-active'"
|
||
[routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}" class="p-menuitem-link" [attr.target]="item.target" [attr.id]="item.id" [attr.tabindex]="item.disabled ? null : '0'"
|
||
[attr.title]="item.title" [ngClass]="{'p-disabled':item.disabled}" (click)="menu.itemClick($event, item)" role="menuitem" pRipple
|
||
[fragment]="item.fragment" [queryParamsHandling]="item.queryParamsHandling" [preserveFragment]="item.preserveFragment" [skipLocationChange]="item.skipLocationChange" [replaceUrl]="item.replaceUrl" [state]="item.state">
|
||
<span class="p-menuitem-icon" *ngIf="item.icon" [ngClass]="item.icon"></span>
|
||
<span class="p-menuitem-text" *ngIf="item.escape !== false; else htmlRouteLabel">{{item.label}}</span>
|
||
<ng-template #htmlRouteLabel><span class="p-menuitem-text" [innerHTML]="item.label"></span></ng-template>
|
||
</a>
|
||
`,
|
||
encapsulation: ViewEncapsulation.None
|
||
},] }
|
||
];
|
||
MenuItemContent.ctorParameters = () => [
|
||
{ type: undefined, decorators: [{ type: Inject, args: [forwardRef(() => Menu),] }] }
|
||
];
|
||
MenuItemContent.propDecorators = {
|
||
item: [{ type: Input, args: ["pMenuItemContent",] }]
|
||
};
|
||
class Menu {
|
||
constructor(el, renderer, cd) {
|
||
this.el = el;
|
||
this.renderer = renderer;
|
||
this.cd = cd;
|
||
this.autoZIndex = true;
|
||
this.baseZIndex = 0;
|
||
this.showTransitionOptions = '.12s cubic-bezier(0, 0, 0.2, 1)';
|
||
this.hideTransitionOptions = '.1s linear';
|
||
this.onShow = new EventEmitter();
|
||
this.onHide = new EventEmitter();
|
||
}
|
||
toggle(event) {
|
||
if (this.visible)
|
||
this.hide();
|
||
else
|
||
this.show(event);
|
||
this.preventDocumentDefault = true;
|
||
}
|
||
show(event) {
|
||
this.target = event.currentTarget;
|
||
this.relativeAlign = event.relativeAlign;
|
||
this.visible = true;
|
||
this.preventDocumentDefault = true;
|
||
this.cd.markForCheck();
|
||
}
|
||
onOverlayAnimationStart(event) {
|
||
switch (event.toState) {
|
||
case 'visible':
|
||
if (this.popup) {
|
||
this.container = event.element;
|
||
this.moveOnTop();
|
||
this.onShow.emit({});
|
||
this.appendOverlay();
|
||
this.alignOverlay();
|
||
this.bindDocumentClickListener();
|
||
this.bindDocumentResizeListener();
|
||
this.bindScrollListener();
|
||
}
|
||
break;
|
||
case 'void':
|
||
this.onOverlayHide();
|
||
this.onHide.emit({});
|
||
break;
|
||
}
|
||
}
|
||
alignOverlay() {
|
||
if (this.relativeAlign)
|
||
DomHandler.relativePosition(this.container, this.target);
|
||
else
|
||
DomHandler.absolutePosition(this.container, this.target);
|
||
}
|
||
appendOverlay() {
|
||
if (this.appendTo) {
|
||
if (this.appendTo === 'body')
|
||
document.body.appendChild(this.container);
|
||
else
|
||
DomHandler.appendChild(this.container, this.appendTo);
|
||
}
|
||
}
|
||
restoreOverlayAppend() {
|
||
if (this.container && this.appendTo) {
|
||
this.el.nativeElement.appendChild(this.container);
|
||
}
|
||
}
|
||
moveOnTop() {
|
||
if (this.autoZIndex) {
|
||
this.container.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
|
||
}
|
||
}
|
||
hide() {
|
||
this.visible = false;
|
||
this.relativeAlign = false;
|
||
this.cd.markForCheck();
|
||
}
|
||
onWindowResize() {
|
||
this.hide();
|
||
}
|
||
itemClick(event, item) {
|
||
if (item.disabled) {
|
||
event.preventDefault();
|
||
return;
|
||
}
|
||
if (!item.url) {
|
||
event.preventDefault();
|
||
}
|
||
if (item.command) {
|
||
item.command({
|
||
originalEvent: event,
|
||
item: item
|
||
});
|
||
}
|
||
if (this.popup) {
|
||
this.hide();
|
||
}
|
||
}
|
||
bindDocumentClickListener() {
|
||
if (!this.documentClickListener) {
|
||
const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
|
||
this.documentClickListener = this.renderer.listen(documentTarget, 'click', () => {
|
||
if (!this.preventDocumentDefault) {
|
||
this.hide();
|
||
}
|
||
this.preventDocumentDefault = false;
|
||
});
|
||
}
|
||
}
|
||
unbindDocumentClickListener() {
|
||
if (this.documentClickListener) {
|
||
this.documentClickListener();
|
||
this.documentClickListener = null;
|
||
}
|
||
}
|
||
bindDocumentResizeListener() {
|
||
this.documentResizeListener = this.onWindowResize.bind(this);
|
||
window.addEventListener('resize', this.documentResizeListener);
|
||
}
|
||
unbindDocumentResizeListener() {
|
||
if (this.documentResizeListener) {
|
||
window.removeEventListener('resize', this.documentResizeListener);
|
||
this.documentResizeListener = null;
|
||
}
|
||
}
|
||
bindScrollListener() {
|
||
if (!this.scrollHandler) {
|
||
this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => {
|
||
if (this.visible) {
|
||
this.hide();
|
||
}
|
||
});
|
||
}
|
||
this.scrollHandler.bindScrollListener();
|
||
}
|
||
unbindScrollListener() {
|
||
if (this.scrollHandler) {
|
||
this.scrollHandler.unbindScrollListener();
|
||
}
|
||
}
|
||
onOverlayHide() {
|
||
this.unbindDocumentClickListener();
|
||
this.unbindDocumentResizeListener();
|
||
this.unbindScrollListener();
|
||
this.preventDocumentDefault = false;
|
||
this.target = null;
|
||
}
|
||
ngOnDestroy() {
|
||
if (this.popup) {
|
||
if (this.scrollHandler) {
|
||
this.scrollHandler.destroy();
|
||
this.scrollHandler = null;
|
||
}
|
||
this.restoreOverlayAppend();
|
||
this.onOverlayHide();
|
||
}
|
||
}
|
||
hasSubMenu() {
|
||
if (this.model) {
|
||
for (var item of this.model) {
|
||
if (item.items) {
|
||
return true;
|
||
}
|
||
}
|
||
}
|
||
return false;
|
||
}
|
||
}
|
||
Menu.decorators = [
|
||
{ type: Component, args: [{
|
||
selector: 'p-menu',
|
||
template: `
|
||
<div #container [ngClass]="{'p-menu p-component': true, 'p-menu-overlay': popup}"
|
||
[class]="styleClass" [ngStyle]="style" (click)="preventDocumentDefault=true" *ngIf="!popup || visible"
|
||
[@overlayAnimation]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" [@.disabled]="popup !== true" (@overlayAnimation.start)="onOverlayAnimationStart($event)">
|
||
<ul class="p-menu-list p-reset">
|
||
<ng-template ngFor let-submenu [ngForOf]="model" *ngIf="hasSubMenu()">
|
||
<li class="p-menu-separator" *ngIf="submenu.separator" [ngClass]="{'p-hidden': submenu.visible === false}"></li>
|
||
<li class="p-submenu-header" [attr.data-automationid]="submenu.automationId" *ngIf="!submenu.separator" [ngClass]="{'p-hidden': submenu.visible === false}">
|
||
<span *ngIf="submenu.escape !== false; else htmlSubmenuLabel">{{submenu.label}}</span>
|
||
<ng-template #htmlSubmenuLabel><span [innerHTML]="submenu.label"></span></ng-template>
|
||
</li>
|
||
<ng-template ngFor let-item [ngForOf]="submenu.items">
|
||
<li class="p-menu-separator" *ngIf="item.separator" [ngClass]="{'p-hidden': (item.visible === false || submenu.visible === false)}"></li>
|
||
<li class="p-menuitem" *ngIf="!item.separator" [pMenuItemContent]="item" [ngClass]="{'p-hidden': (item.visible === false || submenu.visible === false)}" [ngStyle]="item.style" [class]="item.styleClass"></li>
|
||
</ng-template>
|
||
</ng-template>
|
||
<ng-template ngFor let-item [ngForOf]="model" *ngIf="!hasSubMenu()">
|
||
<li class="p-menu-separator" *ngIf="item.separator" [ngClass]="{'p-hidden': item.visible === false}"></li>
|
||
<li class="p-menuitem" *ngIf="!item.separator" [pMenuItemContent]="item" [ngClass]="{'p-hidden': item.visible === false}" [ngStyle]="item.style" [class]="item.styleClass"></li>
|
||
</ng-template>
|
||
</ul>
|
||
</div>
|
||
`,
|
||
animations: [
|
||
trigger('overlayAnimation', [
|
||
transition(':enter', [
|
||
style({ opacity: 0, transform: 'scaleY(0.8)' }),
|
||
animate('{{showTransitionParams}}')
|
||
]),
|
||
transition(':leave', [
|
||
animate('{{hideTransitionParams}}', style({ opacity: 0 }))
|
||
])
|
||
])
|
||
],
|
||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||
encapsulation: ViewEncapsulation.None,
|
||
styles: [".p-menu-overlay{position:absolute}.p-menu ul{list-style:none;margin:0;padding:0}.p-menu .p-menuitem-link{-ms-flex-align:center;align-items:center;cursor:pointer;display:-ms-flexbox;display:flex;overflow:hidden;position:relative;text-decoration:none}.p-menu .p-menuitem-text{line-height:1}"]
|
||
},] }
|
||
];
|
||
Menu.ctorParameters = () => [
|
||
{ type: ElementRef },
|
||
{ type: Renderer2 },
|
||
{ type: ChangeDetectorRef }
|
||
];
|
||
Menu.propDecorators = {
|
||
model: [{ type: Input }],
|
||
popup: [{ type: Input }],
|
||
style: [{ type: Input }],
|
||
styleClass: [{ type: Input }],
|
||
appendTo: [{ type: Input }],
|
||
autoZIndex: [{ type: Input }],
|
||
baseZIndex: [{ type: Input }],
|
||
showTransitionOptions: [{ type: Input }],
|
||
hideTransitionOptions: [{ type: Input }],
|
||
containerViewChild: [{ type: ViewChild, args: ['container',] }],
|
||
onShow: [{ type: Output }],
|
||
onHide: [{ type: Output }]
|
||
};
|
||
class MenuModule {
|
||
}
|
||
MenuModule.decorators = [
|
||
{ type: NgModule, args: [{
|
||
imports: [CommonModule, RouterModule, RippleModule],
|
||
exports: [Menu, RouterModule],
|
||
declarations: [Menu, MenuItemContent]
|
||
},] }
|
||
];
|
||
|
||
/**
|
||
* Generated bundle index. Do not edit.
|
||
*/
|
||
|
||
export { Menu, MenuItemContent, MenuModule };
|
||
//# sourceMappingURL=primeng-menu.js.map
|