mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +01:00
sidebar -> baSidebar
This commit is contained in:
parent
fd8f21aaff
commit
b534eafbd0
6 changed files with 31 additions and 33 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
Loading…
Add table
Add a link
Reference in a new issue