From cea2b6a91f7c79555e1958f99139aaa762c75b80 Mon Sep 17 00:00:00 2001 From: gpolychronis-amadeus Date: Thu, 5 Sep 2019 15:18:07 +0200 Subject: [PATCH] fix(datepicker): replace shift with alt --- .../overview/datepicker-overview.component.html | 12 ++++-------- .../focus/datepicker-focus.e2e-spec.ts | 16 ++++++++-------- src/datepicker/datepicker-keymap-service.spec.ts | 4 ++-- src/datepicker/datepicker-keymap-service.ts | 8 ++++---- src/datepicker/datepicker.spec.ts | 16 ++++++++-------- 5 files changed, 26 insertions(+), 30 deletions(-) diff --git a/demo/src/app/components/datepicker/overview/datepicker-overview.component.html b/demo/src/app/components/datepicker/overview/datepicker-overview.component.html index 258d66dbec..37b211228f 100644 --- a/demo/src/app/components/datepicker/overview/datepicker-overview.component.html +++ b/demo/src/app/components/datepicker/overview/datepicker-overview.component.html @@ -329,10 +329,6 @@

Input date parsing and formatting

Arrow(Up|Down|Left|Right) Moves day focus inside the months view - - Shift + Arrow(Up|Down|Left|Right) - Selects currently focused date (if it is not disabled) - Home Moves focus to the the first day of currently opened first month @@ -342,11 +338,11 @@

Input date parsing and formatting

Moves focus to the the last day of currently opened last month - Shift + Home + Alt + Home Moves focus to the minDate (if set) - Shift + End + Alt + End Moves focus to the maxDate (if set) @@ -358,11 +354,11 @@

Input date parsing and formatting

Moves focus to the next month - Shift + PageDown + Alt + PageDown Moves focus to the previous year - Shift + PageUp + Alt + PageUp Moves focus to the next year diff --git a/e2e-app/src/app/datepicker/focus/datepicker-focus.e2e-spec.ts b/e2e-app/src/app/datepicker/focus/datepicker-focus.e2e-spec.ts index dd32d45074..b50d7ea480 100644 --- a/e2e-app/src/app/datepicker/focus/datepicker-focus.e2e-spec.ts +++ b/e2e-app/src/app/datepicker/focus/datepicker-focus.e2e-spec.ts @@ -278,35 +278,35 @@ describe('Datepicker', () => { await expectFocused(page.getDayElement(new Date(2018, 8, 1)), `First day of next month should be focused`); }); - it(`should focus first day of previous year with 'Shift+PageUp'`, async() => { + it(`should focus first day of previous year with 'Alt+PageUp'`, async() => { await page.preSelectDate(); // 10 AUG 2018 await page.openDatepicker(); - await sendKey(Key.SHIFT, Key.PAGE_UP); + await sendKey(Key.ALT, Key.PAGE_UP); await expectFocused(page.getDayElement(new Date(2017, 0, 1)), `First day of previous year should be focused`); }); - it(`should focus first day of next year with 'Shift+PageDown'`, async() => { + it(`should focus first day of next year with 'Alt+PageDown'`, async() => { await page.preSelectDate(); // 10 AUG 2018 await page.openDatepicker(); - await sendKey(Key.SHIFT, Key.PAGE_DOWN); + await sendKey(Key.ALT, Key.PAGE_DOWN); await expectFocused(page.getDayElement(new Date(2019, 0, 1)), `First day of next year should be focused`); }); - it(`should focus min available day with 'Shift+Home'`, async() => { + it(`should focus min available day with 'Alt+Home'`, async() => { await page.preSelectDate(); // 10 AUG 2018 await page.openDatepicker(); - await sendKey(Key.SHIFT, Key.HOME); + await sendKey(Key.ALT, Key.HOME); await expectFocused(page.getDayElement(new Date(2000, 0, 1)), `Min available day should be focused`); }); - it(`should focus max available day with 'Shift+End'`, async() => { + it(`should focus max available day with 'Alt+End'`, async() => { await page.preSelectDate(); // 10 AUG 2018 await page.openDatepicker(); - await sendKey(Key.SHIFT, Key.END); + await sendKey(Key.ALT, Key.END); await expectFocused(page.getDayElement(new Date(2100, 0, 1)), `Max available day should be focused`); }); }); diff --git a/src/datepicker/datepicker-keymap-service.spec.ts b/src/datepicker/datepicker-keymap-service.spec.ts index a3269ae813..fbae88c5d6 100644 --- a/src/datepicker/datepicker-keymap-service.spec.ts +++ b/src/datepicker/datepicker-keymap-service.spec.ts @@ -7,8 +7,8 @@ import {NgbDate} from './ngb-date'; import {Key} from '../util/key'; import {Type} from '@angular/core'; -const event = (keyCode: number, shift = false) => - ({which: keyCode, shiftKey: shift, preventDefault: () => {}, stopPropagation: () => {}}); +const event = (keyCode: number, alt = false) => + ({which: keyCode, altKey: alt, preventDefault: () => {}, stopPropagation: () => {}}); describe('ngb-datepicker-keymap-service', () => { diff --git a/src/datepicker/datepicker-keymap-service.ts b/src/datepicker/datepicker-keymap-service.ts index 0bf6769a25..eb6f2a54a4 100644 --- a/src/datepicker/datepicker-keymap-service.ts +++ b/src/datepicker/datepicker-keymap-service.ts @@ -24,16 +24,16 @@ export class NgbDatepickerKeyMapService { // tslint:disable-next-line:deprecation switch (event.which) { case Key.PageUp: - this._service.focusMove(event.shiftKey ? 'y' : 'm', -1); + this._service.focusMove(event.altKey ? 'y' : 'm', -1); break; case Key.PageDown: - this._service.focusMove(event.shiftKey ? 'y' : 'm', 1); + this._service.focusMove(event.altKey ? 'y' : 'm', 1); break; case Key.End: - this._service.focus(event.shiftKey ? this._maxDate : this._lastViewDate); + this._service.focus(event.altKey ? this._maxDate : this._lastViewDate); break; case Key.Home: - this._service.focus(event.shiftKey ? this._minDate : this._firstViewDate); + this._service.focus(event.altKey ? this._minDate : this._firstViewDate); break; case Key.ArrowLeft: this._service.focusMove('d', -1); diff --git a/src/datepicker/datepicker.spec.ts b/src/datepicker/datepicker.spec.ts index c6e36babae..c926d39182 100644 --- a/src/datepicker/datepicker.spec.ts +++ b/src/datepicker/datepicker.spec.ts @@ -48,10 +48,10 @@ function focusDay() { element.focus(); } -function triggerKeyDown(element: DebugElement, keyCode: number, shiftKey = false) { +function triggerKeyDown(element: DebugElement, keyCode: number, altKey = false) { let event = { which: keyCode, - shiftKey: shiftKey, + altKey: altKey, defaultPrevented: false, propagationStopped: false, stopPropagation: function() { this.propagationStopped = true; }, @@ -938,14 +938,14 @@ describe('ngb-datepicker', () => { expectSelectedDate(datepicker, null); }); - it('should select min and max dates with shift+home/end', () => { + it('should select min and max dates with alt+home/end', () => { const fixture = createTestComponent(template); const datepicker = fixture.debugElement.query(By.directive(NgbDatepicker)); focusDay(); - triggerKeyDown(getMonthContainer(datepicker), 35 /* end */, true /* shift */); + triggerKeyDown(getMonthContainer(datepicker), 35 /* end */, true /* alt */); fixture.detectChanges(); expectFocusedDate(datepicker, new NgbDate(2020, 12, 31)); expectSelectedDate(datepicker, null); @@ -955,7 +955,7 @@ describe('ngb-datepicker', () => { expectFocusedDate(datepicker, new NgbDate(2020, 12, 31)); expectSelectedDate(datepicker, null); - triggerKeyDown(getMonthContainer(datepicker), 36 /* home */, true /* shift */); + triggerKeyDown(getMonthContainer(datepicker), 36 /* home */, true /* alt */); fixture.detectChanges(); expectFocusedDate(datepicker, new NgbDate(2010, 1, 1)); expectSelectedDate(datepicker, null); @@ -1001,7 +1001,7 @@ describe('ngb-datepicker', () => { expectSelectedDate(datepicker, null); }); - it('should navigate between years with shift+pageUp/Down', () => { + it('should navigate between years with alt+pageUp/Down', () => { const fixture = createTestComponent(template); const datepicker = fixture.debugElement.query(By.directive(NgbDatepicker)); @@ -1013,13 +1013,13 @@ describe('ngb-datepicker', () => { expectFocusedDate(datepicker, new NgbDate(2016, 8, 1)); expectSelectedDate(datepicker, null); - triggerKeyDown(getMonthContainer(datepicker), 33 /* page up */, true /* shift */); + triggerKeyDown(getMonthContainer(datepicker), 33 /* page up */, true /* alt */); fixture.detectChanges(); expectFocusedDate(datepicker, new NgbDate(2015, 1, 1), true); expectSelectedDate(datepicker, null); - triggerKeyDown(getMonthContainer(datepicker), 34 /* page down */, true /* shift */); + triggerKeyDown(getMonthContainer(datepicker), 34 /* page down */, true /* alt */); fixture.detectChanges(); expectFocusedDate(datepicker, new NgbDate(2016, 1, 1));