Skip to content

Commit

Permalink
chore(*): preserve calendar active date on (shift) pageup/down #3126
Browse files Browse the repository at this point in the history
  • Loading branch information
@SAndreeva
SAndreeva committed Feb 19, 2019
1 parent 22896eb commit a17e32b
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 38 deletions.
96 changes: 89 additions & 7 deletions projects/igniteui-angular/src/lib/calendar/calendar.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
} from './calendar.directives';
import { IgxMonthsViewComponent } from './months-view/months-view.component';
import { KEYS } from '../core/utils';
import { ICalendarDate } from './calendar';
import { ICalendarDate, monthRange } from './calendar';
import { CalendarView, IgxMonthPickerBase } from './month-picker-base';

let NEXT_ID = 0;
Expand Down Expand Up @@ -404,11 +404,32 @@ export class IgxCalendarComponent extends IgxMonthPickerBase {
@HostListener('keydown.pageup', ['$event'])
public onKeydownPageUp(event: KeyboardEvent) {
event.preventDefault();
this.previousMonth();

if (this.daysView) {
this.daysView.isKeydownTrigger = true;
const activeDate = this.daysView.dates.find((date) => date.nativeElement === document.activeElement);
if (activeDate) {
this.daysView.nextDate = new Date(activeDate.date.date);

let year = this.daysView.nextDate.getFullYear();

let month = this.daysView.nextDate.getMonth() - 1;
if (month < 0) { month = 11; year -= 1; }

const range = monthRange(this.daysView.nextDate.getFullYear(), month);

let day = this.daysView.nextDate.getDate();
if (day > range[1]) { day = range[1]; }

this.daysView.nextDate.setDate(day);
this.daysView.nextDate.setMonth(month);
this.daysView.nextDate.setFullYear(year);

this.daysView.callback = (dates?, next?) => {
const dayItem = dates.find((d) => d.date.date.getTime() === next.getTime());
if (dayItem) { dayItem.nativeElement.focus(); }
};
}

this.previousMonth(true);
}

/**
Expand All @@ -417,11 +438,32 @@ export class IgxCalendarComponent extends IgxMonthPickerBase {
@HostListener('keydown.pagedown', ['$event'])
public onKeydownPageDown(event: KeyboardEvent) {
event.preventDefault();
this.nextMonth();

if (this.daysView) {
this.daysView.isKeydownTrigger = true;
const activeDate = this.daysView.dates.find((date) => date.nativeElement === document.activeElement);
if (activeDate) {
this.daysView.nextDate = new Date(activeDate.date.date);

let year = this.daysView.nextDate.getFullYear();

let month = this.daysView.nextDate.getMonth() + 1;
if (month > 11) { month = 0; year += 1; }

const range = monthRange(this.daysView.nextDate.getFullYear(), month);

let day = this.daysView.nextDate.getDate();
if (day > range[1]) { day = range[1]; }

this.daysView.nextDate.setDate(day);
this.daysView.nextDate.setMonth(month);
this.daysView.nextDate.setFullYear(year);

this.daysView.callback = (dates?, next?) => {
const dayItem = dates.find((d) => d.date.date.getTime() === next.getTime());
if (dayItem) { dayItem.nativeElement.focus(); }
};
}

this.nextMonth(true);
}

/**
Expand All @@ -430,6 +472,26 @@ export class IgxCalendarComponent extends IgxMonthPickerBase {
@HostListener('keydown.shift.pageup', ['$event'])
public onKeydownShiftPageUp(event: KeyboardEvent) {
this.keydownPageUpHandler(event);

const activeDate = this.daysView.dates.find((date) => date.nativeElement === document.activeElement);
if (activeDate && this.daysView) {
this.daysView.nextDate = new Date(activeDate.date.date);

const year = this.daysView.nextDate.getFullYear() - 1;

const range = monthRange(year, this.daysView.nextDate.getMonth());

let day = this.daysView.nextDate.getDate();
if (day > range[1]) { day = range[1]; }

this.daysView.nextDate.setDate(day);
this.daysView.nextDate.setFullYear(year);

this.daysView.callback = (dates?, next?) => {
const dayItem = dates.find((d) => d.date.date.getTime() === next.getTime());
if (dayItem) { dayItem.nativeElement.focus(); }
};
}
}

/**
Expand All @@ -438,6 +500,26 @@ export class IgxCalendarComponent extends IgxMonthPickerBase {
@HostListener('keydown.shift.pagedown', ['$event'])
public onKeydownShiftPageDown(event: KeyboardEvent) {
this.keydownPageDownHandler(event);

const activeDate = this.daysView.dates.find((date) => date.nativeElement === document.activeElement);
if (activeDate && this.daysView) {
this.daysView.nextDate = new Date(activeDate.date.date);

const year = this.daysView.nextDate.getFullYear() + 1;

const range = monthRange(year, this.daysView.nextDate.getMonth());

let day = this.daysView.nextDate.getDate();
if (day > range[1]) { day = range[1]; }

this.daysView.nextDate.setDate(day);
this.daysView.nextDate.setFullYear(year);

this.daysView.callback = (dates?, next?) => {
const dayItem = dates.find((d) => d.date.date.getTime() === next.getTime());
if (dayItem) { dayItem.nativeElement.focus(); }
};
}
}

/**
Expand Down
26 changes: 13 additions & 13 deletions projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,12 +92,12 @@ export class IgxDaysViewComponent extends IgxCalendarBase implements DoCheck {
/**
* @hidden
*/
private _nextDate: Date;
public nextDate: Date;

/**
* @hidden
*/
private callback: (dates?, next?) => void;
public callback: (dates?, next?) => void;

/**
* @hidden
Expand Down Expand Up @@ -225,7 +225,7 @@ export class IgxDaysViewComponent extends IgxCalendarBase implements DoCheck {
date.nativeElement.focus();
}, parseInt(slideInRight.options.params.duration, 10));
} else if (this.callback && (event.toState === 'next' || event.toState === 'prev')) {
this.callback(this.dates, this._nextDate);
this.callback(this.dates, this.nextDate);
}
}
}
Expand All @@ -250,9 +250,9 @@ export class IgxDaysViewComponent extends IgxCalendarBase implements DoCheck {

if (this.changeDaysView && dates.indexOf(node) - 7 < 0) {
const dayItem = dates[dates.indexOf(node)];
this._nextDate = new Date(dayItem.date.date);
this.nextDate = new Date(dayItem.date.date);

this._nextDate.setDate(this._nextDate.getDate() - 7);
this.nextDate.setDate(this.nextDate.getDate() - 7);

this.isKeydownTrigger = true;
this.animationAction = 'prev';
Expand All @@ -264,7 +264,7 @@ export class IgxDaysViewComponent extends IgxCalendarBase implements DoCheck {
}
};

this.onViewChanged.emit(this._nextDate);
this.onViewChanged.emit(this.nextDate);
}
}

Expand All @@ -288,9 +288,9 @@ export class IgxDaysViewComponent extends IgxCalendarBase implements DoCheck {

if (this.changeDaysView && dates.indexOf(node) + 7 > this.dates.length - 1) {
const dayItem = dates[dates.indexOf(node)];
this._nextDate = new Date(dayItem.date.date);
this.nextDate = new Date(dayItem.date.date);

this._nextDate.setDate(this._nextDate.getDate() + 7);
this.nextDate.setDate(this.nextDate.getDate() + 7);

this.isKeydownTrigger = true;
this.animationAction = 'next';
Expand All @@ -302,7 +302,7 @@ export class IgxDaysViewComponent extends IgxCalendarBase implements DoCheck {
}
};

this.onViewChanged.emit(this._nextDate);
this.onViewChanged.emit(this.nextDate);
}
}

Expand All @@ -326,7 +326,7 @@ export class IgxDaysViewComponent extends IgxCalendarBase implements DoCheck {

if (this.changeDaysView && dates.indexOf(node) === 0) {
const dayItem = dates[dates.indexOf(node)];
this._nextDate = new Date(dayItem.date.date);
this.nextDate = new Date(dayItem.date.date);

this.isKeydownTrigger = true;
this.animationAction = 'prev';
Expand All @@ -338,7 +338,7 @@ export class IgxDaysViewComponent extends IgxCalendarBase implements DoCheck {
}
};

this.onViewChanged.emit(this._nextDate);
this.onViewChanged.emit(this.nextDate);
}
}

Expand All @@ -363,7 +363,7 @@ export class IgxDaysViewComponent extends IgxCalendarBase implements DoCheck {

if (this.changeDaysView && dates.indexOf(node) === this.dates.length - 1) {
const dayItem = dates[dates.indexOf(node)];
this._nextDate = new Date(dayItem.date.date);
this.nextDate = new Date(dayItem.date.date);

this.isKeydownTrigger = true;
this.animationAction = 'next';
Expand All @@ -375,7 +375,7 @@ export class IgxDaysViewComponent extends IgxCalendarBase implements DoCheck {
}
};

this.onViewChanged.emit(this._nextDate);
this.onViewChanged.emit(this.nextDate);
}
}

Expand Down
26 changes: 14 additions & 12 deletions projects/igniteui-angular/src/lib/calendar/month-picker-base.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,15 +135,25 @@ export class IgxMonthPickerBase extends IgxCalendarBase {
/**
* @hidden
*/
public previousYear() {
public previousYear(isKeydownTrigger = false) {
this.viewDate = this.calendarModel.timedelta(this.viewDate, 'year', -1);

if (this.daysView) {
this.daysView.animationAction = 'prev';
this.daysView.isKeydownTrigger = isKeydownTrigger;
}
}

/**
* @hidden
*/
public nextYear() {
public nextYear(isKeydownTrigger = false) {
this.viewDate = this.calendarModel.timedelta(this.viewDate, 'year', 1);

if (this.daysView) {
this.daysView.animationAction = 'next';
this.daysView.isKeydownTrigger = isKeydownTrigger;
}
}

/**
Expand All @@ -164,22 +174,14 @@ export class IgxMonthPickerBase extends IgxCalendarBase {
*/
public keydownPageUpHandler(event: KeyboardEvent) {
event.preventDefault();
this.previousYear();

if (this.daysView) {
this.daysView.isKeydownTrigger = true;
}
this.previousYear(true);
}

/**
* @hidden
*/
public keydownPageDownHandler(event: KeyboardEvent) {
event.preventDefault();
this.nextYear();

if (this.daysView) {
this.daysView.isKeydownTrigger = true;
}
this.nextYear(true);
}
}
12 changes: 6 additions & 6 deletions projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,9 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBase {
/**
* @hidden
*/
public nextYear() {
public nextYear(kbTrigger = false) {
this.yearAction = 'next';
super.nextYear();
super.nextYear(kbTrigger);
}

/**
Expand All @@ -98,16 +98,16 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBase {
event.preventDefault();
event.stopPropagation();

this.nextYear();
this.nextYear(true);
}
}

/**
* @hidden
*/
public previousYear() {
public previousYear(kbTrigger = false) {
this.yearAction = 'prev';
super.previousYear();
super.previousYear(kbTrigger);
}

/**
Expand All @@ -118,7 +118,7 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBase {
event.preventDefault();
event.stopPropagation();

this.previousYear();
this.previousYear(true);
}
}

Expand Down

0 comments on commit a17e32b

Please sign in to comment.