sidebar -> baSidebar

This commit is contained in:
nixa 2016-05-18 17:38:46 +03:00
parent fd8f21aaff
commit b534eafbd0
6 changed files with 31 additions and 33 deletions

View file

@ -1,7 +1,7 @@
import {Component, ViewEncapsulation} from '@angular/core';
import {RouteConfig} from '@angular/router-deprecated';
import {BaPageTop, BaContentTop, Sidebar, BaBackTop} from '../theme/components';
import {BaPageTop, BaContentTop, BaSidebar, BaBackTop} from '../theme/components';
import {Dashboard} from './dashboard';
import {Ui} from './ui';
@ -14,9 +14,9 @@ import {Tables} from './tables';
selector: 'pages',
encapsulation: ViewEncapsulation.None,
styles: [],
directives: [BaPageTop, Sidebar, BaContentTop, BaBackTop],
directives: [BaPageTop, BaSidebar, BaContentTop, BaBackTop],
template: `
<sidebar></sidebar>
<ba-sidebar></ba-sidebar>
<ba-page-top></ba-page-top>
<div class="al-main">
<div class="al-content">

View file

@ -3,52 +3,50 @@ import {Router} from '@angular/router-deprecated';
import {AppState} from '../../../app.state';
import {layoutSizes} from '../../../theme';
import {SidebarService} from './sidebar.service';
import {BaSidebarService} from './baSidebar.service';
@Component({
selector: 'sidebar',
selector: 'ba-sidebar',
encapsulation: ViewEncapsulation.None,
styles: [require('./sidebar.scss')],
template: require('./sidebar.html'),
providers: [SidebarService],
directives: [],
pipes: []
providers: [BaSidebarService]
})
export class Sidebar {
export class BaSidebar {
menuItems:Array<any>;
menuHeight:number;
isMenuCollapsed:boolean;
public menuItems:Array<any>;
public menuHeight:number;
public isMenuCollapsed:boolean;
showHoverElem:boolean;
hoverElemHeight:number;
hoverElemTop:number;
public showHoverElem:boolean;
public hoverElemHeight:number;
public hoverElemTop:number;
outOfArea:number = -200;
public outOfArea:number = -200;
isMenuShouldCollapsed:boolean = false;
public isMenuShouldCollapsed:boolean = false;
constructor(private _elementRef:ElementRef,
private _router:Router,
private _sidebarService:SidebarService,
private _sidebarService:BaSidebarService,
private _state:AppState) {
this.menuItems = this._sidebarService.getMenuItems();
this._router.root.subscribe((path) => this._selectMenuItem(path));
}
ngOnInit() {
public ngOnInit():void {
if (this._shouldMenuCollapse()) {
this.menuCollapse();
}
}
ngAfterViewInit() {
public ngAfterViewInit():void {
this.updateSidebarHeight();
}
@HostListener('window:resize')
onWindowResize() {
public onWindowResize():void {
var isMenuShouldCollapsed = this._shouldMenuCollapse();
@ -59,32 +57,32 @@ export class Sidebar {
this.updateSidebarHeight();
}
menuExpand() {
public menuExpand():void {
this.menuCollapseStateChange(false);
}
menuCollapse() {
public menuCollapse():void {
this.menuCollapseStateChange(true);
}
menuCollapseStateChange(isCollapsed) {
public menuCollapseStateChange(isCollapsed):void {
this.isMenuCollapsed = isCollapsed;
this._state.notifyDataChanged('menu.isCollapsed', this.isMenuCollapsed);
}
hoverItem($event) {
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;
}
updateSidebarHeight() {
public updateSidebarHeight():void {
// TODO: get rid of magic 84 constant
this.menuHeight = this._elementRef.nativeElement.childNodes[0].clientHeight - 84;
}
toggleSubMenu($event, item) {
public toggleSubMenu($event, item):boolean {
var submenu = $($event.currentTarget).next();
if (this.isMenuCollapsed) {
@ -100,11 +98,11 @@ export class Sidebar {
return false;
}
private _shouldMenuCollapse() {
private _shouldMenuCollapse():boolean {
return window.innerWidth <= layoutSizes.resWidthCollapseSidebar;
}
private _selectMenuItem(currentPath = null) {
private _selectMenuItem(currentPath = null):void {
let currentMenu = this._sidebarService.setRouter(this._router).selectMenuItem(this.menuItems, currentPath);
this._state.notifyDataChanged('menu.activeLink', currentMenu);

View file

@ -2,20 +2,20 @@ import {Injectable} from '@angular/core';
import {menuItems} from '../../../app.menu';
@Injectable()
export class SidebarService {
export class BaSidebarService {
private _router;
getMenuItems() {
public getMenuItems():Array<Object> {
return menuItems;
}
setRouter(router) {
public setRouter(router): BaSidebarService {
this._router = router;
return this;
}
selectMenuItem(items:Array<any>, currentPath:string) {
public selectMenuItem(items:Array<any>, currentPath:string) {
let currentMenu;
let assignCurrent = (menu) => (menu.selected ? currentMenu = menu : null);