From a9b0fdb92e2f7cf6f418be24e5921d97a4df647e Mon Sep 17 00:00:00 2001 From: Tom Dye Date: Wed, 25 Oct 2017 16:48:12 +0100 Subject: [PATCH 1/4] escape key closes dialog --- src/dialog/Dialog.ts | 26 +++++++++++++++++++++++++- src/dialog/tests/unit/Dialog.ts | 27 +++++++++++++++++++++++++++ 2 files changed, 52 insertions(+), 1 deletion(-) diff --git a/src/dialog/Dialog.ts b/src/dialog/Dialog.ts index 78b270aaf7..8a0ee5d8ae 100644 --- a/src/dialog/Dialog.ts +++ b/src/dialog/Dialog.ts @@ -3,6 +3,8 @@ import { WidgetBase } from '@dojo/widget-core/WidgetBase'; import { ThemeableMixin, ThemeableProperties, theme } from '@dojo/widget-core/mixins/Themeable'; import { v } from '@dojo/widget-core/d'; import uuid from '@dojo/core/uuid'; +import { Keys } from '../common/util'; +import { createHandle } from '@dojo/core/lang'; import * as css from './styles/dialog.m.css'; import * as iconCss from '../common/styles/icons.m.css'; @@ -65,6 +67,24 @@ export default class Dialog extends DialogBase { !this.properties.modal && this._onCloseClick(); } + private _onKeyUp(event: KeyboardEvent) { + const { keyCode } = event; + + if (keyCode === Keys.Escape) { + this._onCloseClick(); + } + } + + constructor() { + super(); + + const keyUpFunc = this._onKeyUp.bind(this); + document.addEventListener('onkeyup', keyUpFunc); + this.own(createHandle(() => { + document.removeEventListener('onkeyup', keyUpFunc); + })); + } + render(): DNode { const { closeable = true, @@ -78,11 +98,15 @@ export default class Dialog extends DialogBase { underlay } = this.properties; + document.body.onkeyup = this._onKeyUp.bind(this); + open && !this._wasOpen && onOpen && onOpen(); this._wasOpen = open; - return v('div', { classes: this.classes(css.root) }, open ? [ + return v('div', { + classes: this.classes(css.root) + }, open ? [ v('div', { classes: this.classes(underlay ? css.underlayVisible : null).fixed(css.underlay), enterAnimation: animations.fadeIn, diff --git a/src/dialog/tests/unit/Dialog.ts b/src/dialog/tests/unit/Dialog.ts index eae0cf6b4f..353d6a8c6f 100644 --- a/src/dialog/tests/unit/Dialog.ts +++ b/src/dialog/tests/unit/Dialog.ts @@ -11,6 +11,7 @@ import Dialog, { DialogProperties } from '../../Dialog'; import * as css from '../../styles/dialog.m.css'; import * as iconCss from '../../../common/styles/icons.m.css'; import * as animations from '../../../common/styles/animations.m.css'; +import { Keys } from '../../../common/util'; const compareId = compareProperty((value: any) => { return typeof value === 'string'; @@ -207,6 +208,32 @@ registerSuite('Dialog', { selector: `.${css.underlay}` }); assert.isTrue(onRequestClose.called, 'onRequestClose is called when the underlay is clicked and modal is false'); + }, + + escapeKey() { + const onRequestClose = sinon.stub(); + + widget.setProperties({ + open: true, + onRequestClose + }); + widget.getRender(); + + widget.sendEvent('keyup', { + eventInit: { + keyCode: Keys.Down + } + }); + + assert.isTrue(onRequestClose.notCalled); + + widget.sendEvent('keyup', { + eventInit: { + keyCode: Keys.Escape + } + }); + + assert.isTrue(onRequestClose.calledOnce); } } }); From 0411811e4bf1383480149d5f385c74daa8b05cf0 Mon Sep 17 00:00:00 2001 From: Tom Dye Date: Thu, 26 Oct 2017 15:27:06 +0100 Subject: [PATCH 2/4] remove destructure --- src/dialog/Dialog.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/dialog/Dialog.ts b/src/dialog/Dialog.ts index 8a0ee5d8ae..3dd227bc39 100644 --- a/src/dialog/Dialog.ts +++ b/src/dialog/Dialog.ts @@ -68,9 +68,7 @@ export default class Dialog extends DialogBase { } private _onKeyUp(event: KeyboardEvent) { - const { keyCode } = event; - - if (keyCode === Keys.Escape) { + if (event.keyCode === Keys.Escape) { this._onCloseClick(); } } From 7f4834c25ca18e98327134df59054ff8098f4e32 Mon Sep 17 00:00:00 2001 From: Tom Dye Date: Tue, 31 Oct 2017 16:43:54 +0000 Subject: [PATCH 3/4] use which --- src/dialog/Dialog.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/dialog/Dialog.ts b/src/dialog/Dialog.ts index 3dd227bc39..10a667bcb8 100644 --- a/src/dialog/Dialog.ts +++ b/src/dialog/Dialog.ts @@ -68,7 +68,7 @@ export default class Dialog extends DialogBase { } private _onKeyUp(event: KeyboardEvent) { - if (event.keyCode === Keys.Escape) { + if (event.which === Keys.Escape) { this._onCloseClick(); } } @@ -96,8 +96,6 @@ export default class Dialog extends DialogBase { underlay } = this.properties; - document.body.onkeyup = this._onKeyUp.bind(this); - open && !this._wasOpen && onOpen && onOpen(); this._wasOpen = open; From 2f70b52ba9a163e58f884db06e898f52d62bbd19 Mon Sep 17 00:00:00 2001 From: Tom Dye Date: Tue, 31 Oct 2017 17:03:41 +0000 Subject: [PATCH 4/4] use keyup --- src/dialog/Dialog.ts | 4 ++-- src/dialog/tests/unit/Dialog.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/dialog/Dialog.ts b/src/dialog/Dialog.ts index 10a667bcb8..881c803b33 100644 --- a/src/dialog/Dialog.ts +++ b/src/dialog/Dialog.ts @@ -77,9 +77,9 @@ export default class Dialog extends DialogBase { super(); const keyUpFunc = this._onKeyUp.bind(this); - document.addEventListener('onkeyup', keyUpFunc); + document.addEventListener('keyup', keyUpFunc); this.own(createHandle(() => { - document.removeEventListener('onkeyup', keyUpFunc); + document.removeEventListener('keyup', keyUpFunc); })); } diff --git a/src/dialog/tests/unit/Dialog.ts b/src/dialog/tests/unit/Dialog.ts index 353d6a8c6f..4315098f32 100644 --- a/src/dialog/tests/unit/Dialog.ts +++ b/src/dialog/tests/unit/Dialog.ts @@ -221,7 +221,7 @@ registerSuite('Dialog', { widget.sendEvent('keyup', { eventInit: { - keyCode: Keys.Down + which: Keys.Down } }); @@ -229,7 +229,7 @@ registerSuite('Dialog', { widget.sendEvent('keyup', { eventInit: { - keyCode: Keys.Escape + which: Keys.Escape } });