feat(sidebar): menu separated from sidebar, menu merged with routes

src/app/theme/components/baMenu/baMenu.component.ts

@@ -0,0 +1,70 @@
+import {Component, ViewEncapsulation, Input, Output, EventEmitter} from '@angular/core';
+import {Router, RouterConfig, NavigationEnd} from '@angular/router';
+import {Subscription} from 'rxjs/Rx';
+
+import {BaSlimScroll} from '../../../theme/directives';
+import {BaMenuService} from './baMenu.service';
+import {BaMenuItem} from './components/baMenuItem';
+
+@Component({
+  selector: 'ba-menu',
+  encapsulation: ViewEncapsulation.None,
+  styles: [require('./baMenu.scss')],
+  template: require('./baMenu.html'),
+  providers: [BaMenuService],
+  directives: [BaMenuItem, BaSlimScroll]
+})
+export class BaMenu {
+
+  @Input() menuRoutes:RouterConfig = [];
+  @Input() sidebarCollapsed:boolean = false;
+  @Input() menuHeight:number;
+
+  @Output() expandMenu = new EventEmitter<any>();
+
+  public menuItems:any[];
+  public showHoverElem:boolean;
+  public hoverElemHeight:number;
+  public hoverElemTop:number;
+  protected _onRouteChange:Subscription;
+
+  constructor(private _router:Router, private _service:BaMenuService) {
+
+    this._onRouteChange = this._router.events.subscribe((event) => {
+      if (this.menuItems && event instanceof NavigationEnd) {
+        this.menuItems = this._service.selectMenuItem(this.menuItems);
+      }
+    });
+  }
+
+  public ngOnInit():void {
+    this.menuItems = this._service.convertRoutesToMenus(this.menuRoutes);
+  }
+
+  public ngOnDestroy():void {
+    this._onRouteChange.unsubscribe();
+  }
+
+  public hoverItem($event):void {
+    this.showHoverElem = true;
+    this.hoverElemHeight = $event.currentTarget.clientHeight;
+    // TODO: get rid of magic 66 constant
+    this.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - 66;
+  }
+
+  public toggleSubMenu($event):boolean {
+    var submenu = jQuery($event.currentTarget).next();
+
+    if (this.sidebarCollapsed) {
+      this.expandMenu.emit(null);
+      if (!$event.item.expanded) {
+        $event.item.expanded = true;
+      }
+    } else {
+      $event.item.expanded = !$event.item.expanded;
+      submenu.slideToggle();
+    }
+
+    return false;
+  }
+}

src/app/theme/components/baMenu/baMenu.html

@@ -0,0 +1,11 @@
+<aside class="al-sidebar" (mouseleave)="hoverElemTop=outOfArea" sidebarResize>
+  <ul id="al-sidebar-list" class="al-sidebar-list" baSlimScroll [baSlimScrollOptions]="{height: menuHeight}">
+    <ba-menu-item
+      [menuItem]="item"
+      (itemHover)="hoverItem($event)"
+      (toggleSubMenu)="toggleSubMenu($event)"
+      *ngFor="let item of menuItems"></ba-menu-item>
+  </ul>
+  <div class="sidebar-hover-elem" [ngStyle]="{top: hoverElemTop + 'px', height: hoverElemHeight + 'px'}"
+       [ngClass]="{'show-hover-elem': showHoverElem }"></div>
+</aside>

src/app/theme/components/baMenu/baMenu.scss

@@ -0,0 +1 @@
+@import '../../sass/conf/conf';

src/app/theme/components/baMenu/baMenu.service.ts

@@ -0,0 +1,101 @@
+import {Injectable} from '@angular/core';
+import {Router, UrlTree, RouterConfig} from '@angular/router';
+
+@Injectable()
+export class BaMenuService {
+
+  constructor(private _router:Router) {
+  }
+
+  public convertRoutesToMenus(routes:RouterConfig):any[] {
+    let items = this._convertArrayToItems(routes);
+    return this._skipEmpty(items);
+  }
+
+  public selectMenuItem(menuItems:any[]):any[] {
+    let items = [];
+    menuItems.forEach((item) => {
+      this._selectItem(item);
+
+      if (item.children && item.children.length > 0) {
+        item.children = this.selectMenuItem(item.children);
+      }
+      items.push(item);
+    });
+    return items;
+  }
+
+  protected _skipEmpty(items:any[]):any[] {
+    let menu = [];
+    items.forEach((item) => {
+      let menuItem;
+      if (item.skip) {
+        if (item.children && item.children.length > 0) {
+          menuItem = item.children;
+        }
+      } else {
+        menuItem = item;
+      }
+
+      if (menuItem) {
+        menu.push(menuItem);
+      }
+    });
+
+    return [].concat.apply([], menu);
+  }
+
+  protected _convertArrayToItems(routes:any[], parent?:any):any[] {
+    let items = [];
+    routes.forEach((route) => {
+      items.push(this._convertObjectToItem(route, parent));
+    });
+    return items;
+  }
+
+  protected _convertObjectToItem(object, parent?:any):any {
+    let item:any = {};
+    if (object.data && object.data.menu) {
+      // this is a menu object
+      item = object.data.menu;
+      item.route = object;
+      delete item.route.data.menu;
+    } else {
+      item.route = object;
+      item.skip = true;
+    }
+
+    // we have to collect all pathes to correctly build the url then
+    item.route.paths = parent && parent.route && parent.route.paths ? parent.route.paths.slice(0) : [];
+    item.route.paths.push(item.route.path);
+
+    if (object.children && object.children.length > 0) {
+      item.children = this._convertArrayToItems(object.children, item);
+    }
+
+    let prepared = this._prepareItem(item);
+
+    // if current item is selected or expanded - then parent is expanded too
+    if ((prepared.selected || prepared.expanded) && parent) {
+      parent.expanded = true;
+    }
+
+    return prepared;
+  }
+
+  protected _prepareItem(object:any):any {
+    if (!object.disabled && !object.skip) {
+
+      let itemUrl = this._router.serializeUrl(this._router.createUrlTree(object.route.paths));
+      object.url = object.url ? object.url : '/#' + itemUrl;
+      return this._selectItem(object);
+    }
+
+    return object;
+  }
+
+  protected _selectItem(object:any):any {
+    object.selected = object.url == ('/#' + this._router.url);
+    return object;
+  }
+}

src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.component.ts

@@ -0,0 +1,33 @@
+import {Component, ElementRef, HostListener, ViewEncapsulation, Input, Output, EventEmitter} from '@angular/core';
+
+@Component({
+  selector: 'ba-menu-item',
+  encapsulation: ViewEncapsulation.None,
+  styles: [require('./baMenuItem.scss')],
+  template: require('./baMenuItem.html'),
+  providers: [],
+  directives: [BaMenuItem]
+})
+export class BaMenuItem {
+
+  @Input() menuItem:any;
+  @Input() child:boolean = false;
+
+  @Output() itemHover = new EventEmitter<any>();
+  @Output() toggleSubMenu = new EventEmitter<any>();
+
+  public outOfArea:number = -200;
+
+  public ngOnInit():void {
+  }
+
+  public onHoverItem($event):void {
+    this.itemHover.emit($event);
+  }
+
+  public onToggleSubMenu($event, item):boolean {
+    $event.item = item;
+    this.toggleSubMenu.emit($event);
+    return false;
+  }
+}

src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.html

@@ -0,0 +1,17 @@
+<li [ngClass]="{'al-sidebar-list-item': !child, 'ba-sidebar-sublist-item': child, 'selected': menuItem.selected && !menuItem.expanded, 'with-sub-menu': menuItem.children, 'ba-sidebar-item-expanded': menuItem.expanded}">
+
+
+  <a *ngIf="!menuItem.children" [routerLink]="menuItem.url" [target]="menuItem.target || ''" class="al-sidebar-list-link">
+    <i *ngIf="menuItem.icon" class="{{ menuItem.icon }}"></i><span>{{ menuItem.title }}</span>
+  </a>
+
+  <a *ngIf="menuItem.children" (mouseenter)="onHoverItem($event, item)" (click)="onToggleSubMenu($event, menuItem)" class="al-sidebar-list-link">
+    <i *ngIf="menuItem.icon" class="{{ menuItem.icon }}"></i><span>{{ menuItem.title }}</span>
+    <b class="fa" [ngClass]="{'fa-angle-up': menuItem.expanded, 'fa-angle-down': !menuItem.expanded}"></b>
+  </a>
+
+  <ul *ngIf="menuItem.children" class="al-sidebar-sublist" [ngClass]="{'slide-right': menuItem.slideRight}">
+    <ba-menu-item [menuItem]="subItem" [child]="true" *ngFor="let subItem of menuItem.children"></ba-menu-item>
+  </ul>
+
+</li>

src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.scss

@@ -0,0 +1 @@
+@import '../../../../sass/conf/conf';

src/app/theme/components/baMenu/components/baMenuItem/index.ts

@@ -0,0 +1 @@
+export * from './baMenuItem.component';

src/app/theme/components/baMenu/index.ts

@@ -0,0 +1 @@
+export * from './baMenu.component.ts';

src/app/theme/components/baSidebar/baSidebar.component.ts

@@ -1,60 +1,42 @@
 import {Component, ElementRef, HostListener, ViewEncapsulation} from '@angular/core';
-import {Router} from '@angular/router';
 import {AppState} from '../../../app.state';
 import {layoutSizes} from '../../../theme';
-import {BaSlimScroll} from '../../../theme/directives';
-import {BaSidebarService} from './baSidebar.service';
+import {BaMenu} from '../baMenu';
+import {routes} from '../../../../app/app.routes';
 
 @Component({
   selector: 'ba-sidebar',
   encapsulation: ViewEncapsulation.None,
   styles: [require('./baSidebar.scss')],
   template: require('./baSidebar.html'),
-  providers: [BaSidebarService],
-  directives: [BaSlimScroll]
+  providers: [],
+  directives: [BaMenu]
 })
 export class BaSidebar {
 
-  public menuItems:Array<any>;
+  // here we declare which routes we want to use as a menu in our sidebar
+  public routes = routes;
+
   public menuHeight:number;
   public isMenuCollapsed:boolean = false;
-
-  public showHoverElem:boolean;
-  public hoverElemHeight:number;
-  public hoverElemTop:number;
-
-  public outOfArea:number = -200;
-
   public isMenuShouldCollapsed:boolean = false;
-  protected _onRouteChange;
 
-  constructor(private _elementRef:ElementRef,
-              private _router:Router,
-              private _sidebarService:BaSidebarService,
-              private _state:AppState) {
 
-    this.menuItems = this._sidebarService.getMenuItems();
-    this._onRouteChange = this._router.events.subscribe(() => {
-      this._selectMenuItem();
-    });
+  constructor(private _elementRef:ElementRef, private _state:AppState) {
+
     this._state.subscribe('menu.isCollapsed', (isCollapsed) => {
       this.isMenuCollapsed = isCollapsed;
     });
   }
 
-
   public ngOnInit():void {
     if (this._shouldMenuCollapse()) {
       this.menuCollapse();
     }
   }
 
-  public ngOnDestroy():void {
-    this._onRouteChange.unsubscribe();
-  }
-
   public ngAfterViewInit():void {
-    this.updateSidebarHeight();
+    setTimeout(() => this.updateSidebarHeight());
   }
 
   @HostListener('window:resize')
@@ -82,45 +64,12 @@ export class BaSidebar {
     this._state.notifyDataChanged('menu.isCollapsed', this.isMenuCollapsed);
   }
 
-  public hoverItem($event):void {
-    this.showHoverElem = true;
-    this.hoverElemHeight = $event.currentTarget.clientHeight;
-    // TODO: get rid of magic 66 constant
-    this.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - 66;
-  }
-
   public updateSidebarHeight():void {
     // TODO: get rid of magic 84 constant
     this.menuHeight = this._elementRef.nativeElement.childNodes[0].clientHeight - 84;
   }
 
-  public toggleSubMenu($event, item):boolean {
-    var submenu = jQuery($event.currentTarget).next();
-
-    if (this.isMenuCollapsed) {
-      this.menuExpand();
-      if (!item.expanded) {
-        item.expanded = true;
-      }
-    } else {
-      item.expanded = !item.expanded;
-      submenu.slideToggle();
-    }
-
-    return false;
-  }
-
   private _shouldMenuCollapse():boolean {
     return window.innerWidth <= layoutSizes.resWidthCollapseSidebar;
   }
-
-  private _selectMenuItem():void {
-
-    let currentMenu = this._sidebarService.setRouter(this._router).selectMenuItem(this.menuItems);
-    this._state.notifyDataChanged('menu.activeLink', currentMenu);
-    // hide menu after natigation on mobile devises
-    if (this._shouldMenuCollapse()) {
-      this.menuCollapse();
-    }
-  }
 }

src/app/theme/components/baSidebar/baSidebar.html

@@ -1,55 +1,6 @@
 <aside class="al-sidebar" (mouseleave)="hoverElemTop=outOfArea" sidebarResize>
-  <ul id="al-sidebar-list" class="al-sidebar-list" baSlimScroll [baSlimScrollOptions]="{height: menuHeight}">
-    <li *ngFor="let item of menuItems" class="al-sidebar-list-item"
-        [ngClass]="{'selected': item.selected && !item.expanded, 'with-sub-menu': item.subMenu, 'ba-sidebar-item-expanded': item.expanded}">
-
-
-      <a *ngIf="!item.path && !item.subMenu" [attr.href]="item.url || ''" [attr.target]="item.target || ''" class="al-sidebar-list-link">
-        <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
-      </a>
-      <a *ngIf="item.path && !item.subMenu" [routerLink]="[item.path]" [attr.target]="item.target || ''" class="al-sidebar-list-link">
-        <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
-      </a>
-
-      <a *ngIf="item.subMenu" (mouseenter)="hoverItem($event, item)" (click)="toggleSubMenu($event, item)"
-         class="al-sidebar-list-link">
-        <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
-        <b class="fa fa-angle-down"
-           *ngIf="item.subMenu"></b>
-      </a>
-
-      <ul *ngIf="item.subMenu" class="al-sidebar-sublist"
-          [ngClass]="{'slide-right': item.slideRight}">
-        <li *ngFor="let subitem of item.subMenu" class="ba-sidebar-sublist-item"
-            [ngClass]="{'selected': subitem.selected, 'with-sub-menu': subitem.subMenu}">
-          <a (mouseenter)="hoverItem($event, item)" *ngIf="subitem.subMenu" (click)="toggleSubMenu($event, subitem);"
-             class="al-sidebar-list-link subitem-submenu-link"><span>{{ subitem.title }}</span>
-            <b class="fa" *ngIf="subitem.subMenu"
-               [ngClass]="{'fa-angle-up': subitem.expanded, 'fa-angle-down': !subitem.expanded}"></b>
-          </a>
-          <ul *ngIf="subitem.subMenu" class="al-sidebar-sublist subitem-submenu-list"
-              [ngClass]="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}">
-            <li *ngFor="let subSubitem of subitem.subMenu" (mouseenter)="hoverItem($event, item)"
-                [ngClass]="{selected: subitem.selected}">
-              <a *ngIf="!item.path" (mouseenter)="hoverItem($event, item)" [attr.href]="subSubitem.url || ''" [attr.target]="subSubitem.target || ''">
-                {{ subSubitem.title }}</a>
-              <a *ngIf="item.path" (mouseenter)="hoverItem($event, item)" [attr.target]="subSubitem.target || ''" [routerLink]="[item.path, subitem.path]">
-                {{ subSubitem.title }}</a>
-            </li>
-          </ul>
-          <a *ngIf="!item.path && !subitem.subMenu" [attr.href]="subitem.url || ''" [routerLink]="[subitem.path || '']"
-             (mouseenter)="hoverItem($event, item)" [attr.target]="subitem.target || ''">
-            {{ subitem.title}}
-          </a>
-          <a *ngIf="item.path && !subitem.subMenu" [routerLink]="[item.path, subitem.path]"
-             (mouseenter)="hoverItem($event, item)" [attr.target]="subitem.target || ''">
-            {{ subitem.title}}
-          </a>
-        </li>
-      </ul>
-
-    </li>
-  </ul>
-  <div class="sidebar-hover-elem" [ngStyle]="{top: hoverElemTop + 'px', height: hoverElemHeight + 'px'}"
-       [ngClass]="{'show-hover-elem': showHoverElem }"></div>
+  <ba-menu [menuRoutes]="routes"
+           [menuHeight]="menuHeight"
+           [sidebarCollapsed]="isMenuCollapsed"
+           (expandMenu)="menuExpand()"></ba-menu>
 </aside>

src/app/theme/components/baSidebar/baSidebar.scss

@@ -135,7 +135,7 @@ a.al-sidebar-list-link {
   &.expanded {
     display: block;
   }
-  > li {
+  > ba-menu-item > li {
     display: block;
     float: none;
     padding: 0;

src/app/theme/components/baSidebar/baSidebar.service.ts

@@ -1,62 +0,0 @@
-import {Injectable} from '@angular/core';
-import {menuItems} from '../../../app.menu';
-import {Router, UrlTree} from "@angular/router";
-
-@Injectable()
-export class BaSidebarService {
-
-  private _router:Router;
-
-  public getMenuItems():Array<Object> {
-    return menuItems;
-  }
-
-  public setRouter(router:Router):BaSidebarService {
-    this._router = router;
-    return this;
-  }
-
-  public selectMenuItem(items:Array<any>) {
-    let currentMenu;
-
-    let assignCurrent = (menu) => (menu.selected ? currentMenu = menu : null);
-
-    items.forEach((menu:any) => {
-
-      this._selectItem([menu.path], menu);
-      assignCurrent(menu);
-
-      if (menu.subMenu) {
-        menu.subMenu.forEach((subMenu) => {
-          this._selectItem([menu.path, subMenu.path], subMenu, menu);
-          assignCurrent(subMenu);
-        });
-      }
-    });
-    return currentMenu;
-  }
-
-  private _selectItem(instructions, item, parentMenu = null) {
-    let route = this._generateRoute(instructions);
-    item.selected = !item.disabled && this._isCurrent(route);
-    if (parentMenu) {
-      parentMenu.expanded = parentMenu.expanded || item.selected;
-    }
-  }
-
-  private _isCurrent(route:UrlTree):boolean {
-    if (route) {
-      return this._router.url === this._router.serializeUrl(route);
-    }
-    return false;
-  }
-
-  private _generateRoute(instructions:any[]):UrlTree {
-    instructions = instructions.filter(item => !!item);
-
-    if (instructions.length != 0) {
-      return this._router.createUrlTree(instructions);
-    }
-    return null;
-  }
-}

src/app/theme/components/index.ts

@@ -1,6 +1,7 @@
 export * from './baPageTop';
 export * from './baMsgCenter';
 export * from './baSidebar';
+export * from './baMenu';
 export * from './baContentTop';
 export * from './baCard';
 export * from './baAmChart';