purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Making navigation better

Browse Source
This commit is contained in:
mustafahlvc 2017-07-09 13:38:38 +03:00
parent e98e37402a
commit b7ef64154d
5 changed files with 519 additions and 459 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
src/app/navigation/nav-collapse/nav-collapse.component.ts
View File

@ -1,5 +1,6 @@
import {Component, HostBinding, HostListener, Input, OnInit} from '@angular/core';
import {Component, HostBinding, Input, OnInit} from '@angular/core';
import {NavigationService} from '../navigation.service';
import {NavigationEnd, Router} from '@angular/router';
@Component({
selector : 'fuse-nav-collapse',
@ -10,36 +11,127 @@ export class NavCollapseComponent implements OnInit
{
@Input() item: any;
@HostBinding('class') classes = 'nav-collapse nav-item';
@HostBinding('class.open') public isOpen = false;
@HostBinding('class.open') private isOpen = false;
constructor(private navigationService: NavigationService)
constructor(private navigationService: NavigationService, private router: Router)
{
this.navigationService.navItemClicked.subscribe(
(instance) =>
/**
* When navigation changed
*/
router.events.subscribe(
(event) =>
{
// console.warn('navItemClicked', instance);
if ( !instance.includes(this.item.url) && this.isOpen )
if ( event instanceof NavigationEnd )
{
this.isOpen = !this.isOpen;
/**
* Check if the url is child of the collapse
*/
if ( this.isUrlInChildren(this.item, event.urlAfterRedirects) )
{
this.expand();
}
console.warn(this.item.url, instance);
if ( instance.includes(this.item.url) && !this.isOpen )
else
{
this.isOpen = !this.isOpen;
this.collapse();
}
}
}
);
/**
* Whenever a navigaiton collapse item toggled
*/
this.navigationService.onNavCollapseToggled.subscribe(
(clickedItem) =>
{
if ( clickedItem.children )
{
/**
* if clicked collapse is child of this collapse
* return
*/
if ( this.item.children.indexOf(clickedItem) !== -1 )
{
return;
}
/**
* If collapsed item is not related with this collapse
* collapse
*/
if ( this.item !== clickedItem )
{
this.collapse();
}
}
}
);
}
toggleOpen(event)
/**
* Toggle Collapse
* @param ev
*/
toggleOpen(ev)
{
event.preventDefault();
ev.preventDefault();
this.isOpen = !this.isOpen;
this.navigationService.navItemClicked.emit(this.item.url);
// this.navigationService.onNavItemClicked.emit(this.item);
this.navigationService.onNavCollapseToggled.emit(this.item);
console.log('toggleOpen');
}
/**
* Expand
*/
expand()
{
if ( this.isOpen )
{
return;
}
this.isOpen = true;
}
/**
* Collapse
*/
collapse()
{
if ( !this.isOpen )
{
return;
}
this.isOpen = false;
}
/**
* Checking the url is in children
* @param arr
* @param url
* @returns {any}
*/
isUrlInChildren(arr, url)
{
if ( !arr.children )
{
return false;
}
for ( let i = 0; i < arr.children.length; i++ )
{
if ( arr.children[i].children )
{
return this.isUrlInChildren(arr.children[i], url)
}
else
{
if ( arr.children[i].url === url )
{
return true;
}
}
}
return false;
}
ngOnInit()
{

3
src/app/navigation/nav-item/nav-item.component.html
View File

@ -1,6 +1,5 @@
<a class="nav-link" md-ripple
[routerLink]="[item.url]" routerLinkActive="active"
(click)="onClick()">
[routerLink]="[item.url]" routerLinkActive="active">
<md-icon *ngIf="item.icon">{{item.icon}}</md-icon>
<span>{{item.title}}</span>
</a>

11
src/app/navigation/nav-item/nav-item.component.ts
View File

@ -1,5 +1,4 @@
import {Component, EventEmitter, HostBinding, Input, OnInit, Output, ViewEncapsulation} from '@angular/core';
import {NavigationService} from '../navigation.service';
import {Component, HostBinding, Input, OnInit} from '@angular/core';
@Component({
selector : 'fuse-nav-item',
@ -11,17 +10,11 @@ export class NavItemComponent implements OnInit
@HostBinding('class') classes = 'nav-item';
@Input() item: any;
constructor(private navigationService: NavigationService)
constructor()
{
}
ngOnInit()
{
}
onClick()
{
console.log('clicked');
this.navigationService.navItemClicked.emit(this.item.url);
}
}

17
src/app/navigation/navigation.model.ts
View File

@ -1,6 +1,10 @@
export class FuseNavigation
{
items = [
public items: any[];
constructor()
{
this.items = [
{
'title': 'APPS',
'type' : 'subheader'
@ -9,7 +13,6 @@ export class FuseNavigation
'title' : 'Dashboards',
'type' : 'nav-collapse',
'icon' : 'dashboard',
'url' : '/apps/dashboards',
'children': [
{
'type' : 'nav-item',
@ -33,7 +36,6 @@ export class FuseNavigation
'title' : 'Ecommerce',
'type' : 'nav-collapse',
'icon' : 'shopping_cart',
'url' : '/apps/e-commerce',
'children': [
{
'title': 'Products',
@ -90,7 +92,6 @@ export class FuseNavigation
'title' : 'Authentication',
'type' : 'nav-collapse',
'icon' : 'lock',
'url' : '/pages/auth',
'children': [
{
'title': 'Login',
@ -139,7 +140,6 @@ export class FuseNavigation
'title' : 'Errors',
'type' : 'nav-collapse',
'icon' : 'error',
'url' : '/pages/errors',
'children': [
{
'title': '404',
@ -179,7 +179,6 @@ export class FuseNavigation
'title' : 'Elements',
'type' : 'nav-collapse',
'icon' : 'layers',
'url' : '/user-interface/elements',
'children': [
{
'title': 'Alerts',
@ -262,7 +261,6 @@ export class FuseNavigation
'title' : 'Tables',
'type' : 'nav-collapse',
'icon' : 'border_all',
'url' : '/user-interface/tables',
'children': [
{
'title': 'Simple Table',
@ -280,12 +278,10 @@ export class FuseNavigation
'title' : 'Page Layouts',
'type' : 'nav-collapse',
'icon' : 'view_quilt',
'url' : 'page-layouts',
'children': [
{
'title' : 'Carded',
'type' : 'nav-collapse',
'url' : '/user-interface/page-layouts/carded',
'children': [
{
'title': 'Full Width',
@ -307,7 +303,6 @@ export class FuseNavigation
{
'title' : 'Simple',
'type' : 'nav-collapse',
'url' : '/user-interface/page-layouts/simple',
'children': [
{
'title': 'Full Width',
@ -371,7 +366,6 @@ export class FuseNavigation
{
'title' : 'Charts',
'type' : 'nav-collapse',
'url' : '/components/charts',
'icon' : 'poll',
'children': [
{
@ -412,4 +406,5 @@ export class FuseNavigation
'url' : '/components/tooltips'
}
];
}
}

23
src/app/navigation/navigation.service.ts
View File

@ -1,34 +1,15 @@
import {EventEmitter, Injectable} from '@angular/core';
import {NavigationEnd, NavigationStart, Router} from '@angular/router';
import {FuseNavigation} from './navigation.model';
@Injectable()
export class NavigationService
{
navItemClicked = new EventEmitter<any>();
clickedItemUrl: string;
onNavCollapseToggled = new EventEmitter<any>();
navigation: object[];
constructor(private router: Router)
constructor()
{
this.navigation = new FuseNavigation().items;
router.events.subscribe(
(event) =>
{
if ( event instanceof NavigationEnd )
{
console.warn('event', event);
this.navItemClicked.emit(event.urlAfterRedirects);
}
}
);
this.navItemClicked.subscribe(
(instance) =>
{
console.log('instance', instance);
this.clickedItemUrl = instance;
}
);
}
getNavigation()