From b4fdcc8886eeedaa8545acda69daa8141bc2528b Mon Sep 17 00:00:00 2001 From: Elad Bezalel Date: Wed, 15 Feb 2017 23:04:00 +0200 Subject: [PATCH] feat(sidenav): open all sidenavs from MdSidenavContainer - added `open` and `close` functions that applies to both sidenavs in the container and resolves when both are finished fixes #2591 --- src/lib/sidenav/sidenav.spec.ts | 52 ++++++++++++++++++++++++++++----- src/lib/sidenav/sidenav.ts | 10 +++++++ 2 files changed, 55 insertions(+), 7 deletions(-) diff --git a/src/lib/sidenav/sidenav.spec.ts b/src/lib/sidenav/sidenav.spec.ts index 073a3f5378b5..b793ab517793 100644 --- a/src/lib/sidenav/sidenav.spec.ts +++ b/src/lib/sidenav/sidenav.spec.ts @@ -1,12 +1,11 @@ import {fakeAsync, async, tick, ComponentFixture, TestBed} from '@angular/core/testing'; -import {Component} from '@angular/core'; +import {Component, ViewChild} from '@angular/core'; import {By} from '@angular/platform-browser'; -import {MdSidenav, MdSidenavModule, MdSidenavToggleResult} from './index'; +import {MdSidenav, MdSidenavModule, MdSidenavToggleResult, MdSidenavContainer} from './index'; import {A11yModule} from '../core/a11y/index'; import {PlatformModule} from '../core/platform/index'; import {ESCAPE} from '../core/keyboard/keycodes'; - function endSidenavTransition(fixture: ComponentFixture) { let sidenav: any = fixture.debugElement.query(By.directive(MdSidenav)).componentInstance; sidenav._onTransitionEnd( { @@ -23,7 +22,6 @@ describe('MdSidenav', () => { imports: [MdSidenavModule.forRoot(), A11yModule.forRoot(), PlatformModule.forRoot()], declarations: [ BasicTestApp, - SidenavContainerTwoSidenavTestApp, SidenavContainerNoSidenavTestApp, SidenavSetToOpenedFalse, SidenavSetToOpenedTrue, @@ -446,6 +444,43 @@ describe('MdSidenav', () => { }); }); +describe('MdSidenavContainer', () => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdSidenavModule.forRoot(), A11yModule.forRoot(), PlatformModule.forRoot()], + declarations: [ + SidenavContainerTwoSidenavTestApp + ], + }); + + TestBed.compileComponents(); + })); + + describe('methods', () => { + it('should be able to open and close', async(() => { + const fixture = TestBed.createComponent(SidenavContainerTwoSidenavTestApp); + + fixture.detectChanges(); + + const testComponent: SidenavContainerTwoSidenavTestApp = + fixture.debugElement.componentInstance; + const sidenavs = fixture.debugElement.queryAll(By.directive(MdSidenav)); + + expect(sidenavs.every(sidenav => sidenav.componentInstance.opened)).toBeFalsy(); + + return testComponent.sidenavContainer.open() + .then(() => { + expect(sidenavs.every(sidenav => sidenav.componentInstance.opened)).toBeTruthy(); + + return testComponent.sidenavContainer.close(); + }) + .then(() => { + expect(sidenavs.every(sidenav => sidenav.componentInstance.opened)).toBeTruthy(); + }); + })); + }); +}); + /** Test component that contains an MdSidenavContainer but no MdSidenav. */ @Component({template: ``}) @@ -455,11 +490,14 @@ class SidenavContainerNoSidenavTestApp { } @Component({ template: ` - - + + `, }) -class SidenavContainerTwoSidenavTestApp { } +class SidenavContainerTwoSidenavTestApp { + @ViewChild(MdSidenavContainer) + sidenavContainer: MdSidenavContainer; +} /** Test component that contains an MdSidenavContainer and one MdSidenav. */ @Component({ diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts index b86b0c156d82..a093dcab49e4 100644 --- a/src/lib/sidenav/sidenav.ts +++ b/src/lib/sidenav/sidenav.ts @@ -371,6 +371,16 @@ export class MdSidenavContainer implements AfterContentInit { this._ngZone.onMicrotaskEmpty.first().subscribe(() => this._enableTransitions = true); } + /** Calls `open` of both start and end sidenavs */ + public open() { + return Promise.all([this._start, this._end].map(sidenav => sidenav && sidenav.open())); + } + + /** Calls `close` of both start and end sidenavs */ + public close() { + return Promise.all([this._start, this._end].map(sidenav => sidenav && sidenav.close())); + } + /** * Subscribes to sidenav events in order to set a class on the main container element when the * sidenav is open and the backdrop is visible. This ensures any overflow on the container element