@@ -13,6 +13,7 @@ import {
13
13
Type ,
14
14
ChangeDetectionStrategy ,
15
15
EventEmitter ,
16
+ Renderer
16
17
} from 'angular2/core' ;
17
18
import { BaseException } from 'angular2/src/facade/exceptions' ;
18
19
import { Dir } from '../../core/rtl/dir' ;
@@ -49,7 +50,7 @@ export class MdSidenav {
49
50
@Input ( ) mode : 'over' | 'push' | 'side' = 'over' ;
50
51
51
52
/** Whether the sidenav is opened. */
52
- @Input ( 'opened' ) private _opened : boolean ;
53
+ @Input ( 'opened' ) private _opened : boolean = false ;
53
54
54
55
/** Event emitted when the sidenav is being opened. Use this to synchronize animations. */
55
56
@Output ( 'open-start' ) onOpenStart = new EventEmitter < void > ( ) ;
@@ -247,7 +248,8 @@ export class MdSidenavLayout implements AfterContentInit {
247
248
get start ( ) { return this . _start ; }
248
249
get end ( ) { return this . _end ; }
249
250
250
- constructor ( @Optional ( ) @Host ( ) private _dir : Dir ) {
251
+ constructor ( @Optional ( ) @Host ( ) private _dir : Dir , private _element : ElementRef ,
252
+ private _renderer : Renderer ) {
251
253
// If a `Dir` directive exists up the tree, listen direction changes and update the left/right
252
254
// properties to point to the proper start/end.
253
255
if ( _dir != null ) {
@@ -258,9 +260,20 @@ export class MdSidenavLayout implements AfterContentInit {
258
260
ngAfterContentInit ( ) {
259
261
// On changes, assert on consistency.
260
262
this . _sidenavs . changes . subscribe ( ( ) => this . _validateDrawers ( ) ) ;
263
+ this . _sidenavs . forEach ( ( sidenav : MdSidenav ) => this . _watchSidenavToggle ( sidenav ) ) ;
261
264
this . _validateDrawers ( ) ;
262
265
}
263
266
267
+ private _watchSidenavToggle ( sidenav : MdSidenav ) : void {
268
+ if ( ! sidenav || sidenav . mode === 'side' ) { return ; }
269
+ sidenav . onOpen . subscribe ( ( ) => this . _setBackdropClass ( sidenav , true ) ) ;
270
+ sidenav . onClose . subscribe ( ( ) => this . _setBackdropClass ( sidenav , false ) ) ;
271
+ }
272
+
273
+ private _setBackdropClass ( sidenav : MdSidenav , bool : boolean ) : void {
274
+ this . _renderer . setElementClass ( this . _element . nativeElement , 'md-sidenav-opened' , bool ) ;
275
+ }
276
+
264
277
265
278
/** The sidenav at the start/end alignment, independent of direction. */
266
279
private _start : MdSidenav ;
@@ -318,9 +331,13 @@ export class MdSidenavLayout implements AfterContentInit {
318
331
}
319
332
}
320
333
321
- private _isShowingBackdrop ( ) {
322
- return ( this . _start != null && this . _start . mode != 'side' && this . _start . opened )
323
- || ( this . _end != null && this . _end . mode != 'side' && this . _end . opened ) ;
334
+ private _isShowingBackdrop ( ) : boolean {
335
+ return ( this . _isSidenavOpen ( this . _start ) && this . _start . mode != 'side' )
336
+ || ( this . _isSidenavOpen ( this . _end ) && this . _end . mode != 'side' ) ;
337
+ }
338
+
339
+ private _isSidenavOpen ( side : MdSidenav ) : boolean {
340
+ return side != null && side . opened ;
324
341
}
325
342
326
343
/**
@@ -330,10 +347,7 @@ export class MdSidenavLayout implements AfterContentInit {
330
347
* @private
331
348
*/
332
349
private _getSidenavEffectiveWidth ( sidenav : MdSidenav , mode : string ) : number {
333
- if ( sidenav != null && sidenav . mode == mode && sidenav . opened ) {
334
- return sidenav . _width ;
335
- }
336
- return 0 ;
350
+ return ( this . _isSidenavOpen ( sidenav ) && sidenav . mode == mode ) ? sidenav . _width : 0 ;
337
351
}
338
352
339
353
private _getMarginLeft ( ) {
0 commit comments