diff --git a/src/app/app.actions.ts b/src/app/app.actions.ts deleted file mode 100644 index 3660dc77ac..0000000000 --- a/src/app/app.actions.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { HeaderActions } from "./header/header.actions"; - -export default [ - HeaderActions -]; diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 5170832e41..1f1a9237b5 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -3,10 +3,13 @@ import { ChangeDetectionStrategy, ViewEncapsulation, OnDestroy, - OnInit + OnInit, HostListener } from "@angular/core"; import { Router } from "@angular/router"; import { TranslateService } from "ng2-translate"; +import { HostWindowState } from "./shared/host-window.reducer"; +import { Store } from "@ngrx/store"; +import { HostWindowActions } from "./shared/host-window.actions"; @Component({ changeDetection: ChangeDetectionStrategy.Default, @@ -27,7 +30,8 @@ export class AppComponent implements OnDestroy, OnInit { constructor( private translate: TranslateService, - private router: Router + private router: Router, + private store: Store ) { // this language will be used as a fallback when a translation isn't found in the current language translate.setDefaultLang('en'); @@ -47,4 +51,11 @@ export class AppComponent implements OnDestroy, OnInit { } } + @HostListener('window:resize', ['$event']) + private onResize(event): void { + this.store.dispatch( + HostWindowActions.resize(event.target.innerWidth, event.target.innerHeight) + ); + } + } diff --git a/src/app/app.effects.ts b/src/app/app.effects.ts new file mode 100644 index 0000000000..1461fca68e --- /dev/null +++ b/src/app/app.effects.ts @@ -0,0 +1,6 @@ +import { EffectsModule } from "@ngrx/effects"; +import { HeaderEffects } from "./header/header.effects"; + +export default [ + EffectsModule.run(HeaderEffects) +]; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index decf650d78..5b89dc00bc 100755 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -10,9 +10,8 @@ import { HeaderComponent } from './header/header.component'; import { StoreModule } from "@ngrx/store"; import { StoreDevtoolsModule } from "@ngrx/store-devtools"; -import reducers from './app.reducers' -import actions from './app.actions' - +import reducers from './app.reducers'; +import effects from './app.effects'; @NgModule({ declarations: [ @@ -31,6 +30,7 @@ import actions from './app.actions' * based application. */ StoreModule.provideStore(reducers), + /** * Store devtools instrument the store retaining past versions of state * and recalculating new states. This enables powerful time-travel @@ -42,9 +42,10 @@ import actions from './app.actions' * See: https://github.com/zalmoxisus/redux-devtools-extension */ StoreDevtoolsModule.instrumentOnlyWithExtension(), + + effects ], providers: [ - actions ] }) export class AppModule { diff --git a/src/app/app.reducers.ts b/src/app/app.reducers.ts index 415006cd51..79238d5197 100644 --- a/src/app/app.reducers.ts +++ b/src/app/app.reducers.ts @@ -1,5 +1,7 @@ import { headerReducer } from './header/header.reducer'; +import { hostWindowReducer } from "./shared/host-window.reducer"; export default { - headerReducer + headerReducer, + hostWindowReducer } diff --git a/src/app/header/header.actions.ts b/src/app/header/header.actions.ts index 5fdbe0abc6..e3f64c1019 100644 --- a/src/app/header/header.actions.ts +++ b/src/app/header/header.actions.ts @@ -1,24 +1,22 @@ -import { Injectable } from "@angular/core"; import { Action } from "@ngrx/store"; -@Injectable() export class HeaderActions { static COLLAPSE = 'dspace/header/COLLAPSE'; - collapse(): Action { + static collapse(): Action { return { type: HeaderActions.COLLAPSE } } static EXPAND = 'dspace/header/EXPAND'; - expand(): Action { + static expand(): Action { return { type: HeaderActions.EXPAND } } static TOGGLE = 'dspace/header/TOGGLE'; - toggle(): Action { + static toggle(): Action { return { type: HeaderActions.TOGGLE } diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index 2139023c99..20fc37fb4d 100644 --- a/src/app/header/header.component.ts +++ b/src/app/header/header.component.ts @@ -16,7 +16,6 @@ export class HeaderComponent implements OnDestroy, OnInit { constructor( private router: Router, - private actions: HeaderActions, private store: Store ) { } @@ -37,21 +36,16 @@ export class HeaderComponent implements OnDestroy, OnInit { } } - @HostListener('window:resize', ['$event']) - private onResize(event): void { - this.collapse(); - } - private collapse(): void { - this.store.dispatch(this.actions.collapse()); + this.store.dispatch(HeaderActions.collapse()); } private expand(): void { - this.store.dispatch(this.actions.expand()); + this.store.dispatch(HeaderActions.expand()); } public toggle(): void { - this.store.dispatch(this.actions.toggle()); + this.store.dispatch(HeaderActions.toggle()); } } diff --git a/src/app/header/header.effects.ts b/src/app/header/header.effects.ts new file mode 100644 index 0000000000..d8dfd9ad8d --- /dev/null +++ b/src/app/header/header.effects.ts @@ -0,0 +1,16 @@ +import { Injectable } from "@angular/core"; +import { Effect, Actions } from '@ngrx/effects' +import { HeaderActions } from "./header.actions"; +import { HostWindowActions } from "../shared/host-window.actions"; + +@Injectable() +export class HeaderEffects { + + constructor( + private actions$: Actions + ) { } + + @Effect() resize$ = this.actions$ + .ofType(HostWindowActions.RESIZE) + .map(() => HeaderActions.collapse()); +} diff --git a/src/app/shared/host-window.actions.ts b/src/app/shared/host-window.actions.ts new file mode 100644 index 0000000000..de41c69564 --- /dev/null +++ b/src/app/shared/host-window.actions.ts @@ -0,0 +1,14 @@ +import { Action } from "@ngrx/store"; + +export class HostWindowActions { + static RESIZE = 'dspace/host-window/RESIZE'; + static resize(newWidth: number, newHeight: number): Action { + return { + type: HostWindowActions.RESIZE, + payload: { + width: newWidth, + height: newHeight + } + } + } +} diff --git a/src/app/shared/host-window.reducer.ts b/src/app/shared/host-window.reducer.ts new file mode 100644 index 0000000000..4b8e1d3cb9 --- /dev/null +++ b/src/app/shared/host-window.reducer.ts @@ -0,0 +1,25 @@ +import { Action } from "@ngrx/store"; +import { HostWindowActions } from "./host-window.actions"; + +export interface HostWindowState { + width: number; + height: number; +} + +const initialState: HostWindowState = { + width: null, + height: null +}; + +export const hostWindowReducer = (state = initialState, action: Action): HostWindowState => { + switch (action.type) { + + case HostWindowActions.RESIZE: { + return Object.assign({}, state, action.payload); + } + + default: { + return state; + } + } +};