diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 4477ef84..a7cb7668 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -2,9 +2,8 @@ import {Component, ViewEncapsulation} from 'angular2/core'; import {RouteConfig, Router} from 'angular2/router'; import {Subscription} from 'rxjs/Subscription'; -import {SidebarStateService} from './theme/sidebar/sidebarState.service'; - import {Pages} from './pages'; +import {ThemeGlobal} from "./theme/theme.global"; // TODO: is it really the best place to globally require that dependency? require("!style!css!sass!./theme/sass/_ionicons.scss"); @@ -16,7 +15,7 @@ require("!style!css!sass!./theme/sass/_ionicons.scss"); @Component({ selector: 'app', pipes: [], - providers: [SidebarStateService], + providers: [], encapsulation: ViewEncapsulation.None, styles: [require('normalize.css'), require('./app.scss')], template: ` @@ -37,14 +36,16 @@ export class App { isMenuCollapsed:boolean = false; - private _sidebarStateSubscription:Subscription; + private _themeGlobalSubscription:Subscription; - constructor(private _sidebarStateService:SidebarStateService) { - this._sidebarStateSubscription = this._sidebarStateService.getStateStream().subscribe((isCollapsed) => this.isMenuCollapsed = isCollapsed); + constructor(private _themeGlobal:ThemeGlobal) { + this._themeGlobalSubscription = this._themeGlobal.getDataStream().subscribe((data) => { + this.isMenuCollapsed = data['menu.isCollapsed'] != null ? data['menu.isCollapsed'] : this.isMenuCollapsed; + }); } ngOnDestroy() { // prevent memory leak when component destroyed - this._sidebarStateSubscription.unsubscribe(); + this._themeGlobalSubscription.unsubscribe(); } } diff --git a/src/app/index.ts b/src/app/index.ts index 9f3f7b13..b37a9e1b 100644 --- a/src/app/index.ts +++ b/src/app/index.ts @@ -1,7 +1,8 @@ // App +import {ThemeGlobal} from "./theme/theme.global"; export * from './app.component'; // Application wide providers export const APP_PROVIDERS = [ - + ThemeGlobal ]; diff --git a/src/app/theme/pageTop/pageTop.component.ts b/src/app/theme/pageTop/pageTop.component.ts index e1bcd148..a95e0a4b 100644 --- a/src/app/theme/pageTop/pageTop.component.ts +++ b/src/app/theme/pageTop/pageTop.component.ts @@ -1,10 +1,9 @@ import {Component, ViewEncapsulation} from 'angular2/core'; -import {Subscription} from 'rxjs/Subscription'; import {MsgCenter} from '../msgCenter'; import {ProfilePicturePipe} from '../pipes/image/profile-picture.pipe'; import {ScrollPosition} from '../directives/scrollPosition.directive'; -import {SidebarStateService} from '../sidebar/sidebarState.service' +import {ThemeGlobal} from "../theme.global"; @Component({ selector: 'page-top', @@ -17,15 +16,14 @@ export class PageTop { isScrolled:Boolean = false; isMenuCollapsed:boolean = false; - private _sidebarStateSubscription:Subscription; - constructor(private _sidebarStateService:SidebarStateService) { - this._sidebarStateSubscription = this._sidebarStateService.getStateStream().subscribe((isCollapsed) => this.isMenuCollapsed = isCollapsed); + constructor(private _themeGlobal:ThemeGlobal) { + } toggleMenu() { this.isMenuCollapsed = !this.isMenuCollapsed; - this._sidebarStateService.stateChanged(this.isMenuCollapsed); + this._themeGlobal.setData('menu.isCollapsed', this.isMenuCollapsed); } scrolledChanged(isScrolled) { diff --git a/src/app/theme/sidebar/sidebar.component.ts b/src/app/theme/sidebar/sidebar.component.ts index 2b6d14b8..2dbbcbd3 100644 --- a/src/app/theme/sidebar/sidebar.component.ts +++ b/src/app/theme/sidebar/sidebar.component.ts @@ -3,7 +3,7 @@ import {Router} from 'angular2/router'; import {layoutSizes} from '../theme.constants'; import {SidebarService} from './sidebar.service'; -import {SidebarStateService} from './sidebarState.service'; +import {ThemeGlobal} from "../theme.global"; @Component({ selector: 'sidebar', @@ -31,7 +31,7 @@ export class Sidebar { constructor(private _elementRef:ElementRef, private _router:Router, private _sidebarService:SidebarService, - private _sidebarStateService:SidebarStateService) { + private _themeGlobal:ThemeGlobal) { } @@ -68,7 +68,7 @@ export class Sidebar { menuCollapseStateChange(isCollapsed) { this.isMenuCollapsed = isCollapsed; - this._sidebarStateService.stateChanged(this.isMenuCollapsed); + this._themeGlobal.setData('menu.isCollapsed', this.isMenuCollapsed); } hoverItem($event) { @@ -100,18 +100,25 @@ export class Sidebar { } private selectMenuItem() { + let currentMenu; + let isCurrent = (instruction) => (instruction ? this._router.isRouteActive(this._router.generate([instruction])) : false); + let assignCurrent = (menu) => (menu.selected ? currentMenu = menu : null); this.menuItems.forEach(function (menu: any) { menu.selected = isCurrent(menu.name); menu.expanded = menu.expanded || menu.selected; + assignCurrent(menu); if (menu.subMenu) { menu.subMenu.forEach(function (subMenu) { subMenu.selected = isCurrent(subMenu.name) && !subMenu.disabled; + assignCurrent(menu); }); } }); + // notifies all subscribers + this._themeGlobal.setData('menu.activeLink', currentMenu); } } diff --git a/src/app/theme/sidebar/sidebarState.service.ts b/src/app/theme/sidebar/sidebarState.service.ts deleted file mode 100644 index 6facaf27..00000000 --- a/src/app/theme/sidebar/sidebarState.service.ts +++ /dev/null @@ -1,21 +0,0 @@ -import {Injectable} from 'angular2/core' -import {Subject} from 'rxjs/Subject'; - -@Injectable() -export class SidebarStateService { - - // Observable string sources - private _isCollapsed = new Subject(); - - // Observable string streams - isCollapsedStream$ = this._isCollapsed.asObservable(); - - // Service message commands - stateChanged(isCollapsed:boolean) { - this._isCollapsed.next(isCollapsed) - } - - getStateStream() { - return this.isCollapsedStream$; - } -} diff --git a/src/app/theme/theme.global.ts b/src/app/theme/theme.global.ts new file mode 100644 index 00000000..013c4d74 --- /dev/null +++ b/src/app/theme/theme.global.ts @@ -0,0 +1,24 @@ +import {Injectable} from 'angular2/core' +import {Subject} from 'rxjs/Subject'; + +@Injectable() +export class ThemeGlobal { + private _data = new Subject(); + + dataStream$ = this._data.asObservable(); + + constructor() { + } + + setData(key, value) { + let current = this._data[key]; + if (current != value) { + this._data[key] = value; + this._data.next(this._data); + } + } + + getDataStream() { + return this.dataStream$; + } +}