Skip to content

Commit

Permalink
feat(sidenav): open all sidenavs from MdSidenavContainer (#2870)
Browse files Browse the repository at this point in the history
- added `open` and `close` functions that applies to both sidenavs in the container and resolves when both are finished

fixes #2591
  • Loading branch information
EladBezalel authored and mmalerba committed Apr 25, 2017
1 parent fb7947f commit 79306ad
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 7 deletions.
52 changes: 45 additions & 7 deletions src/lib/sidenav/sidenav.spec.ts
Original file line number Diff line number Diff line change
@@ -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<any>) {
let sidenav: any = fixture.debugElement.query(By.directive(MdSidenav)).componentInstance;
sidenav._onTransitionEnd(<any> {
Expand All @@ -23,7 +22,6 @@ describe('MdSidenav', () => {
imports: [MdSidenavModule.forRoot(), A11yModule.forRoot(), PlatformModule.forRoot()],
declarations: [
BasicTestApp,
SidenavContainerTwoSidenavTestApp,
SidenavContainerNoSidenavTestApp,
SidenavSetToOpenedFalse,
SidenavSetToOpenedTrue,
Expand Down Expand Up @@ -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: `<md-sidenav-container></md-sidenav-container>`})
Expand All @@ -455,11 +490,14 @@ class SidenavContainerNoSidenavTestApp { }
@Component({
template: `
<md-sidenav-container>
<md-sidenav> </md-sidenav>
<md-sidenav> </md-sidenav>
<md-sidenav align="start"> </md-sidenav>
<md-sidenav align="end"> </md-sidenav>
</md-sidenav-container>`,
})
class SidenavContainerTwoSidenavTestApp { }
class SidenavContainerTwoSidenavTestApp {
@ViewChild(MdSidenavContainer)
sidenavContainer: MdSidenavContainer;
}

/** Test component that contains an MdSidenavContainer and one MdSidenav. */
@Component({
Expand Down
10 changes: 10 additions & 0 deletions src/lib/sidenav/sidenav.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 79306ad

Please sign in to comment.