feat: expose the click or keyboard event that triggers click handlers

mattlewis92 · mattlewis92 · commit d1a2b785a634 · 2019-10-19T12:00:45.000+01:00
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
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -149,7 +149,7 @@
   "dependencies": {
     "angular-draggable-droppable": "^4.3.2",
     "angular-resizable-element": "^3.2.4",
-    "calendar-utils": "^0.6.0",
+    "calendar-utils": "^0.7.0",
     "positioning": "^2.0.0"
   },
   "sideEffects": [
diff --git a/projects/angular-calendar/src/modules/common/calendar-event-actions.component.ts b/projects/angular-calendar/src/modules/common/calendar-event-actions.component.ts
@@ -14,8 +14,10 @@ import { CalendarEvent, EventAction } from 'calendar-utils';
           class="cal-event-action"
           href="javascript:;"
           *ngFor="let action of event.actions; trackBy: trackByActionId"
-          (mwlClick)="action.onClick({ event: event })"
-          (mwlKeydownEnter)="action.onClick({ event: event })"
+          (mwlClick)="action.onClick({ event: event, sourceEvent: $event })"
+          (mwlKeydownEnter)="
+            action.onClick({ event: event, sourceEvent: $event })
+          "
           [ngClass]="action.cssClass"
           [innerHtml]="action.label"
           tabindex="0"
diff --git a/projects/angular-calendar/src/modules/month/calendar-month-cell.component.ts b/projects/angular-calendar/src/modules/month/calendar-month-cell.component.ts
@@ -64,7 +64,7 @@ import { PlacementArray } from 'positioning';
           [dropData]="{ event: event, draggedFrom: day }"
           [dragAxis]="{ x: event.draggable, y: event.draggable }"
           [validateDrag]="validateDrag"
-          (mwlClick)="eventClicked.emit({ event: event })"
+          (mwlClick)="eventClicked.emit({ event: event, sourceEvent: $event })"
           [attr.aria-hidden]="{} | calendarA11y: 'hideMonthCellEvents'"
         ></div>
       </div>
@@ -123,8 +123,9 @@ export class CalendarMonthCellComponent {
   @Output() unhighlightDay: EventEmitter<any> = new EventEmitter();
 
   @Output()
-  eventClicked: EventEmitter<{ event: CalendarEvent }> = new EventEmitter<{
+  eventClicked = new EventEmitter<{
     event: CalendarEvent;
+    sourceEvent: MouseEvent;
   }>();
 
   trackByEventId = trackByEventId;
diff --git a/projects/angular-calendar/src/modules/month/calendar-month-view-header.component.ts b/projects/angular-calendar/src/modules/month/calendar-month-view-header.component.ts
@@ -25,7 +25,12 @@ import { trackByWeekDayHeaderDate } from '../common/util';
           [class.cal-today]="day.isToday"
           [class.cal-future]="day.isFuture"
           [class.cal-weekend]="day.isWeekend"
-          (click)="columnHeaderClicked.emit(day.day)"
+          (click)="
+            columnHeaderClicked.emit({
+              isoDayNumber: day.day,
+              sourceEvent: $event
+            })
+          "
           [ngClass]="day.cssClass"
           tabindex="0"
           role="columnheader"
@@ -52,7 +57,10 @@ export class CalendarMonthViewHeaderComponent {
 
   @Input() customTemplate: TemplateRef<any>;
 
-  @Output() columnHeaderClicked = new EventEmitter<number>();
+  @Output() columnHeaderClicked = new EventEmitter<{
+    isoDayNumber: number;
+    sourceEvent: MouseEvent;
+  }>();
 
   trackByWeekDayHeaderDate = trackByWeekDayHeaderDate;
 }
diff --git a/projects/angular-calendar/src/modules/month/calendar-month-view.component.ts b/projects/angular-calendar/src/modules/month/calendar-month-view.component.ts
@@ -83,9 +83,11 @@ export interface CalendarMonthViewEventTimesChangedEvent<
               [tooltipDelay]="tooltipDelay"
               [customTemplate]="cellTemplate"
               [ngStyle]="{ backgroundColor: day.backgroundColor }"
-              (mwlClick)="dayClicked.emit({ day: day })"
+              (mwlClick)="dayClicked.emit({ day: day, sourceEvent: $event })"
               [clickListenerDisabled]="dayClicked.observers.length === 0"
-              (mwlKeydownEnter)="dayClicked.emit({ day: day })"
+              (mwlKeydownEnter)="
+                dayClicked.emit({ day: day, sourceEvent: $event })
+              "
               (highlightDay)="toggleDayHighlight($event.event, true)"
               (unhighlightDay)="toggleDayHighlight($event.event, false)"
               mwlDroppable
@@ -97,7 +99,12 @@ export interface CalendarMonthViewEventTimesChangedEvent<
                   $event.dropData.draggedFrom
                 )
               "
-              (eventClicked)="eventClicked.emit({ event: $event.event })"
+              (eventClicked)="
+                eventClicked.emit({
+                  event: $event.event,
+                  sourceEvent: $event.sourceEvent
+                })
+              "
               [attr.tabindex]="{} | calendarA11y: 'monthCellTabIndex'"
             >
             </mwl-calendar-month-cell>
@@ -110,7 +117,12 @@ export interface CalendarMonthViewEventTimesChangedEvent<
             [customTemplate]="openDayEventsTemplate"
             [eventTitleTemplate]="eventTitleTemplate"
             [eventActionsTemplate]="eventActionsTemplate"
-            (eventClicked)="eventClicked.emit({ event: $event.event })"
+            (eventClicked)="
+              eventClicked.emit({
+                event: $event.event,
+                sourceEvent: $event.sourceEvent
+              })
+            "
             mwlDroppable
             dragOverClass="cal-drag-over"
             (drop)="
@@ -234,6 +246,7 @@ export class CalendarMonthViewComponent
   @Output()
   dayClicked = new EventEmitter<{
     day: MonthViewDay;
+    sourceEvent: MouseEvent | KeyboardEvent;
   }>();
 
   /**
@@ -242,12 +255,16 @@ export class CalendarMonthViewComponent
   @Output()
   eventClicked = new EventEmitter<{
     event: CalendarEvent;
+    sourceEvent: MouseEvent | KeyboardEvent;
   }>();
 
   /**
    * Called when a header week day is clicked. Returns ISO day number.
    */
-  @Output() columnHeaderClicked = new EventEmitter<number>();
+  @Output() columnHeaderClicked = new EventEmitter<{
+    isoDayNumber: number;
+    sourceEvent: MouseEvent | KeyboardEvent;
+  }>();
 
   /**
    * Called when an event is dragged and dropped
diff --git a/projects/angular-calendar/src/modules/month/calendar-open-day-events.component.ts b/projects/angular-calendar/src/modules/month/calendar-open-day-events.component.ts
@@ -91,8 +91,12 @@ export const collapseAnimation: AnimationTriggerMetadata = trigger('collapse', [
             [event]="event"
             [customTemplate]="eventTitleTemplate"
             view="month"
-            (mwlClick)="eventClicked.emit({ event: event })"
-            (mwlKeydownEnter)="eventClicked.emit({ event: event })"
+            (mwlClick)="
+              eventClicked.emit({ event: event, sourceEvent: $event })
+            "
+            (mwlKeydownEnter)="
+              eventClicked.emit({ event: event, sourceEvent: $event })
+            "
             tabindex="0"
             [attr.aria-label]="
               { event: event, locale: locale }
@@ -139,8 +143,9 @@ export class CalendarOpenDayEventsComponent {
   @Input() date: Date;
 
   @Output()
-  eventClicked: EventEmitter<{ event: CalendarEvent }> = new EventEmitter<{
+  eventClicked = new EventEmitter<{
     event: CalendarEvent;
+    sourceEvent: MouseEvent | KeyboardEvent;
   }>();
 
   trackByEventId = trackByEventId;
diff --git a/projects/angular-calendar/src/modules/week/calendar-week-view-event.component.ts b/projects/angular-calendar/src/modules/week/calendar-week-view-event.component.ts
@@ -46,8 +46,8 @@ import { PlacementArray } from 'positioning';
         [tooltipTemplate]="tooltipTemplate"
         [tooltipAppendToBody]="tooltipAppendToBody"
         [tooltipDelay]="tooltipDelay"
-        (mwlClick)="eventClicked.emit()"
-        (mwlKeydownEnter)="eventClicked.emit()"
+        (mwlClick)="eventClicked.emit({ sourceEvent: $event })"
+        (mwlKeydownEnter)="eventClicked.emit({ sourceEvent: $event })"
         tabindex="0"
         role="application"
         [attr.aria-label]="
@@ -111,5 +111,7 @@ export class CalendarWeekViewEventComponent {
 
   @Input() daysInWeek: number;
 
-  @Output() eventClicked: EventEmitter<void> = new EventEmitter();
+  @Output() eventClicked = new EventEmitter<{
+    sourceEvent: MouseEvent | KeyboardEvent;
+  }>();
 }
diff --git a/projects/angular-calendar/src/modules/week/calendar-week-view-header.component.ts b/projects/angular-calendar/src/modules/week/calendar-week-view-header.component.ts
@@ -28,7 +28,7 @@ import { trackByWeekDayHeaderDate } from '../common/util';
           [class.cal-future]="day.isFuture"
           [class.cal-weekend]="day.isWeekend"
           [ngClass]="day.cssClass"
-          (mwlClick)="dayHeaderClicked.emit({ day: day })"
+          (mwlClick)="dayHeaderClicked.emit({ day: day, sourceEvent: $event })"
           mwlDroppable
           dragOverClass="cal-drag-over"
           (drop)="
@@ -69,8 +69,9 @@ export class CalendarWeekViewHeaderComponent {
   @Input() customTemplate: TemplateRef<any>;
 
   @Output()
-  dayHeaderClicked: EventEmitter<{ day: WeekDay }> = new EventEmitter<{
+  dayHeaderClicked = new EventEmitter<{
     day: WeekDay;
+    sourceEvent: MouseEvent;
   }>();
 
   @Output()
diff --git a/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts b/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts
@@ -177,7 +177,12 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
               [eventTitleTemplate]="eventTitleTemplate"
               [eventActionsTemplate]="eventActionsTemplate"
               [daysInWeek]="daysInWeek"
-              (eventClicked)="eventClicked.emit({ event: allDayEvent.event })"
+              (eventClicked)="
+                eventClicked.emit({
+                  event: allDayEvent.event,
+                  sourceEvent: $event.sourceEvent
+                })
+              "
             >
             </mwl-calendar-week-view-event>
             <div
@@ -305,7 +310,12 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
                 [eventActionsTemplate]="eventActionsTemplate"
                 [column]="column"
                 [daysInWeek]="daysInWeek"
-                (eventClicked)="eventClicked.emit({ event: timeEvent.event })"
+                (eventClicked)="
+                  eventClicked.emit({
+                    event: timeEvent.event,
+                    sourceEvent: $event.sourceEvent
+                  })
+                "
               >
               </mwl-calendar-week-view-event>
               <div
@@ -342,7 +352,12 @@ export interface CalendarWeekViewBeforeRenderEvent extends WeekView {
                 [locale]="locale"
                 [customTemplate]="hourSegmentTemplate"
                 [daysInWeek]="daysInWeek"
-                (mwlClick)="hourSegmentClicked.emit({ date: segment.date })"
+                (mwlClick)="
+                  hourSegmentClicked.emit({
+                    date: segment.date,
+                    sourceEvent: $event
+                  })
+                "
                 [clickListenerDisabled]="
                   hourSegmentClicked.observers.length === 0
                 "
@@ -509,6 +524,7 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
   @Output()
   dayHeaderClicked = new EventEmitter<{
     day: WeekDay;
+    sourceEvent: MouseEvent;
   }>();
 
   /**
@@ -517,6 +533,7 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
   @Output()
   eventClicked = new EventEmitter<{
     event: CalendarEvent;
+    sourceEvent: MouseEvent | KeyboardEvent;
   }>();
 
   /**
@@ -538,6 +555,7 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
   @Output()
   hourSegmentClicked = new EventEmitter<{
     date: Date;
+    sourceEvent: MouseEvent;
   }>();
 
   /**
diff --git a/projects/angular-calendar/test/calendar-day-view.component.spec.ts b/projects/angular-calendar/test/calendar-day-view.component.spec.ts
@@ -125,7 +125,8 @@ describe('CalendarDayViewComponent component', () => {
     fixture.detectChanges();
     fixture.componentInstance.eventClicked.subscribe(val => {
       expect(val).to.deep.equal({
-        event: fixture.componentInstance.events[0]
+        event: fixture.componentInstance.events[0],
+        sourceEvent: window['event']
       });
     });
     fixture.nativeElement.querySelector('.cal-event-title').click();
@@ -151,7 +152,8 @@ describe('CalendarDayViewComponent component', () => {
     fixture.detectChanges();
     fixture.componentInstance.eventClicked.subscribe(val => {
       expect(val).to.deep.equal({
-        event: fixture.componentInstance.events[0]
+        event: fixture.componentInstance.events[0],
+        sourceEvent: window['event']
       });
     });
     fixture.nativeElement.querySelector('.cal-event-title').click();
@@ -289,9 +291,13 @@ describe('CalendarDayViewComponent component', () => {
     expect(action.innerHTML).to.equal('<i class="fa fa-fw fa-times"></i>');
     expect(action.classList.contains('foo')).to.equal(true);
     action.querySelector('i').click();
-    expect(
-      fixture.componentInstance.events[0].actions[0].onClick
-    ).to.have.been.calledWith({ event: fixture.componentInstance.events[0] });
+    const actionSpy = fixture.componentInstance.events[0].actions[0]
+      .onClick as sinon.SinonSpy;
+    expect(actionSpy.getCall(0).args[0].event).to.equal(
+      fixture.componentInstance.events[0]
+    );
+    expect(actionSpy.getCall(0).args[0].sourceEvent instanceof MouseEvent).to.be
+      .true;
     expect(eventClicked).not.to.have.been.called;
   });
 
diff --git a/projects/angular-calendar/test/calendar-month-view.component.spec.ts b/projects/angular-calendar/test/calendar-month-view.component.spec.ts
@@ -90,7 +90,8 @@ describe('calendarMonthView component', () => {
     fixture.componentInstance.ngOnChanges({ viewDate: {} });
     fixture.detectChanges();
     fixture.componentInstance.columnHeaderClicked.subscribe(val => {
-      expect(val).to.equal(0);
+      expect(val.isoDayNumber).to.equal(0);
+      expect(val.sourceEvent instanceof MouseEvent).to.be.true;
       done();
     });
     fixture.nativeElement.querySelector('.cal-header .cal-cell').click();
@@ -385,9 +386,13 @@ describe('calendarMonthView component', () => {
     expect(action.innerHTML).to.equal('<i class="fa fa-fw fa-times"></i>');
     expect(action.classList.contains('foo')).to.equal(true);
     action.click();
-    expect(
-      fixture.componentInstance.events[0].actions[0].onClick
-    ).to.have.been.calledWith({ event: fixture.componentInstance.events[0] });
+    const actionSpy = fixture.componentInstance.events[0].actions[0]
+      .onClick as sinon.SinonSpy;
+    expect(actionSpy.getCall(0).args[0].event).to.equal(
+      fixture.componentInstance.events[0]
+    );
+    expect(actionSpy.getCall(0).args[0].sourceEvent instanceof MouseEvent).to.be
+      .true;
   });
 
   it('should add event actions to the active day events on enter keypress', () => {
@@ -421,10 +426,13 @@ describe('calendarMonthView component', () => {
     );
     expect(action.innerHTML).to.equal('<i class="fa fa-fw fa-times"></i>');
     expect(action.classList.contains('foo')).to.equal(true);
-    triggerDomEvent('keydown', action, { keyCode: 13 });
+    const sourceEvent = triggerDomEvent('keydown', action, { keyCode: 13 });
     expect(
       fixture.componentInstance.events[0].actions[0].onClick
-    ).to.have.been.calledWith({ event: fixture.componentInstance.events[0] });
+    ).to.have.been.calledWith({
+      event: fixture.componentInstance.events[0],
+      sourceEvent
+    });
   });
 
   it('should call the event clicked callback', () => {
@@ -451,7 +459,10 @@ describe('calendarMonthView component', () => {
     );
     expect(title.innerHTML).to.equal('<span>foo</span>');
     fixture.componentInstance.eventClicked.subscribe(val => {
-      expect(val).to.deep.equal({ event: fixture.componentInstance.events[0] });
+      expect(val).to.deep.equal({
+        event: fixture.componentInstance.events[0],
+        sourceEvent: window['event']
+      });
     });
     title.click();
   });
@@ -480,7 +491,10 @@ describe('calendarMonthView component', () => {
     );
     expect(title.innerHTML).to.equal('<span>foo</span>');
     fixture.componentInstance.eventClicked.subscribe(val => {
-      expect(val).to.deep.equal({ event: fixture.componentInstance.events[0] });
+      expect(val).to.deep.equal({
+        event: fixture.componentInstance.events[0],
+        sourceEvent: window['event']
+      });
     });
     triggerDomEvent('keydown', title, { keyCode: 13 });
   });
@@ -920,10 +934,10 @@ describe('calendarMonthView component', () => {
       '.cal-days .cal-cell-row .cal-cell:nth-child(4) .cal-events .cal-event'
     );
     event.click();
-    fixture.destroy();
-    expect(eventClickedEvent).to.deep.equal({
-      event: fixture.componentInstance.events[0]
-    });
+    expect(eventClickedEvent.event).to.equal(
+      fixture.componentInstance.events[0]
+    );
+    expect(eventClickedEvent.sourceEvent instanceof MouseEvent).to.be.true;
     expect(dayClickedFired).to.equal(false);
   });
 
diff --git a/projects/angular-calendar/test/calendar-week-view.component.spec.ts b/projects/angular-calendar/test/calendar-week-view.component.spec.ts
diff --git a/projects/angular-calendar/test/util.ts b/projects/angular-calendar/test/util.ts
diff --git a/projects/demos/app/demo-modules/clickable-days/template.html b/projects/demos/app/demo-modules/clickable-days/template.html
