From 5a0b1f021c281f2272b8a8123042194b53c0050f Mon Sep 17 00:00:00 2001 From: Ji Won Shin Date: Wed, 30 Aug 2017 16:17:19 -0700 Subject: [PATCH 1/5] create event for ESCAPE keydown --- src/lib/sidenav/drawer.spec.ts | 20 +++++++++++++++++++- src/lib/sidenav/drawer.ts | 14 ++++++++++---- 2 files changed, 29 insertions(+), 5 deletions(-) diff --git a/src/lib/sidenav/drawer.spec.ts b/src/lib/sidenav/drawer.spec.ts index 6d0a5171a06b..9fda288c202c 100644 --- a/src/lib/sidenav/drawer.spec.ts +++ b/src/lib/sidenav/drawer.spec.ts @@ -102,6 +102,18 @@ describe('MdDrawer', () => { expect(testComponent.backdropClickedCount).toBe(1); })); + it('should emit the escapeKeydown event when ESCAPE key is pressed', () => { + let fixture = TestBed.createComponent(BasicTestApp); + let testComponent: BasicTestApp = fixture.debugElement.componentInstance; + let drawer = fixture.debugElement.query(By.directive(MdDrawer)); + expect(testComponent.escapeKeydownCount).toBe(0); + + dispatchKeyboardEvent(drawer.nativeElement, 'keydown', ESCAPE); + fixture.detectChanges(); + + expect(testComponent.escapeKeydownCount).toBe(1); + }); + it('should close when pressing escape', fakeAsync(() => { let fixture = TestBed.createComponent(BasicTestApp); @@ -386,7 +398,8 @@ class DrawerContainerTwoDrawerTestApp { + (close)="close()" + (escapeKeydown)="escapeKeydown()"> @@ -397,6 +410,7 @@ class BasicTestApp { openCount: number = 0; closeCount: number = 0; backdropClickedCount: number = 0; + escapeKeydownCount: number = 0; @ViewChild('drawerButton') drawerButton: ElementRef; @ViewChild('openButton') openButton: ElementRef; @@ -413,6 +427,10 @@ class BasicTestApp { backdropClicked() { this.backdropClickedCount++; } + + escapeKeydown() { + this.escapeKeydownCount++; + } } @Component({ diff --git a/src/lib/sidenav/drawer.ts b/src/lib/sidenav/drawer.ts index 4a00b86a035f..c8c277856499 100644 --- a/src/lib/sidenav/drawer.ts +++ b/src/lib/sidenav/drawer.ts @@ -118,7 +118,7 @@ export class MdDrawer implements AfterContentInit, OnDestroy { /** Mode of the drawer; one of 'over', 'push' or 'side'. */ @Input() mode: 'over' | 'push' | 'side' = 'over'; - /** Whether the drawer can be closed with the escape key or not. */ + /** Whether the drawer can be closed with the escape key or by clicking on the backdrop. */ @Input() get disableClose(): boolean { return this._disableClose; } set disableClose(value: boolean) { this._disableClose = coerceBooleanProperty(value); } @@ -152,6 +152,9 @@ export class MdDrawer implements AfterContentInit, OnDestroy { /** Event emitted when the drawer's position changes. */ @Output('positionChanged') onPositionChanged = new EventEmitter(); + /** Event emitted when ESCAPE is pressed. */ + @Output() escapeKeydown = new EventEmitter(); + /** @deprecated */ @Output('align-changed') onAlignChanged = new EventEmitter(); @@ -259,9 +262,12 @@ export class MdDrawer implements AfterContentInit, OnDestroy { * @docs-private */ handleKeydown(event: KeyboardEvent) { - if (event.keyCode === ESCAPE && !this.disableClose) { - this.close(); - event.stopPropagation(); + if (event.keyCode === ESCAPE) { + this.escapeKeydown.emit(); + if (!this.disableClose) { + this.close(); + event.stopPropagation(); + } } } From 6024bb67898b003d63e887baf22c59fdb259f0c4 Mon Sep 17 00:00:00 2001 From: Ji Won Shin Date: Wed, 6 Sep 2017 14:48:30 -0700 Subject: [PATCH 2/5] revert changes and update doc instead --- src/lib/sidenav/drawer.spec.ts | 20 +------------------- src/lib/sidenav/drawer.ts | 12 +++--------- src/lib/sidenav/sidenav.md | 16 ++++++++++++++++ 3 files changed, 20 insertions(+), 28 deletions(-) diff --git a/src/lib/sidenav/drawer.spec.ts b/src/lib/sidenav/drawer.spec.ts index 9fda288c202c..6d0a5171a06b 100644 --- a/src/lib/sidenav/drawer.spec.ts +++ b/src/lib/sidenav/drawer.spec.ts @@ -102,18 +102,6 @@ describe('MdDrawer', () => { expect(testComponent.backdropClickedCount).toBe(1); })); - it('should emit the escapeKeydown event when ESCAPE key is pressed', () => { - let fixture = TestBed.createComponent(BasicTestApp); - let testComponent: BasicTestApp = fixture.debugElement.componentInstance; - let drawer = fixture.debugElement.query(By.directive(MdDrawer)); - expect(testComponent.escapeKeydownCount).toBe(0); - - dispatchKeyboardEvent(drawer.nativeElement, 'keydown', ESCAPE); - fixture.detectChanges(); - - expect(testComponent.escapeKeydownCount).toBe(1); - }); - it('should close when pressing escape', fakeAsync(() => { let fixture = TestBed.createComponent(BasicTestApp); @@ -398,8 +386,7 @@ class DrawerContainerTwoDrawerTestApp { + (close)="close()"> @@ -410,7 +397,6 @@ class BasicTestApp { openCount: number = 0; closeCount: number = 0; backdropClickedCount: number = 0; - escapeKeydownCount: number = 0; @ViewChild('drawerButton') drawerButton: ElementRef; @ViewChild('openButton') openButton: ElementRef; @@ -427,10 +413,6 @@ class BasicTestApp { backdropClicked() { this.backdropClickedCount++; } - - escapeKeydown() { - this.escapeKeydownCount++; - } } @Component({ diff --git a/src/lib/sidenav/drawer.ts b/src/lib/sidenav/drawer.ts index c8c277856499..a045a922afa2 100644 --- a/src/lib/sidenav/drawer.ts +++ b/src/lib/sidenav/drawer.ts @@ -152,9 +152,6 @@ export class MdDrawer implements AfterContentInit, OnDestroy { /** Event emitted when the drawer's position changes. */ @Output('positionChanged') onPositionChanged = new EventEmitter(); - /** Event emitted when ESCAPE is pressed. */ - @Output() escapeKeydown = new EventEmitter(); - /** @deprecated */ @Output('align-changed') onAlignChanged = new EventEmitter(); @@ -262,12 +259,9 @@ export class MdDrawer implements AfterContentInit, OnDestroy { * @docs-private */ handleKeydown(event: KeyboardEvent) { - if (event.keyCode === ESCAPE) { - this.escapeKeydown.emit(); - if (!this.disableClose) { - this.close(); - event.stopPropagation(); - } + if (event.keyCode === ESCAPE && !this.disableClose) { + this.close(); + event.stopPropagation(); } } diff --git a/src/lib/sidenav/sidenav.md b/src/lib/sidenav/sidenav.md index e58f54c3faee..24175ba1af74 100644 --- a/src/lib/sidenav/sidenav.md +++ b/src/lib/sidenav/sidenav.md @@ -70,3 +70,19 @@ html, body, material-app, md-sidenav-container, .my-content { ### FABs inside sidenav For a sidenav with a FAB (Floating Action Button) or other floating element, the recommended approach is to place the FAB outside of the scrollable region and absolutely position it. + +### Sidenav vs. Drawer +The difference between sidenav and drawer is that the sidenav takes up fullscreen whereas drawer is a smaller element +that takes up a subsection of the screen. `md-sidenav` has to be placed inside `md-sidenav-container` and `md-drawer` +has to be placed inside `md-drawer-container`. More functionalities will be added to sidenav in the future. + + +### Disabling closing of sidenav and drawer +By default, sidenav and drawer can be closed either by clicking on the backdrop or by pressing ESCAPE. +`disableClose` attribute can be set on `md-drawer` or `md-sidenav` to disable closing by two methods. To enable one +of the two methods to allow closing with `disableClose` attribute set, then custom event handlers can be used as below: +```html + + + +``` \ No newline at end of file From 837b7a251afea48637460456e0dd640f01e37307 Mon Sep 17 00:00:00 2001 From: Ji Won Shin Date: Thu, 7 Sep 2017 09:48:24 -0700 Subject: [PATCH 3/5] address comments --- src/lib/sidenav/sidenav.md | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/lib/sidenav/sidenav.md b/src/lib/sidenav/sidenav.md index 24175ba1af74..2b3ee873cf2b 100644 --- a/src/lib/sidenav/sidenav.md +++ b/src/lib/sidenav/sidenav.md @@ -18,6 +18,14 @@ A sidenav container may contain one or two `` elements. When there a `` elements, each must be placed on a different side of the container. See the section on positioning below. + +### Sidenav vs. Drawer +The difference between sidenav and drawer is that the sidenav takes up fullscreen whereas drawer is a smaller element +that takes up a subsection of the screen. `md-sidenav` has to be placed inside `md-sidenav-container` and `md-drawer` +has to be placed inside `md-drawer-container`. Currently `md-drawer` and `md-sidenav` support all the same features. +However, in the future we expect to add different features specific to the different use cases. + + ### Sidenav mode The sidenav can render in one of three different ways based on the `mode` property. @@ -71,18 +79,14 @@ html, body, material-app, md-sidenav-container, .my-content { For a sidenav with a FAB (Floating Action Button) or other floating element, the recommended approach is to place the FAB outside of the scrollable region and absolutely position it. -### Sidenav vs. Drawer -The difference between sidenav and drawer is that the sidenav takes up fullscreen whereas drawer is a smaller element -that takes up a subsection of the screen. `md-sidenav` has to be placed inside `md-sidenav-container` and `md-drawer` -has to be placed inside `md-drawer-container`. More functionalities will be added to sidenav in the future. - ### Disabling closing of sidenav and drawer By default, sidenav and drawer can be closed either by clicking on the backdrop or by pressing ESCAPE. -`disableClose` attribute can be set on `md-drawer` or `md-sidenav` to disable closing by two methods. To enable one -of the two methods to allow closing with `disableClose` attribute set, then custom event handlers can be used as below: +The `disableClose` attribute can be set on `md-drawer` or `md-sidenav` to disable automatic closing when the backdrop +is clicked or ESCAPE is pressed. To add custom logic on backdrop click, add a `(backdropClick)` listener to +`md-sidenav-container`. For custom ESCAPE logic, a standard `(keydown)` listener will suffice. ```html - - - + + + ``` \ No newline at end of file From 7086a9814ba1d26004655d9234aa2b053296b6fd Mon Sep 17 00:00:00 2001 From: Ji Won Shin Date: Thu, 7 Sep 2017 17:37:01 -0700 Subject: [PATCH 4/5] minor modification --- src/lib/sidenav/sidenav.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/lib/sidenav/sidenav.md b/src/lib/sidenav/sidenav.md index 2b3ee873cf2b..3f35fdf8d91f 100644 --- a/src/lib/sidenav/sidenav.md +++ b/src/lib/sidenav/sidenav.md @@ -18,8 +18,7 @@ A sidenav container may contain one or two `` elements. When there a `` elements, each must be placed on a different side of the container. See the section on positioning below. - -### Sidenav vs. Drawer +`` is a component that is similar to ``. The difference between sidenav and drawer is that the sidenav takes up fullscreen whereas drawer is a smaller element that takes up a subsection of the screen. `md-sidenav` has to be placed inside `md-sidenav-container` and `md-drawer` has to be placed inside `md-drawer-container`. Currently `md-drawer` and `md-sidenav` support all the same features. From cebbe41f200d99f27ddd0c0d2a44a92d6aca65c8 Mon Sep 17 00:00:00 2001 From: Ji Won Shin Date: Fri, 8 Sep 2017 09:58:59 -0700 Subject: [PATCH 5/5] remove mention of drawer --- src/lib/sidenav/sidenav.md | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/src/lib/sidenav/sidenav.md b/src/lib/sidenav/sidenav.md index 3f35fdf8d91f..ab3a2527c32d 100644 --- a/src/lib/sidenav/sidenav.md +++ b/src/lib/sidenav/sidenav.md @@ -18,13 +18,6 @@ A sidenav container may contain one or two `` elements. When there a `` elements, each must be placed on a different side of the container. See the section on positioning below. -`` is a component that is similar to ``. -The difference between sidenav and drawer is that the sidenav takes up fullscreen whereas drawer is a smaller element -that takes up a subsection of the screen. `md-sidenav` has to be placed inside `md-sidenav-container` and `md-drawer` -has to be placed inside `md-drawer-container`. Currently `md-drawer` and `md-sidenav` support all the same features. -However, in the future we expect to add different features specific to the different use cases. - - ### Sidenav mode The sidenav can render in one of three different ways based on the `mode` property. @@ -79,11 +72,11 @@ For a sidenav with a FAB (Floating Action Button) or other floating element, the outside of the scrollable region and absolutely position it. -### Disabling closing of sidenav and drawer -By default, sidenav and drawer can be closed either by clicking on the backdrop or by pressing ESCAPE. -The `disableClose` attribute can be set on `md-drawer` or `md-sidenav` to disable automatic closing when the backdrop +### Disabling closing of sidenav +By default, sidenav can be closed either by clicking on the backdrop or by pressing ESCAPE. +The `disableClose` attribute can be set on `md-sidenav` to disable automatic closing when the backdrop is clicked or ESCAPE is pressed. To add custom logic on backdrop click, add a `(backdropClick)` listener to -`md-sidenav-container`. For custom ESCAPE logic, a standard `(keydown)` listener will suffice. +`md-sidenav-container`. For custom ESCAPE logic, a standard `(keydown)` listener will suffice. ```html