mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-17 07:50:12 +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 {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">
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
@ -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);
|
||||||
Loading…
Add table
Add a link
Reference in a new issue