primeng
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [ • 14.3 kB
JavaScript
import { Inject, forwardRef, Input, Component, EventEmitter, ElementRef, Renderer2, ChangeDetectorRef, Output, ViewChild, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { CommonModule } from '@angular/common';
import { DomHandler } from 'primeng/dom';
import { RouterModule } from '@angular/router';
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
};
let SlideMenuSub = class SlideMenuSub {
constructor(slideMenu) {
this.backLabel = 'Back';
this.easing = 'ease-out';
this.slideMenu = slideMenu;
}
itemClick(event, item, listitem) {
if (item.disabled) {
event.preventDefault();
return;
}
if (!item.url) {
event.preventDefault();
}
if (item.command) {
item.command({
originalEvent: event,
item: item
});
}
if (item.items && !this.slideMenu.animating) {
this.slideMenu.left -= this.slideMenu.menuWidth;
this.activeItem = listitem;
this.slideMenu.animating = true;
setTimeout(() => this.slideMenu.animating = false, this.effectDuration);
}
if (!item.items && this.slideMenu.popup) {
this.slideMenu.hide();
}
}
ngOnDestroy() {
this.activeItem = null;
}
};
SlideMenuSub.ctorParameters = () => [
{ type: undefined, decorators: [{ type: Inject, args: [forwardRef(() => SlideMenu),] }] }
];
__decorate([
Input()
], SlideMenuSub.prototype, "item", void 0);
__decorate([
Input()
], SlideMenuSub.prototype, "root", void 0);
__decorate([
Input()
], SlideMenuSub.prototype, "backLabel", void 0);
__decorate([
Input()
], SlideMenuSub.prototype, "menuWidth", void 0);
__decorate([
Input()
], SlideMenuSub.prototype, "effectDuration", void 0);
__decorate([
Input()
], SlideMenuSub.prototype, "easing", void 0);
__decorate([
Input()
], SlideMenuSub.prototype, "index", void 0);
SlideMenuSub = __decorate([
Component({
selector: 'p-slideMenuSub',
template: `
<ul [ngClass]="{'ui-slidemenu-rootlist':root, 'ui-submenu-list':!root, 'ui-active-submenu': (-slideMenu.left == (index * menuWidth))}"
[style.width.px]="menuWidth" [style.left.px]="root ? slideMenu.left : slideMenu.menuWidth"
[style.transitionProperty]="root ? 'left' : 'none'" [style.transitionDuration]="effectDuration + 'ms'" [style.transitionTimingFunction]="easing">
<ng-template ngFor let-child [ngForOf]="(root ? item : item.items)">
<li *ngIf="child.separator" class="ui-menu-separator ui-widget-content" [ngClass]="{'ui-helper-hidden': child.visible === false}">
<li *ngIf="!child.separator" #listitem [ngClass]="{'ui-menuitem ui-widget ui-corner-all':true,'ui-menuitem-active':listitem==activeItem,'ui-helper-hidden': child.visible === false}"
[class]="child.styleClass" [ngStyle]="child.style">
<a *ngIf="!child.routerLink" [href]="child.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.target]="child.target" [attr.title]="child.title" [attr.id]="child.id"
[ngClass]="{'ui-state-disabled':child.disabled}" [attr.tabindex]="child.tabindex ? child.tabindex : '0'"
(click)="itemClick($event, child, listitem)">
<span class="ui-menuitem-icon" *ngIf="child.icon" [ngClass]="child.icon"></span>
<span class="ui-menuitem-text">{{child.label}}</span>
<span class="ui-submenu-icon pi pi-fw pi-caret-right" *ngIf="child.items"></span>
</a>
<a *ngIf="child.routerLink" [routerLink]="child.routerLink" [queryParams]="child.queryParams" [routerLinkActive]="'ui-menuitem-link-active'"
[routerLinkActiveOptions]="child.routerLinkActiveOptions||{exact:false}" [href]="child.url||'#'" class="ui-menuitem-link ui-corner-all"
[attr.target]="child.target" [attr.title]="child.title" [attr.id]="child.id" [attr.tabindex]="child.tabindex ? child.tabindex : '0'"
[ngClass]="{'ui-state-disabled':child.disabled}"
(click)="itemClick($event, child, listitem)"
[fragment]="child.fragment" [queryParamsHandling]="child.queryParamsHandling" [preserveFragment]="child.preserveFragment" [skipLocationChange]="child.skipLocationChange" [replaceUrl]="child.replaceUrl" [state]="child.state">
<span class="ui-menuitem-icon" *ngIf="child.icon" [ngClass]="child.icon"></span>
<span class="ui-menuitem-text">{{child.label}}</span>
<span class="ui-submenu-icon pi pi-fw pi-caret-right" *ngIf="child.items"></span>
</a>
<p-slideMenuSub class="ui-submenu" [item]="child" [index]="index + 1" [menuWidth]="menuWidth" *ngIf="child.items"></p-slideMenuSub>
</li>
</ng-template>
</ul>
`
}),
__param(0, Inject(forwardRef(() => SlideMenu)))
], SlideMenuSub);
let SlideMenu = class SlideMenu {
constructor(el, renderer, cd) {
this.el = el;
this.renderer = renderer;
this.cd = cd;
this.menuWidth = 190;
this.viewportHeight = 180;
this.effectDuration = 250;
this.easing = 'ease-out';
this.backLabel = 'Back';
this.autoZIndex = true;
this.baseZIndex = 0;
this.showTransitionOptions = '225ms ease-out';
this.hideTransitionOptions = '195ms ease-in';
this.onShow = new EventEmitter();
this.onHide = new EventEmitter();
this.left = 0;
this.animating = false;
}
ngAfterViewChecked() {
if (!this.viewportUpdated && !this.popup && this.containerViewChild) {
this.updateViewPort();
this.viewportUpdated = true;
}
}
set container(element) {
this.containerViewChild = element;
}
set backward(element) {
this.backwardViewChild = element;
}
set slideMenuContent(element) {
this.slideMenuContentViewChild = element;
}
updateViewPort() {
this.slideMenuContentViewChild.nativeElement.style.height = this.viewportHeight - DomHandler.getHiddenElementOuterHeight(this.backwardViewChild.nativeElement) + 'px';
}
toggle(event) {
if (this.visible)
this.hide();
else
this.show(event);
this.preventDocumentDefault = true;
this.cd.detectChanges();
}
show(event) {
this.target = event.currentTarget;
this.visible = true;
this.preventDocumentDefault = true;
}
onOverlayAnimationStart(event) {
switch (event.toState) {
case 'visible':
if (this.popup) {
this.updateViewPort();
this.moveOnTop();
this.onShow.emit({});
this.appendOverlay();
DomHandler.absolutePosition(this.containerViewChild.nativeElement, this.target);
this.bindDocumentClickListener();
this.bindDocumentResizeListener();
}
break;
case 'void':
this.onOverlayHide();
this.onHide.emit({});
break;
}
}
appendOverlay() {
if (this.appendTo) {
if (this.appendTo === 'body')
document.body.appendChild(this.containerViewChild.nativeElement);
else
DomHandler.appendChild(this.containerViewChild.nativeElement, this.appendTo);
}
}
restoreOverlayAppend() {
if (this.container && this.appendTo) {
this.el.nativeElement.appendChild(this.containerViewChild.nativeElement);
}
}
moveOnTop() {
if (this.autoZIndex) {
this.containerViewChild.nativeElement.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
}
}
hide() {
this.visible = false;
}
onWindowResize() {
this.hide();
}
onClick(event) {
this.preventDocumentDefault = true;
}
goBack() {
this.left += this.menuWidth;
}
bindDocumentClickListener() {
if (!this.documentClickListener) {
this.documentClickListener = this.renderer.listen('document', 'click', () => {
if (!this.preventDocumentDefault) {
this.hide();
this.cd.detectChanges();
}
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;
}
}
onOverlayHide() {
this.unbindDocumentClickListener();
this.unbindDocumentResizeListener();
this.preventDocumentDefault = false;
this.target = null;
this.left = 0;
}
ngOnDestroy() {
if (this.popup) {
this.restoreOverlayAppend();
this.onOverlayHide();
}
}
};
SlideMenu.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 },
{ type: ChangeDetectorRef }
];
__decorate([
Input()
], SlideMenu.prototype, "model", void 0);
__decorate([
Input()
], SlideMenu.prototype, "popup", void 0);
__decorate([
Input()
], SlideMenu.prototype, "style", void 0);
__decorate([
Input()
], SlideMenu.prototype, "styleClass", void 0);
__decorate([
Input()
], SlideMenu.prototype, "menuWidth", void 0);
__decorate([
Input()
], SlideMenu.prototype, "viewportHeight", void 0);
__decorate([
Input()
], SlideMenu.prototype, "effectDuration", void 0);
__decorate([
Input()
], SlideMenu.prototype, "easing", void 0);
__decorate([
Input()
], SlideMenu.prototype, "backLabel", void 0);
__decorate([
Input()
], SlideMenu.prototype, "appendTo", void 0);
__decorate([
Input()
], SlideMenu.prototype, "autoZIndex", void 0);
__decorate([
Input()
], SlideMenu.prototype, "baseZIndex", void 0);
__decorate([
Input()
], SlideMenu.prototype, "showTransitionOptions", void 0);
__decorate([
Input()
], SlideMenu.prototype, "hideTransitionOptions", void 0);
__decorate([
Output()
], SlideMenu.prototype, "onShow", void 0);
__decorate([
Output()
], SlideMenu.prototype, "onHide", void 0);
__decorate([
ViewChild('container')
], SlideMenu.prototype, "container", null);
__decorate([
ViewChild('backward')
], SlideMenu.prototype, "backward", null);
__decorate([
ViewChild('slideMenuContent')
], SlideMenu.prototype, "slideMenuContent", null);
SlideMenu = __decorate([
Component({
selector: 'p-slideMenu',
template: `
<div #container [ngClass]="{'ui-slidemenu ui-widget ui-widget-content ui-corner-all':true, 'ui-slidemenu-dynamic ui-shadow':popup}"
[class]="styleClass" [ngStyle]="style" (click)="onClick($event)"
[]="{value: 'visible', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" [@.disabled]="popup !== true" (.start)="onOverlayAnimationStart($event)" *ngIf="!popup || visible">
<div class="ui-slidemenu-wrapper" [style.height]="left ? viewportHeight + 'px' : 'auto'">
<div #slideMenuContent class="ui-slidemenu-content">
<p-slideMenuSub [item]="model" root="root" [index]="0" [menuWidth]="menuWidth" [effectDuration]="effectDuration" [easing]="easing"></p-slideMenuSub>
</div>
<div #backward class="ui-slidemenu-backward ui-widget-header ui-corner-all" [style.display]="left ? 'block' : 'none'" (click)="goBack()">
<span class="ui-slidemenu-backward-icon pi pi-fw pi-caret-left"></span><span>{{backLabel}}</span>
</div>
</div>
</div>
`,
animations: [
trigger('overlayAnimation', [
state('void', style({
transform: 'translateY(5%)',
opacity: 0
})),
state('visible', style({
transform: 'translateY(0)',
opacity: 1
})),
transition('void => visible', animate('{{showTransitionParams}}')),
transition('visible => void', animate('{{hideTransitionParams}}'))
])
],
changeDetection: ChangeDetectionStrategy.Default
})
], SlideMenu);
let SlideMenuModule = class SlideMenuModule {
};
SlideMenuModule = __decorate([
NgModule({
imports: [CommonModule, RouterModule],
exports: [SlideMenu, RouterModule],
declarations: [SlideMenu, SlideMenuSub]
})
], SlideMenuModule);
/**
* Generated bundle index. Do not edit.
*/
export { SlideMenu, SlideMenuModule, SlideMenuSub };
//# sourceMappingURL=primeng-slidemenu.js.map