Skip to content

Commit

Permalink
fix(datepicker): replace shift with alt
Browse files Browse the repository at this point in the history
  • Loading branch information
gpolychronis-amadeus committed Sep 6, 2019
1 parent c7bc4d7 commit 3501a43
Show file tree
Hide file tree
Showing 5 changed files with 26 additions and 30 deletions.
12 changes: 4 additions & 8 deletions demo/src/app/components/datepicker/overview/datepicker-overview.component.html
View file
Expand Up @@ -329,10 +329,6 @@ <h4>Input date parsing and formatting</h4>
<td><code>Arrow(Up|Down|Left|Right)</code></td>
<td>Moves day focus inside the months view</td>
</tr>
<tr>
<td><code>Shift + Arrow(Up|Down|Left|Right)</code></td>
<td>Selects currently focused date (if it is not disabled)</td>
</tr>
<tr>
<td><code>Home</code></td>
<td>Moves focus to the the first day of currently opened first month</td>
Expand All @@ -342,11 +338,11 @@ <h4>Input date parsing and formatting</h4>
<td>Moves focus to the the last day of currently opened last month</td>
</tr>
<tr>
<td><code>Shift + Home</code></td>
<td><code>Alt + Home</code></td>
<td>Moves focus to the <code>minDate</code> (if set)</td>
</tr>
<tr>
<td><code>Shift + End</code></td>
<td><code>Alt + End</code></td>
<td>Moves focus to the <code>maxDate</code> (if set)</td>
</tr>
<tr>
Expand All @@ -358,11 +354,11 @@ <h4>Input date parsing and formatting</h4>
<td>Moves focus to the next month</td>
</tr>
<tr>
<td><code>Shift + PageDown</code></td>
<td><code>Alt + PageDown</code></td>
<td>Moves focus to the previous year</td>
</tr>
<tr>
<td><code>Shift + PageUp</code></td>
<td><code>Alt + PageUp</code></td>
<td>Moves focus to the next year</td>
</tr>
</tbody>
Expand Down
16 changes: 8 additions & 8 deletions e2e-app/src/app/datepicker/focus/datepicker-focus.e2e-spec.ts
View file
Expand Up @@ -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`);
});
});
Expand Down
4 changes: 2 additions & 2 deletions src/datepicker/datepicker-keymap-service.spec.ts
View file
Expand Up @@ -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) =>
<any>({which: keyCode, shiftKey: shift, preventDefault: () => {}, stopPropagation: () => {}});
const event = (keyCode: number, alt = false) =>
<any>({which: keyCode, altKey: alt, preventDefault: () => {}, stopPropagation: () => {}});

describe('ngb-datepicker-keymap-service', () => {

Expand Down
8 changes: 4 additions & 4 deletions src/datepicker/datepicker-keymap-service.ts
View file
Expand Up @@ -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);
Expand Down
16 changes: 8 additions & 8 deletions src/datepicker/datepicker.spec.ts
View file
Expand Up @@ -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; },
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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));
Expand All @@ -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));
Expand Down

0 comments on commit 3501a43

Please sign in to comment.