src/lib/kiewit-menu/kiewit-menu.component.ts
selector | kiewit-menu |
styleUrls | kiewit-menu.component.css |
templateUrl | ./kiewit-menu.component.html |
Properties |
Methods |
Inputs |
Outputs |
menuItems
|
Type: |
subMenuClick
|
$event type: EventEmitter<any>
|
hideHelpMenu |
hideHelpMenu()
|
Returns :
void
|
hideMenu |
hideMenu()
|
Returns :
void
|
menuMouseEnter |
menuMouseEnter()
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
subMenuOnClick | ||||||||||||
subMenuOnClick(subMenuTitle: , menuItem: KiewitMenuItem)
|
||||||||||||
Parameters :
Returns :
void
|
toggleHelpMenu |
toggleHelpMenu()
|
Returns :
void
|
toggleLeftHelpMenu |
toggleLeftHelpMenu()
|
Returns :
void
|
toggleLeftMenu | ||||||||
toggleLeftMenu(menuItem: KiewitMenuItem)
|
||||||||
Parameters :
Returns :
void
|
toggleMenu | ||||||||
toggleMenu(menuItem: KiewitMenuItem)
|
||||||||
Parameters :
Returns :
void
|
helpMenuOpen |
helpMenuOpen:
|
Type : string
|
subMenuClicked |
subMenuClicked:
|
Type : boolean
|
Default value : false
|
import {
Component, Output, Input, OnInit, ElementRef, Renderer, EventEmitter,
trigger, transition, state, style, animate
} from '@angular/core';
import { KiewitMenuItem } from './kiewit-menu-item';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@Component({
selector: 'kiewit-menu',
templateUrl: './kiewit-menu.component.html',
styleUrls: ['./kiewit-menu.component.css'],
animations: [
trigger('slideDownUp', [
state('down', style({
overflow: 'hidden',
height: 'auto',
width: 'max-content'
})),
state('up', style({
//opacity: '0',
//overflow: 'hidden',
//height: '0px',
width: 'max-content',
display: 'none'
})),
transition('down => up', animate('400ms ease-in-out')),
transition('up => down', animate('400ms ease-in-out'))
]),
trigger('slideLeftRight', [
state('true', style({
overflow: 'hidden',
height: 'auto',
width: 'max-content'
})),
state('false', style({
opacity: '0',
backgroundColor: '#000',
overflow: 'hidden',
height: '0px',
width: '0px',
display: 'none'
})),
transition('true => false', animate('3000ms ease-in-out')),
transition('false => true', animate('3000ms ease-in-out'))
]),
trigger('userInformationAnimation', [
state('down', style({
overflow: 'hidden',
height: 'auto',
width: '270px'
})),
state('up', style({
opacity: '0',
overflow: 'hidden',
height: '0px',
width: '270px'
})),
transition('down => up', animate('400ms ease-in-out')),
transition('up => down', animate('400ms ease-in-out'))
])
]
})
export class KiewitMenuComponent implements OnInit {
@Input()
menuItems: KiewitMenuItem[];
@Output() subMenuClick: EventEmitter<any> = new EventEmitter();
helpMenuOpen: string;
subMenuClicked: boolean = false;
ngOnInit() {
this.helpMenuOpen = 'up';
}
toggleHelpMenu(): void {
this.helpMenuOpen = this.helpMenuOpen === 'up' ? 'down' : 'up';
}
toggleLeftHelpMenu(): void {
if (this.subMenuClicked) return;
setTimeout(() => {
this.hideHelpMenu();
this.hideMenu();
}, 2000);
}
toggleMenu(menuItem: KiewitMenuItem): void {
if (this.subMenuClicked) return;
//Hide others SubMenuItems
for (let i = 0; i < this.menuItems.length; i++) {
if (this.menuItems[i].MenuItemId != menuItem.MenuItemId) {
this.menuItems[i].IsActive = true;
}
}
//Active only the current MenuItem
menuItem.IsActive = !menuItem.IsActive
}
toggleLeftMenu(menuItem: KiewitMenuItem): void {
if (this.subMenuClicked) return;
setTimeout(() => {
this.hideMenu();
}, 2000);
}
subMenuOnClick(subMenuTitle, menuItem: KiewitMenuItem) {
this.subMenuClicked = true;
this.hideMenu();
this.hideHelpMenu();
this.subMenuClick.emit({ title: subMenuTitle });
}
hideHelpMenu(): void {
this.helpMenuOpen = 'up';
}
hideMenu(): void {
for (let i = 0; i < this.menuItems.length; i++) {
this.menuItems[i].IsActive = true;
}
}
menuMouseEnter(): void {
this.subMenuClicked = false;
}
}
<div [@slideDownUp]="helpMenuOpen" (mouseover)="menuMouseEnter()" (mouseleave)="toggleLeftHelpMenu()" class="kiewit-menu shadow-right-bottom">
<span class="kiewit-logo"></span>
<ul class="kiewit-mainmenu">
<li *ngFor="let menuItem of menuItems" class="kiewit-menu-item" (click)="toggleMenu(menuItem)" >
{{ menuItem.Title }}
<span *ngIf="menuItem.SubItems.length > 0" class="k-icon k-i-arrow-60-right pull-right" style="margin-top:7px;margin-right:-5px"></span>
<div [@slideLeftRight]="!menuItem.IsActive" class="kiewit-submenu-container shadow-right-bottom" (mouseleave)="toggleLeftMenu(menuItem)">
<ul class="kiewit-submenu">
<li *ngFor="let subItem of menuItem.SubItems" class="kiewit-menu-subitem" (click)="subMenuOnClick(subItem.Title,menuItem)">
{{ subItem.Title }}
</li>
</ul>
</div>
</li>
</ul>
</div>
import { Component } from '@angular/core';
import { KiewitMenuItem } from './kiewit-menu-item'; \
@Component({
selector: 'kiewit-menu',
templateUrl: './kiewit-menu.component.html',
styleUrls: ['./kiewit-menu.component.css']
})
export class KiewitMenuComponent implements OnInit {
private menuItems: any = [];
constructor() {
super();
this.menuItems = [];
this.getMenuItems(); // for binding menu items
}
getMenuItems() {
this.dashboardService.getMenuItems().subscribe(data => {
this.menuItems = data;
});
}
subMenuOnClick(eventData) {
this.subMenuClick.emit({ title: eventData.title });
}
}
In HTML File
<kiewit-menu [menuItems]="items" (subMenuClick)="subMenuOnClick($event)" > </kiewit-menu>