File

src/lib/kiewit-menu/kiewit-menu.component.ts

Implements

OnInit

Metadata

selector kiewit-menu
styleUrls kiewit-menu.component.css
templateUrl ./kiewit-menu.component.html

Index

Properties
Methods
Inputs
Outputs

Inputs

menuItems

Type: KiewitMenuItem[]

Outputs

subMenuClick $event type: EventEmitter<any>

Methods

hideHelpMenu
hideHelpMenu()
Returns : void
hideMenu
hideMenu()
Returns : void
menuMouseEnter
menuMouseEnter()
Returns : void
ngOnInit
ngOnInit()
Returns : void
subMenuOnClick
subMenuOnClick(subMenuTitle: , menuItem: KiewitMenuItem)
Parameters :
Name Type Optional Description
subMenuTitle
menuItem KiewitMenuItem
Returns : void
toggleHelpMenu
toggleHelpMenu()
Returns : void
toggleLeftHelpMenu
toggleLeftHelpMenu()
Returns : void
toggleLeftMenu
toggleLeftMenu(menuItem: KiewitMenuItem)
Parameters :
Name Type Optional Description
menuItem KiewitMenuItem
Returns : void
toggleMenu
toggleMenu(menuItem: KiewitMenuItem)
Parameters :
Name Type Optional Description
menuItem KiewitMenuItem
Returns : void

Properties

helpMenuOpen
helpMenuOpen: string
Type : string
subMenuClicked
subMenuClicked: boolean
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>
Implementation
In Type Script File

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>
      
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""