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

View file

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

View file

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