Permalink
Browse files

feat(keyboard): allow to configure keyevent type

when configuring the plugin one can pass the keyEvent as a setting, which accepts 'keyup' and 'keydown'.
Ported for v1
  • Loading branch information...
zewa666 authored and StrahilKazlachev committed Dec 13, 2018
1 parent a8fe3a2 commit 3aad34f4fe9d7e9ea6f68ce433a40443e571f9b1
Showing with 27 additions and 2 deletions.
  1. +6 −2 src/dialog-renderer.ts
  2. +9 −0 src/dialog-settings.ts
  3. +12 −0 test/unit/dialog-renderer.spec.ts
@@ -80,7 +80,7 @@ export class DialogRenderer implements Renderer {

public static trackController(dialogController: DialogController): void {
if (!DialogRenderer.dialogControllers.length) {
DOM.addEventListener('keyup', DialogRenderer.keyboardEventHandler, false);
DOM.addEventListener(dialogController.settings.keyEvent || 'keyup', DialogRenderer.keyboardEventHandler, false);
}
DialogRenderer.dialogControllers.push(dialogController);
}
@@ -91,7 +91,11 @@ export class DialogRenderer implements Renderer {
DialogRenderer.dialogControllers.splice(i, 1);
}
if (!DialogRenderer.dialogControllers.length) {
DOM.removeEventListener('keyup', DialogRenderer.keyboardEventHandler, false);
DOM.removeEventListener(
dialogController.settings.keyEvent || 'keyup',
DialogRenderer.keyboardEventHandler,
false
);
}
}

@@ -2,6 +2,7 @@ import { Container } from 'aurelia-dependency-injection';
import { ViewStrategy } from 'aurelia-templating';

export type ActionKey = 'Escape' | 'Enter';
export type KeyEventType = 'keyup' | 'keydown';

/**
* All available dialog settings.
@@ -52,6 +53,14 @@ export interface DialogSettings {
*/
keyboard?: boolean | ActionKey | ActionKey[];

/**
* Determines which type of keyevent should be used to listen for
* ENTER and ESC keys
*
* Default: keyup
*/
keyEvent?: KeyEventType;

/**
* When set to "true" allows for the dismissal of the dialog by clicking outside of it.
*/
@@ -209,6 +209,18 @@ describe('DialogRenderer', () => {
expect(DialogRenderer.dialogControllers.length).toBe(2);
done();
});

it('sets ESC key event handler with custom event type', async done => {
spyOn(DOM, 'addEventListener');
const keyEvent = 'keydown';
const first = createRenderer({ keyEvent });
const last = createRenderer();
await show(done, first, last);
expect(DOM.addEventListener).toHaveBeenCalledWith(keyEvent, jasmine.any(Function), false);
expect((DOM.addEventListener as jasmine.Spy).calls.count()).toBe(1);
expect(DialogRenderer.dialogControllers.length).toBe(2);
done();
});
});

describe('on last closed dialog', () => {

0 comments on commit 3aad34f

Please sign in to comment.