fix(event-clicked): clicking actual events now triggers eventClicked

BREAKING CHANGE: eventClicked now fires whenever the event container instead of the event title is clicked

Closes #568

src/modules/common/calendar-event-title.component.ts

@@ -8,11 +8,10 @@ import { CalendarEvent } from 'calendar-utils';
       #defaultTemplate
       let-event="event"
       let-view="view">
-      <a
+      <span
         class="cal-event-title"
-        href="javascript:;"
         [innerHTML]="event.title | calendarEventTitle:view:event">
-      </a>
+      </span>
     </ng-template>
     <ng-template
       [ngTemplateOutlet]="customTemplate || defaultTemplate"

src/modules/common/click.directive.ts

@@ -5,8 +5,10 @@ import {
   OnInit,
   OnDestroy,
   Output,
-  EventEmitter
+  EventEmitter,
+  Inject
 } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
 
 const clickElements = new WeakSet<HTMLElement>();
 
@@ -20,7 +22,8 @@ export class ClickDirective implements OnInit, OnDestroy {
 
   constructor(
     private renderer: Renderer2,
-    private elm: ElementRef<HTMLElement>
+    private elm: ElementRef<HTMLElement>,
+    @Inject(DOCUMENT) private document
   ) {}
 
   ngOnInit(): void {
@@ -33,9 +36,17 @@ export class ClickDirective implements OnInit, OnDestroy {
       this.elm.nativeElement,
       eventName,
       event => {
-        const isClickableElement = clickElements.has(event.target);
-        const isThisClickableElement = this.elm.nativeElement === event.target;
-        if (!isClickableElement || isThisClickableElement) {
+        // prevent child click events from firing on parent elements that also have click events
+        let nearestClickableParent: HTMLElement = event.target;
+        while (
+          !clickElements.has(nearestClickableParent) &&
+          nearestClickableParent !== this.document.body
+        ) {
+          nearestClickableParent = nearestClickableParent.parentElement;
+        }
+        const isThisClickableElement =
+          this.elm.nativeElement === nearestClickableParent;
+        if (isThisClickableElement) {
           this.click.next(event);
         }
       }

src/modules/day/calendar-all-day-event.component.ts

@@ -17,14 +17,14 @@ import { CalendarEvent } from 'calendar-utils';
       <div
         class="cal-all-day-event"
         [style.backgroundColor]="event.color?.secondary"
-        [style.borderColor]="event.color?.primary">
+        [style.borderColor]="event.color?.primary"
+        (mwlClick)="eventClicked.emit()">
         <mwl-calendar-event-actions [event]="event"></mwl-calendar-event-actions>
         &ngsp;
         <mwl-calendar-event-title
           [event]="event"
           [customTemplate]="eventTitleTemplate"
-          view="day"
-          (mwlClick)="eventClicked.emit()">
+          view="day">
         </mwl-calendar-event-title>
       </div>
     </ng-template>

src/modules/day/calendar-day-view-event.component.ts

@@ -25,14 +25,14 @@ import { DayViewEvent } from 'calendar-utils';
         [tooltipPlacement]="tooltipPlacement"
         [tooltipEvent]="dayEvent.event"
         [tooltipTemplate]="tooltipTemplate"
-        [tooltipAppendToBody]="tooltipAppendToBody">
+        [tooltipAppendToBody]="tooltipAppendToBody"
+        (mwlClick)="eventClicked.emit()">
         <mwl-calendar-event-actions [event]="dayEvent.event"></mwl-calendar-event-actions>
         &ngsp;
         <mwl-calendar-event-title
           [event]="dayEvent.event"
           [customTemplate]="eventTitleTemplate"
-          view="day"
-          (mwlClick)="eventClicked.emit()">
+          view="day">
         </mwl-calendar-event-title>
       </div>
     </ng-template>

src/modules/day/calendar-day-view.scss

@@ -49,6 +49,7 @@
 
   .cal-event-container {
     position: absolute;
+    cursor: pointer;
 
     &.resize-active {
       z-index: 1;
@@ -69,10 +70,6 @@
     color: #1e90ff;
   }
 
-  .cal-event-title:link {
-    color: currentColor;
-  }
-
   .cal-draggable {
     cursor: move;
   }
@@ -90,6 +87,7 @@
   .cal-all-day-event {
     padding: 8px;
     border: solid 1px;
+    cursor: pointer;
   }
 
   .cal-drag-active {

src/modules/month/calendar-month-view.scss

@@ -107,10 +107,6 @@
     color: #fff;
   }
 
-  .cal-event-title:link {
-    color: currentColor;
-  }
-
   .cal-day-cell.cal-in-month.cal-has-events {
     cursor: pointer;
   }
@@ -162,4 +158,12 @@
   .cal-drag-active * {
     pointer-events: none;
   }
+
+  .cal-event-title {
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }

src/modules/week/calendar-week-view-event.component.ts

@@ -25,14 +25,14 @@ import { WeekViewEvent } from 'calendar-utils';
         [tooltipPlacement]="tooltipPlacement"
         [tooltipEvent]="weekEvent.event"
         [tooltipTemplate]="tooltipTemplate"
-        [tooltipAppendToBody]="tooltipAppendToBody">
+        [tooltipAppendToBody]="tooltipAppendToBody"
+        (mwlClick)="eventClicked.emit()">
         <mwl-calendar-event-actions [event]="weekEvent.event"></mwl-calendar-event-actions>
         &ngsp;
         <mwl-calendar-event-title
           [event]="weekEvent.event"
           [customTemplate]="eventTitleTemplate"
-          view="week"
-          (mwlClick)="eventClicked.emit()">
+          view="week">
         </mwl-calendar-event-title>
       </div>
     </ng-template>

src/modules/week/calendar-week-view.scss

@@ -35,6 +35,7 @@
   .cal-event-container {
     display: inline-block;
     position: absolute;
+    cursor: pointer;
 
     &.resize-active {
       z-index: 1;
@@ -54,10 +55,6 @@
     color: #1e90ff;
   }
 
-  .cal-event-title:link {
-    color: currentColor;
-  }
-
   .cal-draggable {
     cursor: move;
   }

test/calendar-day-view.component.spec.ts

@@ -22,7 +22,6 @@ import {
   DateAdapter
 } from '../src';
 import { Subject } from 'rxjs';
-import { spy } from 'sinon';
 import { triggerDomEvent, ExternalEventComponent } from './util';
 import { take } from 'rxjs/operators';
 import { adapterFactory } from '../src/date-adapters/date-fns';
@@ -131,7 +130,7 @@ describe('CalendarDayViewComponent component', () => {
         event: fixture.componentInstance.events[0]
       });
     });
-    fixture.nativeElement.querySelector('.cal-event a').click();
+    fixture.nativeElement.querySelector('.cal-event-title').click();
   }));
 
   it('should call the event clicked callback on all day events', async(() => {
@@ -157,7 +156,7 @@ describe('CalendarDayViewComponent component', () => {
         event: fixture.componentInstance.events[0]
       });
     });
-    fixture.nativeElement.querySelector('mwl-calendar-event-title a').click();
+    fixture.nativeElement.querySelector('.cal-event-title').click();
   }));
 
   it('should add a custom CSS class to events', () => {
@@ -285,6 +284,8 @@ describe('CalendarDayViewComponent component', () => {
       CalendarDayViewComponent
     > = TestBed.createComponent(CalendarDayViewComponent);
     fixture.componentInstance.viewDate = new Date('2016-06-27');
+    const eventClicked = sinon.spy();
+    fixture.componentInstance.eventClicked.subscribe(eventClicked);
     fixture.componentInstance.events = [
       {
         start: new Date('2016-06-26'),
@@ -297,7 +298,7 @@ describe('CalendarDayViewComponent component', () => {
         actions: [
           {
             label: '<i class="fa fa-fw fa-times"></i>',
-            onClick: spy(),
+            onClick: sinon.spy(),
             cssClass: 'foo'
           }
         ]
@@ -310,10 +311,11 @@ 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.click();
+    action.querySelector('i').click();
     expect(
       fixture.componentInstance.events[0].actions[0].onClick
     ).to.have.been.calledWith({ event: fixture.componentInstance.events[0] });
+    expect(eventClicked).not.to.have.been.called;
   });
 
   it('should allow the event width to be customised', () => {

test/calendar-week-view.component.spec.ts

@@ -1102,4 +1102,43 @@ describe('calendarWeekView component', () => {
     ).to.equal(true);
     fixture.destroy();
   });
+
+  it('should add event actions to each event', () => {
+    const fixture: ComponentFixture<
+      CalendarWeekViewComponent
+    > = TestBed.createComponent(CalendarWeekViewComponent);
+    fixture.componentInstance.viewDate = new Date('2016-06-27');
+    const eventClicked = sinon.spy();
+    fixture.componentInstance.eventClicked.subscribe(eventClicked);
+    fixture.componentInstance.events = [
+      {
+        start: new Date('2016-06-26'),
+        end: new Date('2016-06-28'),
+        title: 'foo',
+        color: {
+          primary: 'blue',
+          secondary: 'rgb(238, 238, 238)'
+        },
+        actions: [
+          {
+            label: '<i class="fa fa-fw fa-times"></i>',
+            onClick: sinon.spy(),
+            cssClass: 'foo'
+          }
+        ]
+      }
+    ];
+    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });
+    fixture.detectChanges();
+    const action: HTMLElement = fixture.nativeElement.querySelector(
+      '.cal-event .cal-event-action'
+    );
+    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] });
+    expect(eventClicked).not.to.have.been.called;
+  });
 });

tslint.json

@@ -3,6 +3,7 @@
   "rules": {
     "pipe-naming": [true, "camelCase", "calendar"],
     "use-host-property-decorator": false,
-    "no-inferrable-types": false
+    "no-inferrable-types": false,
+    "no-unused-expression": false
   }
 }