Skip to content
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'
  • Loading branch information
zewa666 committed Dec 12, 2018
1 parent ab7e534 commit 1cfdd588998f39ea2f938e1d91cfde214b90b4d8
Showing with 30 additions and 12 deletions.
  1. +6 −6 src/dialog-keyboard-service.ts
  2. +9 −0 src/dialog-settings.ts
  3. +15 −6 test/unit/dialog-keyboard-service.spec.ts
@@ -1,6 +1,6 @@
import { DOM } from 'aurelia-pal';
import { DialogController } from './dialog-controller';
import { ActionKey } from './dialog-settings';
import { ActionKey, KeyEventType } from './dialog-settings';
import { DialogService } from './dialog-service';

function getActionKey(eo: KeyboardEvent): ActionKey | undefined {
@@ -39,18 +39,18 @@ export class DialogKeyboardService {
};
}

private addListener(): void {
DOM.addEventListener('keyup', this.keyboardHandler, false);
private addListener(keyEvent: KeyEventType = 'keyup'): void {
DOM.addEventListener(keyEvent, this.keyboardHandler, false);
}

private removeListener(): void {
DOM.removeEventListener('keyup', this.keyboardHandler, false);
private removeListener(keyEvent: KeyEventType = 'keyup'): void {
DOM.removeEventListener(keyEvent, this.keyboardHandler, false);
}

public enlist(controller: DialogController): void {
if (!controller.settings.keyboard) { return; }
if (!this.controllers.size) {
this.addListener();
this.addListener(controller.settings.keyEvent);
}
this.controllers.add(controller);
}
@@ -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.
*/
@@ -1,7 +1,7 @@
import { DialogKeyboardService } from '../../src/dialog-keyboard-service';
import { DialogService } from '../../src/dialog-service';
import { DOM } from 'aurelia-pal';
import { DialogController, ActionKey } from '../../src/aurelia-dialog';
import { DialogController, ActionKey, KeyEventType } from '../../src/aurelia-dialog';

describe(`${DialogKeyboardService.name}`, () => {
function createDialogService(controllers: DialogController[] = []): DialogService {
@@ -16,10 +16,15 @@ describe(`${DialogKeyboardService.name}`, () => {
return service;
}

function createController(keyboard?: boolean | ActionKey | ActionKey[]): DialogController;
function createController(keyboard?: boolean | ActionKey | ActionKey[]): DialogController {
function createController(keyboard?: boolean | ActionKey | ActionKey[], keyType?: KeyEventType): DialogController;
function createController(keyboard?: boolean | ActionKey | ActionKey[], keyType?: KeyEventType): DialogController {
const controller = jasmine.createSpyObj(`${DialogController.name}Spy`, ['ok', 'cancel']) as DialogController;
controller.settings = { keyboard };

if (keyType) {
controller.settings.keyEvent = keyType;
}

return controller;
}

@@ -95,19 +100,23 @@ describe(`${DialogKeyboardService.name}`, () => {
});

describe('OKs the top dialog when the "keyboard" setting is set to', () => {
function okOnEnterKeySpec(keyboard: ActionKey | ActionKey[]): void {
const controller = createController(keyboard);
function okOnEnterKeySpec(keyboard: ActionKey | ActionKey[], keyType: KeyEventType = 'keyup'): void {
const controller = createController(keyboard, keyType);
const service = createKeyboardService(controller);
// tslint:disable-next-line:no-unused-expression
service;
DOM.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter', bubbles: true }));
DOM.dispatchEvent(new KeyboardEvent(keyType, { key: 'Enter', bubbles: true }));
expect(controller.ok).toHaveBeenCalled();
}

it('"Enter"', () => {
okOnEnterKeySpec('Enter');
});

it('"Enter" using keydown event', () => {
okOnEnterKeySpec('Enter', 'keydown');
});

it('Array containing "Enter"', () => {
okOnEnterKeySpec(['Enter']);
});

0 comments on commit 1cfdd58

Please sign in to comment.
You can’t perform that action at this time.