Skip to content

Commit d1a2b78

Browse files
mattlewis92mattlewis92
committed
feat: expose the click or keyboard event that triggers click handlers
BREAKING CHANGE: the `columnHeaderClicked` output on the month view now exposes an object instead of just the ISO day number Before: ``` columnHeaderClicked="columnHeaderClicked($event)" ``` After: ``` columnHeaderClicked="columnHeaderClicked($event.isoDayNumber)" ``` Closes #962
1 parent 2e92b25 commit d1a2b78

15 files changed

+136
-51
lines changed

‎package-lock.json

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

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@
149149
"dependencies": {
150150
"angular-draggable-droppable": "^4.3.2",
151151
"angular-resizable-element": "^3.2.4",
152-
"calendar-utils": "^0.6.0",
152+
"calendar-utils": "^0.7.0",
153153
"positioning": "^2.0.0"
154154
},
155155
"sideEffects": [

‎projects/angular-calendar/src/modules/common/calendar-event-actions.component.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,10 @@ import { CalendarEvent, EventAction } from 'calendar-utils';
1414
class="cal-event-action"
1515
href="javascript:;"
1616
*ngFor="let action of event.actions; trackBy: trackByActionId"
17-
(mwlClick)="action.onClick({ event: event })"
18-
(mwlKeydownEnter)="action.onClick({ event: event })"
17+
(mwlClick)="action.onClick({ event: event, sourceEvent: $event })"
18+
(mwlKeydownEnter)="
19+
action.onClick({ event: event, sourceEvent: $event })
20+
"
1921
[ngClass]="action.cssClass"
2022
[innerHtml]="action.label"
2123
tabindex="0"

‎projects/angular-calendar/src/modules/month/calendar-month-cell.component.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ import { PlacementArray } from 'positioning';
6464
[dropData]="{ event: event, draggedFrom: day }"
6565
[dragAxis]="{ x: event.draggable, y: event.draggable }"
6666
[validateDrag]="validateDrag"
67-
(mwlClick)="eventClicked.emit({ event: event })"
67+
(mwlClick)="eventClicked.emit({ event: event, sourceEvent: $event })"
6868
[attr.aria-hidden]="{} | calendarA11y: 'hideMonthCellEvents'"
6969
></div>
7070
</div>
@@ -123,8 +123,9 @@ export class CalendarMonthCellComponent {
123123
@Output() unhighlightDay: EventEmitter<any> = new EventEmitter();
124124

125125
@Output()
126-
eventClicked: EventEmitter<{ event: CalendarEvent }> = new EventEmitter<{
126+
eventClicked = new EventEmitter<{
127127
event: CalendarEvent;
128+
sourceEvent: MouseEvent;
128129
}>();
129130

130131
trackByEventId = trackByEventId;

‎projects/angular-calendar/src/modules/month/calendar-month-view-header.component.ts

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,12 @@ import { trackByWeekDayHeaderDate } from '../common/util';
2525
[class.cal-today]="day.isToday"
2626
[class.cal-future]="day.isFuture"
2727
[class.cal-weekend]="day.isWeekend"
28-
(click)="columnHeaderClicked.emit(day.day)"
28+
(click)="
29+
columnHeaderClicked.emit({
30+
isoDayNumber: day.day,
31+
sourceEvent: $event
32+
})
33+
"
2934
[ngClass]="day.cssClass"
3035
tabindex="0"
3136
role="columnheader"
@@ -52,7 +57,10 @@ export class CalendarMonthViewHeaderComponent {
5257

5358
@Input() customTemplate: TemplateRef<any>;
5459

55-
@Output() columnHeaderClicked = new EventEmitter<number>();
60+
@Output() columnHeaderClicked = new EventEmitter<{
61+
isoDayNumber: number;
62+
sourceEvent: MouseEvent;
63+
}>();
5664

5765
trackByWeekDayHeaderDate = trackByWeekDayHeaderDate;
5866
}

‎projects/angular-calendar/src/modules/month/calendar-month-view.component.ts

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -83,9 +83,11 @@ export interface CalendarMonthViewEventTimesChangedEvent<
8383
[tooltipDelay]="tooltipDelay"
8484
[customTemplate]="cellTemplate"
8585
[ngStyle]="{ backgroundColor: day.backgroundColor }"
86-
(mwlClick)="dayClicked.emit({ day: day })"
86+
(mwlClick)="dayClicked.emit({ day: day, sourceEvent: $event })"
8787
[clickListenerDisabled]="dayClicked.observers.length === 0"
88-
(mwlKeydownEnter)="dayClicked.emit({ day: day })"
88+
(mwlKeydownEnter)="
89+
dayClicked.emit({ day: day, sourceEvent: $event })
90+
"
8991
(highlightDay)="toggleDayHighlight($event.event, true)"
9092
(unhighlightDay)="toggleDayHighlight($event.event, false)"
9193
mwlDroppable
@@ -97,7 +99,12 @@ export interface CalendarMonthViewEventTimesChangedEvent<
9799
$event.dropData.draggedFrom
98100
)
99101
"
100-
(eventClicked)="eventClicked.emit({ event: $event.event })"
102+
(eventClicked)="
103+
eventClicked.emit({
104+
event: $event.event,
105+
sourceEvent: $event.sourceEvent
106+
})
107+
"
101108
[attr.tabindex]="{} | calendarA11y: 'monthCellTabIndex'"
102109
>
103110
</mwl-calendar-month-cell>
@@ -110,7 +117,12 @@ export interface CalendarMonthViewEventTimesChangedEvent<
110117
[customTemplate]="openDayEventsTemplate"
111118
[eventTitleTemplate]="eventTitleTemplate"
112119
[eventActionsTemplate]="eventActionsTemplate"
113-
(eventClicked)="eventClicked.emit({ event: $event.event })"
120+
(eventClicked)="
121+
eventClicked.emit({
122+
event: $event.event,
123+
sourceEvent: $event.sourceEvent
124+
})
125+
"
114126
mwlDroppable
115127
dragOverClass="cal-drag-over"
116128
(drop)="
@@ -234,6 +246,7 @@ export class CalendarMonthViewComponent
234246
@Output()
235247
dayClicked = new EventEmitter<{
236248
day: MonthViewDay;
249+
sourceEvent: MouseEvent | KeyboardEvent;
237250
}>();
238251

239252
/**
@@ -242,12 +255,16 @@ export class CalendarMonthViewComponent
242255
@Output()
243256
eventClicked = new EventEmitter<{
244257
event: CalendarEvent;
258+
sourceEvent: MouseEvent | KeyboardEvent;
245259
}>();
246260

247261
/**
248262
* Called when a header week day is clicked. Returns ISO day number.
249263
*/
250-
@Output() columnHeaderClicked = new EventEmitter<number>();
264+
@Output() columnHeaderClicked = new EventEmitter<{
265+
isoDayNumber: number;
266+
sourceEvent: MouseEvent | KeyboardEvent;
267+
}>();
251268

252269
/**
253270
* Called when an event is dragged and dropped

‎projects/angular-calendar/src/modules/month/calendar-open-day-events.component.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -91,8 +91,12 @@ export const collapseAnimation: AnimationTriggerMetadata = trigger('collapse', [
9191
[event]="event"
9292
[customTemplate]="eventTitleTemplate"
9393
view="month"
94-
(mwlClick)="eventClicked.emit({ event: event })"
95-
(mwlKeydownEnter)="eventClicked.emit({ event: event })"
94+
(mwlClick)="
95+
eventClicked.emit({ event: event, sourceEvent: $event })
96+
"
97+
(mwlKeydownEnter)="
98+
eventClicked.emit({ event: event, sourceEvent: $event })
99+
"
96100
tabindex="0"
97101
[attr.aria-label]="
98102
{ event: event, locale: locale }
@@ -139,8 +143,9 @@ export class CalendarOpenDayEventsComponent {
139143
@Input() date: Date;
140144

141145
@Output()
142-
eventClicked: EventEmitter<{ event: CalendarEvent }> = new EventEmitter<{
146+
eventClicked = new EventEmitter<{
143147
event: CalendarEvent;
148+
sourceEvent: MouseEvent | KeyboardEvent;
144149
}>();
145150

146151
trackByEventId = trackByEventId;

‎projects/angular-calendar/src/modules/week/calendar-week-view-event.component.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@ import { PlacementArray } from 'positioning';
4646
[tooltipTemplate]="tooltipTemplate"
4747
[tooltipAppendToBody]="tooltipAppendToBody"
4848
[tooltipDelay]="tooltipDelay"
49-
(mwlClick)="eventClicked.emit()"
50-
(mwlKeydownEnter)="eventClicked.emit()"
49+
(mwlClick)="eventClicked.emit({ sourceEvent: $event })"
50+
(mwlKeydownEnter)="eventClicked.emit({ sourceEvent: $event })"
5151
tabindex="0"
5252
role="application"
5353
[attr.aria-label]="
@@ -111,5 +111,7 @@ export class CalendarWeekViewEventComponent {
111111

112112
@Input() daysInWeek: number;
113113

114-
@Output() eventClicked: EventEmitter<void> = new EventEmitter();
114+
@Output() eventClicked = new EventEmitter<{
115+
sourceEvent: MouseEvent | KeyboardEvent;
116+
}>();
115117
}

‎projects/angular-calendar/src/modules/week/calendar-week-view-header.component.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { trackByWeekDayHeaderDate } from '../common/util';
2828
[class.cal-future]="day.isFuture"
2929
[class.cal-weekend]="day.isWeekend"
3030
[ngClass]="day.cssClass"
31-
(mwlClick)="dayHeaderClicked.emit({ day: day })"
31+
(mwlClick)="dayHeaderClicked.emit({ day: day, sourceEvent: $event })"
3232
mwlDroppable
3333
dragOverClass="cal-drag-over"
3434
(drop)="
@@ -69,8 +69,9 @@ export class CalendarWeekViewHeaderComponent {
6969
@Input() customTemplate: TemplateRef<any>;
7070

7171
@Output()
72-
dayHeaderClicked: EventEmitter<{ day: WeekDay }> = new EventEmitter<{
72+
dayHeaderClicked = new EventEmitter<{
7373
day: WeekDay;
74+
sourceEvent: MouseEvent;
7475
}>();
7576

7677
@Output()

‎projects/angular-calendar/src/modules/week/calendar-week-view.component.ts

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,12 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
177177
[eventTitleTemplate]="eventTitleTemplate"
178178
[eventActionsTemplate]="eventActionsTemplate"
179179
[daysInWeek]="daysInWeek"
180-
(eventClicked)="eventClicked.emit({ event: allDayEvent.event })"
180+
(eventClicked)="
181+
eventClicked.emit({
182+
event: allDayEvent.event,
183+
sourceEvent: $event.sourceEvent
184+
})
185+
"
181186
>
182187
</mwl-calendar-week-view-event>
183188
<div
@@ -305,7 +310,12 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
305310
[eventActionsTemplate]="eventActionsTemplate"
306311
[column]="column"
307312
[daysInWeek]="daysInWeek"
308-
(eventClicked)="eventClicked.emit({ event: timeEvent.event })"
313+
(eventClicked)="
314+
eventClicked.emit({
315+
event: timeEvent.event,
316+
sourceEvent: $event.sourceEvent
317+
})
318+
"
309319
>
310320
</mwl-calendar-week-view-event>
311321
<div
@@ -342,7 +352,12 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
342352
[locale]="locale"
343353
[customTemplate]="hourSegmentTemplate"
344354
[daysInWeek]="daysInWeek"
345-
(mwlClick)="hourSegmentClicked.emit({ date: segment.date })"
355+
(mwlClick)="
356+
hourSegmentClicked.emit({
357+
date: segment.date,
358+
sourceEvent: $event
359+
})
360+
"
346361
[clickListenerDisabled]="
347362
hourSegmentClicked.observers.length === 0
348363
"
@@ -509,6 +524,7 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
509524
@Output()
510525
dayHeaderClicked = new EventEmitter<{
511526
day: WeekDay;
527+
sourceEvent: MouseEvent;
512528
}>();
513529

514530
/**
@@ -517,6 +533,7 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
517533
@Output()
518534
eventClicked = new EventEmitter<{
519535
event: CalendarEvent;
536+
sourceEvent: MouseEvent | KeyboardEvent;
520537
}>();
521538

522539
/**
@@ -538,6 +555,7 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
538555
@Output()
539556
hourSegmentClicked = new EventEmitter<{
540557
date: Date;
558+
sourceEvent: MouseEvent;
541559
}>();
542560

543561
/**

‎projects/angular-calendar/test/calendar-day-view.component.spec.ts

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,8 @@ describe('CalendarDayViewComponent component', () => {
125125
fixture.detectChanges();
126126
fixture.componentInstance.eventClicked.subscribe(val => {
127127
expect(val).to.deep.equal({
128-
event: fixture.componentInstance.events[0]
128+
event: fixture.componentInstance.events[0],
129+
sourceEvent: window['event']
129130
});
130131
});
131132
fixture.nativeElement.querySelector('.cal-event-title').click();
@@ -151,7 +152,8 @@ describe('CalendarDayViewComponent component', () => {
151152
fixture.detectChanges();
152153
fixture.componentInstance.eventClicked.subscribe(val => {
153154
expect(val).to.deep.equal({
154-
event: fixture.componentInstance.events[0]
155+
event: fixture.componentInstance.events[0],
156+
sourceEvent: window['event']
155157
});
156158
});
157159
fixture.nativeElement.querySelector('.cal-event-title').click();
@@ -289,9 +291,13 @@ describe('CalendarDayViewComponent component', () => {
289291
expect(action.innerHTML).to.equal('<i class="fa fa-fw fa-times"></i>');
290292
expect(action.classList.contains('foo')).to.equal(true);
291293
action.querySelector('i').click();
292-
expect(
293-
fixture.componentInstance.events[0].actions[0].onClick
294-
).to.have.been.calledWith({ event: fixture.componentInstance.events[0] });
294+
const actionSpy = fixture.componentInstance.events[0].actions[0]
295+
.onClick as sinon.SinonSpy;
296+
expect(actionSpy.getCall(0).args[0].event).to.equal(
297+
fixture.componentInstance.events[0]
298+
);
299+
expect(actionSpy.getCall(0).args[0].sourceEvent instanceof MouseEvent).to.be
300+
.true;
295301
expect(eventClicked).not.to.have.been.called;
296302
});
297303

‎projects/angular-calendar/test/calendar-month-view.component.spec.ts

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,8 @@ describe('calendarMonthView component', () => {
9090
fixture.componentInstance.ngOnChanges({ viewDate: {} });
9191
fixture.detectChanges();
9292
fixture.componentInstance.columnHeaderClicked.subscribe(val => {
93-
expect(val).to.equal(0);
93+
expect(val.isoDayNumber).to.equal(0);
94+
expect(val.sourceEvent instanceof MouseEvent).to.be.true;
9495
done();
9596
});
9697
fixture.nativeElement.querySelector('.cal-header .cal-cell').click();
@@ -385,9 +386,13 @@ describe('calendarMonthView component', () => {
385386
expect(action.innerHTML).to.equal('<i class="fa fa-fw fa-times"></i>');
386387
expect(action.classList.contains('foo')).to.equal(true);
387388
action.click();
388-
expect(
389-
fixture.componentInstance.events[0].actions[0].onClick
390-
).to.have.been.calledWith({ event: fixture.componentInstance.events[0] });
389+
const actionSpy = fixture.componentInstance.events[0].actions[0]
390+
.onClick as sinon.SinonSpy;
391+
expect(actionSpy.getCall(0).args[0].event).to.equal(
392+
fixture.componentInstance.events[0]
393+
);
394+
expect(actionSpy.getCall(0).args[0].sourceEvent instanceof MouseEvent).to.be
395+
.true;
391396
});
392397

393398
it('should add event actions to the active day events on enter keypress', () => {
@@ -421,10 +426,13 @@ describe('calendarMonthView component', () => {
421426
);
422427
expect(action.innerHTML).to.equal('<i class="fa fa-fw fa-times"></i>');
423428
expect(action.classList.contains('foo')).to.equal(true);
424-
triggerDomEvent('keydown', action, { keyCode: 13 });
429+
const sourceEvent = triggerDomEvent('keydown', action, { keyCode: 13 });
425430
expect(
426431
fixture.componentInstance.events[0].actions[0].onClick
427-
).to.have.been.calledWith({ event: fixture.componentInstance.events[0] });
432+
).to.have.been.calledWith({
433+
event: fixture.componentInstance.events[0],
434+
sourceEvent
435+
});
428436
});
429437

430438
it('should call the event clicked callback', () => {
@@ -451,7 +459,10 @@ describe('calendarMonthView component', () => {
451459
);
452460
expect(title.innerHTML).to.equal('<span>foo</span>');
453461
fixture.componentInstance.eventClicked.subscribe(val => {
454-
expect(val).to.deep.equal({ event: fixture.componentInstance.events[0] });
462+
expect(val).to.deep.equal({
463+
event: fixture.componentInstance.events[0],
464+
sourceEvent: window['event']
465+
});
455466
});
456467
title.click();
457468
});
@@ -480,7 +491,10 @@ describe('calendarMonthView component', () => {
480491
);
481492
expect(title.innerHTML).to.equal('<span>foo</span>');
482493
fixture.componentInstance.eventClicked.subscribe(val => {
483-
expect(val).to.deep.equal({ event: fixture.componentInstance.events[0] });
494+
expect(val).to.deep.equal({
495+
event: fixture.componentInstance.events[0],
496+
sourceEvent: window['event']
497+
});
484498
});
485499
triggerDomEvent('keydown', title, { keyCode: 13 });
486500
});
@@ -920,10 +934,10 @@ describe('calendarMonthView component', () => {
920934
'.cal-days .cal-cell-row .cal-cell:nth-child(4) .cal-events .cal-event'
921935
);
922936
event.click();
923-
fixture.destroy();
924-
expect(eventClickedEvent).to.deep.equal({
925-
event: fixture.componentInstance.events[0]
926-
});
937+
expect(eventClickedEvent.event).to.equal(
938+
fixture.componentInstance.events[0]
939+
);
940+
expect(eventClickedEvent.sourceEvent instanceof MouseEvent).to.be.true;
927941
expect(dayClickedFired).to.equal(false);
928942
});
929943

0 commit comments

Comments
 (0)