111 lines
3.1 KiB
TypeScript
111 lines
3.1 KiB
TypeScript
|
import { Component, Input, OnInit } from '@angular/core';
|
|||
|
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|||
|
|
import { MenuItem } from 'primeng/primeng';
|
|||
|
|
import { AppComponent } from 'app/app.component';
|
|||
|
|
|
|||
|
|
@Component({
|
|||
|
|
/* tslint:disable:component-selector */
|
|||
|
|
selector: '[of-submenu]',
|
|||
|
|
/* tslint:enable:component-selector */
|
|||
|
|
templateUrl: './app.submenu.component.html',
|
|||
|
|
animations: [
|
|||
|
|
trigger('children', [
|
|||
|
|
state('hiddenAnimated', style({
|
|||
|
|
height: '0px'
|
|||
|
|
})),
|
|||
|
|
state('visibleAnimated', style({
|
|||
|
|
height: '*'
|
|||
|
|
})),
|
|||
|
|
state('visible', style({
|
|||
|
|
height: '*',
|
|||
|
|
'z-index': 100
|
|||
|
|
})),
|
|||
|
|
state('hidden', style({
|
|||
|
|
height: '0px',
|
|||
|
|
'z-index': '*'
|
|||
|
|
})),
|
|||
|
|
transition('visibleAnimated => hiddenAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
|
|||
|
|
transition('hiddenAnimated => visibleAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
|
|||
|
|
])
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
export class AppSubMenuComponent {
|
|||
|
|
|
|||
|
|
@Input() item: MenuItem;
|
|||
|
|
|
|||
|
|
@Input() root: boolean;
|
|||
|
|
|
|||
|
|
@Input() visible: boolean;
|
|||
|
|
|
|||
|
|
_reset: boolean;
|
|||
|
|
|
|||
|
|
activeIndex: number;
|
|||
|
|
|
|||
|
|
constructor(public app: AppComponent) { }
|
|||
|
|
|
|||
|
|
itemClick(event: Event, item: MenuItem, index: number) {
|
|||
|
|
if (this.root) {
|
|||
|
|
this.app.menuHoverActive = !this.app.menuHoverActive;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// avoid processing disabled items
|
|||
|
|
if (item.disabled) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// activate current item and deactivate active sibling if any
|
|||
|
|
this.activeIndex = (this.activeIndex === index) ? null : index;
|
|||
|
|
|
|||
|
|
// execute command
|
|||
|
|
if (item.command) {
|
|||
|
|
item.command({ originalEvent: event, item: item });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// prevent hash change
|
|||
|
|
if (item.items || (!item.url && !item.routerLink)) {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.app.layoutMenuScrollerViewChild.moveBar();
|
|||
|
|
}, 450);
|
|||
|
|
event.preventDefault();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// hide menu
|
|||
|
|
if (!item.items) {
|
|||
|
|
if (this.app.isHorizontal() || this.app.isSlim()) {
|
|||
|
|
this.app.resetMenu = true;
|
|||
|
|
} else {
|
|||
|
|
this.app.resetMenu = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.app.overlayMenuActive = false;
|
|||
|
|
this.app.staticMenuMobileActive = false;
|
|||
|
|
this.app.menuHoverActive = !this.app.menuHoverActive;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMouseEnter(index: number) {
|
|||
|
|
if (this.root && this.app.menuHoverActive && (this.app.isHorizontal() || this.app.isSlim())
|
|||
|
|
&& !this.app.isMobile() && !this.app.isTablet()) {
|
|||
|
|
this.activeIndex = index;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
isActive(index: number): boolean {
|
|||
|
|
return this.activeIndex === index;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@Input() get reset(): boolean {
|
|||
|
|
return this._reset;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
set reset(val: boolean) {
|
|||
|
|
this._reset = val;
|
|||
|
|
|
|||
|
|
if (this._reset && (this.app.isHorizontal() || this.app.isSlim())) {
|
|||
|
|
this.activeIndex = null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|