Skip to content

Commit 7d0f448

Browse files
committed
calendar: year aria updated
1 parent b7eba9e commit 7d0f448

File tree

77 files changed

+491
-15
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

77 files changed

+491
-15
lines changed

src/module/enterprise/calendar/calendar.component.html

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,10 @@
77
<div *ngIf="(currentState === 'year')"> {{currrentDate | date : 'y'}} </div>
88

99
<div class="calendar-navigation">
10-
<em id={{prevbtnid}} role="button"
11-
[attr.aria-pressed]="prevMonthPressed"
12-
(keyup.enter)="previous()" aria-label="previous month"
10+
<em id={{prevbtnid}} role="button" [attr.aria-pressed]="prevMonthPressed" (keyup.enter)="previous()" aria-label="previous month"
1311
tabindex="1" style="padding-right: 20px;" class="fa fa-chevron-left" aria-hidden="true" (click)="previous()"></em>
14-
<em id="{{nextbtnid}}" role="button"
15-
[attr.aria-pressed]="nextMonthPressed" (keyup.enter)="next()"
16-
aria-label="next month"
17-
tabindex="1" style="padding-right: 20px;"
18-
class="fa fa-chevron-right" aria-hidden="true"
19-
(click)="next()"></em>
12+
<em id="{{nextbtnid}}" role="button" [attr.aria-pressed]="nextMonthPressed" (keyup.enter)="next()" aria-label="next month"
13+
tabindex="1" style="padding-right: 20px;" class="fa fa-chevron-right" aria-hidden="true" (click)="next()"></em>
2014
</div>
2115
</div>
2216
<div>{{title}}</div>
@@ -35,5 +29,6 @@
3529
</amexio-calendar-month>
3630
<amexio-calendar-day-timewise *ngIf="(currentState === 'week' || currentState === 'day')" [headers]="displayHeaders" [calendar-data]="calendarWeekData"
3731
(onHeaderClicked)="onDaytimeHeaderClick($event)" (onEventClicked)="onDayTimeWiseEvent($event)"> </amexio-calendar-day-timewise>
38-
<amexio-calendar-year *ngIf="(currentState === 'year')" [headers]="displayHeaders" [calendar-data]="calendarMonthData" (onHeaderClicked)="onYearHeaderClicked($event)"
32+
<amexio-calendar-year *ngIf="(currentState === 'year')" [headers]="displayHeaders" [calendar-data]="calendarMonthData" (onLeftNavigate)="previous()"
33+
(onRightNavigate)="next()" (onTopNavigate)="previous()" (onBottomNavigate)="next()" (onHeaderClicked)="onYearHeaderClicked($event)"
3934
(onEventClicked)="onYearEvent($event)"> </amexio-calendar-year>

src/module/enterprise/calendar/calendar.year.component.html

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,12 @@
1414
</thead>
1515
<tbody>
1616
<tr *ngFor="let week of month.data" class="calendar-week-timeslot">
17-
<td [ngClass]="{'calendar-inactive': (!day.isActivePeriod),
17+
<td class="focuscls" attr.id="{{day.id}}" tabindex="1" role="button" [attr.aria-pressed]="isdaypressed" (keyup.arrowright)="navigateright(day)"
18+
(keyup.arrowleft)="navigateleft(day)" (keyup.arrowdown)="navigatedown(day)" (keyup.arrowup)="navigateup(day)"
19+
attr.aria-label="{{day.date | date : 'EEEE, MMMM d, y'}} " [ngClass]="{'calendar-inactive': (!day.isActivePeriod),
1820
'calendar-year-month-hasevent': (day.isActivePeriod && day.isEvent)}" (click)="eventClicked($event, day)"
19-
*ngFor="let day of week" style="text-align: center;">
20-
<div [ngClass]="{'calendar-active-box calendar-year-month-today': (day.isActivePeriod && day.isActive)}" style="height:30px; width: 30px;"
21+
(keyup.enter)="eventClicked($event, day)" *ngFor="let day of week" style="text-align: center;">
22+
<div [ngClass]="{'calendar-active-box calendar-year-month-today': (day.isActivePeriod && day.isActive)}" style="height:30px; width: 30px;"
2123
style="text-align: center; cursor: pointer;">
2224
{{day.date | date :'dd'}}
2325
</div>

src/module/enterprise/calendar/calendar.year.component.ts

Lines changed: 178 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,14 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
66
styleUrls: ['./calendar.common.css'],
77
})
88
export class AmexioCalendarYearComponent {
9-
9+
rightfocusrowindex: number;
10+
rightfocusinnerindex: number;
11+
rightfocuscalindex: number;
12+
isextremeright = false;
13+
leftfocusrowindex: number;
14+
leftfocusinnerindex: number;
15+
leftfocuscalindex: number;
16+
isextremeleft = false;
1017
@Input('headers') headers: any[];
1118

1219
@Input('calendar-data') calendaryData: any[];
@@ -15,10 +22,20 @@ export class AmexioCalendarYearComponent {
1522

1623
@Output('onHeaderClicked') onHeaderClicked = new EventEmitter<any>();
1724

25+
@Output('onLeftNavigate') onleftnavigate = new EventEmitter<any>();
26+
27+
@Output('onRightNavigate') onrightnavigate = new EventEmitter<any>();
28+
29+
@Output('onTopNavigate') ontopnavigate = new EventEmitter<any>();
30+
31+
@Output('onBottomNavigate') onbottomnavigate = new EventEmitter<any>();
32+
33+
isdaypressed = false;
1834
constructor() {
1935
}
2036

2137
eventClicked(event1: any, eventData: any) {
38+
this.isdaypressed = true;
2239
const eventObject = {
2340
event: event1,
2441
this: eventData,
@@ -29,4 +46,164 @@ export class AmexioCalendarYearComponent {
2946
monthClicked(event: any) {
3047
this.onHeaderClicked.emit(event);
3148
}
49+
navigateright(day: any) {
50+
this.calendaryData.forEach((calendarrow: any, rowindex: number) => {
51+
calendarrow.data.forEach((calendardata: any, innerindex: number) => {
52+
calendardata.forEach((calelement: any, calindex: number) => {
53+
if (day.id === calelement.id) {
54+
this.refactorednavigateright(calindex, calendardata, innerindex, calendarrow, rowindex);
55+
}
56+
});
57+
});
58+
});
59+
if (!this.isextremeright) {
60+
const itemid = this.calendaryData[this.rightfocusrowindex].data[this.rightfocusinnerindex][this.rightfocuscalindex];
61+
document.getElementById(itemid['id']).focus();
62+
}
63+
}
64+
65+
refactorednavigateright(calindex: number, calendardata: any, innerindex: number, calendarrow: any, rowindex: number) {
66+
if (calindex === (calendardata.length - 1) &&
67+
innerindex === (calendarrow.data.length - 1) &&
68+
rowindex === (this.calendaryData.length - 1)) {
69+
this.onrightnavigate.emit();
70+
this.isextremeright = true;
71+
this.setExtremeFocus();
72+
} else if (calindex === (calendardata.length - 1)) {
73+
// chk condn for last row
74+
if ((calendarrow.data.length - 1) === innerindex) {
75+
this.rightfocusrowindex = rowindex + 1; // by inc:-> next month
76+
this.rightfocusinnerindex = 0; // by inc:-> next row in same month
77+
this.rightfocuscalindex = 0; // by inc:-> next day
78+
} else {
79+
this.rightfocusrowindex = rowindex; // by inc:-> next month
80+
this.rightfocusinnerindex = innerindex + 1; // by inc:-> next row in same month
81+
this.rightfocuscalindex = 0; // by inc:-> next day
82+
}
83+
} else {
84+
this.rightfocusrowindex = rowindex; // by inc:-> next month
85+
this.rightfocusinnerindex = innerindex; // by inc:-> next row in same month
86+
this.rightfocuscalindex = calindex + 1; // by inc:-> next day
87+
}
88+
}
89+
90+
navigateleft(day: any) {
91+
this.calendaryData.forEach((calendarrow: any, rowindex: number) => {
92+
calendarrow.data.forEach((calendardata: any, innerindex: number) => {
93+
calendardata.forEach((calelement: any, calindex: number) => {
94+
if (day.id === calelement.id) {
95+
this.refactoredleftnavigate(rowindex, innerindex, calindex, calendarrow, calendardata);
96+
}
97+
});
98+
});
99+
});
100+
if (!this.isextremeleft) {
101+
const itemid = this.calendaryData[this.leftfocusrowindex].data[this.leftfocusinnerindex][this.leftfocuscalindex];
102+
document.getElementById(itemid['id']).focus();
103+
}
104+
}
105+
106+
refactoredleftnavigate(rowindex: number, innerindex: number, calindex: number, calendarrow: any, calendardata: any) {
107+
if (rowindex === 0 && innerindex === 0 && calindex === 0) {
108+
this.onleftnavigate.emit();
109+
this.isextremeleft = true;
110+
this.setExtremeFocus();
111+
} else if (calindex === 0) {
112+
// chk for first row
113+
if (innerindex === 0) {
114+
this.leftfocusrowindex = rowindex - 1;
115+
this.leftfocusinnerindex = calendarrow.data.length - 1; // row change
116+
this.leftfocuscalindex = calendardata.length - 1; // last ele of month
117+
} else {
118+
this.leftfocusrowindex = rowindex;
119+
this.leftfocusinnerindex = innerindex - 1;
120+
this.leftfocuscalindex = calendardata.length - 1;
121+
}
122+
} else {
123+
this.leftfocusrowindex = rowindex;
124+
this.leftfocusinnerindex = innerindex;
125+
this.leftfocuscalindex = calindex - 1;
126+
}
127+
}
128+
129+
navigatedown(day: any) {
130+
let focusrowindex: number;
131+
let focusinnerindex: number;
132+
let focuscalindex: number;
133+
let isextremedown = false;
134+
this.calendaryData.forEach((calendarrow: any, rowindex: number) => {
135+
calendarrow.data.forEach((calendardata: any, innerindex: number) => {
136+
calendardata.forEach((calelement: any, calindex: number) => {
137+
if (day.id === calelement.id) {
138+
if (rowindex === (this.calendaryData.length - 1) &&
139+
innerindex === (calendarrow.data.length - 1)) {
140+
this.onbottomnavigate.emit();
141+
isextremedown = true;
142+
this.setExtremeFocus();
143+
} else if (innerindex === (calendarrow.data.length - 1)) {
144+
focusrowindex = rowindex + 1;
145+
focusinnerindex = 0;
146+
focuscalindex = 0;
147+
} else {
148+
focusrowindex = rowindex;
149+
focusinnerindex = innerindex + 1;
150+
focuscalindex = calindex;
151+
}
152+
}
153+
});
154+
});
155+
});
156+
if (!isextremedown) {
157+
const itemid = this.calendaryData[focusrowindex].data[focusinnerindex][focuscalindex];
158+
document.getElementById(itemid['id']).focus();
159+
}
160+
}
161+
162+
navigateup(day: any) {
163+
let focusrowindex: number;
164+
let focusinnerindex: number;
165+
let focuscalindex: number;
166+
let isextremetop = false;
167+
this.calendaryData.forEach((calendarrow: any, rowindex: number) => {
168+
calendarrow.data.forEach((calendardata: any, innerindex: number) => {
169+
calendardata.forEach((calelement: any, calindex: number) => {
170+
if (day.id === calelement.id) {
171+
if (rowindex === 0 && innerindex === 0) {
172+
this.ontopnavigate.emit();
173+
isextremetop = true;
174+
this.setExtremeFocus();
175+
} else if (innerindex === 0) {
176+
focusrowindex = rowindex - 1;
177+
focusinnerindex = calendarrow.data.length - 1;
178+
focuscalindex = calendardata.length - 1;
179+
} else {
180+
focusrowindex = rowindex;
181+
focusinnerindex = innerindex - 1;
182+
focuscalindex = calindex;
183+
}
184+
}
185+
});
186+
});
187+
});
188+
if (!isextremetop) {
189+
const itemid = this.calendaryData[focusrowindex].data[focusinnerindex][focuscalindex];
190+
document.getElementById(itemid['id']).focus();
191+
}
192+
}
193+
194+
setExtremeFocus() {
195+
setTimeout(() => {
196+
let itemid;
197+
this.calendaryData.forEach((calendarrow: any, rowindex: number) => {
198+
calendarrow.data.forEach((calendardata: any, innerindex: number) => {
199+
calendardata.forEach((calelement: any, calindex: number) => {
200+
if (rowindex === 0 && innerindex === 0 && calindex === 0) {
201+
itemid = this.calendaryData[0].data[0][0];
202+
document.getElementById(itemid['id']).focus();
203+
}
204+
});
205+
});
206+
});
207+
}, 0);
208+
}
32209
}

src/styles/css/at-am-burgandy-magenta.css

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/styles/css/at-am-byzantine-crystal.css

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/styles/css/at-am-honey-prussian.css

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/styles/css/at-am-limegreen.css

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/styles/css/at-am-matrix-amber.css

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/styles/css/at-am-matrix-cream.css

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/styles/css/at-am-matrix-maya.css

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)